小码哥

谁谓河广,一苇杭之

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  7 随笔 :: 17 文章 :: 74 评论 :: 0 Trackbacks

公告

博客已经搬家至: http://thisiswangle.com
访问者位置
Locations of visitors to this page
欢迎关注我的新浪微博

常用链接

留言簿(21)

随笔分类

随笔档案

文章分类

文章档案

相册

订阅Canvas

搜索

最新评论

阅读排行榜

评论排行榜

最近一段时间里,又做了一个跟openlayers相关的项目,但是到目前为止,我对openlayers还是不怎么了解,做东西也只是参考了openlayers的例子,以及自己的一些对openlayers用法的一些猜测。openlayers是一个用js实现的GIS前端框架,我的js目前还是打酱油的水平,要是没有jquery,那就基本写不了几行js代码了。js那是相当的强大,再加上VML\SVG、HTML5以及很多js rich框架等等,感觉js在浏览器端真是无所不能啊

目前这个项目主要功能就是在某城市的地图上标示电缆、光缆、井盖、光缆接头、线杆、建筑物形状和位置、各分级单位的位置以及快速定位等等,要求的功能很简单,而且有前段时间做学校电子地图的一些积累,所以大概在两周左右就做完了这个项目。

感觉openlayers的资料很少,自己也没有太多的时间和精力去读它的源码,目前我都是通过看openlayers自带的那些example和api文档来摸索的,下面简单总结一下openlayers的相关用法,欢迎大家拍砖。
(以下均以OpenLayers-2.9.1为例说明,完整的项目代码在这里下载,地图图片http://121.193.130.68/list/

1、我只用到了openlayers里面的tilecache接口,其它的例如WMS,google map等等都没有用到。原因是这样的。tilecache接口是用来从tilecache服务器上请求图片的。通过观察google map或者一些其它的地图服务,发现他们都是使用256x256像素大小的图片(也就是tile)来拼接地图的,通常的做法是在gis服务器之间架设一个tilecache服务器,这样,gis生成的图片就可以缓存在tilecahe服务器上,而tilecache服务器仅仅提供简单http服务即可,如果请求的图片(tile)不在tilecache服务器上,那么tilecache服务器会想gis服务器请求,把把gis生成的图片缓存在tilecache服务器上。
通过观察tilecache服务器的目录结构,发现缓存图片按照这样的模具结构存放:{缩放级别}/{横坐标}/{纵坐标}.{图片格式后缀名},注意这个坐标系的原点在屏幕的左下角。观察到这个规律以后,就可以直接把一张大的地图按照256x256的大小切割,并按照上述的目录结构存放,值得注意的是,每个缩放级别要一定满足2^n的规律,即第一级整个地图大小若为1,那么第二级整个地图大小应为2,第三级应为4,依次类推。这里需要简单修改一下openlayers的tilecache接口代码,文件位于OpenLayers-2.9.1\lib\OpenLayers\Layer\TileCache.js,修改如下:
 1 var components = [
 2             this.layername,
 3             zeroPad(tileZ, 2),
 4             //zeroPad(parseInt(tileX / 1000000), 3),
 5             //zeroPad((parseInt(tileX / 1000) % 1000), 3),
 6             zeroPad((parseInt(tileX) % 1000), 3),
 7             //zeroPad(parseInt(tileY / 1000000), 3),
 8             //zeroPad((parseInt(tileY / 1000) % 1000), 3),
 9             zeroPad((parseInt(tileY) % 1000), 3+ '.' + this.extension
10         ];
同样,由于只使用tilecache,所以openlayers里面其它的代码也可删除,以减小openlayers的代码量,最后通过自带的python写的工具,压缩openlayers代码即可。

2.地图初次加载的时候,向服务器请求所有数据信息,并在地图上绘出相应的点线面。如何画出建筑的轮廓?用透明的就行了。
a.显示点信息,包括画点、用图标显示点,代码如下。
 1 /*
 2  *    在地图上画出所有的点并保存点的相关信息到字典中
 3  */
 4 function initFeaturePoint(vectorLayer,categoryId){
 5     //get point json
 6     point_data = getFeatureData('point',categoryId);
 7     var target_info = [];        
 8     // create a point feature
 9     for(index in point_data){
10         single_point = point_data[index].point.split(" ");
11         pointX = single_point[0];
12         pointY = single_point[1];
13         
14         //画点
15         var point = new OpenLayers.Geometry.Point(Number(pointX), Number(pointY));
16         
17         
18         var style_point = {
19                 strokeColor: point_data[index].strokeColor,
20                 strokeWidth: 2,
21                 strokeDashstyle: "solid",
22                 pointRadius: 6,
23                 strokeOpacity: 0.8,
24                 fillOpacity: 0.8,
25                 //label:point_data[index].title,
26                 fontSize:'12px',
27                 fontFamily:'宋体',
28                 labelXOffset:0,
29                 labelYOffset:-15,
30                 labelAlign:'m',
31                 fillColor: point_data[index].strokeColor
32         };
33         
34         //显示标记文字,把文字放在底下一层,这样上面的就不会选不上了
35         var pointText = new OpenLayers.Geometry.Point(Number(pointX), Number(pointY));
36         showPointTextTips(pointText, point_data[index].title);
37         
38         pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);
39         vectorLayer.addFeatures([pointFeature]);
40             
41         /*收集点的信息*/
42         id = point_data[index].id;
43         titles = point_data[index].title;
44         description = point_data[index].description;
45         strokeColor = point_data[index].strokeColor;
46         iconUrl = point_data[index].iconUrl;
47         iconUrl2 = point_data[index].iconUrl2;
48         array_index = pointFeature.id;
49         target_info[array_index] = {"id":id,"title":titles,"description":description,"strokeColor":strokeColor,"iconUrl":iconUrl,"iconUrl2":iconUrl2,"pointX":pointX,"pointY":pointY};
50         //alert(target_info[array_index]);
51     }
52     return target_info;
53 }

 1 /*
 2  *    在地图上画出所有的点并保存点的相关信息到字典中
 3  */
 4 function initFeatureImagePoint(vectorLayer,categoryId,imageUrl){
 5     //get point json
 6     point_data = getFeatureData('point',categoryId);
 7     var target_info = [];        
 8     // create a point feature
 9     for(index in point_data){
10         single_point = point_data[index].point.split(" ");
11         pointX = single_point[0];
12         pointY = single_point[1];
13         
14         //画点
15         var point = new OpenLayers.Geometry.Point(Number(pointX), Number(pointY));
16         
17         
18         var style_point = {
19                 graphicWidth : 32,
20                 graphicHeight: 32,
21                 externalGraphic:imageUrl,
22                 graphicTitle:point_data[index].title
23         };
24         
25         
26         pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);
27         vectorLayer.addFeatures([pointFeature]);
28         
29         /*收集点的信息*/
30         id = point_data[index].id;
31         titles = point_data[index].title;
32         description = point_data[index].description;
33         strokeColor = point_data[index].strokeColor;
34         iconUrl = point_data[index].iconUrl;
35         iconUrl2 = point_data[index].iconUrl2;
36         array_index = pointFeature.id;
37         target_info[array_index] = {"id":id,"title":titles,"description":description,"strokeColor":strokeColor,"iconUrl":iconUrl,"iconUrl2":iconUrl2,"pointX":pointX,"pointY":pointY};
38         //alert(target_info[array_index]);
39     }
40     return target_info;
41 }

b.画线
 1 /**
 2     在地图上画出所有的线并保存点的相关信息到字典中
 3 */
 4 function initFeatureLine(vectorLayer,categoryId)
 5 {
 6          
 7     linestring_data = getFeatureData('line',categoryId);
 8     var target_info = []; 
 9     // create all line features from a list of points
10        for(index in linestring_data){
11            var pointList = [];
12            linestring_points = linestring_data[index].point.split(",");
13            for(inner_index in linestring_points){
14                single_point = linestring_points[inner_index].split(" ");
15                pointX = single_point[0];
16             pointY = single_point[1];
17             newPoint = new OpenLayers.Geometry.Point(Number(pointX), Number(pointY));
18                pointList.push(newPoint);
19            }
20            var linestring =  new OpenLayers.Geometry.LineString(pointList);
21            var style_line = {
22                 strokeColor: linestring_data[index].strokeColor,
23                 strokeOpacity: 0.8,
24                 strokeWidth: linestring_data[index].strokeWidth,
25                 pointRadius: 20,
26                 //label:linestring_data[index].title,
27                 fontSize:'12px',
28                 fontFamily:'宋体',
29                 labelXOffset:30,
30                 labelYOffset:10,
31                 labelAlign:'rm'
32          };
33            lineFeature = new OpenLayers.Feature.Vector(linestring,null,style_line);
34         vectorLayer.addFeatures([lineFeature]);
35         
36         //显示标记文字
37         single_point = linestring_points[0].split(" ");
38         pointX = single_point[0];
39         pointY = single_point[1];
40         var pointText = new OpenLayers.Geometry.Point(Number(pointX), Number(pointY));
41         showPointTextTips(pointText, linestring_data[index].title);
42         
43         /*收集路的信息*/
44         id = linestring_data[index].id;
45         titles = linestring_data[index].title;
46         linelength = linestring_data[index].linelength;
47         description = linestring_data[index].description;
48         strokeColor = linestring_data[index].strokeColor;
49         strokeWidth = linestring_data[index].strokeWidth;
50         iconUrl = linestring_data[index].iconUrl;
51         iconUrl2 = linestring_data[index].iconUrl2;
52         array_index = linestring.id;
53         target_info[array_index] = {"id":id,"title":titles,"linelength":linelength,"description":description,"strokeColor":strokeColor,"strokeWidth":strokeWidth,"iconUrl":iconUrl,"iconUrl2":iconUrl2};
54        }
55        return target_info;       
56 }

c.画面
 1 /**
 2 在地图上画出所有的多边形区域路并保存点的相关信息到字典中
 3 */
 4 function initFeaturePolygon(vectorLayer,categoryId)
 5 {
 6     polygon_data = getFeatureData('polygon',categoryId);
 7     var target_info = []; 
 8     for(index in polygon_data){
 9         var pointList = [];
10         polygon_points = polygon_data[index].point.split(",");
11         for(inner_index in polygon_points){
12             single_point = polygon_points[inner_index].split(" ");
13             pointX = single_point[0];
14             pointY = single_point[1];
15             newPoint = new OpenLayers.Geometry.Point(Number(pointX), Number(pointY));
16                pointList.push(newPoint);
17         }
18         var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
19         var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
20         var style_polygon = {
21                 strokeColor: polygon_data[index].strokeColor,
22                 strokeWidth: 2,
23                 strokeOpacity: 0.8,
24                 fillOpacity: 0.8,
25                 //label:polygon_data[index].title,
26                 fontSize:'12px',
27                 fontFamily:'宋体',
28                 labelXOffset:0,
29                 labelYOffset:-15,
30                 labelAlign:'m',
31                 fillColor: polygon_data[index].strokeColor
32         };
33         polygonFeature = new OpenLayers.Feature.Vector(polygon,null,style_polygon);
34         vectorLayer.addFeatures([polygonFeature]); 
35         
36         
37         //显示标记文字
38         single_point = polygon_points[0].split(" ");
39         pointX = single_point[0];
40         pointY = single_point[1];
41         var pointText = new OpenLayers.Geometry.Point(Number(pointX), Number(pointY));
42         showPointTextTips(pointText, polygon_data[index].title);
43         
44         /*收集图形的信息*/
45         id = polygon_data[index].id;
46         titles = polygon_data[index].title;
47         description = polygon_data[index].description;
48         type_id = polygon_data[index].type_id;
49         strokeColor = polygon_data[index].strokeColor;
50         iconUrl = polygon_data[index].iconUrl;
51         iconUrl2 = polygon_data[index].iconUrl2;
52         array_index = polygon.id;
53         //alert(array_index);
54         target_info[array_index] = {"id":id,"title":titles,"description":description,"type_id":type_id,"strokeColor":strokeColor,"iconUrl":iconUrl,"iconUrl2":iconUrl2};      
55     }
56     return target_info;  
57 }

d.复制一条线
 1 /**
 2  * 
 3  * 复制线到某一层
 4  * @param desvectors
 5  * @param linestring
 6  * @return
 7  */
 8 function cloneLine(vectorLayer,linestring)
 9 {
10     linestring_points = linestring.substring("LINESTRING".length + 1,linestring.length - 1);
11     //alert(linestring_points);
12     var pointList = [];
13     line_points = linestring_points.split(",");
14     for(inner_index in line_points){
15         single_point = line_points[inner_index].split(" ");
16         pointX = single_point[0];
17         pointY = single_point[1];
18         newPoint = new OpenLayers.Geometry.Point(Number(pointX)+0.2, Number(pointY)+0.2);
19            pointList.push(newPoint);
20     }
21     var linestringtmp =  new OpenLayers.Geometry.LineString(pointList);
22        var style_line = {
23                 strokeColor: "red",
24                 strokeOpacity: 1,
25                 strokeWidth: 6,
26                 pointRadius: 20
27     };
28        //var tmpVector = vectorLayer == 'lightlinelayer' ? lightlinelayer : linelayer;
29        var tmpVector;
30        if(vectorLayer == 'lightlinelayer')
31            tmpVector = lightlinelayer;
32        else if(vectorLayer == 'linelayer')
33            tmpVector = linelayer;
34        else
35            tmpVector = policelightlinelayer;
36        
37        lineFeature = new OpenLayers.Feature.Vector(linestringtmp,null,style_line);
38        tmpVector.addFeatures([lineFeature]);
39 }

e.计算一条线的长度
 1 /*计算线的长度*/
 2 function getLengthOfALine(linestring)
 3 {
 4     //alert(linestring);
 5     linestring_points = linestring.substring("LINESTRING".length + 1,linestring.length - 1);
 6     //alert(linestring_points);
 7     var pointList = [];
 8     line_points = linestring_points.split(",");
 9     lineLength = 0;
10     for(inner_index in line_points){
11         if(inner_index > 0)
12         {
13             single_point = line_points[inner_index].split(" ");
14             pointX = Number(single_point[0]);
15             pointY = Number(single_point[1]);
16                
17             old_single_point = line_points[inner_index - 1].split(" ");
18             old_pointX = Number(old_single_point[0]);
19             old_pointY = Number(old_single_point[1]);
20             
21             lineLength = lineLength + Math.sqrt((pointX - old_pointX) * (pointX - old_pointX) + (pointY - old_pointY) * (pointY - old_pointY));
22         }
23     }
24     return lineLength.toFixed(4);
25 }

f.删除一个地图元素
 1 function deleteFeature(featureId)
 2 {
 3     
 4     if(!confirm("您确定要删除这个地图标记吗?"))
 5         return;
 6     var feature = null;
 7     //alert(lightlinelayer.getFeatureById(featureId));
 8     feature = lightlinelayer.getFeatureById(featureId);
 9     //alert(feature);
10     if(feature != null)
11     {
12         if(lineDataList[feature.geometry.id])
13         {
14             deleteFeatureByIdAndType(lineDataList[feature.geometry.id].id,'line');
15         }
16         map.removePopup(feature.popup);
17         feature.popup.destroy();
18         feature.popup = null;
19         lightlinelayer.destroyFeatures([feature]);
20         return;
21     }

地图图片是从google map下载的。
posted on 2010-10-11 20:42 小码哥 阅读(9361) 评论(32)  编辑  收藏 所属分类: Java语言学习HTMLpythonjquery

评论

# re: openlayers小结(有参考项目代码) 2010-11-02 08:33
博主,能给个联系用的QQ吗?最近也在搞E校园,想向您请教一下啊!  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2010-11-02 15:13 Barrie
@江
382060923  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2011-04-25 23:44 lee
首先十分楼主,不过楼主能把地图数据发上来吗???  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2011-05-11 22:15 Barrie
@lee
地图数据太大了,发不上来,你如果有需要,可以留下邮箱,我给你发过去  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2011-05-25 16:39 jie
楼主,能否发份代码,QQ:460117429.谢谢~  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2011-05-26 15:59 Barrie
@jie
http://www.blogjava.net/Files/canvas/map.zip  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2011-07-21 17:08 jie
3Q@Barrie
  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2011-10-20 14:17 zeng
麻烦给份地图,谢谢楼主:263941783@qq.com  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2011-11-11 23:37 siwei
你好,请发我一份地图。
448385620@qq.com
谢谢!  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-02-24 11:13 Mr许
@Barrie
楼主可以把地图数据发给我一份吗,十分感谢: xuweilin15353@163.com  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-03-21 10:23 xiaolin
由于刚接触这块,楼主能介绍下开发环境怎么搭建吗?  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-03-21 14:53 Barrie
@xiaolin
注意openlayers的目录结构,直接使用就可以了  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-03-21 17:05 xiaolin
新建一个基于asp.net的网站项目,下载好Openlayers包之后,把Openlayers.js,img文件夹,theme文件夹复制到同一个目录,然后通过<script src="openlayers/OpenLayers.js"></script>调用,请问楼主java环境下怎么引用的?  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-04-15 21:03 vernon.zheng
小码哥,请发我一份地图数据。
511596982@qq.com
万分谢谢啊!!!  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-04-20 15:35 da
楼主,请发我一份地图数据。
1395579668@qq.com
万分谢谢啊!!!  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-05-08 22:03 Chery
感谢楼主分享!
麻烦您给我发下 地图数据包,谢谢!!
cheryyoo@foxmail.com  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-08-03 14:44 zlbwonder
求达人给我发份地图数据 zlbwonder@163.com 谢谢  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-08-04 22:10 gj
求发我一份512528719@qq.com  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-09-20 10:08 孙星
您好,能指导下吗,在三维地图上,鼠标滑过建筑时出现黄色边框线高亮显示,这个功能怎样实现啊 我现在对地图理解还是不行,很模糊 能再提供一些源码吗 谢谢  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-09-23 21:47 Barrie
这个效果自带的examples里面有  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2012-10-08 13:37 k
受益匪浅,求博主发我一份。465023102@qq.com  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-11-13 09:08 小码哥
@k
服务器挂掉了,地图数据没了,不过可以自行下载google地图  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-12-26 16:26 IT女工
@Barrie
没有吧,,这怎么用啊,,,哎,,蒙了  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2012-12-28 12:31 小码哥
http://www.blogjava.net/Files/canvas/map.zip  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2013-01-09 15:32 zhouwei
楼主,能发我一份地图数据吗?
563192700@qq.com
  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2013-01-10 11:13 小码哥
@zhouwei

不好意思。已经没有地图数据了。可以自己从google地图下载嘛  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2013-05-23 16:50 amoning
下载以后是什么样子的?怎么集成到系统中?
我下了放到webroot下面,然后修改链接,没有。求帮助  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2013-06-04 09:03 小码哥
@amoning
需要自己准备好地图  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2014-11-10 12:34 hao
@Barrie我需要  回复  更多评论
  

# re: openlayers小结(有参考项目代码) 2014-12-31 14:02 赵龙归
showPointTextTips这个方法 的代码在哪呢?我想了解一下,能贴一下么  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2015-03-19 21:25 小李
给我也发份,谢谢!!416912113@qq.com  回复  更多评论
  

# re: openlayers小结(有参考项目代码)[未登录] 2015-03-19 21:26 小李
我也要份,谢谢! 416912113@qq.com
  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: