Tờ rơi: Làm thế nào để di chuyển menu điều khiển lớp?

Đây có thể là một câu hỏi ngớ ngẩn, nhưng tôi không thể tìm thấy một cách tài liệu để đạt được điều này.

Tôi muốn tự do định vị menu điều khiển lớp, có thể ở phía trên bên trái gần nút phóng to / thu nhỏ mặc định.

Kiểm soát lớp của tôi trông như thế này:

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

Trong đó endpointMarkerLayervà linkLineLayerlà các lớp có chứa các dấu hiệu và polylines tương ứng.

Có một tùy chọn để xác định nơi menu sẽ xuất hiện? Hoặc cách khác, làm thế nào tôi có thể nhận được một tham chiếu đến DOM-objcet của menu điều khiển, để tôi có thể gán cho nó một lớp tùy chỉnh và ghi đè định vị trong CSS?

Theo các tài liệu ở đây , bạn có thể chuyển vị trí dưới dạng tùy chọn khi tạo điều khiển lớp.

Vị trí có sẵn được phác thảo ở đây

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

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

Câu trả lời của Kelso là đúng. Tuy nhiên, tài liệu (và API) hơi khó hiểu. Ví dụ: để tạo hộp thông tin tùy chỉnh, dựa trên ví dụ này: http://leafletjs.com/examples/choropleth.html bạn có thể làm điều này:

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

Các tùy chọn được đặt trên đối tượng điều khiển. Vì vậy, người ta có thể nghĩ rằng bạn có thể làm điều này để định vị một điều khiển lớp phủ:

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

Cách chính xác để làm điều này, như đã nêu ở trên, là:

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