Điều khiển tờ rơi tùy chỉnh

Tôi có một số trợ giúp trong việc tạo một điều khiển tùy chỉnh cho tờ rơi, nhưng tôi vẫn gặp khó khăn khi nâng cấp lên các kiểu CSS được sử dụng bởi các phiên bản mới nhất của Tờ rơi. Về cơ bản, tất cả những gì tôi cần là một biểu tượng trong hộp màu trắng, với bóng đổ xung quanh nó.

Đây là những gì tôi đã làm việc cho đến nay, hãy xem và cảm thấy thoải mái khi rẽ nhánh:

http://codepen.io/DrYSG/pen/zJsiG

Hiểu rồi.

Để xem bản demo, hãy xem DemoPen Demo: http://codepen.io/DrYSG/pen/zJsiG

Dưới đây là đoạn mã JS và CSS thực hiện công việc có liên quan:

L.Control.Command = L.Control.extend({
    options: {
        position: 'topleft',
    },

    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-control-command');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () { MapShowCommand(); });

        var controlUI = L.DomUtil.create('div', 'leaflet-control-command-interior', controlDiv);
        controlUI.title = 'Map Commands';
        return controlDiv;
    }
});

L.control.command = function (options) {
    return new L.Control.Command(options);
};

và CSS:

.leaflet-control-command-interior
{
    background-image: url(images/command.png);
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

.leaflet-control-command-interior:hover
{
    background-color: #F4F4F4;
}

Giống như câu trả lời của Dr.YSG nhưng sử dụng các lớp CSS của Leaflet.draw:

L.Control.RemoveAll = L.Control.extend(
{
    options:
    {
        position: 'topleft',
    },
    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () {
            drawnItems.clearLayers();
        });

        var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
        controlUI.title = 'Remove All Polygons';
        controlUI.href = '#';
        return controlDiv;
    }
});
var removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);

Vâng, nút dễ dàng cũng là một ý tưởng tốt. Tôi đã xem lại điều này gần đây và tôi đã tạo mô-đun RequireJS (AMD) này cho phép tham số hóa vị trí (không chỉ ở góc, mà đến một vị trí chính xác) và cũng lấy nội dung HTML từ tài liệu HTML, sau đó trích xuất nội dung HTML của DOM và đặt nó vào điều khiển. Bạn có thể đơn giản hóa điều này nếu bạn muốn.

để gọi thực thi một cái gì đó như thế này và nó sẽ tạo ra một thể hiện mới:

var zoomIn = new Button(map);
zoomIn.setup('zControl', 'zoomInCtrl', Config.ZinTop, Config.ZinLeft, "zoomIn");

...

define(['jquery', 'leaflet', 'Config', 'Tools'], function ($, L, Config, Tools) {
    function Button(Map, className, id, top, left) {
        var self = this;
        self.bbox = null;
        self.Map= Map;
        self.top = top;
        self.left = left;
        self.action = null;

        self.setup = function (className, id, top, left, action) {
            var button = L.control({
                position: 'bottomleft'
            });
            self.action = action;
            button.onAdd = function (map) {
                var box = L.DomUtil.create('div', className);
                box.innerHTML = $("#" + id).html();
                $("#" + id).remove();
                $(box).attr("id", id);
                $(box).css("position", "fixed");
                $(box).css("top", top);
                $(box).css("left", left);
                self.bbox = box;
                return box;
            };
            self.Map.MAP.addControl(button);
        }

        self.hit = function (cmd) {
            var rect = self.bbox.getBoundingClientRect();
            var box = { top: rect.top, bottom: rect.bottom, left: rect.left, right: rect.right };
            var target = Tools.outset(box, Config.ButtonOutset);
            var hit = Tools.contains(Tools.cmdToPoint(cmd), target);
            return hit;
        }

        self.pick = function (cmd) {
            $(self.bbox).addClass("large");
        }

        self.unpick = function () {
            $(self.bbox).removeClass("large");
        }

        self.invoke = function (cmd) {
            self.Map[self.action]();
        }
    }
    return Button;
});

Có vẻ như Leaflet. EasyButton đã được đề cập ở trên, nhưng đây là một số mã ví dụ:

var myImage = '<img class="button-image" src="image-for-icon.jpg"/>';

L.easyButton( myImage, function(btn,map){ 
    // your stuff to do 'on click' 
}, 'title for the button').addTo(map);

và một số css:

.button-image{
  display: block;
  height: auto;
  margin: auto;
  max-width: 100%;
}

và một loạt các bản demo nếu bạn đang tìm kiếm thêm.