尝试在ARCGIS JavaScript中的popupTemplate上添加按钮时遇到问题；我的环境是node.js，ARCGIS JavaScript的版本是4.28。 代码片段如下：
const popupTemplate = {
title: "{Name}",
content: "{Description}"
}
var graphicID = "testing_1";
const buttonHTML = `<button class="btn btn-danger" onclick="DeleteSelectedDiagram('${graphicID}')">Delete the Diagram</button>`;
graphic = new Graphic({
geometry: new geometry.Polygon({
rings: coordinates,
spatialReference: {
wkid: 3826
},
id:"testing_1"
}),
symbol: {
type: "simple-fill",
color: [255, 0, 0, 0.3], // Red color with 0.3 opacity
outline: {
color: [255, 0, 0], // Red color
width: 1
}
},
attributes: {
Name: "Diagram Infos",
Description: buttonHTML
},
popupTemplate: popupTemplate
});
但是，它不起作用，按钮的css样式消失了，popupTemplate只显示“删除图表”字样。 有什么方法可以将带有单击事件的按钮添加到 popupTemplate 中吗？非常感谢任何指导，非常感谢。
弹出内容有多种类型（ArcGIS JS API - PopupTemplate 内容）。虽然我认为你可以通过
expressionfunction还有另一种在弹出窗口中添加功能的方法，我认为可能更适合这种情况，即操作（ArcGIS JS API - PopupTemplate 操作）。
这是使用这两种选择的简单示例，
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>PopupTemplate - content function and action</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.28/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
let populationChange;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/Layer",
"esri/core/reactiveUtils"
], (Map, MapView, Layer, reactiveUtils) => {
const map = new Map({
basemap: "dark-gray-vector"
});
// Create the MapView
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 6,
center: [-87, 34]
});
Layer.fromPortalItem({
portalItem: { id: "e8f85b4982a24210b9c8aa20ba4e1bf7" }
}).then((layer) => {
map.add(layer);
let source = null;
const message = () => console.log(source, view.popup.selectedFeature);
const contentFunction = (feature) => {
const div = document.createElement("div");
source = "FUNCTION";
const button = document.createElement("button");
button.innerText = "Message in console";
button.addEventListener("click", message);
div.append(button);
return div;
};
const actionMessage = {
title: "Message in console",
id: "message-action",
image: null
};
const popupTemplate = {
title: "Population in {NAME}",
outFields: ["*"],
content: contentFunction,
actions: [actionMessage]
};
layer.popupTemplate = popupTemplate;
reactiveUtils.on(
() => view.popup,
"trigger-action",
(event) => {
if (event.action.id === "message-action") {
source = "ACTION";
message();
}
}
);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>