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เป็นชั้นที่มีเครื่องหมายและ polylines ตามลำดับ

มีตัวเลือกในการระบุตำแหน่งที่เมนูควรปรากฏหรือไม่? หรือมิฉะนั้นฉันจะได้รับการอ้างอิงถึง 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

คำตอบของ Kelso นั้นถูกต้อง อย่างไรก็ตามเอกสาร (และ 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);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.