arcgis js 动态绘制白膜

arcgis动态绘制白膜

javascript 复制代码
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
      })
    })
  }
}
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt