0

当您到达滚动间谍中的另一张幻灯片时，我正在尝试更改地图。我无法从服务中获取一个数字以用作数组的索引。我把这个项目放在了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);
  }

}
4

1 回答 1

0

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

您已经将 center 和 zoomLevel 参数作为 esri-map-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 本身的属性。

希望这可以帮助！

于 2020-02-28T11:34:18.077 回答