(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: '© <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();
Leaflet的make(图标)点击事件的绑定,并且附加其他信息
最新推荐文章于 2024-07-23 11:16:22 发布