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

我最近开始用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  
    }       

$（document）.ready（函数init（）{
//启动传单地图
var map=new L.map（'cartodb-map'，{
中心：[51,9]，
缩放：4，
minZoom:3，
maxZoom:16，
});
//加载底图
var OSM=new L.tillelayer（'http://a{s}.acetate.geoiq.com/tiles/acetate hillshading/{z}/{x}/{y}.png'，
{属性：'©；'}）.addTo（映射）；
//从CartoDB加载数据
var layerUrl=http://intermodalmap.cartodb.com/api/v2/viz/0931f4e4-76f8-11e4-0e9d821ea90d/viz.json';
//装载卫星地图
var Esri_WorldImagement=新的L.Tillelayer（'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z} /{y}/{x}'{
属性：“Tiles©；Esri&mdash；来源：Esri、i-cubed、美国农业部、美国地质勘探局、AEX、GeoEye、Getmapping、Aerogrid、IGN、IGP、UPR-EGP和GIS用户社区”；
var baseLayers={“Standardkarte”：OSM，
“卫星卡丁车”：Esri_Worldimages}；
//创建地图
cartodb.createLayer（地图、图层、，
{https:true，
传说：没错，
cartodb_标志：假，
图层索引：1
})
.addTo（地图）
.on（'done'，function（）{
});
L.Control.Custom=L.Control.Layers.extend({
onAdd：函数（）{
这个；
这是一个按钮；
这个；
把这个放回集装箱；
},
_addButton:函数（）{
var elements=this.u container.getElementsByClassName（'传单-control-layers-list'）；
var button=L.DomUtil.create（'button'，'my button class'，elements[0]）；
button.innerText='Close control'；
L.DomEvent.on（按钮“点击”，功能（e）{
L.DomEvent.停止（e）；
这个；
}，这个）；
}
});
var control=new L.control.Custom（baseLayers，{“Alle Terminals”：layerUrl}，{collazed:false}）.addTo（map）；
//创建全屏按钮并将其添加到地图
全屏控制({
位置：“topleft”，//更改按钮的位置可以是topleft、topright、bottomright或bottomleft，defaut topleft
标题：'打开全屏'，//更改按钮的标题，默认全屏
titleCancel:'退出全屏模式'，//全屏打开时更改按钮标题，默认退出全屏
content:null，//更改按钮的内容，可以是HTML，默认为null
forceSeparateButton：true
}).addTo（地图）；
//进入或退出全屏时触发事件。
map.on（'enterFullscreen'，function（）{
console.log（“进入全屏”）；
});
on（'exitFullscreen'，function（）{
console.log（“退出全屏”）；
}); 
//添加比例
控制。比例（{公制：“m”，位置：“右下角”，英制：假}）；
//函数初始化结束
}       

---

)

您可以扩展

L.Control.Layers

并向其容器中添加元素，附加EventHandler，无论您需要什么。大概是这样的：

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

例如：

---

我想你应该放弃标签控件和图层-它们不会给你的问题增加任何内容。问题是，

L.control.Layers

中没有关闭按钮。我这样试过，但有两个问题：1。我的地图上再也没有任何数据点了。2.当我关闭图层控制窗口时，我无法再打开它。通常，当在StackOverflow one上发布问题时，会添加他们尝试过的内容、出现的错误、您遇到的错误等。提供一个测试用例/示例，以便可以重现问题等。这样，当人们花时间回答问题时，他们可以了解全部情况。请参阅：。也就是说，1）我在代码中看不到任何“数据点”，2）在我的示例中，打开和关闭都可以完美地工作，所以您一定是在做其他错误的事情。您的问题是：根据我的回答，是否可以添加关闭按钮？是的，您可以看到/尝试。对不起，我已经添加了完整的javascript。由于版权的原因，我不得不更改cartodb链接。我已将您推荐的代码添加到我的脚本中。但问题是，当我加载地图时，没有数据点（来自cartodb的数据点）。在示例（）中，您发送给我的“关闭”按钮根本不起作用。我添加了一个屏幕截图，它适合我。在Chrome、FF、IE、Edge和Opera中。至于带数据的cartodb层，我会在找到时间后立即编辑我的答案。我刚刚意识到你的示例在Chrome中可以工作，但在Firefox中关闭按钮只是一个小的灰色正方形。非常感谢。

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