利用Cesium和JS实现地点点聚合功能

引言

在实现基于地图的业务场景时，当地图上需要展示过多的标记点时，大量的分散点会使地图上显得杂乱无章，导致标记点对地图上的其他重要信息造成遮挡和混淆，降低地图整体的可读性。

标记点的聚合就很好的解决了这些痛点的同时，还可以清晰的展示数据的分布模式和主要区域，便于用户直观的理解，提高地图的加载和交互的效率，便于对数据镜像更深层次的开阔和分析。

在 Cesium 的 API 中本身自带聚合的方法，但是提供的聚合场景只适用于一些简单的标记点或者 POI 中使用

在实际的开发过程中，我们需要展示的标记点样式大多较为复杂甚至是视频等自定义的样式，标记点内实际会使用到点击、显示隐藏、调整等交互。

那么怎样利用 JS 和 Cesium 实现地图点位的聚合呢？

本文将在实际的业务使用场景中，带大家了解如何利用 cesium 和 JS 实现地图标记点位的聚合实现原理及方法。

实现思路：

首先是实现标记点的实现，通过监听相机角度的变化，达到的效果的地图的拖动缩放，标记点都会根据固定的点位移动；
通过简单的算法实现聚合，达到两个标记点通过放大和缩小，显示成具体的标记点数量

完成效果：

具体实现：

1.引入cesium,并初始化数据；

javascript"> //引入cesium文件
<script src="/Cesium/Cesium.js"></script>
//初始化cesium
Const viewerGis = new BIMCC_GIS_Base.Viewer('container');

2.监听相机视角变化

javascript">//开启相机视角变化
viewerGis.MouseCustomEvent.registerCameraChange();
// 监听相机视角变化事件
viewerGis.on('cameraChange', () => {
//相机视角变化调用下一步的方法获取屏幕坐标
});

3.经纬度坐标转换为屏幕坐标

经纬度坐标转换是实现聚合的最核心的一步。

在 Cesium 中，将经纬度坐标转换为屏幕坐标的过程主要涉及到相机视图矩阵和模型矩阵的计算。

其实现原理是将 3D世界坐标 转换为 2D画布坐标 。

其原理是通过Uniform（统一变量）将当前的模型视图投影矩阵应用到指定的世界坐标上，进而得到屏幕坐标。

最后将屏幕坐标转换为画布坐标系中的位置。

javascript">//假设viewer是Cesium的Viewer实例，worldPosition是一个Cesium.Cartesian实例，表示世界坐标中的一个经纬度坐标点
var canvasCoordinates = viewerGis.Coordinate?.getCanvasByWgs(worldPosition);
// 如果转换成功，canvasCoordinates将是一个包含x和y属性的对象，表示在画布上的位置
if (canvasCoordinates){
	console.log(`画布坐标: (${canvasCoordinates.x}, ${canvasCoordinates.y})`)
}

在实际开发中，我们是对 Cesium 进行了二次开发，调用的方法名有所变化，但是其原理是一样的。

获取到屏幕坐标我们就可以很容易地将标记点放入到指定的位置。

并通过上一步的监听相机位置变化，获取到每次缩放拖动后的屏幕坐标。

4.标记的聚合实现

标记的聚合实现主要算法有很多，参考高德地图，主要的算法有：直接网格法、网格距离法、直接距离法、K-D树方法。

这里我们使用直接距离法，初始时没有任何已知聚合点，然后对每个点进行迭代，计算一个点的外包正方形

若此点的外包正方形与现有的聚合点的外包正方形不相交，则新建聚合点（这里不是计算点与点间的距离，而是计算一个点的外包正方形，正方形的变长由用户指定或程序设置一个默认值）

若相交，则把该点聚合到该聚合点中，若点与多个已知的聚合点的外包正方形相交，则计算该点到到聚合点的距离，聚合到距离最近的聚合点中

如此循环，直到所有点都遍历完毕。

每个缩放级别都重新遍历所有原始点要素。

优点：运算速度相对较快，每个原始点只需计算一次，可能会有点与点距离计算，聚合点较精确的反映了所包含的原始点要素的位置信息。

缺点：速度不如完全基于网格的速度快，此法还有个缺点，就是各个点迭代顺序不同导致最终结果不同。

因此涉及到制定迭代顺序的问题。

javascript">//处理聚合数据，传参data是所有标记点
const collectMakers = (data) => {
  collectList.value = [];
  data.forEach((maker) => {
    let flag = false;
    collectList.value.forEach((item) => {
      if (flag) return;
      item.forEach((i) => {
        if (i.id == maker.id) {
          flag = true;
          return;
        }
      });
    });
    if (flag) return;
    const filterList = data.filter(
      (item) => Math.abs(maker.style.left - item.style.left) < maker.style.width && Math.abs(maker.style.top - item.style.top) < maker.style.height
    );
	//filterList就是聚合的数据
    collectList.value.push(filterList);
  });
}