手动关闭图层控制窗口(javascript) [英] Manually close layer control window (javascript)

问题描述

我最近开始使用javascript进行编程. 我在地图上添加了一个图层控制窗口.默认情况下它是打开的(有效).现在，我想向图层控制窗口添加一个关闭按钮.有可能吗?

I recently started programing in javascript. I have added a layer control window to my map. It's open by default (This works.). Now I want to add a close button to the layer control window. Is that possible?

这是我的代码:

$ (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  
    }       

)

推荐答案

您可以扩展L.Control.Layers并将元素添加到其容器中，并随便添加事件处理程序.像这样:

You can extend L.Control.Layers and add elements to it's container, attach eventhandlers, whatever you want. Something like this:

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

这篇关于手动关闭图层控制窗口(javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！