cesium绘制图形

大概流程：

创建viewer——>创建存储临时数据的变量——>初始化事件处理句柄

1. 创建viewer

把初始化参数分为两类：通用配置项和特殊配置项

通用配置项：根据项目需要，只要创建viewer都适用的配置项参数

{
  animation: false, // 是否创建动画小器件，左下角仪表
  baseLayerPicker: true, // 是否显示图层选择器
  fullscreenButton: true, // 是否显示全屏按钮
  geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
  homeButton: true, // 是否显示Home按钮
  infoBox: false, // 是否显示信息框
  sceneModePicker: true, // 是否显示3D/2D选择器
  selectionIndicator: false, // 是否显示选取指示器组件
  timeline: false, // 是否显示时间轴
  navigationHelpButton: false, // 是否显示右上角的帮助按钮
  projectionPicker: false,
  terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
  terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 地形图层提供者，仅baseLayerPicker设为false有意义
  contextOptions: {
    id: 'cesiumCanvas',
    webgl: {
      preserveDrawingBuffer: true
    }
  } // 传递给Scene对象的上下文参数（scene.options）
}

特殊配置项参数：不能通用，需要单独配置的参数

setViewerOptions(options) {
      var tdt_imgProviderViewModels = [CesiumProviderViewModels.tdt_vec, CesiumProviderViewModels.tdt_img]
      var result = _.merge(ViewerDefaultOptions, {
        imageryProviderViewModels: tdt_imgProviderViewModels,
        mapProjection: CesiumBasemapLayers.cgs2000GeographicProj
      }, options)
      return result
    }

2. 创建一些存储临时数据的变量

      drawingMode: '', // 当前的绘制模式：line、polygon等
      activeShapePoints: [], // 当前用于创建最终图形的点
      activeShape: undefined, // 当前绘制的图形
      handler: undefined,
      floatingPoint: undefined, // 鼠标移动结束时的点

3. 创建一些响应方法及绘制方法

 

// 创建点
createPoint(worldPosition) {
      var point = this.entities.add({
        position: worldPosition,
        point: {
          color: Cesium.Color.WHITE,
          pixelSize: 5,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        }
      })
      return point
    }
// 绘制图形
drawShape(positionData) {
      var shape
      switch (this.drawingMode) {
        case 'line':
          shape = this.entities.add({
            polyline: {
             positions: positionData,
              clampToGround: true,
              width: 8,
              material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.25,
                color: Cesium.Color.fromCssColorString('#00f').withAlpha(0.9)
              })
            }
          })
          break
        case 'polygon':
          shape = this.entities.add({
            polygon: {
              hierarchy: positionData,
              material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))
            }
          })
          break
      }
      return shape
    }
// 结束绘制时，创建图形，清理临时存储的数据
terminateShape() {
      this.activeShapePoints.pop()
      this.drawShape(this.activeShapePoints)
      this.entities.remove(this.floatingPoint)
      this.entities.remove(this.activeShape)
      this.floatingPoint = undefined
      this.activeShape = undefined
      this.activeShapePoints = []
    },

4. 修改鼠标事件处理句柄

initHandler() {
      var that = this
      // 取消对鼠标右键双击的响应
this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      // 事件处理句柄
      this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    // 单击事件响应
      this.handler.setInputAction(function(event) {
        if (!Cesium.Entity.supportsPolylinesOnTerrain(that.viewer.scene)) {
          console.log('This browser does not support polylines on terrain.')
          return
        }
        // We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
        // we get the correct point when mousing over terrain.
        var earthPosition = that.viewer.scene.pickPosition(event.position)
        // earthPosition will be undefined if our mouse is not over the globe
        if (Cesium.defined(earthPosition)) {
          // 若首次创建
          if (that.activeShapePoints.length === 0) {
            that.floatingPoint = that.createPoint(earthPosition) // 创建点
            // 动态点
            var dynamicPositions = new Cesium.CallbackProperty(function() {
              return that.activeShapePoints
            }, false)
            // 创建图形
            that.activeShape = that.drawShape(dynamicPositions)
          }
          // 添加点
          that.activeShapePoints.push(earthPosition)
          // 创建点对象
          that.createPoint(earthPosition)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 右击事件响应
      that.handler.setInputAction(function(event) {
        if (Cesium.defined(that.floatingPoint)) {
          var newPosition = that.scene.pickPosition(event.endPosition)
          if (Cesium.defined(newPosition)) {
            that.floatingPoint.position.setValue(newPosition)
            that.activeShapePoints.pop()
            that.activeShapePoints.push(newPosition)
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      that.handler.setInputAction(function(event) {
        that.terminateShape()
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    }

5. 其它控件响应方法

onDrawingModeChange(selectedValue) {
      this.terminateShape()
      this.drawingMode = selectedValue
    }