I want to display shapefile map on the web browser using my angular2 application. Following is my code snippet and I use leaflet javascript library. But it fails in loading 'Geology.zip' file. Is there any specific way of loading zip files in angular applications? or any possible way of doing this?
var shpfile = new L.Shapefile('Geology.zip', {
onEachFeature: function(feature, layer) {
if (feature.properties) {
layer.bindPopup(Object.keys(feature.properties).map(function(k) {
return k + ": " + feature.properties[k];
}).join("<br />"), {
maxHeight: 200
});
}
}
});
shpfile.addTo(m);
shpfile.once("data:loaded", function() {
console.log("finished loaded shapefile");
});
According to this this library,that you are tryingto use, is deprecated and from what I have tried it is not possible to install it using npm.
Therefore you can use f.i this library to display a Shapefile using Leaflet after converting it to GeoJSON.
import 'leaflet';
import * as shp from 'shpjs';
declare let L;
ngOnInit() {
const m = L.map('map').setView([34.74161249883172, 18.6328125], 2);
const geo = L.geoJson({features: []}, { onEachFeature: function popUp(f, l) {
const out = [];
if (f.properties) {
for (const key of Object.keys(f.properties)) {
out.push(key + ' : ' + f.properties[key]);
}
l.bindPopup(out.join('<br />'));
}
}}).addTo(m);
const base = 'your-shapefile.zip';
shp(base).then(function(data) {
geo.addData(data);
});
}
However several errors arise and you can overcome them if you check this demo
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加