openlayers中利用vector实现marker的方式
项目需要一个小型的gis。openlayers，geoserver，postgres组合是比较好的选择。openlayers的marker层好像不支持拖动操作。通过研究api发现，可以利用vector层
达到这个目的，作出标注的效果。可以定位，搜索，拖动等效果，选中的时候可以
通过修改style达到动画效果。
基本做法如下：
1：定义marker显示的样式
2：扩展vector层，利用在扩展层上添加point与style，图片显示point就出现标注的
效果
基本代码如下:
定义样式：
Java代码
$package("com.bct.map");
com.bct.map.EncoderMarkerStyle = {
'bigEncoder':{
graphicWidth:24,
graphicHeight : 24,
graphicXOffset : -12,
graphicYOffset : -24,
externalGraphic : "scripts/map/img/channel2.png"
},
'smallEncoder':{
graphicWidth:16,
graphicHeight : 16,
graphicXOffset : -8,
graphicYOffset : -16,
externalGraphic : "scripts/map/img/channel.gif"
},
'selectStyle':{
pointerEvents: "visiblePainted",
border:"border:25 outset #ff88ff",
cursor: "pointer",
graphicWidth:24,
graphicHeight : 24,
graphicXOffset : -12,
graphicYOffset : -24,
externalGraphic : "scripts/map/img/channel2.png"
},
styleMap: new OpenLayers.StyleMap({
"select": new OpenLayers.Style({pointRadius: 24})
})
}
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.attributes;
12. var find = false;
13. for(var j in attributes){
14. if(attributes == attri){
15. find = true;
16. }
17. }
18. if(find){
19. return this.features;
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();
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) {
52. feature = features;
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:],
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;
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) {
79. feature = features;
80. var treeNodeAttribute = feature.attributes;
81. var objId="mapAVShow"+treeNodeAttribute['id'];
82. //弹出窗口
83. }
84. }
85. });
页:
[1]