https://numisdata.org/web/tpl/assets/lib/leaflet/leaflet.legend.js?2.1.16

1(function (factory, window) {
2    // define an AMD module that relies on 'leaflet'
3    if (typeof define === "function" && define.amd) {
4        define(["leaflet"], factory);
5
6        // define a Common JS module that relies on 'leaflet'
7    } else if (typeof exports === "object") {
8        module.exports = factory(require("leaflet"));
9    }
10
11    // attach your plugin to the global 'L' variable
12    if (typeof window !== "undefined" && window.L) {
13        factory(L);
14    }
15})(function (L) {
16    class LegendSymbol {
17        constructor(control, container, legend) {
18            this._control = control;
19            this._container = container;
20            this._legend = legend;
21            this._width = this._control.options.symbolWidth;
22            this._height = this._control.options.symbolHeight;
23        }
24    }
25
26    class GeometricSymbol extends LegendSymbol {
27        constructor(control, container, legend) {
28            super(control, container, legend);
29
30            this._canvas = this._buildCanvas();
31            if (this._drawSymbol) {
32                this._drawSymbol();
33            }
34            this._style();
35        }
36
37        _buildCanvas() {
38            var canvas = L.DomUtil.create("canvas", null, this._container);
39            canvas.height = this._control.options.symbolHeight;
40            canvas.width = this._control.options.symbolWidth;
41            return canvas;
42        }
43
44        _drawSymbol() {}
45
46        _style() {
47            var ctx = (this._ctx = this._canvas.getContext("2d"));
48            if (this._legend.fill || this._legend.fillColor) {
49                ctx.globalAlpha = this._legend.fillOpacity || 1;
50                ctx.fillStyle = this._legend.fillColor || this._legend.color;
51                ctx.fill(this._legend.fillRule || "evenodd");
52            }
53
54            if (this._legend.stroke || this._legend.color) {
55                if (this._legend.dashArray) {
56                    ctx.setLineDash(this._legend.dashArray || []);
57                }
58                ctx.globalAlpha = this._legend.opacity || 1.0;
59                ctx.lineWidth = this._legend.weight || 2;
60                ctx.strokeStyle = this._legend.color || "#3388ff";
61                ctx.lineCap = this._legend.lineCap || "round";
62                ctx.lineJoin = this._legend.lineJoin || "round";
63                ctx.stroke();
64            }
65        }
66
67        rescale() {}
68
69        center() {}
70    }
71
72    class CircleSymbol extends GeometricSymbol {
73        _drawSymbol() {
74            var ctx = (this._ctx = this._canvas.getContext("2d"));
75
76            var legend = this._legend;
77            var linelWeight = legend.weight || 3;
78
79            var centerX = this._control.options.symbolWidth / 2;
80            var centerY = this._control.options.symbolHeight / 2;
81            var maxRadius = Math.min(centerX, centerY) - linelWeight;
82            var radius = maxRadius;
83            if (legend.radius) {
84                radius = Math.min(legend.radius, maxRadius);
85            }
86
87            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
88        }
89    }
90
91    class PolylineSymbol extends GeometricSymbol {
92        _drawSymbol() {
93            var ctx = (this._ctx = this._canvas.getContext("2d"));
94
95            var x1 = 0;
96            var x2 = this._control.options.symbolWidth;
97            var y = this._control.options.symbolHeight / 2;
98
99            ctx.beginPath();
100            ctx.moveTo(x1, y);
101            ctx.lineTo(x2, y);
102        }
103    }
104
105    class RectangleSymbol extends GeometricSymbol {
106        _drawSymbol() {
107            var ctx = (this._ctx = this._canvas.getContext("2d"));
108            var linelWeight = this._legend.weight || 3;
109
110            var x0 = this._control.options.symbolWidth / 2;
111            var y0 = this._control.options.symbolHeight / 2;
112
113            var rx = x0 - linelWeight;
114            var ry = y0 - linelWeight;
115            if (rx == ry) {
116                ry = ry / 2;
117            }
118            ctx.rect(x0 - rx, y0 - ry, rx * 2, ry * 2);
119        }
120    }
121
122    /**
123     * 圆心坐标：(x0,y0) 半径：r 角度(X轴顺时针旋转)：a
124     * 弧度 = 角度 * Math.PI / 180
125     * 则圆上任一点为：（x1,y1）
126     * x1   =   x0   +   r   *   Math.cos( a  * Math.PI / 180)
127     * y1   =   y0   +   r   *   Math.sin( a  * Math.PI / 180)
128     */
129    class PolygonSymbol extends GeometricSymbol {
130        _drawSymbol() {
131            var ctx = (this._ctx = this._canvas.getContext("2d"));
132
133            var linelWeight = this._legend.weight || 3;

134            var x0 = this._control.options.symbolWidth / 2;
135            var y0 = this._control.options.symbolHeight / 2;
136            var r = Math.min(x0, y0) - linelWeight;
137            var a = 360 / this._legend.sides;
138            ctx.beginPath();
139            for (var i = 0; i <= this._legend.sides; i++) {
140                var x1 = x0 + r * Math.cos(((a * i + (90 - a / 2)) * Math.PI) / 180);
141                var y1 = y0 + r * Math.sin(((a * i + (90 - a / 2)) * Math.PI) / 180);
142                if (i == 0) {
143                    ctx.moveTo(x1, y1);
144                } else {
145                    ctx.lineTo(x1, y1);
146                }
147            }
148        }
149    }
150
151    class ImageSymbol extends LegendSymbol {
152        constructor(control, container, legend) {
153            super(control, container, legend);
154            this._img = null;
155            this._loadImages();
156        }
157
158        _loadImages() {
159            var imageLoaded = () => {
160                this.rescale();
161            };
162            var img = L.DomUtil.create("img", null, this._container);
163            this._img = img;
164            img.onload = imageLoaded;
165            img.src = this._legend.url;
166        }
167
168        rescale() {
169            if (this._img) {
170                var _options = this._control.options;
171                if (this._img.width > _options.symbolWidth || this._img.height > _options.symbolHeight) {
172                    var imgW = this._img.width;
173                    var imgH = this._img.height;
174                    var scaleW = _options.symbolWidth / imgW;
175                    var scaleH = _options.symbolHeight / imgH;
176                    var scale = Math.min(scaleW, scaleH);
177                    this._img.width = imgW * scale;
178                    this._img.height = imgH * scale;
179                }
180                this.center();
181            }
182        }
183
184        center() {
185            var containerCenterX = this._container.offsetWidth / 2;
186            var containerCenterY = this._container.offsetHeight / 2;
187            var imageCenterX = parseInt(this._img.width) / 2;
188            var imageCenterY = parseInt(this._img.height) / 2;
189
190            var shiftX = containerCenterX - imageCenterX;
191            var shiftY = containerCenterY - imageCenterY;
192
193            this._img.style.left = shiftX.toString() + "px";
194            this._img.style.top = shiftY.toString() + "px";
195        }
196    }
197
198    L.Control.Legend = L.Control.extend({
199        options: {
200            position: "topleft",
201            title: "Legend",
202            legends: [],
203            symbolWidth: 24,
204            symbolHeight: 24,
205            opacity: 1.0,
206            column: 1,
207            collapsed: false,
208        },
209
210        initialize: function (options) {
211            L.Util.setOptions(this, options);
212            this._legendSymbols = [];
213            this._buildContainer();
214        },
215
216        onAdd: function (map) {
217            this._map = map;
218            this._initLayout();
219            return this._container;
220        },
221
222        _buildContainer: function () {
223            this._container = L.DomUtil.create("div", "leaflet-legend leaflet-bar leaflet-control");
224            this._container.style.backgroundColor = "rgba(255,255,255, " + this.options.opacity + ")";
225
226            this._contents = L.DomUtil.create("section", "leaflet-legend-contents", this._container);
227            this._link = L.DomUtil.create("a", "leaflet-legend-toggle", this._container);
228            this._link.title = "Legend";
229            this._link.href = "#";
230
231            var title = L.DomUtil.create("h3", "leaflet-legend-title", this._contents);
232            title.innerText = this.options.title || "Legend";
233
234            var len = this.options.legends.length;
235            var colSize = Math.ceil(len / this.options.column);
236            var legendContainer = this._contents;
237            for (var i = 0; i < len; i++) {
238                if (i % colSize == 0) {
239                    legendContainer = L.DomUtil.create("div", "leaflet-legend-column", this._contents);
240                }
241                var legend = this.options.legends[i];
242                this._buildLegendItems(legendContainer, legend);
243            }
244        },
245
246        _buildLegendItems: function (legendContainer, legend) {
247            var legendItemDiv = L.DomUtil.create("div", "leaflet-legend-item", legendContainer);
248            if (legend.inactive) {
249                L.DomUtil.addClass(legendItemDiv, "leaflet-legend-item-inactive");
250            }
251            var symbolContainer = L.DomUtil.create("i", null, legendItemDiv);
252
253            var legendSymbol;
254            if (legend.type === "image") {
255                legendSymbol = new ImageSymbol(this, symbolContainer, legend);
256            } else if (legend.type === "circle") {
257                legendSymbol = new CircleSymbol(this, symbolContainer, legend);
258            } else if (legend.type === "rectangle") {
259                legendSymbol = new RectangleSymbol(this, symbolContainer, legend);
260            } else if (legend.type === "polygon") {
261                legendSymbol = new PolygonSymbol(this, symbolContainer, legend);
262            } else if (legend.type === "polyline") {
263                legendSymbol = new PolylineSymbol(this, symbolContainer, legend);
264            } else {
265                L.DomUtil.remove(legendItemDiv);
266                return;
267            }
268            this._legendSymbols.push(legendSymbol);
269

270            symbolContainer.style.width = this.options.symbolWidth + "px";
271            symbolContainer.style.height = this.options.symbolHeight + "px";
272
273            var legendLabel = L.DomUtil.create("span", null, legendItemDiv);
274            legendLabel.innerText = legend.label;
275            if (legend.layers) {
276                L.DomUtil.addClass(legendItemDiv, "leaflet-legend-item-clickable");
277                L.DomEvent.on(
278                    legendItemDiv,
279                    "click",
280                    function () {
281                        this._toggleLegend.call(this, legendItemDiv, legend.layers);
282                    },
283                    this
284                );
285            }
286        },
287
288        _initLayout: function () {
289            L.DomEvent.disableClickPropagation(this._container);
290            L.DomEvent.disableScrollPropagation(this._container);
291
292            if (this.options.collapsed) {
293                this._map.on("click", this.collapse, this);
294
295                L.DomEvent.on(
296                    this._container,
297                    {
298                        mouseenter: this.expand,
299                        mouseleave: this.collapse,
300                    },
301                    this
302                );
303            } else {
304                this.expand();
305            }
306        },
307
308        _toggleLegend: function (legendDiv, layers) {
309            if (L.DomUtil.hasClass(legendDiv, "leaflet-legend-item-inactive")) {
310                L.DomUtil.removeClass(legendDiv, "leaflet-legend-item-inactive");
311                if (L.Util.isArray(layers)) {
312                    for (var i = 0, len = layers.length; i < len; i++) {
313                        this._map.addLayer(layers[i]);
314                    }
315                } else {
316                    this._map.addLayer(layers);
317                }
318            } else {
319                L.DomUtil.addClass(legendDiv, "leaflet-legend-item-inactive");
320                if (L.Util.isArray(layers)) {
321                    for (var i = 0, len = layers.length; i < len; i++) {
322                        this._map.removeLayer(layers[i]);
323                    }
324                } else {
325                    this._map.removeLayer(layers);
326                }
327            }
328        },
329
330        expand: function () {
331            this._link.style.display = "none";
332            L.DomUtil.addClass(this._container, "leaflet-legend-expanded");
333            for (var legendSymbol of this._legendSymbols) {
334                legendSymbol.rescale();
335            }
336            return this;
337        },
338
339        collapse: function () {
340            this._link.style.display = "block";
341            L.DomUtil.removeClass(this._container, "leaflet-legend-expanded");
342            return this;
343        },
344
345        redraw: function () {
346            L.DomUtil.empty(this._contents);
347            this._buildLegendItems();
348        },
349    });
350
351    L.control.legend = L.control.Legend = function (options) {
352        return new L.Control.Legend(options);
353    };
354}, window);