Wie bekomme ich Geometrie (Punkte) von bestehendem Tileset auf MapBox mit Leaflet?

Question

Wir haben ein bestehendes Tileset (Layer) für Roads auf MapBox.

Ich kenne den Attributwert (Road uniq number) einer Zeile/Feature aus diesem Tileset (Layer).

Wie bekomme ich die Geometrie der Punkte für diese Linie von MapBox mit Leaflet 0.7.x.?

Answer 1

Leider muss ich sagen, dass ich keine Lösung gefunden habe, um direkt mit der einfachen Broschüre auf die Eigenschaften eines Tilesets zuzugreifen. Glücklicherweise gibt es eine andere einfache Lösung mit Mapbox GL JS. Mit dieser Bibliothek können Sie einfach auf Features und deren Eigenschaften eines Tilesets zugreifen. Um Ihnen zu zeigen, wie es geht, habe ich ein Beispiel erstellt:

Nehmen wir an, wir haben eine Straße Schicht, die ich von dieser page heruntergeladen und MapBox als tileset hinzugefügt. Dann müssen Sie eine benutzerdefinierte style für den späteren Zugriff erstellen. Dann müssen Sie ein neues map object mit mapboxgl.Map() zB erstellen:

mapboxgl.accessToken = '{your-access-token}'; 

var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/{name}/{style-id}', 
    center: [14.5, 47], 
    zoom: 6 
}); 

Danach einfach die gerenderte Fliesen mit map.queryRenderedFeatures() zB abfragen müssen:

var features = map.queryRenderedFeatures({ 
layers:['roads-bm6ga5'], # Here you may add your layer name to query 
filter: ["==", "id", 2] # Here you may add your query condition  

Das Ergebnis wird wieder ein Objekt je nach layername und Kondition, die du einstellst. Von diesem Objekt aus können Sie auf alle Eigenschaften Ihres vectordataset zugreifen, einschließlich der Geometrie mit ihren Koordinaten. Mit features[0].geometry.coordinates erhalten Sie alle Punkte entlang des LineStrings (z. B. Straßen).

mapboxgl.accessToken = 'pk.eyJ1IjoicHJheWVyIiwiYSI6ImI3OGRjZjcyY2JiZTUzODMwZWUxZDdiNjRiMWE4NjI5In0.zETX-x6-XPpAv3zt4MiFwg'; 
 

 
var map = new mapboxgl.Map({ 
 
    container: 'map', 
 
    style: 'mapbox://styles/prayer/ciub6rm2j004v2iodiej359ox', 
 
    center: [14.5, 47], 
 
    zoom: 6 
 
}); 
 

 

 

 
map.on('click', function (e) { 
 
    var features = map.queryRenderedFeatures({ 
 
    layers:['roads-bm6ga5'], 
 
    filter: ["==", "id", 1] 
 
}); 
 

 
    document.getElementById('features').innerHTML = '<b>Road with ID</b> ' + features[0].properties.id + ' has the coordinates:' + 
 
                '<br>' +JSON.stringify(features[0].geometry.coordinates, null, 2); 
 
}); 
 

 
map.on('load', function (e) { 
 
    alert("Click in the map to show coordinates of road with ID 1") 
 
});

body { margin:0; padding:0; } 
 
#map { position:absolute; top:0; bottom:0; width:100%; } 
 

 
#features { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     width: 300px; 
 
     overflow: auto; 
 
     background: rgba(255, 255, 255, 0.8); 
 
    } 
 
    #map canvas { 
 
     cursor: crosshair; 
 
    }

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css" rel="stylesheet"/> 
 
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js"></script> 
 

 
<div id='map'></div> 
 
<pre id='features'></pre>