vue3+SuperMap iClient3D for Cesium实现量测功能

本人小白一枚，文章如有问题还请各位大神评论区指出。整体实现是参考SuperMap iClient3D for Cesium的量算功能源码，链接：http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#measureHandler

文章目录

前言

一、主要功能

二、具体实现

1.HTML主要结构

2.javascript

三、问题总结

---

前言

SuperMap iClient3D for Cesium中的MeasureHandler 提供了面积量算、距离量算、高度量算功能，具体下方代码都有详细注释。

一、主要功能

SuperMap提供的样例中还包含了相机定位、坐标选择、等高线及捕获点勾选等功能，个人感觉用处不大因此只保留了主要的功能：空间、贴地测距、测面、测高功能。

​本文保留功能：

二、具体实现

1.HTML主要结构

代码如下（示例）：

      空间量算
      贴地量算

测距
测面
测高
清除

2.javascript

代码如下（示例）：

---

三、问题总结

在初始化测量高度中的实时等高线显示代码中，超图的源码是：

lineHeight = Number(result.endHeight);
updateContourLine(lineHeight)

！！！！！！！但是：

​

       这里的result.endHeight是鼠标在确定了第一个点后再移动的实时点位高程，将此值传给下方的updateContourLine-设置等值线函数，就能实现测高过程中随着鼠标的移动等高线实时变化（不懂的朋友可以根据上文链接至示例操作感受一下），但是不知道什么原因我的result对象中偏偏就没有endHeight这项（找了半天也没找到原因，如果哪个大佬知道原因还请评论区解惑），因此我只好自己获取实时高程，但是以上代码存在BUG——测高过程中如果鼠标移动点高程高于鼠标第一次点击点的高程，此时等高线正常实时渲染，但是如果鼠标移动点高程低于首次点击点的高程则等高线只能停留在首次点击点的位置，具体原因如下：

基于以上原因，如果想实现和样例一样的等高线效果，可以再完善“实时等高线显示”处代码（思路：获取鼠标首次点击的点位坐标高程，然后进行判断，如果低于首次点击点位的高程则变换坐标即可）