Листовка: Як перемістити меню контролю шарів?


11

Це може бути дурним питанням, але я не зміг знайти документально підтверджений спосіб досягти цього.

Я хотів би вільно розташувати меню контролю шарів, можливо, вгорі ліворуч біля кнопки збільшення / зменшення за замовчуванням.

Мій елемент управління шаром виглядає приблизно так:

// Group layers as overlay pane
overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane);
layerControl.addTo(map);

Де endpointMarkerLayerі linkLineLayerє шари, що містять маркери та полілінії відповідно.

Чи є можливість вказати, де має з’являтися меню? Або, як я можу отримати посилання на DOM-objcet меню керування, щоб я міг призначити його спеціальним класом і змінити позиціонування у CSS?

Відповіді:


14

Згідно з документами тут , ви можете передавати позицію в якості опції під час створення елемента управління шаром.

Доступні позиції викладені тут

overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer,
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane, {position: 'topleft'});
layerControl.addTo(map);

Нічого собі, як я це пропустив. Почуття дурного. ^^
fgysin відновила Моніку

Тут же так само ...
Стендер

5

Відповідь Кельсо правильна. Однак документація (та API) трохи заплутана. Наприклад, щоб створити спеціальне інформаційне поле на основі цього прикладу: http://leafletjs.com/examples/choropleth.html ви можете зробити це:

var mapInfo = L.control({position:'topleft'});

info.onAdd = function (map) {
  this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
  this.update();
  return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
    '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
    : 'Hover over a state');
};

info.addTo(map);

Параметри встановлюються на об'єкт управління. Тож можна подумати, що ви можете це зробити, щоб розташувати керування накладення:

// incorrect
var layerControl = L.control({position:'topleft'}).layers(null, mapOverlays).addTo(map);

Правильний спосіб зробити це, як зазначено вище:

// correct
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.