Leaflet自定义控件样式修改

Leaflet是一款流行的JavaScript库，用于创建交互式地图。自定义控件是Leaflet的一个强大功能，它允许开发者创建自定义地图元素，如标记、图层控制、信息窗口等。如果你想修改这些控件的样式，可以按照以下步骤操作：

1. 创建自定义控件实例：

var customControl = L.Control.extend({
    options: {
        position: 'topright', // 控件的位置，默认值
        className: 'custom-control', // 自定义CSS类名
        html: '<button>自定义按钮</button>', // 控件内的HTML内容
    },
    initialize: function (options) {
        L.Control.prototype.initialize.call(this, options);
    },
    onAdd: function (map) {
        var container = L.DomUtil.create('div', this.options.className);
        container.innerHTML = this.options.html;
        return container;
    }
});

2. 修改样式：
通过`className`选项设置自定义CSS类，然后使用CSS来覆盖默认样式，例如：

.custom-control {
    background-color: #f00; /* 设置背景颜色 */
    color: white;       /* 设置文字颜色 */
    border-radius: 5px; /* 添加圆角 */
}

3. 添加到地图上：

map.addControl(new customControl());