Esri Maps PopupTemplate的内容方法每个功能仅调用一次

asg*_*ant 5 esri typescript arcgis-js-api esri-maps esri-javascript-api

我正在Angular应用程序内使用Esri映射,并且将弹出式窗口渲染为Angular组件,并使用PopupTemplatecontent方法发布了数据:

layer.popupTemplate = new PopupTemplate({
  content: (feature: { graphic: __esri.Graphic }) => {
    this.publishPopupData(layer, feature.graphic.attributes);
    return popupComponent.viewContainerRef.element.nativeElement;
  },
  // other properties... 
});
Run Code Online (Sandbox Code Playgroud)

这很好用,除非在给定点有多个要素。当用户循环浏览功能时,如果他/她返回到已经显示的功能,则不会执行content方法,因此不会发布弹出数据。

我可以在MapView的弹出窗口中访问当前选择的功能,但是我需要知道该功能来自哪一层才能正确发布数据(每一层对将ArcGIS数据处理到弹出窗口所使用的模型中都有独特的要求) 。

mapView.popup.watch('selectedFeature', (graphic: __esri.Graphic) => {
  const layer = ???;
  this.publishPopupData(layer, graphic.attributes);
});
Run Code Online (Sandbox Code Playgroud)

名义上,graphic.layer应该包含图层参考,但就我而言,它始终是null

有没有一种方法可以强制弹出窗口始终调用content方法,即使该方法已经针对给定功能执行了呢?或者,是否有办法获取要素所属的图层MapView.popup(或我未考虑的其他内容)?

如果重要的话,弹出窗口用于MapImageLayer子层。

Bel*_*dar 0

content当您返回到已显示的功能弹出窗口时,不会再次调用该函数是正常的。我认为问题在于popupComponent每次content调用函数时都会覆盖变量。相反,应该返回您将添加到新 html 元素this.publishPopupData()中的内容。

我将提供一个 javascript 答案,因为我不太了解 typescript:

layer.popupTemplate = new PopupTemplate({
  content: function(graphic) {
    var popupElement = document.createElement("div");
    //use popupElement.innerHTML if this.publishPopupData() returns a string or use popupElement.appendChild() if it's an html element
    popupElement.innerHTML = this.publishPopupData(layer, graphic.attributes); 
    return popupElement;
  },
  // other properties... 
});
Run Code Online (Sandbox Code Playgroud)