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             }

 

转载于:https://www.cnblogs.com/CoffeeEddy/p/6389407.html