项目需要一个小型的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})
})
}
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'];
//弹出窗口
}
}
});
addEncorderFeature是添加一个标注的地方。
利用这种方式,比原有的marker层拥有更多的功能
分享到:
- 2008-09-04 16:27
- 浏览 3964
- 评论(0)
- 论坛回复 / 浏览 (0 / 7561)
- 查看更多
相关推荐
关于openlayers开发的一个中文手册,供大家学习。
刚刚使用openlayers做了一个简单的小例子,注释很全,很简单,将本地的图片作为背景,能够按照坐标添加任意个标记
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并...
openlayers中文文档,openlayers中文文档api
openlayers中文文档,openlayers中文文档api
请问在openlayers中如何删除Layer中的marker 3 在层中加了一个标记怎么永久的存到地图上 3 OpenLayers 如何设死地图边界 3 谁写过openlayers解析xml 3 openlayer.popup 3 OpenLayers 怎么做字段标注 4 字段标注不是...
OpenLayers中文学习文档,原始文档是.md格式的转换成Html后转换成了chm格式,感谢原文作者。
ol openlayers 中文 文档 翻译 最新编译、不全、差评的别下、嫌分高别下
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑,简化代码实现过程,保留核心功能,例如:vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群:具备一定编程基础,...
openLayers-API中文,全,我找了好久,提供给大家
openlayers 添加标注 markers 怎么给Google地图添加标注
基于openlayers和canvas绘制海量数据的实现
OpenLayers地图要素tooltip[文字提示],对要素进行动态提示
基于openlayers实现如下功能: 1、实现图片地图,图片地图比例尺 2、绘制点的路径 3、绘制多边形,定位不规则多边形中心点,显示名称 4、多边形编辑 5、地图全屏,地图截图 6、点是否在区域中判定 7、暂停,播放,...
openLayers中文版api全翻译
OpenLayers 支持Open GIS 协会制定的WMS(Web Mapping Service)和WFS(Web Feature Service)等网络服务规范,可以通过远程服务的方式,将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行...
openLayers-API中文版
小马看Gis--用Openlayers实现实时定位 服务端服务方法用来生成GeoJSon串的jar包的源文件。
该脚本能够实现openlayers-Cesium二三维联动效果的功能