背着手扇扇子的人
往事随风......前事如梦......
posts - 35,  comments - 17,  trackbacks - 0
定义标注的样式,这个决定标注显示的方式,必须定义好
 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 }

marker层,扩展vector层,通过point和style达到marker的效果
  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     addEncorderFeature:function(encNode,location){
 25         if(encNode&&this.repetitiveCheck(encNode.id)){
 26             return;
 27         }
 28         var attributes = OpenLayers.Util.extend({}, encNode.attributes);
 29         var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);
 30         var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle['smallEncoder']);
 31         this
.addFeatures([enc_Feature]);
 32         if(encNode.attributes['lon']&&encNode.attributes['lat']&&encNode.attributes['lon'].length>0){
 33             return;
 34         }
 35         this.updateChannel(encNode.id,location.lon,location.lat);
 36     },
 37     addDeptFeature:function(deptNode,location){
 38         if(deptNode&&this.repetitiveCheck(deptNode.id)){
 39             return;
 40         }
 41         var attributes = OpenLayers.Util.extend({}, deptNode.attributes);
 42         var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);
 43         var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle['smallEncoder']);
 44         
 45         this.addFeatures([enc_Feature]);
 46         
 47     },
 48     repetitiveCheck:function(entity_id){
 49         if(this.getFeatureByAttribute({id:entity_id})){
 50             return true;
 51         }
 52         return false;
 53     },
 54     updateChannel:function(channel_id,lon,lat){
 55         Ext.Ajax.request({
 56                url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat
 57         });
 58     },
 59     channelMarkerClick:function() {
 60         var features = this.selectedFeatures;
 61         if(features.length >=0&&features[0]) {
 62             feature = features[0];            
 63             var treeNodeAttribute = feature.attributes;
 64             var vedioPopForm = new Ext.FormPanel({
 65                                    frame:true,
 66                                 labelAlign: 'top',
 67                                 bodyStyle:'padding:5px',
 68                                 width: 400,
 69                                 height:200,
 70                                 layout: 'fit',
 71                                 items:[{
 72                                             xtype:'fieldset',
 73                                             title: '摄像头信息',
 74                                             autoHeight:true,
 75                                             autoWidth:true,
 76                                             html:"<p><font color='red' size='2'>名称:"+treeNodeAttribute['text']
 77                                             +"</font></p><p><font color='red' size='2'>通道号:"+treeNodeAttribute['channelNumber']
 78                                             +"</font></p><p><font color='red' size='2'>设备名称:"+treeNodeAttribute['deviceunitName']
 79                                             +"</font></p><p><font color='red' size='2'>所属部门:"+treeNodeAttribute['deptName']
 80                                             +"</font></p><p><font color='red' size='2'>经纬度:"+treeNodeAttribute['lon']+","+treeNodeAttribute['lat']
 81                                     }]
 82             });
 83             var win = new Ext.Window({
 84                 width : 420,
 85                 height: 220,
 86                 items : vedioPopForm
 87             });
 88             win.show();            
 89         }
 90     },
 91     cartoonFeature :function(feature){
 92         this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);
 93         var runner = new Ext.util.TaskRunner(1000);
 94         var task = {
 95             run:this.drawFeature,
 96             scope:this,
 97             args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],
 98             interval: 1000
 99         }
100         runner.start(task);
101     },
102     removeSelectFeature:function(){
103         var features = this.selectedFeatures;
104         for(var i=features.length-1; i>=0; i--) {
105             feature = features[i];
106             this.updateChannel(feature.attributes['id'],"","");
107         }
108         this.destroyFeatures(this.selectedFeatures);
109     },
110     monitorSelectFeature:function(){        
111         var features = this.selectedFeatures;
112         if(features.length >=0&&features[0]) {
113             feature = features[0];            
114             var treeNodeAttribute = feature.attributes;
115             var objId="mapAVShow"+treeNodeAttribute['id'];
116             var win = new Ext.Window({
117                 width : 420,
118                 height: 420,
119                 html:"<div id='mapEncoder' width='100%' height='100%'><object width='100%' height='100%' id='"+objId+"' classid='clsid:574B47E8-A366-4AB9-B2EA-57F145CA3780'></object></div>"
120             });            
121             win.show();
122             Ext.lib.Ajax.request('GET','channel.do?method=getSiteId&accept=json&id='+treeNodeAttribute['id'],
123                               {success: function(o){
124                                         var encoderObj;
125                                         encoderObj=Ext.util.JSON.decode(o.responseText);
126                                         $import("com.bct.monitor.mapAVShow");
127                                         var avshowObj=document.getElementById(objId);
128                                         var avshow=new com.bct.monitor.mapAVShow(avshowObj,
129                                         encoderObj[0].siteId,encoderObj[0].enCoderId,encoderObj[0].diveceUnitTypeId,'');
130                                         avshow.startVideo();
131                                         win.on("destroy",function del(){
132                                                          avshow.stopVideo();
133                                         });
134                                 }
135                               });             
136         }
137     }
138 });


posted on 2008-09-04 14:12 kebo 阅读(3941) 评论(1)  编辑  收藏

FeedBack:
# re: openlayers如何利用vector和style作出marker[未登录]
2011-05-17 13:19 | w
能把代码发我一份 研究下么,w.0101@qq.com  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

<2008年9月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

常用链接

留言簿(1)

随笔分类

随笔档案

文章档案

相册

收藏夹

朋友

搜索

  •  

积分与排名

  • 积分 - 22860
  • 排名 - 1603

最新评论

阅读排行榜

评论排行榜