如何在群集单击事件中缩放 Azure Maps 边界框？

Question

Azure Maps 中的数据源可以将一定半径内的点要素（图钉）聚集在一起。当在这样的集群上发生点击事件时，我想将我的边界框重置为集群所代表的区域并放大以显示集群中的各个引脚。

使用 Google 地图，您可以将群集的默认行为设置为点击时自动缩放。此功能在旧 Bing Maps API 中也相对容易实现。我如何才能在 Azure Maps 中添加此功能而无需大量 JavaScript?

Answer 1

确实，Azure Maps似乎并不直接支持它，可以考虑以下方法：

单击图层后 event returns 目标对象的像素位置 以及其他属性。然后通过atlas.Map.pixelsToPositions function确定min和max簇圆坐标：

const coordinates = e.map.pixelsToPositions([
          [e.pixel[0] + (clusterRadius*2), e.pixel[1] + (clusterRadius*2)],
          [e.pixel[0] - (clusterRadius*2), e.pixel[1] - (clusterRadius*2)],
        ]);

然后通过 atlas.data.BoundingBox.fromPositions function 确定可能包含簇气泡内图钉的区域边界：

const bounds = atlas.data.BoundingBox.fromPositions(coordinates);

最后设置地图视口：

 map.setCamera({
          bounds: bounds,
          padding:0
        });

这里a demo供大家参考

如何在群集单击事件中缩放 Azure Maps 边界框？

How can I zoom the Azure Maps bounding box on cluster click event?

azure

bing-maps

azure-maps