1. This article mainly introduces how to obtain the dynamic data in the content of the pop-up window;
2. The PopupTemplate attribute in the FeatureLayer API is rarely introduced. It is best to search the PopupTemplate API directly to see the complete available information;
When we want to trigger a popup event at a certain position (or legend) on ArcGIS, we often use the PopupTemplate property of FeatureLayer to trigger popups and display dynamic information; in the FeatureLayer API example, you can only see the default Popup-style codes cannot obtain relevant dynamic variables; however, in the PopupTemplate API, you can see the PopupTemplate - use functions to set content sample code, which teaches you how to customize a function to display popup content, and you can also use this Perform other functions in the function that cannot be realized by the default method.
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",
// },
// ],
},
});Code explanation:
1. First instantiate FeatureLayer, where the important attributes are:
fields, that is, the fields of dynamic data (written outside the method, the first few lines of code), are very important. If you want to obtain dynamic data later, you must rely on these fields;
popupTemplate, the most important attribute of the popup window, title specifies the title of the popup window; outFields specifies the externally available fields, ['*'] means that all fields in fields are available; content sets the content and style of the popup window; if according to the FeatureLayer API The sample code is not the above function name, but some configuration parameters, which can only display the data in the default style; in the above code, my content is a function name, in this function, I get the dynamic data, and Put it in a div, and return, for simple display.
The following picture is the console output:
