Openlayers2扩展markers图层

阅读更多

使用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 =  "";

		    innerhtml += "";
		    innerhtml += "";
		    innerhtml += "
 " + this.title + "
 
 " + this.desc +  " 
";
			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 
  
 
 
  
 
 
  
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可以直接查看
 
  
 
 
 

• marker_demo.zip (305.7 KB)
• 下载次数: 5