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})

})

}

[java] view plaincopy

$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代码

$package("com.bct.map");

$import("com.bct.map.EncoderMarkerStyle");

com.bct.map.MarkerVectorLayer = OpenLayers.Class(OpenLayers.Layer.Vector,{

/**

* parameters

* attribute filer对象

*/

getFeatureByAttribute :function(attributes){

var feature = null;

for(var i=0;i<this.features.length; ++i){

var attri = this.features[i].attributes;

var find = false;

for(var j in attributes){

if(attributes[j] == attri[j]){

find = true;

}

}

if(find){

return this.features[i];

}

}

},

//添加Feature，是point显示为图片

addEncorderFeature:function(encNode,location){

if(encNode&&this.repetitiveCheck(encNode.id)){

return;

}

var attributes = OpenLayers.Util.extend({}, encNode.attributes);

var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);

var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle['smallEncoder']);

this.addFeatures([enc_Feature]);

if(encNode.attributes['lon']&&encNode.attributes['lat']&&encNode.attributes['lon'].length>0){

return;

}

this.updateChannel(encNode.id,location.lon,location.lat);

},

repetitiveCheck:function(entity_id){

if(this.getFeatureByAttribute({id:entity_id})){

return true;

}

return false;

},

updateChannel:function(channel_id,lon,lat){

Ext.Ajax.request({

url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat

});

},

channelMarkerClick:function() {

var features = this.selectedFeatures;

if(features.length >=0&&features[0]) {

feature = features[0];

var treeNodeAttribute = feature.attributes;

//显示信息

}

},

cartoonFeature :function(feature){

this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);

var runner = new Ext.util.TaskRunner(1000);

var task = {

run:this.drawFeature,

scope:this,

args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],

interval: 1000

}

runner.start(task);

},

removeSelectFeature:function(){

var features = this.selectedFeatures;

for(var i=features.length-1; i>=0; i--) {

feature = features[i];

this.updateChannel(feature.attributes['id'],"","");

}

this.destroyFeatures(this.selectedFeatures);

},

monitorSelectFeature:function(){

var features = this.selectedFeatures;

if(features.length >=0&&features[0]) {

feature = features[0];

var treeNodeAttribute = feature.attributes;

var objId="mapAVShow"+treeNodeAttribute['id'];

//弹出窗口

}

}

});

[java] view plaincopy

$package("com.bct.map");

$import("com.bct.map.EncoderMarkerStyle");

com.bct.map.MarkerVectorLayer = OpenLayers.Class(OpenLayers.Layer.Vector,{

/**

* parameters

* attribute filer对象

*/

getFeatureByAttribute :function(attributes){

var feature = null;

for(var i=0;i<this.features.length; ++i){

var attri = this.features[i].attributes;

var find = false;

for(var j in attributes){

if(attributes[j] == attri[j]){

find = true;

}

}

if(find){

return this.features[i];

}

}

},

//添加Feature，是point显示为图片

addEncorderFeature:function(encNode,location){

if(encNode&&this.repetitiveCheck(encNode.id)){

return;

}

var attributes = OpenLayers.Util.extend({}, encNode.attributes);

var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);

var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle['smallEncoder']);

this.addFeatures([enc_Feature]);

if(encNode.attributes['lon']&&encNode.attributes['lat']&&encNode.attributes['lon'].length>0){

return;

}

this.updateChannel(encNode.id,location.lon,location.lat);

},

repetitiveCheck:function(entity_id){

if(this.getFeatureByAttribute({id:entity_id})){

return true;

}

return false;

},

updateChannel:function(channel_id,lon,lat){

Ext.Ajax.request({

url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat

});

},

channelMarkerClick:function() {

var features = this.selectedFeatures;

if(features.length >=0&&features[0]) {

feature = features[0];

var treeNodeAttribute = feature.attributes;

//显示信息

}

},

cartoonFeature :function(feature){

this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);

var runner = new Ext.util.TaskRunner(1000);

var task = {

run:this.drawFeature,

scope:this,

args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],

interval: 1000

}

runner.start(task);

},

removeSelectFeature:function(){

var features = this.selectedFeatures;

for(var i=features.length-1; i>=0; i--) {

feature = features[i];

this.updateChannel(feature.attributes['id'],"","");

}

this.destroyFeatures(this.selectedFeatures);

},

monitorSelectFeature:function(){

var features = this.selectedFeatures;

if(features.length >=0&&features[0]) {

feature = features[0];

var treeNodeAttribute = feature.attributes;

var objId="mapAVShow"+treeNodeAttribute['id'];

//弹出窗口

}

}

});

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