我如何使用角度8的服务更改esri地图视图？

Question

当您在滚动间谍中找到另一张幻灯片时，我正在尝试更改地图。我无法从服务中获取数字以用作数组的索引。我将项目放在here上stackblitz。这是app.component.ts

export class AppComponent  {
  slides=slides
  mapCenter = [-121.448637, 37.724050];
  basemapType = 'satellite';
  mapZoomLevel = 13;
  currentSection:any = 1;
  toggleSidebar() {
    if (document.getElementById("mySidebar").style.display === "none") {
    document.getElementById("mySidebar").style.display = "block";
  } else {
    document.getElementById("mySidebar").style.display = "none";
  }
  }
   constructor(private data: SlideService) { }
    ngOnInit() {
    this.currentSection = this.data.currentMessage.subscribe(msg => this.currentSection = msg.slice(-1));

    let zoomlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let zoom = slide.MapAttributes.Zoom
      zoomlist.push(zoom)
    }
    this.mapZoomLevel = zoomlist[(+(this.currentSection)-1)]

    let centerlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let center = slide.MapAttributes.MapCenter
      centerlist.push(center)
    }
    this.mapCenter = centerlist[(+(this.currentSection)-1)]
  }

这是html

<div class="row" style="height:100%;overflow-x:hidden">      
      <app-sidebar id="mySidebar"class="col-sm-4"></app-sidebar>
      <div  id='map-container'>
        <app-esri-map [center]="mapCenter" [basemap]="basemapType" [zoom]="mapZoomLevel" (mapLoaded)="mapLoadedEvent($event)"></app-esri-map>
      </div>
    <button (click)="toggleSidebar()" id= "infoToggle">current:{{currentSection}}</button>
</div>

这是服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SlideService {

  private messageSource = new BehaviorSubject<string>("slide1");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(msg: string) {
    this.messageSource.next(msg);
  }

}

Answer 1

也许您已经找到了问题的答案，但是这是我关于如何实现的建议。我假设您只想在幻灯片更改时修改地图的中心位置和缩放级别。

您已经将center和zoomLevel参数作为esri-map-component的输入，但是只要幻灯片更改，这些值就需要更新。这可以通过修改app-component来实现：

constructor(private data: SlideService) { }
    ngOnInit() {
    this.currentSection = this.data.currentMessage.subscribe(msg =>  { 
      this.currentSection = msg.slice(-1); 
      this.updateMapCenter();
      });
  this.updateMapCenter();
    
  }

  updateMapCenter() {
    let zoomlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let zoom = slide.MapAttributes.Zoom
      zoomlist.push(zoom)
    }
    this.mapZoomLevel = zoomlist[(+(this.currentSection)-1)]

    let centerlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let center = slide.MapAttributes.MapCenter
      centerlist.push(center)
    }
    this.mapCenter = centerlist[(+(this.currentSection)-1)]
  }

这样，每次幻灯片更改时，都会重新评估esri-map-component上的绑定。您现在要做的就是在esri-map-component上聆听这些更改：

ngOnChanges(changes) {
    if(this.mapView && changes && changes['center']) {
      this.mapView.goTo(this._center);
      this.mapView.zoom = this._zoom;      
    }
  }

mapView必须是esri-map-component本身的属性。

希望这会有所帮助！