项目需要一个小型的gis。openlayers,geoserver,postgres组合是比较好的选择。
openlayers的marker层好像不支持拖动操作。通过研究api发现,可以利用vector层
达到这个目的,作出标注的效果。可以定位,搜索,拖动等效果,选中的时候可以
通过修改style达到动画效果。
基本做法如下:
1:定义marker显示的样式
2:扩展vector层,利用在扩展层上添加point与style,图片显示point就出现标注的
效果
基本代码如下:
定义样式:
- $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})
- })
- }
$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:扩展向量层
- $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'];
- //弹出窗口
- }
- }
- });
$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层拥有更多的功能