LeafletJS 面向对象的最佳方法

Question

我正在用 leaflet js 做一个小项目，我想知道使它成为 OOP 的最佳方法是什么。好的，这是交易：

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

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

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

到目前为止，这是我的代码：

<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 class 以包含所需的功能，例如单击事件，您可以在触发标记的 onAdd 方法时挂接它, 然后在 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

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

关于存储标记，您可以在地图上使用 L.LayerGroup 和那个。创建标记时，您会将其添加到组中。这样你就可以使用图层组的实用方法，比如hasLayer、getLayer、clearLayers、eachLayer等

这里是 L.LayerGroup 的参考：http://leafletjs.com/reference.html#layergroup

LeafletJS 面向对象的最佳方法

LeafletJS best approach to object oriented

javascript

oop

dom-events

leaflet