Leaflet的make(图标)点击事件的绑定,并且附加其他信息

(function ($) {
    Demo = function(element,options){
        gis = this;
        //renderMap中传入gis对象。前几次不传发现失败,不能调用
        //protorype其他的函数。
        gis.renderMap(gis);

        //打点函数,可以写在插件内部或者外部都行
        gis.printPoint();
    }
    //渲染地图
    Demo.prototype =  {
        renderMap : function () {
            var map = gis.map = L.map('mapid',{
                renderer: L.canvas()
            });

            map.setView([30, 120], 13);
            L.tileLayer('http://172.16.1.55:7780/Map/{z}/{xd}/{yd}/{x}_{y}_{z}.png', {//http://{s}.tile.osm.org/{z}/{x}/{y}.png  172.16.1.55:7780/Map/{z}/{xd}/{yd}/{x}_{y}_{z}.png
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
        },
        //进行打点
        printPoint : function(){
            var map = gis.map;
            for (var x = 120;x<120.105;) {
                x = x + 0.005
                for (var y = 30; y < 30.1;) {
                    y = y + 0.005
                    var circle = L.circle([y, x], {radius: 20}).addTo(map);
                    var obj = {'x': x, 'y': y}
                    console.log(obj)
                    //绑定Event
                    gis.point_fire(circle, obj)
                }
            }
        },

        //点击每个点显示相应的obj的信息,而不是显示for循环的最后一次生成obj的信息
        point_fire : function (circle,obj) {
            circle.addEventListener('click',function () {
                gis.point_fire2(circle,obj)
                console.log(obj)
            })
        },

        point_fire2 : function (circle,obj) {
            console.log(obj)
        }
    }

    $.fn.Demo = function () {
        var gis = this;
        return new Demo(gis)
    }

})(jQuery)

//以上是插件代码。在页面的js标签中加入下面的代码进行调用

var gis = $(‘#mapid’).Demo();

转载自:https://blog.csdn.net/ShangQuan2012/article/details/72723734

You may also like...