两行代码就能动态预览绘图cesium draw

draw-cesium 动态绘制 点、线、多边形、圆形、矩形，并支持距离和面积测量

---

前言

Cesium原生不支持绘图，所以我封装了一个draw函数，可动态绘制 点、线、多边形、圆形、矩形，并支持距离和面积测量。
已开源 点击查看github开源地址其中包含cesium常用函数封装，以及cesium three组合使用。
只要两行代码就能实现动态画线

 const draw = new Draw(viewer);
 draw.addEntity("line"); //线

动态预览功能。以绘制线条为例，首次点击地图后，将立即在点击位置生成线条的起始点（顶点1）。随后，鼠标在地图上的移动将实时反映为线条终点的变化（顶点2的候选位置），线段效果动态跟随鼠标轨迹，直到用户再次点击以确认终点位置，从而完成线段的两点确定。

测量功能包括两点间距离和多边形面积，但面积计算精度待优化。总体而言，该工具集扩展了Cesium功能，提供了绘图与测量解决方案，但仍需改进面积计算精度。

一、实现思路

1.点击事件

监听鼠标指针LEFT_CLICK，获取经纬度，创建实体。使用CallbackProperty 动态修改entity的经纬度值，实现动态绘图的效果

this.viewer.entities.add({
  name: "Draw_Line",
    polyline: {
      positions: new CallbackProperty(function () {
        return Cartesian3.fromDegreesArray(coordinates);
      }, false),
      width: 2,
      material: Color.BLUE.withAlpha(0.9),
    },
});

2.监听鼠标移入移出事件 动态修改

监听鼠标指针MOUSE_MOVE，获取经纬度。全局对象 coordinates:[经度，纬度，经度，纬度] 。在此动态修改coordinates的值，实现动态绘图的效果

var handler_MOUSE_MOVE = new ScreenSpaceEventHandler(viewer.scene.canvas);
// 监听鼠标移动事件，增加预览效果
  handler_MOUSE_MOVE.setInputAction((e) => {
    this.onMouseMove(e);//获取经纬度
  }, ScreenSpaceEventType.MOUSE_MOVE);

二、使用步骤

1.引入库

https://github.com/mantoudebaba/cesium-three
npm install 
npm run dev

2.使用示例

注：鼠标左击开始，鼠标滚轮点击结束。

1.实例draw

viewer：地图示例

 const draw = new Draw(viewer);

2.绘图 点 线 多边形 圆 矩形 测距 测面积

draw.addEntity("point"); //点
draw.addEntity("line"); //线
draw.addEntity("polygon"); //多边形
draw.addEntity("circle"); //圆
draw.addEntity("rectangle"); //矩形
draw.addEntity("range"); //测距
draw.addEntity("area"); //测面积

3.清除绘图

draw.removeAll();

4.导出（经纬度）

 draw.exportEntities();
 
//控制台输出
 entitiesData = {
      point: [],
      line: [],
      polygon: [],
      circle: [],
      rectangle: [],
      range: [],
      area: [],
   }; //储存所有实例的 entity对象的经纬度

总结

欢迎大佬指点