Openlayers2扩展markers图层
程序员文章站
2022-03-15 11:03:53
...
使用ol2中经常会碰到添加marker数据,并在数据之上提供marker的鼠标点击事件,弹出popup详细信息,对此进行了简单封装,详见:
1、marker的数据元素
/** * Class: MarkersLayer.Source */ MarkersLayer.Source = OpenLayers.Class({ lonlat:null , //坐标 icon:null, //marker的icon地址 title:null, //marker的title 不为空时存在marker点击事件,弹出的popup的title description:null, //title不为空时点击出现的popup中的描述信息 initialize: function(lonlat ,icon,title, description) { this.lonlat = lonlat; this.icon = icon ; this.title = title; this.description = description ; }, CLASS_NAME: 'MarkersLayer.Source' });
2、markers的marker集合图层,继承自OpenLayers.Layer.Markers,只是做了简单封装
/** * Marker集合图层,从layer中继承 */ OpenLayers.Layer.MarkersLayer = OpenLayers.Class(OpenLayers.Layer.Markers, { /** * 所有的maker集合 */ ms :null , //是否加载 loaded:false, putMarkers:function(_markers) { this.ms = _markers ; if(this.loaded) for(var i in _markers) { //创建marker var marker = this.createMarker(_markers[i]); this.addMarker(marker); } }, moveTo : function(bounds, zoomChanged, minor) { OpenLayers.Layer.Markers.prototype.moveTo.apply(this, arguments); //判断是否要加载markers if(this.visibility && !this.loaded && this.ms && this.ms.length > 0){ this.loaded = true; for(var i in this.ms) { //创建marker var marker = this.createMarker(this.ms[i]); this.addMarker(marker); } } }, /** *当前显示的popup buffer */ show_pp : null , createMarker:function(m) { var _map = this.map; var lonlat = m.lonlat; var icon_url = m.icon ; var desc = m.description; var title = m.title ; var size = new OpenLayers.Size(18, 32); var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h); //var mark_url = '../resource/js/ol/img/' + icon_url; var mark_url = icon_url; var icon = new OpenLayers.Icon(mark_url, size, offset); var marker = new OpenLayers.Marker(lonlat, icon); //拼接提示信息 if(title ) { //此处优化为点击后在去创建popup 而不是提前都创建好,优化加载速度 marker.title = title; marker.desc = desc; marker.layer = this ; marker.events.register("click", marker, this.clickEvent); } return marker ; } , /** * marker 点击事件 */ clickEvent:function(evt){ var sp = this.layer.show_pp; var m_popup = this.popup ; //如果当前已经弹出和待弹出的不是一个 则隐藏已经弹出的 if (sp && sp != m_popup) { sp.hide(); } //判断marker是否包含popup if(!m_popup) { //创建popup var innerhtml = "<table class='poptable'>"; innerhtml += "<tr><td style='text-align:left'> " + this.title + "</td> </tr>"; innerhtml += "<tr><td style='text-align:left'> " + this.desc + " </td></tr>"; innerhtml += "</td></tr></table>"; m_popup = new OpenLayers.Popup("click", this.lonlat, null, innerhtml, true); m_popup.panMapIfOutOfView = true; m_popup.autoSize = true; m_popup.hide(); this.map.addPopup(m_popup); this.popup = m_popup ; } m_popup.toggle(); this.layer.show_pp = m_popup; OpenLayers.Event.stop(evt); }, getDataExtent: function () { var maxExtent = null; var _map = this.map ; if (_map && this.ms && (this.ms.length > 0)) { var maxExtent = new OpenLayers.Bounds(); for(var i=0, len=this.ms.length; i<len; i++) { var m = this.ms[i]; maxExtent.extend(m.lonlat); } } return maxExtent; }, CLASS_NAME: "OpenLayers.Layer.MarkersLayer" });
3、调用:
var ms = new Array(); //marker.souces for(var i = 0 ; i < 100 ; i++) { var lon = 120 + Math.random() * 0.5 ; //经纬随机 var lat = 30 + Math.random() * 0.5;//纬度随机 var icon = Math.random() > 0.5 ? 'img/marker-blue.png' : 'img/marker-green.png' ; var lonlat = new OpenLayers.LonLat(lon, lat).transform(_displayProjection, _projection); var marker = new MarkersLayer.Source(lonlat , icon , 'test title ' + i , 'test descrition ' + lon + "," +lat); ms.push(marker); } var ml = new OpenLayers.Layer.MarkersLayer('test markerlayer'); ml.putMarkers(ms); //压入数据
附件里有demo可以直接查看