如何将缩放控件定位到右下角?
How can you position zoom controls to bottom right?
我正在使用 ngx-leaflet。默认情况下,地图在左上角显示缩放控件。但是我找不到如何改变它的定位。
这是一个过时的方法:
options = {
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
zoom: 5,
zoomControl: false,
center: L.latLng(46.879966, -121.726909)
};
mapReady(map: L.Map) {
map.addControl(L.control.zoom({ position: 'bottomright' }));
}
.
<div class="leaflet-container grow z-0" leaflet [leafletZoom]="leafletZoom" [leafletCenter]="leafletCenter" (leafletMapReady)="($event)">
<div [leafletLayer]="tileLayer"></div>
<div *ngFor="let marker of markerLayers " [leafletLayer]="marker"></div>
</div>
是否有使用最新版本的 ngx-leaflet (3.0) 执行此操作的更新方法?
这是显示控件对象上没有缩放方法的屏幕截图:
由于您使用的是直接导入,因此您需要执行以下操作:
import { control, Map, latLng, tileLayer } from 'leaflet';
options = {
layers: tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
zoom: 5,
zoomControl: false,
center: latLng(46.879966, -121.726909)
};
mapReady(map: Map) {
map.addControl(control.zoom({ position: 'bottomright' }));
}
我正在使用 ngx-leaflet。默认情况下,地图在左上角显示缩放控件。但是我找不到如何改变它的定位。
这是一个过时的方法:
options = {
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
zoom: 5,
zoomControl: false,
center: L.latLng(46.879966, -121.726909)
};
mapReady(map: L.Map) {
map.addControl(L.control.zoom({ position: 'bottomright' }));
}
.
<div class="leaflet-container grow z-0" leaflet [leafletZoom]="leafletZoom" [leafletCenter]="leafletCenter" (leafletMapReady)="($event)">
<div [leafletLayer]="tileLayer"></div>
<div *ngFor="let marker of markerLayers " [leafletLayer]="marker"></div>
</div>
是否有使用最新版本的 ngx-leaflet (3.0) 执行此操作的更新方法?
这是显示控件对象上没有缩放方法的屏幕截图:
由于您使用的是直接导入,因此您需要执行以下操作:
import { control, Map, latLng, tileLayer } from 'leaflet';
options = {
layers: tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
zoom: 5,
zoomControl: false,
center: latLng(46.879966, -121.726909)
};
mapReady(map: Map) {
map.addControl(control.zoom({ position: 'bottomright' }));
}