时间戳

首页 > 解决方案 > 使用 angular2 在 Web 浏览器上显示 shapefile 地图

angular - 使用 angular2 在 Web 浏览器上显示 shapefile 地图

问题描述

我想使用我的 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");
});

标签： angulartypescriptleafletzipshapefile

解决方案

根据这个，您尝试使用的这个库已被弃用，并且从我尝试过的内容来看，无法使用 npm 安装它。

因此，您可以使用这个库在将其转换为 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);
    });
}

但是会出现几个错误，如果您查看此演示，您可以克服它们

推荐阅读