cesium绘制旗标

export default class Draw {
  constructor(viewer, config, label) {
    /**cesium实例对象 */
    this.viewer = viewer
    this.prompt = prompt
    // this.callback = callback
    /**绘制要素的相关配置
       * 默认配置
       * {
          borderColor: Cesium.Color.BLUE,  边框颜色
          borderWidth: 2, 边框宽度
          material: Cesium.Color.GREEN.withAlpha(0.5),填充材质
      }
      */
    this.config = config || {
      borderColor: Cesium.Color.BLUE,
      borderWidth: 2,
      material: Cesium.Color.GREEN.withAlpha(0.5)
    }
    this.identificationPoint = null //标识点位
    this.CurveFlag = null
    this.CurveFlagLast = null // 曲线旗标数据
    this.positions = [] // 经纬度
    this.entitiesPoint = [] // 实体点位
    this.entitiesCurveFlag = []
    this.CurveFlagData = null
    this.DrawStartEvent = new Cesium.Event() //开始绘制事件
    this.DrawEndEvent = new Cesium.Event() //结束绘制事件
  }
    curveFlags(type) {
    console.log(type)
    //加载
    var $this = this
    function addloadCurveFlags(data, type) {
      let componentspolygon = []
      let componentspolyline = []
      if (data.length < 2) return
      // 取第一个
      let startPoint = data[0]
      // 取最后一个
      let endPoint = data[data.length - 1]
      if (type == 0) {
      //曲线代码
      ...
      } else if (type == 1) {
       //矩形代码
       ...
      } else {
       //三角形代码
       ...
      }
      var shape = $this.viewer.entities.add({
        Type: 'DrawCurveFlag',
        Position: data,
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(componentspolygon),
          material: Cesium.Color.RED,
          clampToGround: true,
        },
        polyline: {
          //使用cesium的peoperty
          positions: componentspolyline,
          show: true,
          material: Cesium.Color.YELLOW,
          width: 5,
          clampToGround: true
        }
      })
      $this.entitiesCurveFlag.push(shape)
      return shape
    }

    //创建曲线旗标
    function createCurveFlag(type) {
      console.log(type)
      var polygon = $this.viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.CallbackProperty(function () {

            if ($this.positions.length < 2) return
            let lonlat = []
            let components = []
            let length = $this.positions.length

            for (let i = 0; i < length; i++) {
              lonlat.push($this.cartesianToLatlng($this.positions[i]))
            }
            // 取第一个
            let startPoint = lonlat[0]
            // 取最后一个
            let endPoint = lonlat[lonlat.length - 1]

            if (type == 0) {
             //曲线代码
            } else if (type == 1) {
           //矩形代码
            } else {
             //三角形代码
            }
            return new Cesium.PolygonHierarchy(components)
          }, false),

 

          material: Cesium.Color.RED,
          clampToGround: true,
        },
        polyline: {
          //使用cesium的peoperty
          positions: new Cesium.CallbackProperty(function () {
            if ($this.positions.length < 2) return
            let lonlat = []
            let components = []
            let length = $this.positions.length
            for (let i = 0; i < length; i++) {
              lonlat.push(cartesianToLatlng($this.positions[i]))
            }
            // 取第一个
            let startPoint = lonlat[0]
            // 取最后一个
            let endPoint = lonlat[lonlat.length - 1]
            if (type == 0) {
          //曲线代码
            } else if (type == 1) {
             //矩形代码
            } else {
           //三角形代码
            }
          }, false),
          show: true,
          material: Cesium.Color.YELLOW,
          width: 5,
          clampToGround: true
        }
      })
      $this.entitiesCurveFlag.push(polygon)
      return polygon
    }
    function createPoint(cartesian) {
      var point = $this.viewer.entities.add({
        position: cartesian,
        point: {
          pixelSize: 10,
          color: Cesium.Color.YELLOW
        }
      })
      $this.entitiesPoint.push(point)
      return point
    }
    this.handler.destroy()
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
    this.handler.setInputAction(function (evt) {
      //单机开始绘制
      //屏幕坐标转地形上坐标
      var cartesian = $this.getCatesian3FromPX(evt.position)
      if (Cesium.defined(cartesian)) {
        if ($this.positions.length == 0) {
          $this.positions.push(cartesian.clone())
          $this.identificationPoint = createPoint(cartesian)
          createPoint(cartesian) // 绘制点
          $this.positions.push(cartesian)
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    this.handler.setInputAction(function (evt) {
      $this.label.style.display = 'block'
      $this.label.style.left = evt.endPosition.x + 10 + 'px'
      $this.label.style.top = evt.endPosition.y + 15 + 'px'
      //移动时绘制线
      if ($this.positions.length < 2) return
      var cartesian = $this.getCatesian3FromPX(evt.endPosition)
      if (Cesium.defined(cartesian)) {
        $this.label.innerHTML = '左键添加点，右键结束'
        if (!Cesium.defined($this.CurveFlag)) {
          $this.CurveFlag = createCurveFlag(type)
        } else {
          $this.positions.pop()
          $this.positions.push(cartesian)
        }
        $this.identificationPoint.position.setValue(cartesian)
      } else {
        $this.label.innerHTML = '超出地球范围'
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    this.handler.setInputAction(function (evt) {
      if (!$this.CurveFlag) return
      var cartesian = $this.getCatesian3FromPX(evt.position)
      $this.positions.pop()
      $this.positions.push(cartesian)
      createPoint(cartesian) // 绘制点
      $this.CurveFlagData = $this.positions.concat()
      $this.viewer.entities.remove($this.CurveFlag) //移除
      $this.CurveFlag = null
      $this.positions = []
      $this.identificationPoint.position.setValue(cartesian)
      var lnglatArr = []
      for (var i = 0; i < $this.CurveFlagData.length; i++) {
        var lnglat = cartesianToLatlng($this.CurveFlagData[i])
        lnglatArr.push(lnglat)
      }
      $this.CurveFlagData = lnglatArr
      var CurveFlag = addloadCurveFlags([$this.CurveFlagData[0], $this.CurveFlagData[$this.CurveFlagData.length - 1]], type) //加载
      $this.entitiesCurveFlag.push(CurveFlag)
      $this.CurveFlagLast = CurveFlag
      clearPoint()
      $this.destroy()
   
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)

    function cartesianToLatlng(cartesian) {
      var latlng = $this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
      var lat = Cesium.Math.toDegrees(latlng.latitude)
      var lng = Cesium.Math.toDegrees(latlng.longitude)
      return [lng, lat]
    }

    function LatlngTocartesian(latlng) {
      let cartesian3 = Cesium.Cartesian3.fromDegrees(latlng[0], latlng[1])
      return cartesian3
    }

    function clearPoint() {
      for (var i = 0; i < $this.entitiesPoint.length; i++) {
        $this.viewer.entities.remove($this.entitiesPoint[i])
      }
      $this.entitiesPoint = [] //脏数据
    }

    // 贝塞尔曲线
    function getBezierPoints(points) {
      let $this = this
      if (points.length <= 2) {
        return points
      } else {
        let bezierPoints = []
        let n = points.length - 1
        for (let t = 0; t <= 1; t += 0.01) {
          let [x, y] = [0, 0]
          for (let index = 0; index <= n; index++) {
            let factor = getBinomialFactor(n, index)
            let a = Math.pow(t, index)
            let b = Math.pow(1 - t, n - index)
            x += factor * a * b * points[index][0]
            y += factor * a * b * points[index][1]
          }
          bezierPoints.push(LatlngTocartesian([x, y]))
        }
        bezierPoints.push(LatlngTocartesian(points[n]))
        return bezierPoints
      }
    }

    /**
     * 获取二项分布
     * @param n
     * @param index
     * @returns {number}
     */
    function getBinomialFactor(n, index) {
      return getFactorial(n) / (getFactorial(index) * getFactorial(n - index))
    }

    /**
     * 获取阶乘数据
     * @param n
     * @returns {number}
     */
    function getFactorial(n) {
      let result = 1
      switch (n) {
        case n <= 1:
          result = 1
          break
        case n === 2:
          result = 2
          break
        case n === 3:
          result = 6
          break
        case n === 24:
          result = 24
          break
        case n === 5:
          result = 120
          break
        default:
          for (let i = 1; i <= n; i++) {
            result *= i
          }
          break
      }
      return result
    }
  }
  }

  var draws = new Draw(
    window.viewer,
    {
      borderColor: Cesium.Color.RED,
      material: Cesium.Color.BLUE.withAlpha(0)
    },
    label.value
  )
draws.curveFlags(0)
draws.curveFlags(1)
draws.curveFlags(2)
  

知识付费：￥10
源码请加微信：