Mapbox GL JS API设定界限 [英] Mapbox GL JS API Set Bounds

问题描述

我一直在尝试获取地图(下面的JS)，以便能够自动缩放到用于显示的JSON文件之一的范围(会有许多单独的文件)，但是我做不到似乎弄清楚了我将如何实现这一目标.

I've been trying to get my map (JS below) to be able to auto zoom to the extent of one of the JSON files used for display (there will be a number of separate ones), but I can't seem to figure out how I would achieve that.

    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-79.376828,43.635570], // starting position
        zoom: 12,
        pitch: 07, // pitch in degrees
        bearing: -16.1// bearing in degrees 
     });


 map.on('style.load', function () {

    map.batch(function (batch) {

        ////////////////////////////
        //ADDSOURCE for 0
        map.addSource("0", {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [[-79.378821,43.645557],[-79.378862,43.645594],[-79.378909,43.645616],[-79.418429,43.635570],[-79.413358,43.636944]]

                }
            }
        });

        //ADDLAYER for 0
        map.addLayer({
            "id": "0",
            "type": "line",
            "source": "0",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#0324a7",
                "line-width": 3
            }
        });
        ////////////////////////////
        //ADDSOURCE for 1
        map.addSource("1", {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [[-79.418429,43.635570],[-79.413358,43.636944],[-79.413197,43.636982],[-79.378821,43.645557],[-79.378862,43.645594]]

                }
            }
        });

        //ADDLAYER for 1
        map.addLayer({
            "id": "1",
            "type": "line",
            "source": "1",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#0324a7",
                "line-width": 3
            }
        });

    });//BATCH



});
map.fitBounds(map.getBounds());

map.addControl(new mapboxgl.Navigation());
map.scrollZoom.disable();

我尝试使用map.fitBounds(map.getBounds())的各种组合，但是似乎无法弄清楚如何在第一个JSON范围内启动地图.任何帮助将不胜感激.

I have tried using various combinations of map.fitBounds(map.getBounds()), but I just can't seem how to figure out how to have the map launch to the extents of the first JSON. Any help would be greatly appreciated.

此外，我是否应该以其他方式(不使用map.batch(function (batch))来加载其他不同的JSON文件?

Also, should I be doing the map a different way (other than using map.batch(function (batch)) to load a number of different JSON files?

推荐答案

据我所知(并可以搜索)，目前尚无从mapboxgl.GeoJSONSource对象派生边界的方法.您需要自己计算这些.之后，您可以使用mapboxgl的fitBounds方法:

As far as i know (and could search) there is currently no way to derive bounds from a mapboxgl.GeoJSONSource object. You'll need to calculate those yourself. After that you can use mapboxgl's fitBounds method:

map.fitBounds([
    [-79.418429, 43.63557],
    [-79.378821, 43.645616]
]);

这篇关于Mapbox GL JS API设定界限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！