用于在MapBox中动态重新调整地图视图以显示可见要素的map.fitBounds
用于在MapBox中动态重新调整地图视图以显示可见要素的map.fitBounds
提问于 2020-04-24 20:19:07
我的地图包含多个要素，所有这些要素的in都存储在一个数组中：featureIds。
我的应用程序包含一个按钮，用于切换某些功能的可见性。
我正在编写一个JavaScript函数reCenter()来遵循这个切换。此函数可根据现在可见的要素的边界来缩小和重新调整地图视图。
function reCenter() {
// new array for visible features
var visibleFeatures = [];
// retrieve the features which are visible and put them into the new array
for (var i = 0; i < featureIds.length; i++) {
if (map.getLayoutProperty(featureIds[i], "visibility") == "visible") {
visibleFeatures.push(map.queryRenderedFeatures(featureIds[i]));
}
}
// new array to store coordinates
coordinates = [];
// push coordinates for each visible feature to coordinates array
for (var j = 0; j < visibleFeatures.length; j++) {
coordinates.push(coord.geometry.coordinates);
}
// do fit as shown here : https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/
var bounds = coordinates.reduce(function (bounds, coord) {
return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, {
padding: 20
});
}尽管实施了上述内容并遵循了https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/提供的指导。我收到以下错误：TypeError: this._sw is undefined
如何动态地检索可见特征的所有坐标并将它们传递到map.fitBounds()中
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-12 21:55:54
获取所有特性并创建一个FeatureCollection，然后使用Turf.js中的bbox函数获取FeatureCollection的界限。我是这样做的:注意:如果坐标不是wgs84，请使用toWgs84。
const features = [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[your_feature_s_coordinates],
[...],
]
}
},
{another feature}
]
const FeatureCollection = {
type: "FeatureCollection",
features: features
};
map.fitBounds(bbox(toWgs84(FeatureCollection)));Stack Overflow用户
发布于 2020-09-05 19:32:51
试试Turf.js: js是一个用于空间分析的开源JavaScript库。
它提供了一种方法bbox (http://turfjs.org/docs/#bbox)
它采用了一些特性集，并将自动为您计算bbox。并将最终的bbox设置为fitbounds。
前面还有一个类似的问题：Mapbox GL JS getBounds()/fitBounds()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61408215
复制相关文章
相似问题
腾讯云开发者
