Control.Attribution
# 概述
Control.Attribution 是一个 Leaflet 地图控件，用于显示地图的版权信息。它可以显示地图提供者的名称和链接，以及地图上的图层的版权信息。
# 源码分析
# 源码实现
Control.Attribution的源码实现如下
var ukrainianFlag =
'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" class="leaflet-attribution-flag"><path fill="#4C7BE1" d="M0 0h12v4H0z"/><path fill="#FFD500" d="M0 4h12v3H0z"/><path fill="#E0BC00" d="M0 7h12v1H0z"/></svg>';
export var Attribution = Control.extend({
options: {
position: "bottomright", //控件位置默认右下角
prefix:
'<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">' +
(Browser.inlineSvg ? ukrainianFlag + " " : "") +
"Leaflet</a>", //动态前缀
},
// 初始化方法
initialize: function (options) {
Util.setOptions(this, options); // 设置选项
this._attributions = {}; // 初始化attributions对象，用于存储attribution信息
},
// 添加控件到地图时调用
onAdd: function (map) {
map.attributionControl = this; // 将控件实例挂载到地图对象
this._container = DomUtil.create("div", "leaflet-control-attribution"); // 创建容器
DomEvent.disableClickPropagation(this._container); // 禁用点击事件冒泡
// 收集现有图层的attribution
for (var i in map._layers) {
if (map._layers[i].getAttribution) {
this.addAttribution(map._layers[i].getAttribution());
}
}
this._update(); //更新attribution 显示
map.on("layeradd", this._addAttribution, this); // 监听图层添加事件
return this._container; // 返回容器元素
},
// 从地图移除控件时调用
onRemove: function (map) {
map.off("layeradd", this._addAttribution, this); // 移除图层添加事件监听
},
// 处理新图层添加到地图
_addAttribution: function (ev) {
if (ev.layer.getAttribution) {
this.addAttribution(ev.layer.getAttribution());
ev.layer.once(
"remove",
function () {
this.removeAttribution(ev.layer.getAttribution()); // 图层移除时清理 attribution
},
this
);
}
},
// 设置attribution 前缀
setPrefix: function (prefix) {
this.options.prefix = prefix;
this._update();
return this;
},
// 添加 attribution 文本
addAttribution: function (text) {
if (!text) {
return this;
}
if (!this._attributions[text]) {
this._attributions[text] = 0;
}
this._attributions[text]++; // 记录出现次数
this._update();
return this;
},
// 移除 attribution 文本
removeAttribution: function (text) {
if (!text) {
return this;
}
if (this._attributions[text]) {
this._attributions[text]--; // 清除计数
this._update();
}
return this;
},
// 更新 attribution 显示
_update: function () {
// 如果未绑定地图，则直接返回
if (!this._map) {
return;
}
var attribs = [];
for (var i in this._attributions) {
if (this._attributions[i]) {
attribs.push(i);
}
} // 获取 有效attribution
var prefixAndAttribs = [];
if (this.options.prefix) {
prefixAndAttribs.push(this.options.prefix);
}
// 添加前缀
if (attribs.length) {
prefixAndAttribs.push(attribs.join(", "));
} // 添加 attribution列表
this._container.innerHTML = prefixAndAttribs.join(
' <span aria-hidden="true">|</span> '
); // 拼接并设置 HTML
},
});
Map.mergeOptions({
attributionControl: true, // 默认启用 attribution 控件
});
Map.addInitHook(function () {
if (this.options.attributionControl) {
new Attribution().addTo(this); // 地图初始化时自动添加 attribution 控件
}
});
// 工厂函数
export var attribution = function (options) {
return new Attribution(options);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
# 总结
Control.Attribution控件的实现比较简单，主要是通过map._layers对象来收集地图上的图层信息，并在地图上显示这些图层的attribution信息。此外还监听地图图层的添加和移除事件，即map.on('layeradd')和layer.once('remove')事件，以及时更新attribution信息。
编辑 (opens new window)
上次更新: 2025/04/03, 07:19:02