openlayers中利用vector实现marker的方式

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

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

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:扩展向量层

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=;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. //添加Feature，是point显示为图片
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>){
33. return;
34. }
35. this.updateChannel(encNode.id,location.lon,location.lat);
36. },
37. repetitiveCheck:function(entity_id){
38. if(this.getFeatureByAttribute({id:entity_id})){
39. return true;
40. }
41. return false;
42. },
43. updateChannel:function(channel_id,lon,lat){
44. Ext.Ajax.request({
45. url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat
46. });
47. },
48. channelMarkerClick:function() {
49. var features = this.selectedFeatures;
50. if(features.length >=&&features[]) {
51. feature = features[];
52. var treeNodeAttribute = feature.attributes;
53. //显示信息
54. }
55. },
56. cartoonFeature :function(feature){
57. this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);
58. var runner = new Ext.util.TaskRunner();
59. var task = {
60. run:this.drawFeature,
61. scope:this,
62. args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],
63. interval:
64. }
65. runner.start(task);
66. },
67. removeSelectFeature:function(){
68. var features = this.selectedFeatures;
69. for(var i=features.length-; i>=; i--) {
70. feature = features[i];
71. this.updateChannel(feature.attributes['id'],"","");
72. }
73. this.destroyFeatures(this.selectedFeatures);
74. },
75. monitorSelectFeature:function(){
76. var features = this.selectedFeatures;
77. if(features.length >=&&features[]) {
78. feature = features[];
79. var treeNodeAttribute = feature.attributes;
80. var objId="mapAVShow"+treeNodeAttribute['id'];
81. //弹出窗口
82. }
83. }
84. });

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. //添加Feature，是point显示为图片
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. repetitiveCheck:function(entity_id){
38. if(this.getFeatureByAttribute({id:entity_id})){
39. return true;
40. }
41. return false;
42. },
43. updateChannel:function(channel_id,lon,lat){
44. Ext.Ajax.request({
45. url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat
46. });
47. },
48. channelMarkerClick:function() {
49. var features = this.selectedFeatures;
50. if(features.length >=0&&features[0]) {
51. feature = features[0];
52. var treeNodeAttribute = feature.attributes;
53. //显示信息
54. }
55. },
56. cartoonFeature :function(feature){
57. this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);
58. var runner = new Ext.util.TaskRunner(1000);
59. var task = {
60. run:this.drawFeature,
61. scope:this,
62. args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],
63. interval: 1000
64. }
65. runner.start(task);
66. },
67. removeSelectFeature:function(){
68. var features = this.selectedFeatures;
69. for(var i=features.length-1; i>=0; i--) {
70. feature = features[i];
71. this.updateChannel(feature.attributes['id'],"","");
72. }
73. this.destroyFeatures(this.selectedFeatures);
74. },
75. monitorSelectFeature:function(){
76. var features = this.selectedFeatures;
77. if(features.length >=0&&features[0]) {
78. feature = features[0];
79. var treeNodeAttribute = feature.attributes;
80. var objId="mapAVShow"+treeNodeAttribute['id'];
81. //弹出窗口
82. }
83. }
84. });

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