Question

我想使用我的angular2应用程序在Web浏览器上显示shapefile映射。以下是我的代码段，并且我使用了传单javascript库。但是加载“ Geology.zip”文件失败。有没有在角度应用程序中加载zip文件的特定方法？或任何可能的方式？

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

Answer 1

根据this，您正在尝试使用的此library已过时，根据我的尝试，无法使用npm安装它。

因此，在将library转换为GeoJSON之后，您可以使用此demo通过Leaflet显示Shapefile。

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

但是会出现一些错误，如果您检查此x-frame-options

，则可以解决这些错误

使用angular2在Web浏览器上显示shapefile映射

1 个答案: