arcgis - geographicToWebMercator and Projected polygon appears only after click on zoom buttons angular 10

Question

I am using geographicToWebMercator to draw a specific area on my map. The Polygon should draw as soon as the map loads. But the polygon is appearing only after click on the zoom buttons. either zoom in or zoom out. The code was working fine in arcgis 4.16 I have the upgraded version 4.16 to ArcGIS version 4.18. Please find the code below,

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,
        outFields: ['*'],
      });
      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, 0, 0.1],
              outline: {
                width: 1,
                color: [255, 0, 0, 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;
    }
  }
}
 

Answer 1

等待大神答复