首页 > Web开发 > 详细

arcgis js4.x在geojson数据上点击显示弹窗,并添加删除按钮

时间:2022-05-27 20:34:37      阅读:6      评论:0      收藏:0      [点我收藏+]
  • 实例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)
      })
    },

 

arcgis js4.x在geojson数据上点击显示弹窗,并添加删除按钮

原文:https://www.cnblogs.com/yhllx999/p/15353029.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!