在geojson图层上增加点击弹窗，并添加删除功能

最新推荐文章于 2024-06-27 01:24:19 发布

海亮啊

最新推荐文章于 2024-06-27 01:24:19 发布

阅读量426

点赞数 10

本文链接：https://blog.csdn.net/qq_26328861/article/details/135908522

版权

ArcGIS API JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何在GIS应用中创建一个带有自定义标题和删除功能的弹窗模板，包括设置popupTemplate、使用event.graphic.getAttribute()区分图形、监听popup的删除动作并调用deleteGraphic方法删除选定图形的过程。

摘要由CSDN通过智能技术生成

显示效果

完整代码

// 创建弹窗模板
      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)
      })
    },

详细过程

1. 实例时添加属性popupTemplate

popupTemplate: {
          title: action,
          content: '点击了'
        }

2. 设置title用于查询到多个graphic时能够区分

title: function(event) {
            return popupTile[action] + event.graphic.getAttribute('OBJECTID')
          }

3. 设置actions属性来创建删除按钮

actions:[
    {
        title: '删除',
        id: 'deleteGraphic',
        className: 'esri-icon-trash'
    }
]

4. 通过action属性创建删除按钮

actions:[
    {
        title: '删除',
        id: 'deleteGraphic',
        className: 'esri-icon-trash'
    }
]

5. 在map上监听popup上的操作，然后调用对应的方法

this.mapView.popup.on("trigger-action", event => {
        const { id } = event.action
        if(id === 'delete-graphic')
          this.deleteGraphic()
      })

6. 删除指定位置的graphic的方法

deleteGraphic() {
      const selectedFeature = this.mapView.popup.selectedFeature
      const { layer } = selectedFeature
      layer.applyEdits({
        deleteFeatures: [selectedFeature]
      }).then(res => {
        console.log(res)
      })
    },