geoToWebMercator 和投影多边形仅在单击缩放按钮 angular 10 后才会出现

如何解决geoToWebMercator 和投影多边形仅在单击缩放按钮 angular 10 后才会出现

我正在使用geographicToWebMercator 在我的地图上绘制特定区域。地图加载后，多边形应立即绘制。但是只有在单击缩放按钮后才会出现多边形。放大或缩小。代码在 arcgis 4.16 中运行良好 我已将 4.16 版升级到 ArcGIS 4.18 版。 请找到下面的代码，

import {
  Component,OnInit,ViewChild,ElementRef,Input,Output,EventEmitter,OnDestroy,ngzone
} from '@angular/core';

import { HttpClient,HttpHeaders } from '@angular/common/http';
  import { GisService } from '../search/gis.service';
  import { ActivatedRoute,Router } from '@angular/router';
  import { map } from 'rxjs/operators';
  import { loadScript,loadModules } from 'esri-loader';
  import esri = __esri; // Esri TypeScript Types
  import { empty } from 'rxjs';
  import { AppConfig } from '../config/app.config';

@Component({
  selector: 'app-esri-map',templateUrl: './esri-map.component.html',styleUrls: ['./esri-map.component.css'],})
export class EsriMapComponent implements OnInit,OnDestroy {
  @Output() mapLoadedEvent = new EventEmitter<boolean>();
  @ViewChild('mapViewNode',{ static: true }) private mapViewEl: ElementRef;
  view: any;
  dynamicRings: any;
  wkid: any;
  addr: any;
  loadingmap = true;
  // to keep loaded esri modules
  esriModules = {
    graphic: null,geometry: {
      polygon: null,SpatialReference: null,support: { webMercatorUtils: null },},tasks: {
      GeometryService: null,support: { ProjectParameters: null },};

  private _zoom = 20;
  private _center: Array<number> = [-95.937187,41.258652];
  private _basemap = 'gray-vector';
  private _loaded = false;
  private _view: esri.MapView = null;
  private _nextBasemap = 'streets';
  public _selectedLayer: Array<string>;

  public layersMapIdxArray: string[] = ['0','1','2'];
  public mapalllayerview: boolean;
  public layersDic = {};

  private readonly esriMapUri: string;
  private readonly gisGeometryServer: string;

  get mapLoaded(): boolean {
    return this._loaded;
  }

  @input()
  set zoom(zoom: number) {
    this._zoom = zoom;
  }

  get zoom(): number {
    return this._zoom;
  }

  @input()
  set center(center: Array<number>) {
    this._center = center;
  }

  get center(): Array<number> {
    return this._center;
  }

  @input()
  set basemap(basemap: string) {
    this._basemap = basemap;
  }

  get basemap(): string {
    return this._basemap;
  }

  @input()
  set nextBasemap(nextBasemap: string) {
    this._nextBasemap = nextBasemap;
  }

  get nextBasemap(): string {
    return this._nextBasemap;
  }

  public onLayerChange(val: Array<string>) {
    // hide all the layers before showing the selected layers
    for (const al of this.layersMapIdxArray) {
      this.layersDic[al].visible = false;
    }

    // layersDic is the feature layers added to the map
    for (const v of val) {
      this.layersDic[v].visible = true;
    }
  }

  constructor(
    private gisService: GisService,private http: HttpClient,private route: ActivatedRoute,private router: Router,private zone: ngzone,private appConfig: AppConfig) {
    this.esriMapUri = this.appConfig.getGisMapURL('');
    this.gisGeometryServer = this.appConfig.gisGeometryServer('');
  }

  async initializeMap() {
    try {
      loadScript();
      // Load the modules for the ArcGIS API for JavaScript
      const [
        EsriMap,EsriMapView,polygon,SpatialReference,webMercatorUtils,GeometryService,ProjectParameters,FeatureLayer,BasemapToggle,Basemapgallery,Graphic,] = await loadModules([
        'esri/Map','esri/views/MapView','esri/geometry/polygon','esri/geometry/SpatialReference','esri/geometry/support/webMercatorUtils','esri/tasks/GeometryService','esri/tasks/support/ProjectParameters','esri/layers/FeatureLayer','esri/widgets/BasemapToggle','esri/widgets/Basemapgallery','esri/Graphic',]);

      // save the modules on a property for later
      this.esriModules.geometry.polygon = polygon;
      this.esriModules.geometry.SpatialReference = SpatialReference;
      this.esriModules.geometry.support.webMercatorUtils = webMercatorUtils;
      this.esriModules.tasks.GeometryService = GeometryService;
      this.esriModules.tasks.support.ProjectParameters = ProjectParameters;
      this.esriModules.graphic = Graphic;

      // Configure the Map
      const mapProperties: esri.MapProperties = {
        basemap: this._basemap,};

      const map: esri.Map = new EsriMap(mapProperties);

      // Initialize the MapView
      const mapViewProperties: esri.MapViewProperties = {
        container: this.mapViewEl.nativeElement,// center: this._center,zoom: this._zoom,map: map,};

      this._view = new EsriMapView(mapViewProperties);

      // Add layers to the map according to the selection


      for (const idx of this.layersMapIdxArray) {
        this.layersDic[idx] = new FeatureLayer({
          url: `${this.esriMapUri}/${idx}`,visible: this.mapalllayerview,outFields: ['*'],});
        map.add(this.layersDic[idx]);
      }

      // The layer 15 will be the stack at the top of the layers so 15 will be consider first layer
      this.layersDic[15] = new FeatureLayer({
        url: `${this.esriMapUri}/15`,visible: true,});
      map.add(this.layersDic[15]);


      // Basemap toglle section
      var basemapToggle = new BasemapToggle({
        view: this._view,nextBasemap: this._nextBasemap,});
      this._view.ui.add(basemapToggle,'bottom-right');

      // Load details of SAID when click on the map
      let hitself = this;
      this._view.on('click',function (event) {
        hitself._view
          .hitTest(event,{ exclude: hitself._view.graphics })
          .then(function (response) {
            console.log(response);
            if (
              typeof response.results !== 'undefined' &&
              response.results.length > 0
            ) {
              var graphic = response.results[0].graphic;
              var attributes = graphic.attributes;
              var category = attributes.ADDRESS;
              // redirect to the corresponding SAID
              // window.location.href = `/dashboard/${category}`;
              // hitself.router.navigate(['dashboard',category]);
              hitself.addr = category;
              var dashurl = 'search/detail/' + hitself.addr;
              hitself.zone.run(() => {
                hitself.router.navigateByUrl(dashurl);
              });

            }
          });

        return;

      });

      await this._view.when(); // wait for map to load
      return this._view;
    } catch (error) {
      console.error('EsriLoader: ',error);
    }
  }

  // point geometry extent is null
  zoomToGeometry(geom) {
    // console.log(`Original Geometry: ${JSON.stringify(geom.toJSON())}`);

    const geomSer = new this.esriModules.tasks.GeometryService(this.gisGeometryServer);

    const outSpatialReference = new this.esriModules.geometry.SpatialReference({
      wkid: 102100,});

    const params = new this.esriModules.tasks.support.ProjectParameters({
      geometries: [geom],outSpatialReference,});

    const self = this;

    geomSer
      .project(params)
      .then(function (result) {
        const projectedGeom = result[0];

        if (!projectedGeom) {
          return;
        }

        // console.log(
        //   `Projected Geometry: ${JSON.stringify(projectedGeom.toJSON())}`
        // );
        return projectedGeom;
      })
      .then(function (polly) {
        // console.log(self.esriModules.graphic);
        self._view.graphics.add(
          new self.esriModules.graphic({
            geometry: polly,symbol: {
              type: 'simple-fill',style: 'solid',color: [255,0.1],outline: {
                width: 1,1],})
        );

        self._view.extent = polly.extent.clone().expand(3);
      });
  }

  ngOnInit() {
    this.route.paramMap.subscribe((params) => {
      this.addr = params.get('address');
      console.log(this.addr);
      
      this.gisService.getAddressDetails(this.addr).subscribe((posts) => {
        const get_wkid = posts[0]['spatialReference'];
        this.wkid = get_wkid['wkid'];
        const dynamicrings = posts[0]['features'];
        this.dynamicRings = dynamicrings[0]['geometry']['rings'];
      });

      this._selectedLayer = ['1','0','2'];
      // this.layersMapIdxArray = this._selectedLayer;
      this.mapalllayerview = true;

      this.initializeMap().then(() => {
        // The map has been initialized
        console.log('mapView ready: ',this._view.ready);
        const geom = new this.esriModules.geometry.polygon({
          spatialReference: {
            wkid: this.wkid,//102704,rings: this.dynamicRings,});

        this.zoomToGeometry(geom);
        console.log('mapView ready: ',this._view.ready);
        this._loaded = this._view.ready;
        this.mapLoadedEvent.emit(true);
        this.loadingmap = false;
      });
    });

  }

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