Javascript 使用上载的文件.zip在传单地图上显示形状文件
我试图在传单地图上显示一个来自巴西的形状文件,该形状文件位于.zip中,其中包含:.dbf、.prj、.sbn、.sbx、.shp和.shx文件。为此,我使用: 我在本地计算机上有.zip文件,因此我只需: HTML 现在,我想让用户上传.zip以在地图上显示它,就像这里发生的一样: 但我想不出这个。。。我在互联网上找到的只是将.zip文件发布到一个url。我需要在用户“上传”到浏览器后立即使用该文件 在下面的代码中,用户可以上传一些文件并发布,在发送之前,我尝试对包含.zip文件的假定对象进行console.log,但在对象中找不到它: HTML 但我找不到上传的原始.zip文件,可能是因为这不是正确的方式。。。Javascript 使用上载的文件.zip在传单地图上显示形状文件,javascript,angularjs,leaflet,Javascript,Angularjs,Leaflet,我试图在传单地图上显示一个来自巴西的形状文件,该形状文件位于.zip中,其中包含:.dbf、.prj、.sbn、.sbx、.shp和.shx文件。为此,我使用: 我在本地计算机上有.zip文件,因此我只需: HTML 现在,我想让用户上传.zip以在地图上显示它,就像这里发生的一样: 但我想不出这个。。。我在互联网上找到的只是将.zip文件发布到一个url。我需要在用户“上传”到浏览器后立即使用该文件 在下面的代码中,用户可以上传一些文件并发布,在发送之前,我尝试对包含.zip文件的假定对象进
如果有人知道获取这个.zip文件的方法,或者有权访问这个源代码,并且可以与我分享,我将非常感谢 我通过为指定的shapefile使用arrayBuffer解决了这个问题。我在阅读有关这个问题的文章时发现了这一点。 这是我的密码: HTML
<button ng-click="addShape()"> Brasil Shape File </button>
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);
}
<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>
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)
}
element.files[0] File {name: "Brasil (1).zip", lastModified: 1492436239000, lastModifiedDate: Mon Apr 17 2017 10:37:19 GMT-0300 (BRT), webkitRelativePath: "", size: 5988862…}
<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>
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);
}
}