使用上傳的文件在小冊子地圖上顯示shapeFile.zip

我想在我的小冊子地圖上顯示來自巴西的形狀文件，此形狀文件位於.zip中，該文件包含：.dbf，.prj，.sbn， .sbx，.shp和.shx文件。要做到這一點，我使用的是：https://github.com/calvinmetcalf/leaflet.shapefile 使用上傳的文件在小冊子地圖上顯示shapeFile.zip

我在我的本地計算機上，所以我只是做了.zip文件：

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

現在我想讓用戶上傳.zip以在地圖上顯示它完全像這裏發生的事情： http://leaflet.calvinmetcalf.com/#3/32.69/10.55

但是......所有我已經在互聯網上找到被張貼.zip文件到一個網址我不知道這一點。我需要在用戶「上傳」到瀏覽器後立即使用該文件。

在代碼波紋管，用戶可以上傳一些文件，並張貼，我試圖CONSOLE.LOG包含.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>

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源，可以與我分享我做...... 的正確方法我會很感激。

來源

2017-04-18 Guilherme Tocchetto

我管理通過，因爲它是指定here使用arrayBuffer爲shape文件來解決這個問題。我想通了這一點閱讀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>

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

來源

2017-04-19 14:46:57

使用上傳的文件在小冊子地圖上顯示shapeFile.zip

回答

相關問題