欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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可以直接查看