Question

使用以下代码实现地图框，以突出显示特定区域组-

<div id='map'></div>
<script>
mapboxgl.accessToken = '{ACCESS_TOKEN}';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-68.13734351262877, 45.137451890638886],
zoom: 4
});

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

map.addLayer({
'id': 'maine',
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
                [
                    [-67.13734351262877, 45.137451890638886],
                    [-66.96466, 44.8097],
                    [-68.03252, 44.3252],
                    [-69.06, 43.98],
                    [-70.11617, 43.68405],
                    [-70.64573401557249, 43.090083319667144],
                    [-70.75102474636725, 43.08003225358635],
                    [-70.79761105007827, 43.21973948828747],
                    [-70.98176001655037, 43.36789581966826],
                    [-70.94416541205806, 43.46633942318431],
                    [-71.08482, 45.3052400000002],
                    [-70.6600225491012, 45.46022288673396],
                    [-70.30495378282376, 45.914794623389355],
                    [-70.00014034695016, 46.69317088478567],
                    [-69.23708614772835, 47.44777598732787],
                    [-68.90478084987546, 47.184794623394396],
                    [-68.23430497910454, 47.35462921812177],
                    [-67.79035274928509, 47.066248887716995],
                    [-67.79141211614706, 45.702585354182816],
                    [-67.13734351262877, 45.137451890638886]
                ],
                [
                    [-73.9972808,40.750672],
                    [-73.986258,40.7157619],
                    [-73.9891809,40.7318292],
                    [-74.0182442,40.6886296],
                    [-74.0087681,40.7059736],
                    [-74.0129537,40.7096144],
                    [-74.0078064,40.7138637],
                    [-73.978636,40.726408],
                    [-73.9822316,40.7390449],
                    [-74.000594,40.7420017],
                    [-73.9980784,40.7255806],
                    [-74.0049277,40.720107]
                ]
            ]
}
}
},
'layout': {},
'paint': {
'fill-color': '#223FFF',
'fill-opacity': 0.8
}
});
});
</script>

在上面的示例中，您将看到两个突出显示的区域，一个是MAINE，另一个在纽约附近。当前缩放级别设置为4。我想使其动态化。

对于上面的示例，如果我们的坐标集来自不同区域，该怎么办？一组坐标来自美国，而另一组坐标来自中国或任何其他国家。它将突出显示两个缩放比例为4的区域，并将中心点设置为USA，但是除非我们在地图上手动最小化缩放比例，否则地图页面不会显示其他区域。我试图找出在地图上计算突出显示区域的方法，并以此为基础设置缩放级别。但是，我在他们的文档中找不到任何相关内容。

如果有人对如何根据突出显示的区域动态设置缩放级别有任何想法，将不胜感激。

参考- https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/

计算地图区域并动态设置缩放级别

0 个答案: