openlayers中利用vector实现marker的方式

by · 2019-04-03

项目需要一个小型的gis。openlayers，geoserver，postgres组合是比较好的选择。
openlayers的marker层好像不支持拖动操作。通过研究api发现，可以利用vector层
达到这个目的，作出标注的效果。可以定位，搜索，拖动等效果，选中的时候可以
通过修改style达到动画效果。
基本做法如下：
1：定义marker显示的样式
2：扩展vector层，利用在扩展层上添加point与style，图片显示point就出现标注的
   效果
基本代码如下:
定义样式：

Java代码
  1. $package(“com.bct.map”);   
  2. com.bct.map.EncoderMarkerStyle = {   
  3.     ‘bigEncoder’:{   
  4.         graphicWidth:24,   
  5.         graphicHeight : 24,   
  6.         graphicXOffset : –12,   
  7.         graphicYOffset : –24,   
  8.         externalGraphic : “scripts/map/img/channel2.png”  
  9.     },   
  10.     ‘smallEncoder’:{   
  11.         graphicWidth:16,   
  12.         graphicHeight : 16,   
  13.         graphicXOffset : –8,   
  14.         graphicYOffset : –16,   
  15.         externalGraphic : “scripts/map/img/channel.gif”  
  16.     },   
  17.     ‘selectStyle’:{   
  18.         pointerEvents: “visiblePainted”,   
  19.         border:“border:25 outset #ff88ff”,   
  20.         cursor: “pointer”,   
  21.         graphicWidth:24,   
  22.         graphicHeight : 24,   
  23.         graphicXOffset : –12,   
  24.         graphicYOffset : –24,   
  25.         externalGraphic : “scripts/map/img/channel2.png”       
  26.     },   
  27.     styleMap: new OpenLayers.StyleMap({   
  28.                     “select”: new OpenLayers.Style({pointRadius: 24})   
  29.     })   
  30. }  
[java] view plaincopy
  1. $package(“com.bct.map”);  
  2. com.bct.map.EncoderMarkerStyle = {  
  3.     ‘bigEncoder’:{  
  4.         graphicWidth:24,  
  5.         graphicHeight : 24,  
  6.         graphicXOffset : –12,  
  7.         graphicYOffset : –24,  
  8.         externalGraphic : “scripts/map/img/channel2.png”  
  9.     },  
  10.     ‘smallEncoder’:{  
  11.         graphicWidth:16,  
  12.         graphicHeight : 16,  
  13.         graphicXOffset : –8,  
  14.         graphicYOffset : –16,  
  15.         externalGraphic : “scripts/map/img/channel.gif”  
  16.     },  
  17.     ‘selectStyle’:{  
  18.         pointerEvents: “visiblePainted”,  
  19.         border:“border:25 outset #ff88ff”,  
  20.         cursor: “pointer”,  
  21.         graphicWidth:24,  
  22.         graphicHeight : 24,  
  23.         graphicXOffset : –12,  
  24.         graphicYOffset : –24,  
  25.         externalGraphic : “scripts/map/img/channel2.png”      
  26.     },  
  27.     styleMap: new OpenLayers.StyleMap({  
  28.                     “select”: new OpenLayers.Style({pointRadius: 24})  
  29.     })  
  30. }  

2:扩展向量层

Java代码
  1. $package(“com.bct.map”);   
  2. $import(“com.bct.map.EncoderMarkerStyle”);   
  3. com.bct.map.MarkerVectorLayer = OpenLayers.Class(OpenLayers.Layer.Vector,{   
  4.     /**  
  5.      * parameters  
  6.      * attribute filer对象  
  7.      */  
  8.     getFeatureByAttribute :function(attributes){   
  9.         var feature = null;   
  10.         for(var i=0;i<this.features.length; ++i){   
  11.             var attri = this.features[i].attributes;   
  12.             var find = false;   
  13.             for(var j in attributes){   
  14.                 if(attributes[j] == attri[j]){   
  15.                     find = true;   
  16.                 }   
  17.             }   
  18.             if(find){   
  19.                 return this.features[i];    
  20.             }              
  21.         }   
  22.        
  23.     },   
  24.     //添加Feature，是point显示为图片   
  25.     addEncorderFeature:function(encNode,location){   
  26.         if(encNode&&this.repetitiveCheck(encNode.id)){   
  27.             return;   
  28.         }   
  29.         var attributes = OpenLayers.Util.extend({}, encNode.attributes);   
  30.         var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);   
  31.         var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle[‘smallEncoder’]);   
  32.         this.addFeatures([enc_Feature]);   
  33.         if(encNode.attributes[‘lon’]&&encNode.attributes[‘lat’]&&encNode.attributes[‘lon’].length>0){   
  34.             return;   
  35.         }   
  36.         this.updateChannel(encNode.id,location.lon,location.lat);   
  37.     },   
  38.     repetitiveCheck:function(entity_id){   
  39.         if(this.getFeatureByAttribute({id:entity_id})){   
  40.             return true;   
  41.         }   
  42.         return false;   
  43.     },   
  44.     updateChannel:function(channel_id,lon,lat){   
  45.         Ext.Ajax.request({   
  46.              url: ‘deviceVideoEncoder.do?method=updateLonlat&id=’+channel_id+“&lon=”+lon+“&lat=”+lat   
  47.         });   
  48.     },   
  49.     channelMarkerClick:function() {   
  50.         var features = this.selectedFeatures;   
  51.         if(features.length >=0&&features[0]) {   
  52.             feature = features[0];               
  53.             var treeNodeAttribute = feature.attributes;   
  54.             //显示信息         
  55.         }   
  56.     },   
  57.     cartoonFeature :function(feature){   
  58.         this.drawFeature(feature,com.bct.map.EncoderMarkerStyle[‘bigEncoder’]);   
  59.         var runner = new Ext.util.TaskRunner(1000);   
  60.         var task = {   
  61.             run:this.drawFeature,   
  62.             scope:this,   
  63.             args:[feature,com.bct.map.EncoderMarkerStyle[‘smallEncoder’]],   
  64.             interval: 1000  
  65.         }   
  66.         runner.start(task);   
  67.     },   
  68.     removeSelectFeature:function(){   
  69.         var features = this.selectedFeatures;   
  70.         for(var i=features.length-1; i>=0; i–) {   
  71.             feature = features[i];   
  72.             this.updateChannel(feature.attributes[‘id’],“”,“”);   
  73.         }   
  74.         this.destroyFeatures(this.selectedFeatures);   
  75.     },   
  76.     monitorSelectFeature:function(){           
  77.         var features = this.selectedFeatures;   
  78.         if(features.length >=0&&features[0]) {   
  79.             feature = features[0];               
  80.             var treeNodeAttribute = feature.attributes;   
  81.             var objId=“mapAVShow”+treeNodeAttribute[‘id’];   
  82.             //弹出窗口   
  83.         }   
  84.     }   
  85. });  
[java] view plaincopy
  1. $package(“com.bct.map”);  
  2. $import(“com.bct.map.EncoderMarkerStyle”);  
  3. com.bct.map.MarkerVectorLayer = OpenLayers.Class(OpenLayers.Layer.Vector,{  
  4.     /** 
  5.      * parameters 
  6.      * attribute filer对象 
  7.      */  
  8.     getFeatureByAttribute :function(attributes){  
  9.         var feature = null;  
  10.         for(var i=0;i<this.features.length; ++i){  
  11.             var attri = this.features[i].attributes;  
  12.             var find = false;  
  13.             for(var j in attributes){  
  14.                 if(attributes[j] == attri[j]){  
  15.                     find = true;  
  16.                 }  
  17.             }  
  18.             if(find){  
  19.                 return this.features[i];   
  20.             }             
  21.         }  
  22.       
  23.     },  
  24.     //添加Feature，是point显示为图片  
  25.     addEncorderFeature:function(encNode,location){  
  26.         if(encNode&&this.repetitiveCheck(encNode.id)){  
  27.             return;  
  28.         }  
  29.         var attributes = OpenLayers.Util.extend({}, encNode.attributes);  
  30.         var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);  
  31.         var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle[‘smallEncoder’]);  
  32.         this.addFeatures([enc_Feature]);  
  33.         if(encNode.attributes[‘lon’]&&encNode.attributes[‘lat’]&&encNode.attributes[‘lon’].length>0){  
  34.             return;  
  35.         }  
  36.         this.updateChannel(encNode.id,location.lon,location.lat);  
  37.     },  
  38.     repetitiveCheck:function(entity_id){  
  39.         if(this.getFeatureByAttribute({id:entity_id})){  
  40.             return true;  
  41.         }  
  42.         return false;  
  43.     },  
  44.     updateChannel:function(channel_id,lon,lat){  
  45.         Ext.Ajax.request({  
  46.              url: ‘deviceVideoEncoder.do?method=updateLonlat&id=’+channel_id+“&lon=”+lon+“&lat=”+lat  
  47.         });  
  48.     },  
  49.     channelMarkerClick:function() {  
  50.         var features = this.selectedFeatures;  
  51.         if(features.length >=0&&features[0]) {  
  52.             feature = features[0];              
  53.             var treeNodeAttribute = feature.attributes;  
  54.             //显示信息        
  55.         }  
  56.     },  
  57.     cartoonFeature :function(feature){  
  58.         this.drawFeature(feature,com.bct.map.EncoderMarkerStyle[‘bigEncoder’]);  
  59.         var runner = new Ext.util.TaskRunner(1000);  
  60.         var task = {  
  61.             run:this.drawFeature,  
  62.             scope:this,  
  63.             args:[feature,com.bct.map.EncoderMarkerStyle[‘smallEncoder’]],  
  64.             interval: 1000  
  65.         }  
  66.         runner.start(task);  
  67.     },  
  68.     removeSelectFeature:function(){  
  69.         var features = this.selectedFeatures;  
  70.         for(var i=features.length-1; i>=0; i–) {  
  71.             feature = features[i];  
  72.             this.updateChannel(feature.attributes[‘id’],“”,“”);  
  73.         }  
  74.         this.destroyFeatures(this.selectedFeatures);  
  75.     },  
  76.     monitorSelectFeature:function(){          
  77.         var features = this.selectedFeatures;  
  78.         if(features.length >=0&&features[0]) {  
  79.             feature = features[0];              
  80.             var treeNodeAttribute = feature.attributes;  
  81.             var objId=“mapAVShow”+treeNodeAttribute[‘id’];  
  82.             //弹出窗口  
  83.         }  
  84.     }  
  85. });  

addEncorderFeature是添加一个标注的地方。
利用这种方式，比原有的marker层拥有更多的功能

转载自：https://blog.csdn.net/weixin_33690963/article/details/86039700

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序