Adding a Shapes files as a Layer on Mapbox Map

问题

I have a shapes file from here. I wish to add it on a Map, similar to what is done on the web page. I am not quite sure how to proceed with it. I want to use it on Web and hence use JavaScript.

Someone suggested me to use the shapes file as a Layer on the map. But how to go about it? Anyone experience with Mapbox, Leaflet or OSM please guide.

回答1:

In order to load a SHP file and display it on a Leaflet / Mapbox.js map, you have several Leaflet plugins that can make the task easy.

For example leaflet.shapefile (online demo where you can drop your zipped SHP and DBF files).

The data source that you mention also provides KML format, which may be easier to use.

For KML, you can use for example leaflet-omnivore:

universal format parser for Leaflet & Mapbox.js

var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([38, -102.0], 5);

omnivore.kml('a.kml').addTo(map);

Live example with Leaflet and leaflet-omnivore: https://plnkr.co/edit/KVXqBScBuIrAahg4VsGi?p=preview

回答2:

I was finally able to add the shapes file by uploading it as a tileset to Mapbox Studio.

It provided me with a map Id and source-layer name which I was able to add as a Layer on my Mapbox map as follows:

map.addLayer({
        id: '<id>',
        type: 'fill',
        source: {
            type: 'vector',
            url: 'mapbox://<map-id>' //  Mapbox tileset Map ID
        },
        'source-layer': '<layer-name>', // name of tilesets
        'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.8,
            'fill-outline-color': '#000'
        }
    });

来源：https://stackoverflow.com/questions/49705905/adding-a-shapes-files-as-a-layer-on-mapbox-map

标签

javascript

leaflet

mapbox

openstreetmap