leafletjs中如何自定义控件

1
// 定义一个继承自L.Control的类
2
    var CenterControl = L.Control.extend({
3
        // 初始化方法，接收一个选项对象
4
        initialize: function (options) {
5
            // 将选项对象合并到this.options中
6
            L.Util.setOptions(this, options);
7
        },
8
        // 添加到地图时调用的方法，接收一个地图对象
9
        onAdd: function (map) {
10
            // 创建一个div元素作为控件容器
11
            var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
12
            // 设置容器的样式
13
            container.style.backgroundColor = 'white';
14
            container.style.width = 'auto';
15
            container.style.height = '30px';
16
            // 在容器内创建一个span元素用于显示坐标
17
            var span = L.DomUtil.create('span', '', container);
18
            span.id = 'center-coord';
19
            span.style.lineHeight = '30px';
20
            span.style.padding = '10px';
21
            // 获取当前地图中心坐标并显示
22
            var center = map.getCenter();
23
            span.innerHTML = 'Lat: ' + center.lat + ', Lng: ' + center.lng;
24
            // 监听地图移动事件，更新坐标显示
25
            map.on('move', function () {
26
                center = map.getCenter();
27
                console.log(center);
28
                span.innerHTML = 'Lat: ' + center.lat + ', Lng: ' + center.lng;
29
            });
30
            // 返回容器元素
31
            return container;
32
        },
33
        // 从地图移除时调用的方法，接收一个地图对象
34
        onRemove: function (map) {
35
            // 取消监听地图移动事件
36
            map.off('move');
37
        }
38
    });
39
    // 使用自定义控件类创建一个控件实例，并添加到地图右下角
40
    var centerControl = new CenterControl({ position: 'bottomright' });
41
    centerControl.addTo(map);