Angular中内容的ArcGIS 4.16弹出模板自定义功能

问题描述

我正在尝试从服务返回的结果中在弹出模板中添加自定义内容。服务功能在ngOninit（）或自定义功能（不属于弹出模板功能的一部分）中运行。在弹出式自定义模板功能中使用该服务时，该服务将无法收集结果。

请导入导入自定义服务的以下代码（仅包含主要部分）。

import { CustomService } from '../shared/service/custom.service';


 constructor(private customService: CustomService){}

 // Formation of the popup template
      var popupTrailheads = {
        title: "Unique id: {ID}",content: this.getcustomcontent,};

形成要素图层，弹出窗口应该来自此图层。

this.layer_fifteen = new FeatureLayer({
        url: `${this.esriURL}/15`,visible: true,outFields: ['*'],popupTemplate: popupTrailheads
      });

下面的函数getcustomcontent（）从服务中收集详细信息。

 public getcustomcontent(feature) {

// the service code
 this.customService.getIdDetails(popup_id).subscribe((posts) => {
//required to get the result from the service
}
}

当我使用try-catch时，它显示为'TypeError：无法读取null的属性'customService'。如何在弹出模板中使用服务？

解决方法

我认为您遇到了上下文问题。在执行this中的getcustomcontent值以呈现模板时，该值为空。

有一些选项可以设置函数的执行上下文。在下面的示例中，我正在使用bind。

popupTemplate: {
  content: this.customPopupFunction.bind(this) // <- here
}

基本上，我表示在调用customPopupFunction时应将其绑定到组件。这就是函数内部的this起作用的原因，并且它在弹出模板内容中呈现了组件的madeBy属性。

Mozilla Docs - bind

import { Component,OnInit,OnDestroy,ViewChild,ElementRef } from "@angular/core";
import { loadModules } from "esri-loader";

@Component({
  selector: 'app-esri-map',templateUrl: './esri-map.component.html',styleUrls: ['./esri-map.component.scss']
})
export class EsriMapComponent implements OnInit,OnDestroy {

  @ViewChild("mapViewNode",{ static: true }) private mapViewEl: ElementRef;
  view: any;

  // to keep loaded esri modules
  esriModules = {
    layers: {
      FeatureLayer: null
    }
  };

  madeBy = '@cabesuon';

  constructor() {}

  async initializeMap() {
    try {
      // Load the modules for the ArcGIS API for JavaScript
      const [
        Map,MapView,FeatureLayer
      ] = await loadModules([
        "esri/Map","esri/views/MapView","esri/layers/FeatureLayer"
      ]);

      // save the modules on a property for later
      this.esriModules.layers.FeatureLayer = FeatureLayer;

      // Create the FeatureLayer

      // USA counties layer
      var countiesLayer = new FeatureLayer({
        portalItem: {
          id: "cd13d0ed1c8f4b0ea0914366b4ed5bd6"
        },outFields: ["*"],minScale: 0,maxScale: 0,popupTemplate: {
          content: this.customPopupFunction.bind(this)
        }
      });

      // Configure the Map
      const mapProperties = {
        basemap: "streets",layers: [countiesLayer]
      };

      const map = new Map(mapProperties);

      // Initialize the MapView
      const mapViewProperties = {
        container: this.mapViewEl.nativeElement,map,zoom: 5,center: [-107.3567,37.7705]
      };

      this.view = new MapView(mapViewProperties);
      await this.view.when(); // wait for map to load
      return this.view;
    } catch (error) {
      console.error("EsriLoader: ",error);
    }
  }

  ngOnInit() {
    this.initializeMap().then(_ => {
      // The map has been initialized
      console.log("mapView ready: ",this.view.ready);
    });
  }

  ngOnDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }

  customPopupFunction(feature) {
    return `<p>This is <strong>${feature.graphic.attributes.NAME}</strong> county,state of <strong>${feature.graphic.attributes.STATE_NAME}</strong></p>` +
    `<p>This is an example of a custom popup content made by <span style="color:blue;">${this.madeBy}</span></p>`;
  }

}