时间戳

首页 > 解决方案 > ngx-leaflet 在 Dropbox 选择的值更改后重新加载地图

angular - ngx-leaflet 在 Dropbox 选择的值更改后重新加载地图

问题描述

我有几个方程（即公里，米，厘米）的保管箱。最初加载了 km 值的地图。

 <div leaflet style="height: 800px; width: 100%" 
  [leafletOptions]="options" 
  (leafletMapReady)="onMapReady($event)" 
  [leafletBaseLayers]="baseLayers"
  [leafletMarkerCluster]="markerClusterData" 
  [leafletMarkerClusterOptions]="markerClusterOptions"
  (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

如果用户选择仪表，我想用新的计算重新加载/刷新地图（即 km*1000）。主要是想更新弹出窗口和图例，但是完全重新加载地图就可以了。如何发出事件以使用新值重新加载地图？谢谢

标签： angularleafletngx-leaflet

解决方案

我不确定我是否完全理解你的问题，但也许是这样？

在 HTML 模板中：

<select (change)="changed($event)">
  <option value="km">km</option>
  <option value="m">m</option>
  <option value="cm">cm</option>
</select>

在 TS 文件中：

changed($event) {
 reloadWithUnits($event.srcElement.value);
}

对于@angular/material：

<mat-select (valueChange)="changedMat($event)" placeholder="Select units">
  <mat-option value="km">km</mat-option>
  <mat-option value="m">m</mat-option>
  <mat-option value="cm">cm</mat-option>
</mat-select>

和 TS：

changedMat($event) {
 reloadWithUnits($event);
}

在reloadWithUnits();我会尝试改变options或任何单位。它应该被检测为已更改，因为它是传单的输入参数。

推荐阅读