javascript - LeafletJS 面向对象的最佳方法

Question

我正在使用 leaflet js 开发一个小项目，我想知道使其成为 OOP 的最佳方法是什么。好的，交易如下:

创建一个与标记一起使用的“类”，这些标记来自数据库。所以，我想我会创建一个对象数组，我对吗？

我的第一个问题是，我是否必须创建一个自定义类，并将标记对象作为此类的属性，或者从传单扩展 L.marker 类？

第二个问题:如何在每个标记上绑定(bind)点击事件，以便该事件可以调用ajax请求并绑定(bind)带有信息的弹出窗口。

这是我到目前为止的代码:

<script>
    var map = L.map('map').setView([25.55246, -103.50328], 18);
    var marcas = [];

   L.tileLayer('https://{s}.tiles.mapbox.com/v3/kinopio.kikc39gj/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

    function Marcador(marca, usuario, seccional, identificador){
        this.marca = marca;
        this.identificador = identificador;
        this.usuario = usuario;
        this.seccional = seccional;
    }

    Marcador.prototype.verUsuario = function(){
        console.log(this.usuario);
    }

    Marcador.prototype.verVotos = function(){
        $.ajax({
            type: 'GET',
            url: '/votos/' + this.identificador,
            datatype: 'json',
            success:function(data){
                msg = $.parseJSON(data);
                //marcador.bindPopup('Votos: ' + msg[0].Votos ).openPopup();
                console.log(msg[0].Votos);
            }
        });

    }

    function onMapClick(e) {
//When clicking in the map, create a marker so i can register a new one to the DB...

        var formulario =    "<form action='/registro' id='registro' method='post'> " +
                                "<input name='usuario' placeholder='usuario'> " +
                                "<input name='password' placeholder='passwword'>" +
                                "<input name='seccional' placeholder='seccional'>" +
                                "<input name='latitud' type='hidden' value = " + e.latlng.lat  + ">" +
                                "<input name='longitud' type='hidden' value = " + e.latlng.lng + ">" +
                                "<input type='submit' value='Aceptar'>" +
                            "</form>"

        var marker = L.marker( e.latlng ).addTo( map ).bindPopup( formulario );

            marker.on("popupopen", function(){
               
                var forma = $('#registro');
                forma.on('submit', function(ev){
                    ev.preventDefault();

                    $.ajax({
                        type: forma.attr('method'),
                        url: forma.attr('action'),
                        data: forma.serialize(),
                        success:function(data){
                            marker.closePopup();
                            marker.bindPopup( 'Usuario registrado exitosament' ).openPopup();
                        }
                    });
                });

            });
        }

        function cargarRegistros(e){
            e.preventDefault();

            $.ajax({
                type: 'GET',
                url: '/registrados',
                datatype: 'json',

                success: function(d){

                    $.each(d.marcadores, function(i, item){                        
                        marca = new L.marker( [ parseFloat(item.latitud), parseFloat( item.longitud) ] )
                                    .addTo(map).bindPopup();
                        marcas.push( new Marcador( marca, item.usuario, item.seccional, item.identificador ) );

                    });
                }
            });

            return marcas;
        }

        map.on('click', onMapClick);

        function clickMarcador(e){
            console.log(e.target  + '---' + e.currentTarget);
            if (e.target.id !== e.currentTarget) {
                console.log('hola');
            }
            
            e.stopPropagation();
    }

    $('#registrados').on('click', cargarRegistros);

</script>

Answer 1

我只是扩展L.Marker类以包含所需的功能，例如单击事件，您可以在标记的onAdd方法时 Hook 它被触发，并在 onRemove 方法上取消它:这是代码示例(使用 jQuery 中的 $.getJSON):

L.CustomMarker = L.Marker.extend({

  onAdd: function (map) {
    this.on('click', this.clickHandler);
    L.Marker.prototype.onAdd.call(this, map);
  },

  onRemove: function (map) {
    this.off('click', this.clickHandler);
    L.Marker.prototype.onRemove.call(this, map);
  },

  clickHandler: function (e) {
    $.getJSON('data.json', function (data) {
      e.target.bindPopup(data.myProperty);
      e.target.openPopup();
    }, this);
  }

});

L.customMarker = function (latLng, options) {
  return new L.CustomMarker(latLng, options);
} 

这是 Plunker 上的一个工作示例:http://plnkr.co/edit/hNlvhC?p=preview

这当然是非常粗略的，在实际的实现中，如果弹出窗口已经绑定(bind)，我们会检查 click 事件，这样您就不会绑定(bind)它两次，但它可以让您很好地了解扩展L.Marker

的可能性

关于存储标记，您可以只使用 L.LayerGroup 和 map 。创建标记时，您可以将其添加到组中。这样您就可以使用图层组的实用方法，例如 hasLayer、getLayer、clearLayers、eachLayer 等。

这是L.LayerGroup的引用:http://leafletjs.com/reference.html#layergroup