Как мне изменить вид карты esri на услугу angular 8? - PullRequest
Новая
       12

Как мне изменить вид карты esri на услугу angular 8?

0 голосов
/ 06 февраля 2020

Я пытаюсь заставить карту измениться, когда вы достигнете другого слайда в шпионе прокрутки. У меня проблемы с получением номера из сервиса для использования в качестве индекса для массива. Я поставил проект здесь на 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);
  }

}

1 Ответ

0 голосов
/ 28 февраля 2020

Возможно, вы уже нашли ответ на свой вопрос, но вот мои предложения о том, как этого добиться. Я предполагаю, что вы хотите изменять только центральное положение и уровень масштабирования вашей карты всякий раз, когда меняется ваш слайд.

Вы уже передаете параметры 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 переоцениваются при каждой смене слайда. Все, что вам нужно сделать сейчас, это прослушать эти изменения в вашем esri-map-component: 

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

MapView должен быть свойством самого компонента esri-map.

Надеюсь, это поможет!

...