Question

我们在MapBox上有Roads的现有Tileset（图层）。

我知道该tileset（图层）中一行/特征的属性值（Road uniq number）。

如何使用Leaflet 0.7.x从MapBox获取该行的点几何。？

Answer 1

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

我们说我们有一个道路图层，我从这个page下载并添加到MapBox作为tileset。然后，您需要创建自定义style以供日后访问。然后，您需要使用mapboxgl.Map()创建一个新的map object，例如：

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

结果将返回一个对象，具体取决于您设置的图层名称和条件。通过此对象，您可以访问vectordataset中的所有属性，并使用它的坐标包含几何体。使用features[0].geometry.coordinates，您将收到LineString上的所有点（例如道路）。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用Leaflet从MapBox上的现有Tileset获取几何（点）？

1 个答案: