使用 angular2 在网络浏览器上显示 shapefile 地图

Question

我想使用我的 angular2 应用程序在 Web 浏览器上显示 shapefile 地图。以下是我的代码片段，我使用传单 javascript 库。但是它无法加载 'Geology.zip' 文件。在 angular 应用程序中是否有任何特定的加载 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 this library，您尝试使用的已弃用，根据我的尝试，无法使用 npm 安装它。

因此您可以使用 f.i 这个 library 在将其转换为 GeoJSON 后使用 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);
    });
}

但是会出现一些错误，如果您检查这个 demo

，您可以克服它们

使用 angular2 在网络浏览器上显示 shapefile 地图

Display shapefile map on web browser using angular2

zip

shapefile

leaflet

typescript

angular