属性绑定映射单击事件，在ngx传单/Angular 2中使用下拉选择输入

我有一张带有区域多边形的地图。在地图下面，我有一个下拉选择输入，可以动态地读取多边形名称作为选项。当用户单击地图上的区域多边形时，我希望下拉选择输入使用选定的多边形名称（作为geojson文件中的“名称”字段存在）进行更新

我认为实现这一点的方法是在HTML模板文件中使用属性绑定。因此，在我的select类中，我将value属性设置为单击的值，如下所示：

<select class="form-control" id="selectRegion" [value]="clicked">

App.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { HttpClientModule } from '@angular/common/http';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LeafletModule.forRoot(),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.component.html：

<div class="map"
  leaflet
  [leafletLayers]="layers"
     [leafletFitBounds]="fitBounds"></div>
<div class="form-group">
  <select class="form-control" id="selectRegion" [value] = "clicked">
    <option *ngFor="let region of regions">{{ region }}</option>
  </select>
</div>

{{区域}}

App.component.ts：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  layers: L.Layer[];
  fitBounds = [[46.67, -122.25], [47.01, -121.302]];
  regions = [];
  clicked = '';

  constructor(private http: HttpClient) { }

  ngOnInit() {

    // read in geojson of poly
    this.http.get<any>('/assets/polygons.geojson')
      .subscribe(poly => {

        const tileLayer = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', {
          subdomains: 'abcd',
          maxZoom: 19
        });

        const polyLayer = L.geoJSON(poly, {
          onEachFeature: this.onEachFeature.bind(this)
        });

        this.layers = [ tileLayer, polyLayer ];
        console.log(this);
      });
  }

  // loop through each feature of polyLayer
  onEachFeature(feature, layer) {

    // push polygon names to regions array
    this.regions.push(feature.properties.name);

    layer.on('click', <LeafletMouseEvent> (e) => {
      this.clicked = e.target.feature.properties.name;
      console.log(this.clicked);
    });
  }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
从“传单”中输入*作为L；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
图层：L.图层[]；
fitBounds=[[46.67，-122.25]，[47.01，-121.302]；
区域=[]；
点击=''；
构造函数（私有http:HttpClient）{}
恩戈尼尼特（）{
//读入poly的geoson
this.http.get（'/assets/polygons.geojson'）
.订阅（poly=>{
const tileLayer=L.tileLayer（'https://cartodb-basemaps-{s} .global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png'{
子域：“abcd”，
最大缩放：19
});
const polyLayer=L.geoJSON（多边形{
onEachFeature:this.onEachFeature.bind（this）
});
this.layers=[tileLayer，polyLayer]；
console.log（this）；
});
}
//循环浏览多段图层的每个特征
onEachFeature（特征，图层）{
//将多边形名称推送到区域数组
this.regions.push（feature.properties.name）；
层上（'点击'，（e）=>{
this.clicked=e.target.feature.properties.name；
console.log（this.clicked）；
});
}
}

onEachFeature函数和

层。on（'click'…

事件回调可能在角度区域外调用。如果是这种情况，则更改检测将不会自动工作。您应该在

区域中包装更改。run（）

调用以确保在角度区域中进行更改-如本例所示：

// loop through each feature of polyLayer
onEachFeature(feature, layer) {

  this.zone.run(() => {
    // push polygon names to regions array
    this.regions.push(feature.properties.name);

    layer.on('click', <LeafletMouseEvent> (e) => {
      this.zone.run(() => {
        this.clicked = e.target.feature.properties.name;
        console.log(this.clicked);
      }
    });
  }

}

//循环浏览polyLayer的每个功能
onEachFeature（特征，图层）{
此.zone.run（（）=>{
//将多边形名称推送到区域数组
this.regions.push（feature.properties.name）；
层上（'点击'，（e）=>{
此.zone.run（（）=>{
this.clicked=e.target.feature.properties.name；
console.log（this.clicked）；
}
});
}
}

您可以按照以下说明（）来了解这是如何工作的，并将ngZone实例注入到您的组件中

// loop through each feature of polyLayer
onEachFeature(feature, layer) {

  this.zone.run(() => {
    // push polygon names to regions array
    this.regions.push(feature.properties.name);

    layer.on('click', <LeafletMouseEvent> (e) => {
      this.zone.run(() => {
        this.clicked = e.target.feature.properties.name;
        console.log(this.clicked);
      }
    });
  }

}