0

我正在使用 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看起来像这样

标记集群数据

4

2 回答 2

4

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 事件，在进行上述更改后，您的地图应该专注于您的数据。

于 2018-07-29T12:02:39.237 回答
-1

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

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

于 2021-06-22T17:37:02.990 回答