javascript - map.fitBounds 动态调整地图视图以在 MapBox 中显示可见功能
问题描述
我的地图包含多个特征,所有这些特征的 id 都存储在一个数组中: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()
?
解决方案
获取所有功能并创建 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)));
推荐阅读
- excel - Excel 2016:编译错误:当前范围内的重复声明,当没有时
- android - 如何在没有 firebase 或其他库的情况下实时构建应用程序
- angular - 业力茉莉花测试html中的锚点数
- android - android viewmodel 在哪个线程中运行?
- google-cloud-platform - 具有本地资源的 GCP 负载平衡器
- javascript - 使用 Puppeteer 访问 React 状态
- python - Python:将 .txt 附加到电子邮件
- node.js - 如何将十六进制字符串转换为 base64 以在 NodeJS 中保存图像
- opengl - 计算骨骼动画的最终骨骼变换
- c# - MongoDB C# 驱动程序:以不那么冗长的方式进行更新?