BlogJava-小码哥-文章分类-jquery

改造openlayers构建轻量级专用地图信息系统（1）

小码哥 — Mon, 15 Aug 2011 05:55:00 GMT

本文为一个openlayers项目的总结，其中可能有一些遗漏或描述得不准确的地方，望批评指正。
本文目标：
构建一个完全自定义的轻量级地图信息系统，以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小结(有参考项目代码)

小码哥 — Mon, 11 Oct 2010 12:42:00 GMT

摘要: 最近一段时间里，又做了一个跟openlayers相关的项目，但是到目前为止，我对openlayers还是不怎么了解，做东西也只是参考了openlayers的例子，以及自己的一些对openlayers用法的一些猜测。openlayers是一个用js实现的GIS前端框架，我的js目前还是打酱油的水平，要是没有jquery，那就基本写不了几行js代码了。js那是相当的强大，再加上VML\SVG、HTML... 阅读全文

小码哥 2010-10-11 20:42 发表评论

使用jquery+jQuery Cycle Plugin实现MSN首页图片滑动切换效果

小码哥 — Thu, 09 Jul 2009 15:20:00 GMT

初学jquery，觉得很好玩。欢迎拍砖指正
我实现的效果截图

msn的效果截图

全部是js实现的，效果还不错，可以IE7，ff3，Chrome上正常运行,这里是demo[查看]
其中使用了jquery1.3.2[下载]，jquery.cycle.all.js[下载] 所有文件在这里[下载]

1 body {
2     font-family: Arial, Helvetica, sans-serif;
3     font-size: 12px;
4     font-style: normal;
5     line-height: normal;
6     font-weight: normal;
7 }
8 .clear{
9     clear:both;
10     height:0px;
11 }
12 .hot {
13     background-color: #F7F7F7;
14     height: 227px;
15     width: 302px;
16     border: 1px solid #DEDEDE;
17     padding-right:5px;
18 }
19
20 .hot_pic {
21     height:  190px;
22     width:   250px;
23     padding: 0;
24     margin:  0;
25     float:left;
26     clear:left;
27 }
28
29 .hot_pic img {
30     background-color: #eee;
31     width:  240px;
32     height: 180px;
33     top:  0;
34     left: 0 ;
35     padding: 5px;
36 }
37 .hot_thumb{
38     float:right;
39     clear:right;
40     height:190px;
41     width:52px;
42 }
43 .hot_thumb a { width: 52px; height:48px; display: block;padding-top:0px;margin-top:0px;}
44 .hot_thumb a.activeSlide {
45     background-image: url(activeSlide.png);
46 }
47 .hot_thumb a:focus { outline: none; }
48 .hot_thumb img { border: none; margin-top:4px;margin-right:4px;margin-bottom:4px;margin-left:8px;}
49
50 .hot_title p{margin:0 0;line-height:18px;padding-left:5px;}
51

1 <script type="text/javascript" >
2 $(document).ready(function(){
3
4     /*使用服务器端生成代码,id要与后面的class="hot_pic"内的图片对应*/
5     /*也可以可以使JSON*/
6     var data = [];
7     data['img_4'] ={'news_title':'京地铁4号线女员工媲美“空姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
8     data['img_3'] ={'news_title':'周迅全智贤惊艳巴黎时装周','news_abs':'两美女同选黑色小礼服，周迅红唇抢眼','news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
9     data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' 经典杨立仁，直播现场表演天津快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
10     data['img_2'] ={'news_title':' 令人惊叹的野生世界','news_abs':' 五色鸟守着巢穴，美洲豹偷窥邻居','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
11
12     /*使用jQuery Cycle Plugin*/
13     $('.hot_pic').cycle({
14         fx:    'fade',
15         pause:  1 ,
16         pager:  '.hot_thumb',
17            pagerAnchorBuilder: function(idx, slide) {
18             return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" />a>';
19         },
20         before:function onAfter() {
21          $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + 'a>string>p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细a>]p>');
22         }
23     });
24
25 });
26 script>

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>图片切换title>
6 <link href="index.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript" language="JavaScript" src="jquery.js">script>
8 <script type="text/javascript" language="JavaScript" src="jquery.cycle.all.js">script>
9 <script type="text/javascript" >
10 $(document).ready(function(){
11
12     /*使用服务器端生成代码,id要与后面的class="hot_pic"内的图片对应*/
13     /*也可以可以使JSON*/
14     var data = [];
15     data['img_4'] ={'news_title':'京地铁4号线女员工媲美“空姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
16     data['img_3'] ={'news_title':'周迅全智贤惊艳巴黎时装周','news_abs':'两美女同选黑色小礼服，周迅红唇抢眼','news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
17     data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' 经典杨立仁，直播现场表演天津快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
18     data['img_2'] ={'news_title':' 令人惊叹的野生世界','news_abs':' 五色鸟守着巢穴，美洲豹偷窥邻居','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
19
20     /*使用jQuery Cycle Plugin*/
21     $('.hot_pic').cycle({
22         fx:    'fade',
23         pause:  1 ,
24         pager:  '.hot_thumb',
25            pagerAnchorBuilder: function(idx, slide) {
26             return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" />a>';
27         },
28         before:function onAfter() {
29          $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + 'a>string>p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细a>]p>');
30         }
31     });
32
33 });
34 script>
35 head>
36
37 <body>
38 <div class="hot">
39     <div class="hot_pic">
40         <img id="img_1" src="1.jpg" width="240" height="180" />
41         <img id="img_2" src="2.jpg" width="240" height="180" />
42         <img id="img_3" src="3.jpg" width="240" height="180" />
43      <img id="img_4" src="4.jpg" width="240" height="180" />
44     div>
45     <div class="hot_thumb">div>
46     <div class="clear">div>
47     <div class="hot_title">
48     div>
49 div>
50 body>
51 html>
52

小码哥 2009-07-09 23:20 发表评论