- 例項geojsonLayer時新增屬性popupTemplate
popupTemplate: {
title: action,
content: '點選了'
}
- 設定title用於查詢到多個graphic時能夠區分
title: function(event) {
return popupTile[action] + event.graphic.getAttribute('OBJECTID')
}
- 設定actions屬性來建立刪除按鈕
actions:[
{
title: '刪除',
id: 'deleteGraphic',
className: 'esri-icon-trash'
}
]
- 在map上監聽popup上的操作，然後呼叫對應的方法
this.mapView.popup.on("trigger-action", event => {
const { id } = event.action
if(id === 'delete-graphic')
this.deleteGraphic()
})
- 刪除指定位置的graphic的方法
deleteGraphic() {
const selectedFeature = this.mapView.popup.selectedFeature
const { layer } = selectedFeature
layer.applyEdits({
deleteFeatures: [selectedFeature]
}).then(res => {
console.log(res)
})
},
完整程式碼
// 建立彈窗模板
const popupTemplate = {
title: function(event) {
return popupTile[action] + '-------' + event.graphic.getAttribute('OBJECTID')
},
actions:[
{
title: '刪除',
id: 'delete-graphic',
className: 'esri-icon-trash'
}
]
}
// 把模板設定到geojsonLayer上
const GeojsonLayer = new esri.GeoJSONLayer({
url: url,
copyright: 'RHgis',
id: layerID,
renderer: customRenderer || renderer,
popupTemplate
})
// 監聽popup上的按鈕事件
this.mapView.popup.on("trigger-action", event => {
console.log(event)
const { id } = event.action
if(id === 'delete-graphic')
this.deleteGraphic()
})
// 刪除
deleteGraphic() {
const selectedFeature = this.mapView.popup.selectedFeature
const { layer } = selectedFeature
layer.applyEdits({
deleteFeatures: [selectedFeature]
}).then(res => {
console.log(res)
})
},