Как вы можете расположить элементы управления масштабированием внизу справа?

Я работаю с ngx-листовкой. По умолчанию на карте элементы управления масштабированием отображаются в левом верхнем углу. Однако я не могу найти, как можно изменить позиционирование этого.

Вот устаревший метод:

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)?

На снимке экрана показано, что для объекта управления отсутствует метод масштабирования: введите здесь описание изображения


leaflet ngx-leaflet
person Kode_12    schedule 14.06.2018    source источник
comment
Что произойдет, если вы попробуете вышеописанное? Это должно работать, если только они не сломали его в минорном обновлении версии Leaflet 1.x.   -  person reblace    schedule 14.06.2018
comment
в том-то и дело, что в классе карты нет свойства "control"   -  person Kode_12    schedule 14.06.2018
comment
пожалуйста, обратитесь к снимку экрана, который я сделал, чтобы показать вам, почему я не думаю, что могу использовать это в своем угловом компоненте   -  person Kode_12    schedule 14.06.2018
comment
@reblace Я использую листовку 1.3, ngx-листовку 3.0.2, если это поможет, есть идеи?   -  person Kode_12    schedule 15.06.2018
comment
Да, я думаю, все, что вам нужно сделать, это обновить оператор импорта до import { control, Map } from 'leaflet';, а затем указать ссылку control.zoom для фабричного метода. Разница в примере, который вы пробовали изначально, заключается в том, что он импортирует весь Leaflet в пространство имен L.   -  person reblace    schedule 15.06.2018
comment
ах, это было именно так, спасибо, ура!   -  person Kode_12    schedule 15.06.2018
comment
@reblace Мне было любопытно, есть ли у вас ответы на другой вопрос, который у меня есть здесь stackoverflow.com/questions/50923267/ границы недействительны   -  person Kode_12    schedule 19.06.2018

Ответы (1)


arrow_upward
4
arrow_downward

Поскольку вы используете прямой импорт, вы хотите сделать следующее:

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' }));
  }
person reblace    schedule 15.06.2018
comment
Есть ли способ сделать это без использования mapReady ? от zoomOptions? - person Ghizlane Lotfi; 23.01.2019
comment
Я помню, что в более поздних версиях Leaflet (v1+) была проблема, из-за которой вы не могли просто использовать параметры карты, чтобы установить положение элемента управления масштабированием. Вы должны указать параметры, чтобы удалить его, а затем вручную добавить новый. Когда-то (v0.7) он работал так, как и следовало ожидать. Это мое лучшее воспоминание, когда я заглянул в это - person reblace; 28.01.2019