cesium实现手动绘制点，线，面

 1.cesium点击绘制方法

data(){
return{
      tempEntities: [],
      tempPoints: [],
      distance: [],
}}  

draw (type) {
      //绘制点
      let position = []
      let tempPoints = []
      let that = this
      let viewer = earth.czm.viewer
      let tempEntities = this.tempEntities
      let coordinates = this.tempPoints
      let haha = this.distance
       
      // 世界坐标转经纬度
      var Cartesian3_to_WGS84 = function (point) {
        var cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z)
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian33)
        var lat = Cesium.Math.toDegrees(cartographic.latitude)
        var lng = Cesium.Math.toDegrees(cartographic.longitude)
        var alt = cartographic.height
        return { lng: lng, lat: lat, alt: alt }
      }
      // 两点距离
      //positions 包含两个点的数组
      var disTance = function (positions) {
        var distance = 0
        for (var i = 0; i < positions.length - 1; i++) {

          var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i])
          var point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1])
          // console.log(point1cartographic, point2cartographic);

          var geodesic = new Cesium.EllipsoidGeodesic()
          geodesic.setEndPoints(point1cartographic, point2cartographic)
          var s = geodesic.surfaceDistance

          distance = distance + s
        }
        return distance.toFixed(2)
      }
      // 开启深度检测
      viewer.scene.globe.depthTestAgainstTerrain = true
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      switch (type) {
        case 'polyline':
          //鼠标移动事件
          handler.setInputAction(function (movement) {
          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
          //左键点击操作
          handler.setInputAction(function (click) {
            //调用获取位置信息的接口
            let ray = viewer.camera.getPickRay(click.position)
            position = viewer.scene.globe.pick(ray, viewer.scene)
            tempPoints.push(position)
            coordinates.push(Cartesian3_to_WGS84(position))
            let tempLength = tempPoints.length
            //调用绘制点的接口
            let point = that.drawPoint(tempPoints[tempPoints.length - 1])
            tempEntities.push(point)
            if (tempLength > 1) {
              let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]])
              tempEntities.push(pointline)
            } else {
              // tooltip.innerHTML = "请绘制下一个点，右键结束";
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
          //右键点击操作
          handler.setInputAction(function (click) {

            haha.push(disTance(tempPoints))
            tempPoints = []
            handler.destroy()//关闭事件句柄
            handler = null
          }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
          break
        case 'polygon':
          //鼠标移动事件
          handler.setInputAction(function (movement) {
          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
          //左键点击操作
          handler.setInputAction(function (click) {
            //调用获取位置信息的接口
            let ray = viewer.camera.getPickRay(click.position)
            position = viewer.scene.globe.pick(ray, viewer.scene)
            tempPoints.push(position);
            // console.log('tempPoints',tempPoints);
            coordinates.push(Cartesian3_to_WGS84(position))
            let tempLength = tempPoints.length
            //调用绘制点的接口
            let point = that.drawPoint(position)
            tempEntities.push(point)
            if (tempLength > 1) {
              let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]])
              tempEntities.push(pointline)
            } else {
              // tooltip.innerHTML = "请绘制下一个点，右键结束";
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
          //右键点击操作
          handler.setInputAction(function (click) {
            let cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid)
            if (cartesian) {
              let tempLength = tempPoints.length
              if (tempLength < 3) {
                alert('请选择3个以上的点再执行闭合操作命令')
              } else {
                //闭合最后一条线
                let pointline = that.drawPolyline([tempPoints[tempPoints.length - 1], tempPoints[0]])
                tempEntities.push(pointline)
                that.drawPolygon(tempPoints)
                tempEntities.push(tempPoints)
                handler.destroy()//关闭事件句柄
                handler = null
              }
            }
          }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
          break
      }
    },

2.cesium实现画点

    drawPoint (position, config) {
      let viewer = earth.czm.viewer
      let config_ = config ? config : {}
      return viewer.entities.add({
        name: "点几何对象",
        position: position,
        point: {
          color: Cesium.Color.SKYBLUE,
          pixelSize: 10,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        }
      })
    },

3.cesium实现画线

 drawPolyline (positions, config_) {
      let viewer = earth.czm.viewer
      if (positions.length < 1) return
      let config = config_ ? config_ : {}
      // console.log("positions",positions);
      return viewer.entities.add({
        name: "线几何对象",
        polyline: {
          positions: positions,
          width: config.width ? config.width : 5.0,
          material: new Cesium.PolylineGlowMaterialProperty({
            color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
          }),
          depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
            color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
          }),
          clampToGround: true,
        }
      })
    },

4.cesium实现画面

   drawPolygon (positions, config_) {
      let viewer = earth.czm.viewer
      if (positions.length < 2) return
      let config = config_ ? config_ : {}
      return viewer.entities.add({
        name: "面几何对象",
        polygon: {
          hierarchy: positions,
          material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
        },
      })
    },

5.cesium清除图层

  /**
     * 清除实体
     */
    clearDrawEntities () {
      this.clearResults()
      this.distance = []
      let viewer = earth.czm.viewer
      this.tempEntities = []
      this.tempPoints = []
      // 清除之前的实体
      const entitys = viewer.entities._entities._array
      let length = entitys.length
      // 倒叙遍历防止实体减少之后entitys[f]不存在
      for (let f = length - 1; f >= 0; f--) {
        if (entitys[f]._name && (entitys[f]._name === '点几何对象' || entitys[f]._name === '线几何对象' || entitys[f]._name === '面几何对象')) {
          viewer.entities.remove(entitys[f])
        }
      }
    },