项目需要一个小型的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代码
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. },
24. //添加Feature,是point显示为图片
25. addEncorderFeature:function(encNode,location){
26. if(encNode&&this.repetitiveCheck(encNode.id)){
27. return;
28. }
29. var attributes = OpenLayers.Util.extend({}, encNode.attributes);
30. var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);
31. var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle['smallEncoder']);
32. this.addFeatures([enc_Feature]);
33. if(encNode.attributes['lon']&&encNode.attributes['lat']&&encNode.attributes['lon'].length>0){
34. return;
35. }
36. this.updateChannel(encNode.id,location.lon,location.lat);
37. },
38. repetitiveCheck:function(entity_id){
39. if(this.getFeatureByAttribute({id:entity_id})){
40. return true;
41. }
42. return false;
43. },
44. updateChannel:function(channel_id,lon,lat){
45. Ext.Ajax.request({
46. url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat
47. });
48. },
49. channelMarkerClick:function() {
50. var features = this.selectedFeatures;
51. if(features.length >=0&&features[0]) {
52. feature = features[0];
53. var treeNodeAttribute = feature.attributes;
54. //显示信息
55. }
56. },
57. cartoonFeature :function(feature){
58. this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);
59. var runner = new Ext.util.TaskRunner(1000);
60. var task = {
61. run:this.drawFeature,
62. scope:this,
63. args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],
64. interval: 1000
65. }
66. runner.start(task);
67. },
68. removeSelectFeature:function(){
69. var features = this.selectedFeatures;
70. for(var i=features.length-1; i>=0; i--) {
71. feature = features[i];
72. this.updateChannel(feature.attributes['id'],"","");
73. }
74. this.destroyFeatures(this.selectedFeatures);
75. },
76. monitorSelectFeature:function(){
77. var features = this.selectedFeatures;
78. if(features.length >=0&&features[0]) {
79. feature = features[0];
80. var treeNodeAttribute = feature.attributes;
81. var objId="mapAVShow"+treeNodeAttribute['id'];
82. //弹出窗口
83. }
84. }
85. });
分享到:
相关推荐
关于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二三维联动效果的功能