javascript - 如何使用 Leaflet 从 MapBox 上现有的 Tileset 获取几何图形(点)？

Question

我们在 MapBox 上有一个用于道路的现有 Tileset(图层)。

我知道该图 block 集(图层)中的一条线/要素的属性值(道路 uniq 号)。

如何使用 Leaflet 0.7.x 从 MapBox 获取该线的点的几何形状？

Answer 1

遗憾的是，我不得不说，我没有找到直接使用普通传单访问图 block 集功能的解决方案。幸运的是，还有另一个简单的解决方案，使用 Mapbox GL JS 。通过这个库，您可以轻松访问图 block 集的功能及其属性。为了向您展示它是如何完成的，我创建了一个示例:

假设我们有一个道路图层，我是从这个 page 下载的。并添加到 MapBox 作为 tileset 。然后你需要创建一个自定义style以便以后访问。然后你需要创建一个新的map object与 mapboxgl.Map() 例如:

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

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

在此之后，您只需使用 map.queryRenderedFeatures() 查询渲染的 Tiles，例如:

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     

结果将根据您设置的图层名称和条件返回一个对象。从这个对象中，您可以访问矢量数据集中的所有属性，包括几何图形及其坐标。使用 features[0].geometry.coordinates，您将收到沿 LineString 的所有点(例如道路)。

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>