angular - Visa shapefile-karta på webbläsare med angular2

Jag vill visa en shapefile-karta i webbläsaren med min Angular2-applikation. Följande är min kodsnutt och jag använder Leaflet JavaScript-biblioteket. Men det misslyckas med att ladda filen 'Geology.zip'. Finns det något specifikt sätt att ladda zip-filer i Angular-applikationer? eller något möjligt sätt att göra detta?

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

Svar #1

Enligt detta bibliotek, som du försöker använda, är det föråldrat och utifrån vad jag har försökt går det inte att installera det med npm.

Därför kan du till exempel använda detta bibliotek för att visa en Shapefile med Leaflet efter att ha konverterat den till 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);
    });
}

Men flera fel uppstår och du kan övervinna dem om du kollar på denna demo