Leaflet学习笔记-自制Legend
1 L.Control.Legend = L.Control.extend({ 2 options: { 3 position: 'bottomleft' ,//初始位置 4 content:'' 5 }, 6 initialize: function (options) { 7 L.Util.extend(this.options, options); 8 9 }, 10 onAdd: function (map) { 11 var options = this.options; 12 //创建一个class为leaflet-control-clegend的div 13 this._container = L.DomUtil.create('div', 'leaflet-control-clegend'); 14 //创建legend的内容 15 this._container.innerHTML = options.content; 16 //创建一个关闭控件的按钮 17 var closebutton = document.createElement('a'); 18 closebutton.id = 'leaflet-control-geosearch-close'; 19 closebutton.className = 'fa fa-remove leaflet-control-legend-close'; 20 this._closebutton = closebutton; 21 22 this._container.appendChild(this._closebutton); 23 //注册关闭事件 24 L.DomEvent.addListener(this._closebutton, 'click', this._onCloseControl, this); 25 26 return this._container; 27 }, 28 _onCloseControl: function () { 29 this._map.options.Legend = false; 30 this.removeFrom(this._map); 31 32 } 33 }); 34 35 L.control.legend = function (options) { 36 return new L.Control.Legend(options); 37 };
以上是放在src里面的 备份一下
调用方式如下
1 L.control.legend({ content: cnt }).addTo(map);
样式：
1 .leaflet-control-clegend { 2 width: 200px; 3 z-index: 9999; 4 background-color: white; 5 padding: 15px; 6 border-radius: 8px; 7 -webkit-box-shadow: 0 0 10px rgba(105, 105, 105, .5); 8 -moz-box-shadow: 0 0 10px rgba(105, 105, 105, .5); 9 box-shadow: 0 0 10px rgba(105, 105, 105, .5); 10 } 11 .leaflet-control-clegend ul { 12 margin:0; 13 padding:0; 14 } 15 16 .leaflet-control-clegend ul li { 17 font-family:'Microsoft YaHei'; 18 font-size:16px; 19 margin-bottom:5px; 20 list-style-type: none; 21 padding-left:10px 22 } 23 24 .leaflet-control-legend-close { 25 position: absolute; 26 right: 10px; 27 top: 10px; 28 }
