通过angular2中的下拉刷新Leftlet Map答案

【问题标题】：Refresh Leftlet Map by a drop down in angular2通过angular2中的下拉刷新Leftlet Map
【发布时间】：2017-04-26 02:12:22
【问题描述】：

我是 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>

side-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);
}
}

【问题讨论】：

欢迎来到 SO！处理选择值更改的代码在哪里？

标签： angular leaflet angular-leaflet-directive

【解决方案1】：

您可以非常简单地请求当前地图更改其视图，而不是更改地图容器，通常使用setView、panTo 甚至flyTo。

如果您只是切换地图容器，并且用户已经在新地图周围移动/平移，他/她将只会看到新地图移动到的最后位置，而不是初始位置。

您需要将目的地坐标记录到您的select，或者至少从某个集中变量（可能是您的geoAreas）中检索它们。

这里是flyTo（纯JS）的示例：http://jsfiddle.net/3v7hd2vx/

【讨论】：

感谢您的回复。我在从 side-nav.component.ts 中的 map.component.ts 获取地图变量方面还有一个问题。这就是为什么无法使用此设置的原因。