我试图在Map上的传单上显示一个zip文件。为了做到这一点，我使用了calvin metcalf提供的、由传单本身推荐的传单.shapefile插件。
今天早些时候，我在一个帖子中收到了一些关于使用javascipt的建议 fetch 从url下载文件（我将在以后动态设置）并将其加载到arraybuffer。我似乎能够部分做到这一点，返回的承诺包括arraybuffer。javascript不是我的核心技能，所以我在这里寻求一些帮助。
下面的演示代码展示了一个到目前为止我所拥有的完整的工作示例。我有一个带有shp.zip url的演示zip文件，正在尝试获取该文件，将其加载到arraybuffer，然后将arraybuffer返回到要加载该文件的函数。
我现在没有收到任何错误。我也没有得到任何结果。我只是不知道如何从返回的承诺转到加载层所需的数据位。
<!DOCTYPE html>
<html>
<head>
<title>Load a shapefile into Leaflet from URL</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/shpjs@latest/dist/shp.js" crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
async function get(url) {
const response = await fetch(url).then(res => res.blob()).then(blob => blob.arrayBuffer());
return response;
}
var myshp = get("https://tmp-demo-dev-bucket.s3.ap-southeast-2.amazonaws.com/my_boxes.zip")
//----------------
var watercolor = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
});
var geo = L.geoJson({ features: [] }, {
onEachFeature: function popUp(f, l) {
var out = [];
if (f.properties) {
for (var key in f.properties) {
out.push(key + ": " + f.properties[key]);
}
l.bindPopup(out.join("<br />"));
}
}
});
var m = L.map('map', {
center: [10, -1],
zoom: 6,
layers: [watercolor, geo]
});
m.setView(new L.LatLng(-27, 153), 6);
//}}).addTo(m);
//This is where we try to load the shapefile
//It eventually needs to be added to the map
console.log(myshp);
myshplayer = shp(myshp).then(function(geojson){});
myshplayer.addTo(m);
console.log("Got to here ok");
//alternatively tried this instead of the above rows
//shp(myshp).then(function (data) {
// geo.addData(data);
//});
//new L.Shapefile(myshp); //This is a third method, it expects an arraybuffer, but this returns an error that it's not a valid constructor even though the libraries are loaded.
var baseMaps = {
"BaseLayer": watercolor
};
var overlays = {
"shapefile": geo
};
//L.control.layers(baseMaps, overlays).addTo(map);
</script>
</body>
</html>
暂无答案！
目前还没有任何答案，快来回答吧！