利用Cesium实现在earth上面画点、画线、画面、和圆

今日目的：实现在earth上面画点、画线、画面、和圆

步骤1：
还是按照前几天的项目格式来，现在EarthComp.vue里面写一点东西，先写个按钮吧

<div ref="earthContainer" style="width: 100%; heitht: 100%">           
      <button @click="point">画点</button>
      <button @click="line">画线</button>
      <button @click="polygon">画面</button>
      <button @click="circle">画圆</button>
</div>

先定义了四个按钮，有按钮就需要methods，然后在写上methods

 //这个methods就是按钮实现的功能
 methods: {    
    point(){
      drawingMode = "point";
    },
    line() {
      drawingMode = "line";
    },
    polygon() {
      drawingMode = "polygon";
    },
    circle() {
      drawingMode = "circle";
    },
  },

第二步骤：一下步骤在mounted（）方法中完成
上面完成了基本的打框架，接下来要写一下中间的内容
画点

 //绘制点
    function createPoint(worldPosition) {
      var point = earth.czm.viewer.entities.add({
        position: worldPosition,
        point: {
          color: Cesium.Color.WHITE,
          pixelSize: 5,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });
      return point;
    }

主要方法：

//画线、面、圆方法
    drawingMode = "circle";
    function drawShape(positionData) {
      var shape;
      //画线
      if (drawingMode === "line") {
        shape = earth.czm.viewer.entities.add({
          polyline: {
            positions: positionData,
            clampToGround: true,
            width: 3,
          },
        });
        //画面
      } else if (drawingMode === "polygon") {
        shape = earth.czm.viewer.entities.add({
          polygon: {
            hierarchy: positionData,
            material: new Cesium.ColorMaterialProperty(
              Cesium.Color.WHITE.withAlpha(0.7)
            ),
          },
        });
        //画圆
      } else if (drawingMode === "circle") {
        //当positionData为数组时绘制最终图，如果为function则绘制动态图
        var value =
          typeof positionData.getValue === "function"
            ? positionData.getValue(0)
            : positionData;
        //var start = activeShapePoints[0];
        //var end = activeShapePoints[activeShapePoints.length - 1];
        //var r = Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2));
        //r = r ? r : r + 1;
        shape = earth.czm.viewer.entities.add({
          position: activeShapePoints[0],
          name: "Blue translucent, rotated, and extruded ellipse with outline",
          type: "Selection tool",
          ellipse: {
            semiMinorAxis: new Cesium.CallbackProperty(function () {
              //半径 两点间距离
              var r = Math.sqrt(
                Math.pow(value[0].x - value[value.length - 1].x, 2) +
                  Math.pow(value[0].y - value[value.length - 1].y, 2)
              );
              return r ? r : r + 1;
            }, false),
            semiMajorAxis: new Cesium.CallbackProperty(function () {
              var r = Math.sqrt(
                Math.pow(value[0].x - value[value.length - 1].x, 2) +
                  Math.pow(value[0].y - value[value.length - 1].y, 2)
              );
              return r ? r : r + 1;
            }, false),
            material: Cesium.Color.BLUE.withAlpha(0.5),
            outline: true,
          },
        });
      }
      return shape;
    }

写一个鼠标点击事件

//鼠标点击事件
    var activeShapePoints = [];
    var activeShape;
    var floatingPoint;
    var handler = new Cesium.ScreenSpaceEventHandler(earth.czm.viewer.canvas);
    handler.setInputAction(function (event) {
      // We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
      // we get the correct point when mousing over terrain.
      var earthPosition = earth.czm.viewer.scene.pickPosition(event.position);
      // `earthPosition` will be undefined if our mouse is not over the globe.
      if (Cesium.defined(earthPosition)) {
        if (activeShapePoints.length === 0) {
          floatingPoint = createPoint(earthPosition);
          activeShapePoints.push(earthPosition);
          var dynamicPositions = new Cesium.CallbackProperty(function () {
            if (drawingMode === "polygon") {
              return new Cesium.PolygonHierarchy(activeShapePoints);
            }
            return activeShapePoints;
          }, false);
          activeShape = drawShape(dynamicPositions);
        }
        activeShapePoints.push(earthPosition);
        createPoint(earthPosition);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

在写一个鼠标移动事件

//定义几个属性，用不到可以删除
    var activeShapePoints = [];
    var activeShape;
    var floatingPoint;
    var handler = new Cesium.ScreenSpaceEventHandler(earth.czm.viewer.canvas);
  //鼠标的移动事件
    handler.setInputAction(function (event) {
      if (Cesium.defined(floatingPoint)) {
        var newPosition = earth.czm.viewer.scene.pickPosition(
          event.endPosition
        );
        if (Cesium.defined(newPosition)) {
          floatingPoint.position.setValue(newPosition);
          activeShapePoints.pop();
          activeShapePoints.push(newPosition);
        }
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

重新绘制形状，使它不是动态的，并删除动态形状。

function terminateShape() {
      activeShapePoints.pop();
      drawShape(activeShapePoints);
      earth.czm.viewer.entities.remove(floatingPoint);
      earth.czm.viewer.entities.remove(activeShape);
      floatingPoint = undefined;
      activeShape = undefined;
      activeShapePoints = [];
    }

鼠标右击事件，这句话是右键取消

handler.setInputAction(function (event) {
      terminateShape();
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    
    earth.czm.viewer.scene.globe.depthTestAgainstTerrain = true;
    const objConfig = {};
    earth.sceneTree.root.children.push(scene);
    //console.log(earth.sceneTree.$refs);
    //console.log(scene.json);
    //将earth抛出去
    this._earth = earth;
    //仅为调试方便用
    window.earth = earth;