arcgis api for js popupTemplate弹窗

353 阅读1分钟

官方文档:PopupTemplate | ArcGIS API for JavaScript 4.18 (gdeei.cn)

标记点面配置popupTemplate,我的弹窗内容需要的是表格形式的

outFields: ['*'],
popupTemplate: {
            title: "{name}",//弹窗标题
            content: [
                {
                    type: "fields",
                    fieldInfos: [
                        {
                            label: "隶属行政村",
                            fieldName: "数据返回的字段",
                        },
                    ]
                }
            ],
            actions: [ // 配置弹窗按钮
                {
                    id: "btn1", // 按钮1的唯一标识符
                    title: "详情", // 按钮的显示文本
                    visible: true, // 按钮1的可见性
                    disabled: false, // 按钮的可用性
                    type: "button", // 按钮类型为"button"
                    className: "esri-icon-edit"
                },
            ],
  },

弹窗配置按钮的点击事件监听

this.vm.view.popup.on("trigger-action", async (event) => {
                    const actionId = event.action.id;
                    const actionTitle = event.action.title;
                    const clickedGraphic = this.vm.view.popup.selectedFeature;
                    const areaId = clickedGraphic.attributes["area_id"];
                    if (actionId === "btn1") {
                        // 按钮1
                   
                    } else if (actionId === "btn2") {
                        // 按钮2
                        
                    }
                })

点击弹窗的标题默认折叠掉弹窗的内容,我没有找到相关的配置把它关掉,所以是通过css禁止掉鼠标事件的

.esri-popup__header-container--button {
      pointer-events: none; 
}