Broşür: Katman kontrol menüsü nasıl taşınır?


11

Bu aptalca bir soru olabilir, ancak bunu başarmak için belgelenmiş bir yol bulamadım.

Katman kontrol menüsünü, muhtemelen varsayılan yakınlaştırma / uzaklaştırma düğmesinin yanında sol üst köşeye serbestçe yerleştirmek istiyorum.

Katman denetimim şöyle görünür:

// 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);

Burada endpointMarkerLayerve linkLineLayersırasıyla işaretleyicileri ve çoklu çizgileri içeren katmanlardır.

Menünün nerede görüneceğini belirleme seçeneği var mı? Veya alternatif olarak, kontrol menüsünün DOM-objcet'ine nasıl başvuru alabilirim, böylece özel bir sınıf atayabilir ve CSS'deki konumlandırmayı geçersiz kılabilirim?

Yanıtlar:


14

Buradaki dokümanlara göre , katman kontrolü oluştururken konumu seçenek olarak aktarabilirsiniz.

Mevcut pozisyonlar burada açıklanmıştır

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

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

Vay canına, bunu nasıl özledim. Aptal hissediyorum ^ ^
fgysin Monica

Burada aynı şekilde ...
Stender

5

Kelso'nun yanıtı doğru. Ancak, dokümantasyon (ve API) biraz kafa karıştırıcı. Örneğin, bu örneğe dayalı olarak özel bir bilgi kutusu oluşturmak için: http://leafletjs.com/examples/choropleth.html bunu yapabilirsiniz:

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

Seçenekler kontrol nesnesinde ayarlanır. Dolayısıyla , bunu bir kaplama kontrolü konumlandırmak için yapabileceğinizi düşünebilirsiniz :

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

Yukarıda belirtildiği gibi bunu yapmanın doğru yolu:

// correct
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.