arcgis js 动态绘制白膜

arcgis动态绘制白膜

export default {
  name: 'ControlHeight',
  data () {
    return {
      offsetHeight: 350,
      limitHeight: 100, // 限高高度
      opacity: 0,
      color: '#409EFF',
      currPolygon: null,
      polygonLayerList: [],
      polygonData: [],
      currChangedOpacity: 0,
      polygonNum: 0
    }
  },
  methods: {
    draw () {
      const self = this
      self.map.container.style.cursor = 'crosshair'
      let arr = []
      //   self.map.graphics.remove(self.currPolygon)
      const controlHeightGraphicLayer = new self.GraphicsLayer({
        // graphics: [graphic],
        elevationInfo: {
          mode: 'absolute-height',
          // 偏移
          offset: self.offsetHeight,
          unit: 'meters'
        }
        // screenSizePerspectiveEnabled: true
      })
      self.clickEvent = self.map.on('click', evt => {
        arr.push([evt.mapPoint.longitude, evt.mapPoint.latitude])
      })
      self.moveEvent = self.map.on('pointer-move', evt => {
        if (arr.length > 0) {
        //   self.map.graphics.remove(self.currPolygon)
          controlHeightGraphicLayer.graphics.remove(self.currPolygon)
          const mapPoint = self.map.toMap({ x: evt.x, y: evt.y })
          let arr2 = []
          arr.forEach(res => {
            arr2.push(res)
          })
          arr2.push([mapPoint.longitude, mapPoint.latitude])
          arr2.push(arr[0])

          const graphic = new self.Graphic({
            geometry: new self.Polygon({
            //   hasZ: true,
            //   hasM: false,
              rings: [arr2],
              spatialReference: self.map.spatialReference
            }),
            symbol: {
              type: 'polygon-3d', // 'simple-fill',
              symbolLayers: [{
                type: 'extrude',
                size: self.limitHeight,
                material: {
                  color: self.color
                  // opacity: (100 - self.opacity) / 100
                }
              }]
            //   color: [ 0, 255, 0, 0.2],
            //   style: 'solid',
            //   outline: {
            //     color: 'white',
            //     width: 1
            //   }
            }
          })
          controlHeightGraphicLayer.elevationInfo.offset = self.offsetHeight
          controlHeightGraphicLayer.opacity = (100 - self.opacity) / 100
          controlHeightGraphicLayer.graphics.add(graphic)
          //   self.map.graphics.add(graphic)
          self.map.map.add(controlHeightGraphicLayer)
          self.currPolygon = graphic
        }
      })
      self.dbclickEvent = self.map.on('double-click', evt => {
        evt.stopPropagation()
        self.map.container.style.cursor = 'default'
        self.clickEvent.remove()
        self.clickEvent = ''
        self.moveEvent.remove()
        self.moveEvent = ''
        self.dbclickEvent.remove()
        self.dbclickEvent = ''
        // console.log(self.currPolygon)
        // self.polygonLayerList.push(controlHeightGraphicLayer)
        self.polygonData.push({
          layer: controlHeightGraphicLayer,
          name: `模型_${self.polygonNum}`,
          opacity: self.opacity,
          edit: false
        })
        self.polygonNum++
        // self.geometry = self.polygonObj.geometry
      })
    },
    deleteGraphicer (row) {
      row.layer.removeAll()
      this.map.map.remove(row.layer)
      this.polygonData = this.polygonData.filter(item => item.layer !== row.layer)
    },
    editData (row) {
      row.edit = true
      this.currChangedOpacity = row.opacity
    },
    saveData (row) {
      row.layer.opacity = (100 - row.opacity) / 100
      row.edit = false
    },
    cancelSaveData (row) {
      row.layer.opacity = (100 - this.currChangedOpacity) / 100
      row.edit = false
    },
    changeOpacity (row) {
      row.layer.opacity = (100 - row.opacity) / 100
    },
    close () {
      this.polygonNum = 0
      this.$emit('close')
    }
  },
  mounted () {
    let self = this
    // self.wkid = sysConfig.wkid
    mapManager.getMap(this.mapId).then(({ map }) => {
      self.map = map
      esriLoader.loadModules([
        'esri/Map',
        'esri/layers/GraphicsLayer',
        'esri/widgets/Sketch/SketchViewModel',
        'esri/Graphic',
        'esri/geometry/Polygon'
      ], { url: serverConfig.arcgis_js_api_url }).then(([Map, GraphicsLayer, SketchViewModel, Graphic, Polygon]) => {
        self.Map = Map
        self.GraphicsLayer = GraphicsLayer
        self.SketchViewModel = SketchViewModel
        self.Graphic = Graphic
        self.Polygon = Polygon
      })
    })
  }
}