arcgis js 动态绘制白膜

本文主要是介绍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 = thisself.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.offsetHeightcontrolHeightGraphicLayer.opacity = (100 - self.opacity) / 100controlHeightGraphicLayer.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 = truethis.currChangedOpacity = row.opacity},saveData (row) {row.layer.opacity = (100 - row.opacity) / 100row.edit = false},cancelSaveData (row) {row.layer.opacity = (100 - this.currChangedOpacity) / 100row.edit = false},changeOpacity (row) {row.layer.opacity = (100 - row.opacity) / 100},close () {this.polygonNum = 0this.$emit('close')}},mounted () {let self = this// self.wkid = sysConfig.wkidmapManager.getMap(this.mapId).then(({ map }) => {self.map = mapesriLoader.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 = Mapself.GraphicsLayer = GraphicsLayerself.SketchViewModel = SketchViewModelself.Graphic = Graphicself.Polygon = Polygon})})}
}