การควบคุมแผ่นพับที่กำหนดเอง

ฉันมีความช่วยเหลือในการสร้างการควบคุมแบบกำหนดเองสำหรับแผ่นพับ แต่ฉันยังคงมีปัญหาในการอัปเกรดเป็นสไตล์ CSS ที่ใช้โดย Leaflet เวอร์ชันล่าสุด โดยพื้นฐานแล้วสิ่งที่ฉันต้องการก็คือไอคอนในกล่องสีขาวที่มีเงาอยู่รอบ ๆ

นี่คือสิ่งที่ฉันได้ทำงานจนถึงตอนนี้ดูและรู้สึกอิสระที่จะแยกมัน:

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

เข้าใจแล้ว

สำหรับการสาธิตดูที่การสาธิต CodePen: http://codepen.io/DrYSG/pen/zJsiG

นี่คือตัวอย่าง JS และ CSS ที่ทำงานที่เกี่ยวข้อง:

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);
};

และ 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;
}

ชอบคำตอบของ Dr.YSG แต่ใช้คลาส CSS ของ 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);

ใช่ปุ่มง่าย ๆ ก็เป็นความคิดที่ดีเช่นกัน ฉันเพิ่งกลับมาใหม่เมื่อไม่นานมานี้และฉันได้สร้างโมดูล RequireJS (AMD) ที่ให้พารามิเตอร์วางตำแหน่ง (ไม่ใช่เฉพาะที่มุม แต่ไปยังตำแหน่งที่แน่นอน) และยังดึงเนื้อหา HTML จากเอกสาร HTML จากนั้นฉีกออก ของ DOM และวางลงในการควบคุม คุณสามารถทำให้สิ่งนี้ง่ายขึ้นถ้าคุณต้องการ

การเรียกใช้งานการดำเนินการบางอย่างเช่นนี้และจะสร้างอินสแตนซ์ใหม่:

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;
});

ดูเหมือนว่าLeaflet.EasyButtonดังกล่าวข้างต้น แต่นี่คือตัวอย่างรหัสบางส่วน:

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);

และ CSS บางส่วน:

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

และการสาธิตหากคุณกำลังมองหามากขึ้น