如何找到添加到 leafletLayer 的多个标记的边界
How to find bounds of multiple markers added to leafletLayer
我在 Angular 6 项目中使用 ngx-leaflet,我在我的地图中绘制了多个标记,我想在多个标记上居中和缩放传单地图
在官方文档中,您可以使用 [L.latlngBounds] 来完成,并使用 L.featureGroup
找到其他解决方案
因为我用的是ngx-leaflet,所以没有L
变量,所以找不到latlngBounds
和featureGroup
这是我的组件:
import {latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';
export class CustomComponent implements OnInit {
options = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18})
],
zoom: 5,
center: latLng(46.879966, -121.726909)
};
layers = [];
fitBounds: LatLngBounds;
}
ngOnInit() {
for (let i = 0; i < this.locations.length; i++) {
this.layers.push(this.locations[i].y, this.locations[i].x].setIcon(
new Icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/icons/marker-icon.png',
shadowUrl: 'assets/icons/marker-shadow.png'
})));
}
}
}
还有我的模板:
<div id="map" leaflet
[leafletOptions]="options"
[leafletLayers]="layers"
[leafletFitBounds]="fitBounds">
</div>
感谢您的帮助
你必须导入它
如果你想使用featureGroup()
:
import {featureGroup, latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';
const marker1 = marker([51.5, -0.09]);
const marker2 = marker([50.5, -0.09]);
const group = featureGroup([marker1, marker2]);
group.addTo(map);
map.fitBounds(group.getBounds());
编辑:我忽略了你使用 ngx 的事实
由于您使用的是ngx-leaflet,因此您可以在leafletMapReady
event
中获取地图对象
修改您的指令:
<div style="height: 300px;"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)">
</div>
修改您的CustomComponent
(使用您的 ngOnInit 方法的内容调整此示例):
onMapReady(map: Map) {
const marker1 = marker([51.5, -0.09]);
const marker2 = marker([50, -0.09]);
const group = featureGroup([marker1, marker2]);
group.addTo(map);
map.fitBounds(group.getBounds());
}
我在 Angular 6 项目中使用 ngx-leaflet,我在我的地图中绘制了多个标记,我想在多个标记上居中和缩放传单地图
在官方文档中,您可以使用 [L.latlngBounds] 来完成,并使用 L.featureGroup
因为我用的是ngx-leaflet,所以没有L
变量,所以找不到latlngBounds
和featureGroup
这是我的组件:
import {latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';
export class CustomComponent implements OnInit {
options = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18})
],
zoom: 5,
center: latLng(46.879966, -121.726909)
};
layers = [];
fitBounds: LatLngBounds;
}
ngOnInit() {
for (let i = 0; i < this.locations.length; i++) {
this.layers.push(this.locations[i].y, this.locations[i].x].setIcon(
new Icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/icons/marker-icon.png',
shadowUrl: 'assets/icons/marker-shadow.png'
})));
}
}
}
还有我的模板:
<div id="map" leaflet
[leafletOptions]="options"
[leafletLayers]="layers"
[leafletFitBounds]="fitBounds">
</div>
感谢您的帮助
你必须导入它
如果你想使用featureGroup()
:
import {featureGroup, latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';
const marker1 = marker([51.5, -0.09]);
const marker2 = marker([50.5, -0.09]);
const group = featureGroup([marker1, marker2]);
group.addTo(map);
map.fitBounds(group.getBounds());
编辑:我忽略了你使用 ngx 的事实
由于您使用的是ngx-leaflet,因此您可以在leafletMapReady
event
修改您的指令:
<div style="height: 300px;"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)">
</div>
修改您的CustomComponent
(使用您的 ngOnInit 方法的内容调整此示例):
onMapReady(map: Map) {
const marker1 = marker([51.5, -0.09]);
const marker2 = marker([50, -0.09]);
const group = featureGroup([marker1, marker2]);
group.addTo(map);
map.fitBounds(group.getBounds());
}