async addSluicePumpLayerData() {
// 获取数据
await this.getListData()
this.layers.sluicePumpLayer.graphics = []
// 构建 graphics
console.log(this.listData)
const graphics =this.listData.map((item, index) => {
item.id = index// 补充ID
item.type ='SceneVideoInfo'
return {
geometry: {
type:'point',
x: item.coox,
y: item.cooy,
spatialReference:this.$mapView.spatialReference
},
attributes: item,
symbol: {
type:'picture-marker',
url:require('@/assets/images/water-emergency/standing-book/video-icon.png'),
width:16,
height:20
}
}
})
console.log(graphics)
this.layers.sluicePumpLayer.addMany(graphics)
},
addSluicePumpLayer() {
this.layers.sluicePumpLayer =new this.$esri.GraphicsLayer({
id:'sluicePumpLayer',
graphics: [],
visible:true
})
this.$mapView.map.add(this.layers.sluicePumpLayer)
console.log(this.layers.sluicePumpLayer)
const clickHandle =this.$mapView.on('click', event => {
this.$mapView.hitTest(event).then(async res => {
console.log(event)
console.log(res)
let graphic =null
graphic = res.results[0]?.graphic
this.currGraphic =graphic
if (!graphic ||graphic.layer.id !=='sluicePumpLayer') {
return
}
const target =new this.$esri.Point({
type:'point',
x:graphic.attributes.coox,
y:graphic.attributes.cooy,
spatialReference:this.$mapView.spatialReference
})
this.$mapView.goTo({target,zoom:14 }).then(() => {
this.anchorPoint = {
x:graphic.attributes.coox,
y:graphic.attributes.cooy
}
this.popupVisible =true
this.popupData =graphic.attributes
this.$store.commit('waterEmergency/setWaterloggingMonitorData',graphic.attributes)
this.setSelectedStatus(graphic)
})
})
})
this.$once('hook:beforeDestroy', () => {clickHandle.remove() })
this.addSluicePumpLayerData()
},
setSelectedStatus(graphic) {
if (this.selectGraphic) {
this.selectGraphic.symbol = {
type:'picture-marker',
url:require('@/assets/images/water-emergency/standing-book/video-icon.png'),
width:16,
height:20
}
}
this.$store.commit('waterEmergency/setSceneVideoData', {
selectGraphic: graphic
})
graphic.symbol = {
type:'picture-marker',
url:require('@/assets/images/water-emergency/standing-book/video-icon-selected.png'),
width:25,
height:30
}
},
selectLayerPoint(row) {
const layer =this.$mapView.map.findLayerById('sluicePumpLayer')
const graphic =layer.graphics.items.find(item => {
return item.attributes.videoId === row.videoId
})
this.setSelectedStatus(graphic)
},