ArcGIS for JS---PopupTemplate for Feature

1.本文主要介绍如何获取弹窗内容里面的动态数据；

2.FeatureLayer API里面的PopupTemplate属性介绍很少，最好直接搜索PopupTemplate API，可以看到完整的可用信息；

当我们想要在ArcGIS上的某个位置（或者图例）触发弹窗事件时，常使用FeatureLayer 的 PopupTemplate属性，用于触发弹窗，显示动态信息；在FeatureLayer API示例里你仅能看到默认的弹窗样式的代码，无法获取相关动态变量；但是在PopupTemplate API里则可以看到PopupTemplate - use functions to set content示例代码，教你如何自定义一个函数用于显示弹窗内容，并且还可以在该函数内执行默认方法无法实现的其它功能。

              let fieldsoutline = [
            {
              name: "objectid",
              alias: "objectid",
              type: "oid",
            },
            {
              name: "workername",
              alias: "workername",
              type: "string",
            },
            {
              name: "id",
              alias: "id",
              type: "string",
            },
          ];
          // 设置popupTemplate的内容函数，该函数必须返回一个HTML元素/string/Promise 函数/弹出元素，用于展示弹窗内容
          function contentWidget_test(feature) {
            // 通过feature就可以获取到弹窗中的动态变化的内容
            const div = document.createElement("div");
            div.innerHTML =
              " workname <b>" + feature.graphic.attributes.workername + "</b>";
            console.log("---------------------------");
            console.log(feature.graphic.attributes);
            return div;
          }
          //实例化 FeatureLayer
          const featureLayeroutline = new FeatureLayer({
            id: 16,
            fields: fieldsoutline,
            objectIdField: "objectid",
            geometryType: "point",
            source: arroutline, //graphic数组
            renderer: renderoutline, //feature样式
            labelingInfo: [stateLabelClassoutline], //文字信息
            popupTemplate: {
              title: "电话：88888888",
              outFields: ["*"],
              content: contentWidget_test,
              // fieldInfos: [
              //   {
              //     fieldName: "workername",
              //     label: "workername",
              //   },
              // ],
            },
          });

代码解释：

1.首先实例化FeatureLayer，其中重要的属性为：

fields，也就是动态数据的字段（写在该方法外面，前几行代码就是），非常重要，后面想要获取动态数据，必须要靠这些字段；

popupTemplate，最最重要的弹窗属性，title指定弹窗的标题；outFields指定外部可用的字段，['*']表示fields里所有字段都可用；content设置弹窗内容和样式；如果按照FeatureLayer API中的示例代码，就不是上面的函数名，而是一些配置参数，只能显示默认样式的数据；在上述代码中，我的content是一个函数名，在该函数中，我获取到了动态数据，并将其放入一个div中，并返回，进行简单的展示。

下面这张图就是控制台的输出结果：

ArcGIS for JS---PopupTemplate for Feature

猜你喜欢