Обновить карту Leftlet с помощью раскрывающегося списка в angular2

Я новичок в Angular2 и Leaflet Map. Я пытаюсь создать раскрывающийся список, изменение значения которого обновит карту до новой. Например, если в раскрывающемся списке указано Лондон, на карте будет показано положение Лондона, а если я изменю значение в раскрывающемся списке на Нью-Йорк, карта переместится в Нью-Йорк.

side-nav.component.ts --> здесь мой выпадающий код

<select class="form-control" [(ngModel)]="selectedGeo"  >
        <option value="" nonselected class="nonvalue">--Select--</option>
        <option *ngFor="let geoArea of geoAreas" value="{{geoArea.value}}">
            {{geoArea.value}}
        </option>
      </select>

сторона-nav.component.ts -->

geoAreas: Array<Object> =[] = [
{"id":"1","value":"New York"},
{"id":"2","value":"London"},
{"id":"3","value":"India"}

];

map.component.html

<div class="col-8">
    <div class="card">
        <div id="londonMap" style="height: 500px"></div>
</div>

map.component.ts

import { Component, OnInit } from '@angular/core';
import * as L from "leaflet";
import { Map } from "leaflet";

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css']
 })
export class MapComponent implements OnInit {
  public map: Map;
  constructor() { }
  ngOnInit() {

   this.londonMap = L.map("londonMap", {
     zoomControl: false,
      center: L.latLng(51.505, -0.09),
      zoom: 12,
      minZoom: 4,
      maxZoom: 19
  });

  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(this.londonMap);

  this.NYMap = L.map("NYMap", {
      zoomControl: false,
      center: L.latLng(42.736424, -75.762713),
      zoom: 7,
      minZoom: 4,
      maxZoom: 19
  });
   L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(NYMap);
}
}

person swastik padhy    schedule 26.04.2017    source источник
comment
Добро пожаловать в СО! Где ваш код для обработки изменения значения выбора?   -  person ghybs    schedule 26.04.2017


Ответы (1)


Вместо изменения контейнера карты вы можете просто запросить текущую карту, чтобы изменить ее вид, обычно используя setView, panTo или даже < a href="http://leafletjs.com/reference-1.0.3.html#map-flyto" rel="nofollow noreferrer">flyTo.

Если вы просто переключите контейнер карты, а пользователь уже перемещался/панорамировал новую карту, он/она просто увидит последнюю позицию, в которую была перемещена новая карта, вместо исходной позиции.

Вам нужно будет записать координаты пункта назначения в свой select или, по крайней мере, получить их из какой-либо централизованной переменной (может быть вашей geoAreas).

Вот пример с flyTo (простой JS): http://jsfiddle.net/3v7hd2vx/

person ghybs    schedule 26.04.2017
comment
Спасибо за ответ. У меня есть еще одна проблема с получением переменной карты из map.component.ts в side-nav.component.ts. Вот почему нельзя использовать эти настройки. - person swastik padhy; 26.04.2017