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

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

引言

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

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

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

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

那么怎样利用 JSCesium 实现地图点位的聚合呢?

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

实现思路:

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

完成效果:

image.png

image.png image.png

具体实现:

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

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

2.监听相机视角变化

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

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

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

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

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

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

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

//假设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树方法

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

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

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

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

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

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

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

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

//处理聚合数据,传参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);
  });
}

通过以上几步就可以通过 JSCesium 上实现标记以及聚合的效果。



目录
打赏
0
0
0
0
43
分享
相关文章
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
198 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
195 11
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
84 10
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
88 8
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
111 5
|
8月前
|
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
128 2
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
225 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问