Mapbox GL JS getBounds()/ fitBounds()

Question

我正在使用Mapbox GL JS v0.14.2并且我通过文档搜索了高低,并且很少有人清楚这一点.

如果您使用标准的JS API,那么使用他们提供的示例"非常适合使用贴图"(https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to - 标记/); 但是使用GL api时的设置是完全不同的.该GL API有getBounds()(https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds),而是因为你没有命名图层,像标准JS API,所以我挣扎找出如何使用getBounds().

我发现这个(Mapbox GL JS API Set Bounds)但肯定不是正确的答案？

这是我的大部分设置; 排除JSON设置和其他选项.

mapboxgl.accessToken = '<myaccesstoken>';

var markers = <?php echo $programme_json; ?>;

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm',
    center: [-1.470085, 53.381129],
    zoom: 15
});

map.on('style.load', function() {
    map.addSource('markers', {
        'type': 'geojson',
        'data': markers
    });

    map.addLayer({
        "id": "markers",
        "interactive": true,
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "venue-map-icon-blue",
            'icon-size': 0.5,
            "icon-allow-overlap": true
        }
    });

    map.scrollZoom.disable();

});

我尝试过以下方法:

alert(map.getBounds()); // LngLatBounds(LngLat(-1.4855345239256508, 53.37642500812015), LngLat(-1.4546354760740883, 53.38583247227842))
var bounds = [[-1.4855345239256508, 53.37642500812015],[-1.4546354760740883, 53.38583247227842]]
map.fitBounds(bounds);

所以我知道如何fitBounds,但我不确定如何得到它们map.getBounds()似乎只返回设置中心位置lng/lat.

标记JSON:

var markers = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"Site Gallery","url":"\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/","summary":"Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.","image":"\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg","marker-symbol":"venue-map-icon-blue","colour":"blue"},"geometry":{"type":"Point","coordinates":["-1.466439","53.376842"]}},{"type":"Feature","properties":{"title":"Moore Street Substation","url":"\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/","summary":"","image":null,"marker-symbol":"venue-map-icon-green","colour":"green"},"geometry":{"type":"Point","coordinates":["-1.477881","53.374798"]}},{"type":"Feature","properties":{"title":"S1 Artspace","url":"\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/","summary":"","image":null,"marker-symbol":"venue-map-icon-red","colour":"red"},"geometry":{"type":"Point","coordinates":["-1.459620","53.380562"]}}]};

Answer 1

如果要使贴图适合标记,可以创建包含所有标记的边界.

var bounds = new mapboxgl.LngLatBounds();

markers.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);

Answer 2

对于一个解决方案,将所有以GeoJSON对象的工作,而不仅仅是一组标记,看看Mapbox的Turf.js.

这段代码对我很有帮助:https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

但只是重复链接死亡时的基础知识:

var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});

extent链接代码中提到的方法已被弃用bbox,但结果是相同的.

Answer 3

Mapbox自己的geojson-extent插件可以解决这个问题。假设您的markers对象是有效的GeoJSON，只需将其传递给geojsonExtent()函数即可获得一组范围，然后可以将其传递给fitBounds()。

加载geojson-extent.js文件后（例如，通过<script>在HTML代码中使用标记），您应该能够做到这一点，以使地图适合GeoJSON markers对象的边界：

map.fitBounds(geojsonExtent(markers));

更新

GeoJSONLint报告您的markers对象不是有效的GeoJSON，因为每个位置的元素都被解释为字符串，而不是数字。如果从lon-lat坐标中删除引号，则应该可以正常工作：

map.fitBounds(geojsonExtent(markers));