Question

我正在尝试在我的传单地图上显示来自巴西的形状文件，此形状文件位于.zip内，其中包含：.dbf，.prj，.sbn，.sbx，.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文件发布到网址。我需要在用户将其“上传”到浏览器后立即使用该文件。

在下面的代码中，用户可以上传一些文件并发布它，我尝试在发送之前调试包含.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'和'uploadFile'中，当我在console.log（fd）时得到：fd: [object FormData]和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文件的方法或有权访问此example来源并可以与我分享，我将非常感激。

Answer 1

我设法通过对shapefile使用arrayBuffer来解决这个问题，因为它被指定为here。我想出了关于this问题的解读。这是我的代码：

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);
    }
}

Answer 2

我使用 angular 12... 我可以使用 Shapefile.js https://github.com/calvinmetcalf/shapefile-js

上传文件

您可以在https://gitlab.com/-/snippets/2141645

中看到我的代码

使用上传的file.zip在传单地图上显示shapeFile

2 个答案: