创建Leaflet自定义复选框控件

我想创建一个自定义复选框控件,它只需在jquery/javascript中设置一个标志:如果选中了flag ='clustered'或者unchecked flag ='unclustered'.到目前为止,我在地图上有一个控件,但它不是一个复选框,如何获得复选框的状态 - 如果选中/取消选中.

码:

function MapShowCommand() {
  alert("checked / unchecked"); //set flag
}

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;
            }
    });
var test = new L.Control.Command();
map.addControl(test);

YaFred.. 17

您必须在controlDiv中创建一个输入类型="复选框"的表单元素.

// create the control
var command = L.control({position: 'topright'});

command.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'command');

    div.innerHTML = '
command
'; 
    return div;
};

command.addTo(map);


// add the event handler
function handleCommand() {
   alert("Clicked, checked = " + this.checked);
}

document.getElementById ("command").addEventListener ("click", handleCommand, false);

在这个jsfiddle工作http://jsfiddle.net/FranceImage/ao33674e/

您还可以通过阅读本文的传单来获取提示:https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js