Question

我最近开始使用javascript进行编程。我在地图上添加了一个图层控制窗口。它默认是打开的（这有效）。现在我想在图层控制窗口中添加一个关闭按钮。这可能吗？

这是我的代码：

$ (document).ready(function init(){

// initiate leaflet map
var map = new L.Map('cartodb-map', { 
    center: [51,9],
    zoom: 4,
    minZoom:3,
    maxZoom: 16,
});

//load basemap
var OSM= new L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', 
    {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map);

//load data from CartoDB
var layerUrl= 'http://intermodalmap.cartodb.com/api/v2/viz/0931f4e4-76f8-11e4-0e9d821ea90d/viz.json';

//load satellit map
var Esri_WorldImagery = new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' });

var baseLayers = {  "Standardkarte": OSM, 
                    "Satellitenkarte": Esri_WorldImagery };

//create map
cartodb.createLayer(map, layerUrl,
    {https: true,
    legends: true,
    cartodb_logo:false,
    layerIndex: 1
    })
    .addTo(map)
    .on('done', function() {
    });

L.Control.Custom = L.Control.Layers.extend({
    onAdd: function () {
    this._initLayout();
    this._addButton();
    this._update();
    return this._container;
    },
_addButton: function () {
  var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
  var button = L.DomUtil.create('button', 'my-button-class', elements[0]);
  button.innerText = 'Close control';
  L.DomEvent.on(button, 'click', function(e){
    L.DomEvent.stop(e);
    this._collapse();
  }, this);
}
});

var control = new L.Control.Custom(baseLayers, {"Alle Terminals":layerUrl}, {collapsed:false}).addTo(map);

// create a fullscreen button and add it to the map
L.control.fullscreen({
    position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, defaut topleft
    title: 'Open fullscreen', // change the title of the button, default Full Screen
    titleCancel: 'Exit fullscreen mode', // change the title of the button when fullscreen is on, default Exit Full Screen
    content: null, // change the content of the button, can be HTML, default null
    forceSeparateButton: true
}).addTo(map);

// events are fired when entering or exiting fullscreen.
map.on('enterFullscreen', function(){
    console.log('entered fullscreen');
});

map.on('exitFullscreen', function(){
    console.log('exited fullscreen');
}); 



//add scale
L.control.scale({metric:"m", position:"bottomright", imperial:false}).addTo(map);


//end of function init  
    }

）

Answer 1

您可以扩展L.Control.Layers并向其添加元素容器，附加事件处理程序，无论您想要什么。像这样：

L.Control.Custom = L.Control.Layers.extend({
  onAdd: function () {
        this._initLayout();
        this._addButton();
        this._update();
        return this._container;
    },
    _addButton: function () {
      var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
      var button = L.DomUtil.create('button', 'my-button-class', elements[0]);
      button.innerText = 'Close control';
      L.DomEvent.on(button, 'click', function(e){
        L.DomEvent.stop(e);
        this._collapse();
      }, this);
    }
});

示例：http://plnkr.co/edit/Je7c0m?p=preview

Answer 2

cartodb.createLayer(map, layerUrl, {
    layerIndex: 1
}).addTo(map)
  .on('done', function(layer) {
        L.control.layers(baseLayers, 
            {data:layer}, 
            {collapsed:false}
        ).addTo(map);

        document.getElementById('closeBtn').addEventListener('click', function() {
            layer.setAttribute('style', 'display: none;').hide();
        });
    });

// and more shortly if jquery exists
$('#closeBtn').click(function() {
    layer.hide();
});

手动关闭图层控制窗口（javascript）

2 个答案: