Отображение карты шейп-файла в веб-браузере с помощью angular2

Question

Я хочу отобразить карту шейп-файла в веб-браузере, используя мое приложение angular2.Ниже приведен мой фрагмент кода, и я использую библиотеку 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

Согласно этой этой библиотеке , которую вы пытаетесь использовать, она устарела, и из того, что я пробовал, невозможно установить ее с помощью npm.

Поэтому вы можете использовать эту библиотеку для отображения шейп-файла с помощью Leaflet после преобразования его в 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);
    });
}

Однако возникает несколько ошибок, и вы можете их преодолеть, еслиВы проверяете это демо