地图上的Click事件未重新加载几何多边形Angular 10，ArcGIS 4.16

问题描述

我有一个角度为10的arcGIS地图。该多边形是根据wkid和投影环值绘制在地图上的。单击地图时，我需要重新绘制多边形。 click事件使用hottest（）从地图收集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.1],outline: {
                width: 2,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;
    }
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）