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
    }