this.$modal.confirm 自定义按钮关闭_leaflet:自定义控件(扩展L.Control)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39781783/article/details/111360576

本文介绍了如何在leaflet中通过扩展L.Control创建自定义控件，并展示了将Vue应用于界面代码和逻辑，以实现地图上的自定义图标。虽然作者认为这种开发方式可能增加维护难度，但仍提出了其可行性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

L.Control是leaflet中所有控件的基类，如Scale,Zoom等。通过扩展 L.Control，可以在map容器上定义一些自定义控件（个人觉得这种方式并不好，开发维护起来比较麻烦，好的样式效果实现麻烦）。

下面我们尝试写一个自定义控件，在地图上显示我们的官网图标。

自定义一个控件：

L.Control.Logo = L.Control.extend({
        options: {
            position: 'topright' //初始位置

        },

        initialize: function (options) {
            L.Util.extend(this.options, options);

        },
        onAdd: function (map) {
            //创建一个class为 leaflet-control-container的div
            this._container = L.DomUtil.create('div', 'leaflet-control-container');
            //创建一个图片要素
            var img = L.DomUtil.create('img', 'leaflet-control-logo');

            img.id = 'leaflet-control-clegend';
            img.type = 'img';
            img.src = "./logo.jpg";
            this._legendimg = img;

            //创建一个关闭控件的按钮
            var closeButton = L.DomUtil.create('a', 'leaflet-control-button');
            closeButton.text = 'X';
            closeButton.id = 'leaflet-control-geosearch-close';
            this._closebutton = closeButton;


            this._container.appendChild(this._legendimg);
            this._container.appendChild(this._closebutton);

            //注册关闭事件
            L.DomEvent.addListener(this._closebutton, 'click', this._onCloseControl, this);

            return this._container;
        },
        /**
         *
         * @private
         */
        _onCloseControl: function () {
            this._map.options.Legend = false;
            this.remove(this._map);
        },
    });

使用该控件

L.control.logo = function (options) {
        return new L.Control.Logo(options)
    };
L.control.logo().addTo(leafletMap);

效果：

思考：

使用Vue完成界面代码和逻辑，集成到leaflet上，这个路线可行吗？应该可以，等下篇文章吧。

源码：

yafengstark/leaflet-bookgithub.com

参考：

【Leafletjs】5.L.Control 自定义一个Controlwww.cnblogs.com