BlogJava-小码哥-文章分类-openlayershttp://www.blogjava.net/canvas/category/40747.html谁谓河广，一苇杭之zh-cnWed, 14 Nov 2012 07:49:12 GMTWed, 14 Nov 2012 07:49:12 GMT60改造openlayers构建轻量级专用地图信息系统（1）http://www.blogjava.net/canvas/articles/openlayers-custom.html小码哥小码哥Mon, 15 Aug 2011 05:55:00 GMThttp://www.blogjava.net/canvas/articles/openlayers-custom.htmlhttp://www.blogjava.net/canvas/comments/356500.htmlhttp://www.blogjava.net/canvas/articles/openlayers-custom.html#Feedback0http://www.blogjava.net/canvas/comments/commentRss/356500.htmlhttp://www.blogjava.net/canvas/services/trackbacks/356500.html 本文目标：
构建一个完全自定义的轻量级地图信息系统，以openlayers为基础，需要自定义地图的元素样式，包括图层切换的样式、地图导航的样式、地图标记的实现、自定义弹出框等等。该专用地图信息系统地图来源于google地图，包括普通地图图层、卫星影像图层、路面信息图层，另外自行画了一些局部区域的三维地图，本项目为企业内部项目，与互联网隔离，故不可使用google的地图api，则需要抓取google的相关地图资源（暂时使用google地图资源），利用openlayers构建轻量级专用地图信息系统，这里的轻量级是指使用tilecache接口实现地图图层（相关资料见前篇博文）
实现的效果图如下：


图1 后台管理页面



图2 前台展示页面（全屏显示）


地图相关说明：

地图页面事件说明

地图基本功能

(1) 左上角的地图浏览控件：包括地图的上下左右移动，地图的缩放

(2) 右上角三个选项，包括地图、航拍、三维，点击每个选项，出现相应的地图视图，其中地图、航拍使用google地图数据（下载google地图）

(3) 能够标注地图的行政区域

(4) 鼠标在地图上双击鼠标左键，放大地图一个级别，鼠标滚轮向前向后转动分别是放大缩小地图一个级别，鼠标右键点击，无响应事件

展示平台功能

(1)主界面视图

a) 有若干个个图层，地图下面有各个图层的选项卡，点击每个选项，显示相应的内容

(2)局部区域视图

a) 选中标记（点），跳转到局部区域视图

b) 点击标记（点），根据项目的相应设置，显示地图下方的选项卡，点击选项卡，显示响应的内容

c) 鼠标放在标记（点）上时。出现提示框，鼠标移到提示框上面，可以点击相应的链接，点击链接之后，弹出一个对话框，并且锁住地图界面

地图数据说明

地图基本数据

(1)地图图片，要有连续的缩放级别的图，每个级别之间相差2倍

(2)航拍图片，要有连续的缩放级别的图，每个级别之间相差2倍

(3)三维图片，需要和地图图片、航拍图片保持一致的大小，和缩放级别和地理位置

(4)地图效果图上面的使用的图标和弹出窗口图，需要原件，编写css需要使用




小码哥 2011-08-15 13:55 发表评论
]]>使用Openlayers搭一个E校园(e-campus),类似e都市，6d校园http://www.blogjava.net/canvas/articles/e-campus.html小码哥小码哥Fri, 10 Jul 2009 16:57:00 GMThttp://www.blogjava.net/canvas/articles/e-campus.htmlhttp://www.blogjava.net/canvas/comments/286308.htmlhttp://www.blogjava.net/canvas/articles/e-campus.html#Feedback18http://www.blogjava.net/canvas/comments/commentRss/286308.htmlhttp://www.blogjava.net/canvas/services/trackbacks/286308.html 快回家了，做点记录，欢迎拍砖指正。
新生应该可以在录取通知书里看到这个地图的链接了^_^
刚开始做这个地图的时候，打算使用geoserver等专业的东西，时间太紧了，对GIS一点了解都没有，所以就放弃了。看到了6D校园和e都市的实现方案，找了一找，发现了mapeasy这个js库，于是把6D校园的地图图片下载下来了，自己试着用mapeasy实现了一下，效果很好，但是总感觉不对劲，像6D校园和e都市都是使用html map area来标注地图信息的，这样就与真正的地理信息系统差远了，不好快速的添加信息或者做路径搜索了，于是又不是很满意。在使用geoserver的时候，注意到它显示地图信息使用了openlayers，于是简单看了一下openlayers的例子，感觉很强大，也比较符合我的想法。
openlayers可以直接使用图片做地图的来源，然后直接编辑地图，添加地图的地理信息，包括点，线，多边形区域，这样就很容易做路径搜索，也很快速容易添加地图的地理信息了。
看到openlayers可以使用tilecache做地图的图片来源，我就搭建了tilecache服务器，这个tilecache是用python写的，很容易配置。我仔细看了一下tilecache的配置，发现这个完全可以直接使用图片就可以，只是把切好的图片按照titlecache的目录结构放置好，就行了。于是简单的修改了一下openlayers的tilecache接口，就基本实现了电子地图。地图原图是一个面积很大图片，我用PIL库，使用python写了一个简单的切图程序，把地图按照横纵坐标切成了256X256大小的图片，并且按照自己定制tilecache的目录结构存好图片，最后把这些图片放在apache http服务器下，使用openlayers直接读取即可。
最后实现的功能有：地图浏览，地图缩略展示，地面建筑标记，地面建筑提示，路线标记，快速定位，后台添加信息等(路径搜索暂未实现)
其中后台可以直接画出建筑的多边形、路线、点标记，然后添加信息





后台管理页面如下：



小码哥 2009-07-11 00:57 发表评论
]]>