使用 ngx-leaflet 添加带有 angular 的 geoJson 层

Question

我已经使用 angular5 和 ngx-leaflet (https://github.com/Asymmetrik/ngx-leaflet) 设置了我的应用程序。

我从一张空白地图开始。当用户单击按钮时，地图上会出现标记。当用户选择一个标记时，该标记被识别为一个国家，并且该国家根据一些其他（不重要的）数据与其他国家相关联。

<div id="map-sidebar">
    <div class="map-buttons-bar">
        <button class="btn btn-primary" (click)="addLayer()">Set Marker</button>
    </div>
</div>

在我的 .ts 文件中，我有

addLayer(){
    var n_marker = marker([38.9072, -77.0369], {icon: this.anomalyIcon});
    n_marker.on('click', (e)=>{             
        this.mapToPartnerCountries();
    })
    this.lLayers.push(n_marker);
  }

mapToPartnerCountries(){

    var n_marker = marker([39.9072, -78.0369], {icon: this.anomalyIcon});
    this.lLayers.push(n_marker); 
    //var newLayer = geoJSON(geo as any);
    //this.lLayers.push(newLayer);
  }

我的问题是当 mapToPartnerCountries() 方法为运行时新层没有出现。但是，如果我再次单击该按钮，它就会出现。 GeoJson 也做同样的事情。我这样做的方式正确吗？

地图元素中还使用了 this.lLayers 字段...

<div class="map-container" 
            leaflet 
            [leafletOptions]="mapOptions" 
            [leafletLayersControl]="layersControl"
            [leafletLayers]="lLayers"
        >

Answer 1

Angular 使用区域来确定哪些事件触发和不触发变化检测。从模板传播的任何事件（例如，(click) 事件）都将触发更改检测，除非您专门将其配置为不触发。这就是为什么当您再次单击时，会应用更改。

传单活动有意设置为在 Angular 区域之外发生（出于各种原因，但主要与性能相关）。您可以阅读更多 here。如果更改发生在 Angular 区域之外，Angular 将不会检测到对组件属性所做的任何更改。

您正在标记点击事件的回调内部修改 this.lLayers，这很可能发生在 Angular 的区域之外。要将 Angular 更改为 "see"，您需要使用 NgZone.run().

在 Angular 的区域内执行此修改

例如：

constructor(private zone: NgZone) {}

addLayer(){
   var n_marker = marker([38.9072, -77.0369], {icon: this.anomalyIcon});
   n_marker.on('click', (e) => {

      this.zone.run(() => {         
         this.mapToPartnerCountries();
      });

   })
   this.lLayers.push(n_marker);
}

该代码将确保 this.mapToPartnerCountries(); 在 Angular 的区域内运行，以便执行更改检测。

使用 ngx-leaflet 添加带有 angular 的 geoJson 层

Add geoJson layer with angular with ngx-leaflet

angular

leaflet

angular-cli

ngx-leaflet