openlayers中利用vector实现marker的方式
2009-09-07 18:42
309 查看
项目需要一个小型的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代码
$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层拥有更多的功能
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})
})
}
$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'];
//弹出窗口
}
}
});
$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层拥有更多的功能
相关文章推荐
- openlayers中利用vector实现marker的方式
- 可以利用这种方式实现图片UIImage翻转,本人用于自拍后,对左右相反照片的处理
- stack vector array 三种方式实现字符的反向输出
- Spring_Spring_教程13_利用XML实现Aop方式
- (3) 利用 Setter方式实现 【第一种方式】 依赖注入,编码剖析Spring依赖注入的原理
- 利用hadoop命令rcc生成Record 一种简单的方式实现自定义的writable对象
- 利用动态调用方式实现分布式应用(上)
- 两种利用GCD实现分步获取结果的方式和SDWebImage缓存机制的验证
- Java 集合:Collection,List,ArrayList,Vector,LinkedList(实现方式,对比)
- 利用Geoserver的wfs BBOX范围查询及Openlayers解析GML,添加Marker
- 转---SQL SERVER 2008 利用发布订阅方式实现数据库同步
- Android利用android:indeterminateDrawable来实现ProgressBar三种方式
- 利用pdfJS实现以读取文件流方式在线展示pdf文件
- SQL SERVER 2008 利用发布订阅方式实现数据库同步
- 两种方式实现省市县三级联动(利用解析文本和json方式)
- Android 利用DDMS观察其他应用布局实现方式
- Spring Boot 2.0 利用 Spring Security 实现简单的OAuth2.0认证方式2
- 利用vector实现约瑟夫环的打印
- android 中的service 实现之 利用onStart方式
- Android利用android:indeterminateDrawable来实现ProgressBar三种方式