ArcGIS JavaScript 4.28：如何为PopupTemplate添加带点击事件的按钮？

你的问题出在两个核心点：一是ArcGIS JS API默认会转义属性占位符中的HTML内容，导致按钮被渲染成纯文本；二是内联onclick可能被内容安全策略拦截，同时自定义CSS类可能未正确加载。以下是可行的解决方案：

核心思路 #

1. 改用函数式content生成Popup内容，避免HTML转义
2. 通过事件监听绑定按钮点击逻辑，而非内联onclick
3. 优先使用ArcGIS自带样式类，或确保外部样式（如Bootstrap）正确引入

完整代码示例 #

// 定义PopupTemplate，使用函数生成动态内容
const popupTemplate = {
    title: "{Name}",
    content: (graphic) => {
        // 从graphic属性中获取ID，避免硬编码
        const graphicID = graphic.attributes.graphicID;
        // 返回带自定义属性的按钮HTML，用ArcGIS自带样式类
        return `<button class="esri-button esri-button--danger" data-graphic-id="${graphicID}">Delete the Diagram</button>`;
    }
};

// 创建Graphic
const graphic = new Graphic({
    geometry: new geometry.Polygon({
        rings: coordinates,
        spatialReference: { wkid: 3826 }
    }),
    symbol: {
        type: "simple-fill",
        color: [255, 0, 0, 0.3],
        outline: { color: [255, 0, 0], width: 1 }
    },
    attributes: {
        Name: "Diagram Infos",
        graphicID: "testing_1" // 将ID存入属性，方便后续获取
    },
    popupTemplate: popupTemplate
});

// 监听Popup显示事件，绑定按钮点击逻辑
view.popup.watch("visible", (isVisible) => {
    if (isVisible) {
        const deleteBtn = view.popup.content.querySelector(".esri-button--danger");
        if (deleteBtn) {
            deleteBtn.addEventListener("click", () => {
                const targetID = deleteBtn.dataset.graphicId;
                // 执行删除逻辑：从图层中找到并移除目标Graphic
                const targetLayer = view.map.findLayerById("your-layer-id"); // 替换为你的图层ID
                const targetGraphic = targetLayer.graphics.find(g => g.attributes.graphicID === targetID);
                
                if (targetGraphic) {
                    targetLayer.graphics.remove(targetGraphic);
                    view.popup.close(); // 删除后关闭Popup
                }
            });
        }
    }
});

关键说明 #

• 函数式content：PopupTemplate的content设为函数时，返回的HTML会被直接渲染，不会被转义，这是解决纯文本显示问题的核心。
• 事件绑定方式：通过addEventListener绑定点击事件，避免内联onclick的安全限制，同时代码更易维护。
• 样式处理：使用esri-button esri-button--danger是ArcGIS JS API自带的按钮样式，无需额外引入Bootstrap；如果坚持用Bootstrap，确保项目中已正确引入Bootstrap的CSS文件。
• 数据传递：通过data-*属性存储Graphic的ID，在点击事件中读取，避免全局变量依赖。

内容的提问来源于stack exchange，提问作者abramhum