angular

Question

我正在使用 angular 6 和 ngx-leaflet。我正在加载数据后端，并在地图上加载数据后尝试缩放到区域（在本例中为印度）。

我的html长相：

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

在 .ts 中

@Component({
    templateUrl: 'details.component.html'
})

export class DetailsComponent implements OnInit {

LAYER_OSM = {
    enabled: false,
    layer: L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 17,
        minZoom: 2,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
        detectRetina: true,
    })
};

layersControlOptions = { position: 'bottomright' };
baseLayers = {
    'Google': this.LAYER_OSM.layer
};
options = {
    zoom: 3,
    center: L.latLng([0.0, 0.0])
};
markerClusterGroup: L.MarkerClusterGroup;
markerClusterData: any[] = [];
markerClusterOptions: L.MarkerClusterGroupOptions = {};
fitBounds: any = null; // = [[46.67, -122.25], [47.01, -121.302]];
fGroup = L.featureGroup();
constructor(private mapDataService: MapDataService) { }

ngOnInit() {
    this.mapDataService.getMapData(this.nav)
        .subscribe(res => { this.generateData(res) });
}

onMapReady(map: L.Map) {
    map.fitBounds(map.getBounds(),{
        maxZoom: 12,
        animate: true
      });
 }

markerClusterReady(group: L.MarkerClusterGroup) {
    this.markerClusterGroup = L.markerClusterGroup();
}

generateData(res: any[]) {
    const data: any[] = [];
    res.forEach(function (item) {
        const icon = L.icon({
            iconSize: [25, 41],
            iconAnchor: [13, 41],
            iconRetinaUrl: 'leaflet/marker-icon-2x.png',
            iconUrl: 'leaflet/marker-icon.png',
            shadowUrl: 'leaflet/marker-shadow.png'
        });

        data.push(L.marker([item.latitude, item.longitude], { icon }));
    })

    this.markerClusterData = data;
}
}

onMapReady(map: L.Map), map.getBounds() 总是返回一个坐标，但不是我需要的那个。

我也尝试过使用 [leafletFitBounds]，但我无法获得正确的反弹。首先是现在的样子。我正在努力实现的第二个目标。

提前致谢。

this.markerClusterData 看起来像这样

Answer 1

map.getBounds() 返回地图的当前边界，而不是加载到您的 markerClusterData 中的数据的边界。

在您的 html 中，添加一行以将 "leafletFitBounds" 输入属性绑定到您的 .ts 文件中的属性，例如：

[leafletFitBounds]="mapFitToBounds"

在您的 ts 文件中，添加新的属性

mapFitToBounds: L.LatLngBounds;

要控制最大缩放和填充等，您还可以将“[leafletFitBoundsOptions]”属性添加到您的 html 和 ts，例如：

[leafletFitBoundsOptions]="mapFitToBoundsOptions"

在您的 ts 文件中，添加新的属性

mapFitToBoundsOptions: L.FitBoundsOptions;

要在您的 ts 中使用这些输入属性，您需要在 ngOnInit() 中配置您的 "mapFitToBoundsOptions"，例如：

this.mapFitToBoundsOptions = {maxZoom: 12, animate: true};

有关可配置的更多设置，请检查：https://leafletjs.com/reference-1.3.2.html#fitbounds-options

现在要获得正确的边界，您需要在 this.markerClusterData 上调用 .getBounds() 一旦您加载了数据，您可以在您的订阅或您的 generateData 函数中执行此操作，如果您更改您的订阅, 下面是它的外观示例：

this.mapDataService.getMapData(this.nav).subscribe(res => { 
  this.generateData(res);

  // Focus the map view to the boundaries of the marker group
  this.mapFitToBounds = this.markerClusterData.getBounds();
});

从您的代码中删除 onMapReady 事件，进行上述更改后，您的地图应该关注您的数据。

Answer 2

您可以使用 .fitBounds() 和 .getBounds() 函数缩放地图。在我的代码中，这对我有用：

this.map.fitBounds(this.layer.getBounds());

angular - ngx-leaflet 自动集中到有关加载数据的特定区域

angular - ngx-leaflet auto centralize to specific area regarding loading data

leaflet

ngx-leaflet