单击地图上的事件不重新加载几何图形多边形角度10，ArcGIS 4.16

我有一张arcGIS地图，在角10。多边形将基于wkid和投影环值在地图上打印。我需要在单击地图时重新绘制多边形。单击事件使用最热的（）从地图收集ID，我需要重新绘制多边形。我正在使用“hitself.router.navigateByUrl（dashurl）；”重新加载页面以显示更新的多边形。但多边形未在与检索到的id对应的地图上绘制。我发现wkid和环的值没有正确更新。我做错什么了吗？请在下面找到我的代码

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

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { GisService } from '../shared/service/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 '../shared/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;
  id: 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 _basemap = 'hybrid';
  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;

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

  

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

    // this.mapalllayerview = false;

    this._selectedLayer = val;
    // Add the layer 15 to get the ID eve all other layers are disabled.
    if (this._selectedLayer.indexOf("15") === -1) {
      this._selectedLayer.push('15');
    }
    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) {
  }

  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

      // The layer 15 will be the stack at the top of the layers so 15 will be consider first.I c
      this.layersMapIdxArray.push('15');
      console.log(this.layersMapIdxArray);
      for (const idx of this.layersMapIdxArray) {
        this.layersDic[idx] = new FeatureLayer({
          url: `${this.esriMapUri}/${idx}`,
          visible: this.mapalllayerview,
          outFields: ['*'],
        });
        map.add(this.layersDic[idx]);
      }

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

      // Load details of ID 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.ID;
              var wind = attributes.ADDRESS;
              var name = attributes.ADDRESS;
              hitself.id = category;
              var dashurl = 'dashboard/' + hitself.id;
              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(
      'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'
    );

    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: 2,
                color: [255, 0, 0, 1],
              },
            },
          })
        );

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

  ngOnInit() {
    this.route.paramMap.subscribe((params) => {
      this.id = params.get('id');
      this.gisService.getidDetails(this.id).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;
    }
  }
}

导入{
组成部分，
奥尼特，
ViewChild，
ElementRef，
输入，
产出，
事件发射器，
OnDestroy，
NgZone
}从“@angular/core”开始；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“../shared/service/gis.service”导入{GisService}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从“rxjs/operators”导入{map}；
从“esri加载程序”导入{loadScript，loadModules}；
导入esri=\uuu esri；//Esri类型脚本类型
从'rxjs'导入{empty}；
从“../shared/config/app.config”导入{AppConfig}；
@组成部分({
选择器：“应用程序esri映射”，
templateUrl:'./esri map.component.html'，
样式URL:['./esri-map.component.css']，
})
导出类EsriMapComponent实现OnInit、OnDestroy{
@Output（）maploadeEvent=新事件发射器（）；
@ViewChild（'mapViewNode'，{static:true}）私有mapViewEl:ElementRef；
观点：任何；
炸药：任何；
wkid：任何；
id：任何；
loadingmap=true；
//保持加载的esri模块
esriModules={
图形：空，
几何图形：{
多边形：空，
空间引用：空，
支持：{webMercatorUtils:null}，
},
任务：{
GeometryService:null，
支持：{ProjectParameters:null}，
},
};
私有_zoom=20；
私有_basemap=‘混合’；
private _loaded=false；
private _view:esri.MapView=null；
私人_nextBasemap=‘街道’；
公共选择层：数组；
公共层MAPIDXRARY:字符串[]=['0'，'1'，'2']；
公共mapalllayerview：布尔值；
公共层DIC={}；
私有只读esriMapUri:string；
get-mapLoaded（）：布尔值{
返回此。\u已加载；
}
公用onLayerChange（val:Array）{
控制台日志（val）；
//隐藏所有层，然后再隐藏选定层
for（此.layersMapIdxArray的常数）{
this.layersDic[al].visible=false；
}
//this.mapalllayerview=false；
这是。\ u selectedLayer=val；
//在禁用所有其他层之前，添加层15以获取ID。
如果（此._选择Layer.indexOf（“15”）=-1）{
这个._选择layer.push（'15'）；
}
用于（val的常数v）{
this.layersDic[v].visible=true；
}
}
建造师(
私人gisService:gisService，
私有http:HttpClient，
专用路由：激活的路由，
专用路由器：路由器，
私人区域：NgZone，
私有appConfig:appConfig）{
}
异步初始化映射（）{
试一试{
loadScript（）；
//加载ArcGIS API for JavaScript的模块
常数[
EsriMap，
EsriMapView，
多边形，
空间参考，
webMercatorUtils，
GeometryService，
项目参数，
特征层，
BasemapToggle，
BasemapGallery，
图解的
]=等待加载模块([
“esri/Map”，
“esri/views/MapView”，
“esri/几何体/多边形”，
“esri/geometry/SpatialReference”，
“esri/geometry/support/webMercatorUtils”，
“esri/tasks/GeometryService”，
“esri/任务/支持/项目参数”，
“esri/图层/功能图层”，
“esri/widgets/BasemapToggle”，
“esri/widgets/BasemapGallery”，
“esri/图形”，
]);
//将模块保存在属性上以备以后使用
this.esriModules.geometry.Polygon=多边形；
this.esriModules.geometry.SpatialReference=空间参考；
this.esriModules.geometry.support.webMercatorUtils=webMercatorUtils；
this.esriModules.tasks.GeometryService=GeometryService；
this.esriModules.tasks.support.ProjectParameters=项目参数；
this.esriModules.graphic=图形；
//配置地图
常量mapProperties:esri.mapProperties={
基本地图：这个，
};
常量映射：esri.map=新的EsriMap（mapProperties）；
//初始化地图视图
常量mapViewProperties:esri.mapViewProperties={
容器：this.mapViewEl.nativeElement，
//中心：这个，
缩放：这个，
地图：地图，
};
此._视图=新的ESRIMPView（mapViewProperties）；
//根据选择向地图添加图层
//层15将是堆栈顶部的堆栈，因此15将首先考虑。
this.layersMapIdxArray.push（'15'）；
console.log（this.layersMapIdxArray）；
for（此.layersMapIdxArray的常量idx）{
this.layersDic[idx]=新功能层({
url:`${this.esriMapUri}/${idx}`，
可见：this.mapalllayerview，
外场：['*']，
});
map.add（this.layersDic[idx]）；
}
//Togle剖面底图
var basemapToggle=新的basemapToggle({
视图：此视图，
nextBasemap：这个，
});
这个.u view.ui.add（basemapToggle，“右下角”）；
//单击地图时加载ID的详细信息
让hitself=这个；
此._查看（'click'，函数（事件）{
hitself.\u视图
.hitTest（事件，{exclude:hitself.\u view.graphics}）
.然后（功能（响应）{
控制台日志（响应）；
如果(
响应的类型。结果！==“未定义”&&
response.results.length>0
) {
var graphic=响应。结果[0]。图形；
var属性=graphic.attributes；
变量类别=属性