我正在尝试在我的传单映射上从巴西显示一个形状文件,此形状文件在包含:.dbf,.prj,.sbn,.sbx,.sbx的.zip内.shp和.shx文件。为此,我正在使用:https://github.com/calvinmetcalf/leaflet.shapefile
我在本地计算机上有.zip文件,所以我只是制作了:
html
<button ng-click="addShape()"> Brasil Shape File </button>
JS
var mymap = L.map('mapid').setView([-12.85, -50.09], 4);
$scope.addShape = function () {
var shpfile = new L.Shapefile('scripts/ShapeFiles/Brasil.zip');
shpfile.addTo(mymap);
}
现在,我想使用户上传.zip以完全显示在地图上,就像这里发生的情况一样:http://leaflet.calvinmetcalf.com/#3/32.69/10.55
,但我无法弄清楚...我在互联网上发现的只是将.zip文件发布到URL。用户"上传"到浏览器后,我需要立即使用该文件。
在代码上,用户可以上传一些文件并将其发布,我尝试委托。将包含.zip文件的假设对象删除,但我在对象中找不到它:
:html
<body ng-controller="FileUploadCtrl">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" />
</div>
<input type="button" ng-click="uploadFile()" value="Upload" />
</body>
JS
scope.setFiles = function(element) {
scope.$apply(function(scope) {
console.log('files:', element.files);
// Turn the FileList object into an Array
scope.files = []
for (var i = 0; i < element.files.length; i++) {
scope.files.push(element.files[i])
}
scope.progressVisible = false
});
};
scope.uploadFile = function() {
var fd = new FormData()
for (var i in scope.files) {
fd.append("uploadedFile", scope.files[i])
}
var xhr = new XMLHttpRequest()
xhr.upload.addEventListener("progress", uploadProgress, false)
xhr.addEventListener("load", uploadComplete, false)
xhr.addEventListener("error", uploadFailed, false)
xhr.addEventListener("abort", uploadCanceled, false)
xhr.open("POST", "/fileupload")
scope.progressVisible = true
xhr.send(fd)
}
来源小提琴:Danielzen
在此典范中,在函数" setFiles"one_answers" uploadfile"中,当我console.log(fd(我得到: fd: [object FormData]
and console.log(element.files(:
element.files[0] File {name: "Brasil (1).zip", lastModified: 1492436239000, lastModifiedDate: Mon Apr 17 2017 10:37:19 GMT-0300 (BRT), webkitRelativePath: "", size: 5988862…}
但我找不到上传的原始.zip文件,也许是因为这不是正确的方法...如果有人知道一种获取此.zip文件或可以访问此示例源的方法,并且可以与我分享,我将非常感谢。
我设法通过在此处指定的shapefile使用阵列扣来解决此问题。我弄清楚了有关此问题的阅读。这是我的代码:
html
<div id="mapid" style="width: 800px;float: left;">
</div>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</form>
JS
function loadFile() {
input = document.getElementById('fileinput');
if (!input.files[0]) {
bodyAppend("p", "Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receiveBinary;
fr.readAsArrayBuffer(file);
}
function receiveBinary() {
result = fr.result
var shpfile = new L.Shapefile(result);
shpfile.addTo(mymap);
}
}
我使用Angular 12 ...,我可以使用Shapefile.js https://github.com/calvinmetcalf/shapefile-js
上传文件。您可以在https://gitlab.com/-/snippets/2141645