Leaflet: Как переместить меню управления слоями?


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-объект меню управления, чтобы я мог назначить ему собственный класс и переопределить позиционирование в 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.