如何将ArcGIS弹窗属性表的name字段值提取到HTML元素中？

解决方案步骤 #

• 在HTML中添加用于接收属性值的元素
• 从选中要素的attributes对象中提取目标字段值
• 将值赋值给HTML元素的对应属性（textContent或value）

关键说明 #

弹窗模板的fieldInfos只是配置弹窗显示的字段列表，实际的要素属性数据存储在选中要素（graphic）的attributes对象中，直接从这里提取数据更高效准确。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Custom popup actions per feature attribute | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>

  <style>
    body {
      padding: 0;
      margin: 0;
      height: 80%;
      width: 80%;
      overflow: hidden;
    }

    #viewDiv {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
    }

    #breweryName {
      position: absolute;
      bottom: 20px;
      left: 20px;
      padding: 8px 12px;
      background: white;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      font-size: 14px;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.26/"></script>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (Map, MapView, FeatureLayer) => {
      const map = new Map({
        basemap: "streets-navigation-vector"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-101.94981250000075, 41.20977753557709],
        zoom: 5
      });

      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/OpenBeerDB/FeatureServer/0",
        popupTemplate: {
          title: "{name}",
          lastEditInfoEnabled: false,
          actions: [
            {
              id: "find-brewery",
              image: "https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/live/beer.png",
              title: "Brewery Info"
            }
          ],
          content: [
            {
              type: "fields",
              fieldInfos: [
                { fieldName: "name" },
                { fieldName: "address1", label: "address" },
                { fieldName: "city" },
                { fieldName: "state" },
                { fieldName: "phone" },
                { fieldName: "website" }
              ]
            }
          ]
        }
      });

      map.add(featureLayer);

      view.when(() => {
        // 监听选中要素变化
        view.popup.watch("selectedFeature", (graphic) => {
          const nameElement = document.getElementById("breweryName");
          if (graphic) {
            // 提取name属性值并赋值给HTML元素
            const breweryName = graphic.attributes.name;
            nameElement.textContent = `选中的啤酒厂: ${breweryName}`;

            // 控制按钮可见性
            const graphicTemplate = graphic.getEffectivePopupTemplate();
            graphicTemplate.actions.items[0].visible = !!graphic.attributes.website;
          } else {
            // 弹窗关闭时清空内容
            nameElement.textContent = "";
          }
        });

        const popup = view.popup;
        popup.viewModel.on("trigger-action", (event) => {
          if (event.action.id === "find-brewery") {
            const attributes = popup.viewModel.selectedFeature.attributes;
            const info = attributes.website;
            if (info) {
              window.open(info.trim());
            }
          }
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv" class="esri-widget" style="width:600px;height:600px;"></div>
  <!-- 用于显示选中要素name的元素 -->
  <div id="breweryName"></div>
</body>
</html>

额外说明 #

如果需要将值用于后续查询（比如输入框），可以把<div id="breweryName"></div>替换为输入框：

<input type="text" id="breweryNameInput" placeholder="选中的啤酒厂名称" style="position:absolute; bottom:20px; left:20px; padding:8px; border:1px solid #ccc; border-radius:4px;">

然后赋值时修改为：

document.getElementById("breweryNameInput").value = breweryName;

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