国产日韩精品一区二区三区,久久香蕉一区,精品国产不卡

Mon, 15 Aug 2011 05:55:00 GMT

本文��Z��个openlayers��目的�ȝ��Q�其中可能有一些遗漏或描述得不准确的地方，望批评指正�?br /> 本文目标�Q?br /> 构徏一个完全自定义的轻量��地图信息�pȝ��Q�以openlayers为基��Q�需要自定义地图的元素样式，包括囑ֱ�切换的样式、地囑֯�航的样式、地图标记的实现、自定义弹出框等�{�。该专用地图信息�pȝ��地图来源于google地图�Q�包括普通地囑֛�层、卫星媄像图层、�\面信息图层，另外自行��M��一些局部区域的三维地图�Q�本��目��Z��业内部项目，与互联网隔离�Q�故不可使用google的地图api�Q�则需要抓取google的相兛_��图资源（暂时使用google地图资源�Q�，利用openlayers构徏轻量�U�专用地图信息系�l�，�q�里的轻量��是指使用tilecache接口实现地图囑ֱ��Q�相兌��料见前篇博文�Q?br /> 实现的效果图如下�Q?br />

�? 后台��理��面

�? 前台展示��面�Q�全屏显�C�）

地图相关说明�Q?/span>

地图��面事�g说明

地图基本功能

(1) 左上角的地图��览控�g�Q�包括地囄��上下左右�U�d��Q�地囄��~�放

(2) 右上角三个选项�Q�包括地图、航拍、三�l�_��点击每个选项�Q�出现相应的地图视图�Q�其中地图、航拍��用google地图数据�Q�下载google地图�Q?/span>

(3) 能够标注地图的行政区�?/span>

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

展示�q�_��功能

(1)�ȝ��面视�?/span>

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

(2)局部区域视�?/span>

a) 选中标记�Q�点�Q�，跌��{到局部区域视�?/span>

b) 点击标记�Q�点�Q�，�Ҏ��目的相应设�|�，昄��地图下方的选项卡，点击选项卡，昄��响应的内�?/span>

c) 鼠标攑֜�标记�Q�点�Q�上时。出现提�C�框�Q�鼠标移到提�C�框上面�Q�可以点�ȝ��应的链接�Q�点击链接之后，弹出一个对话框�Q��ƈ且锁住地囄��?/span>

地图数据说明

地图基本数据

(1)地图囄��Q�要有连�l�的�~�放�U�别的图�Q�每个��别之间相�?�?/span>

(2)航拍囄��Q�要有连�l�的�~�放�U�别的图�Q�每个��别之间相�?�?/span>

(3)三维囄��Q�需要和地图囄��、航拍图片保持一致的大小�Q�和�~�放�U�别和地理位�|?/span>

(4)地图效果图上面的使用的图标和弹出�H�口图，需要原�Ӟ��~�写css需要��?/span>

��码�?/a> 2011-08-15 13:55 发表评论

openlayers��结(有参考项目代�?

Mon, 11 Oct 2010 12:42:00 GMT

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

��码�?/a> 2010-10-11 20:42 发表评论

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

Thu, 09 Jul 2009 15:20:00 GMT

初学jquery�Q�觉得很好玩。欢�q�拍砖指�?br /> 我实现的效果截图

msn的效果截�?br />

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

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':'京地�?��L��奛_��工媲��?#8220;�I�姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
8     data['img_3'] ={'news_title':'周迅全智贤惊艛_��黎时装周','news_abs':'两美奛_��选黑色小�C�服�Q�周�q�红唇抢�?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
9     data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' �l�典杨立仁，直播现场表演天��|快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
10     data['img_2'] ={'news_title':' 令�h惊叹的野生世�?,'news_abs':' 五色鸟守着巢穴�Q�美�z��v��L��d��','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':'京地�?��L��奛_��工媲��?#8220;�I�姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
16     data['img_3'] ={'news_title':'周迅全智贤惊艛_��黎时装周','news_abs':'两美奛_��选黑色小�C�服�Q�周�q�红唇抢�?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
17     data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' �l�典杨立仁，直播现场表演天��|快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
18     data['img_2'] ={'news_title':' 令�h惊叹的野生世�?,'news_abs':' 五色鸟守着巢穴�Q�美�z��v��L��d��','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

��码�?/a> 2009-07-09 23:20 发表评论

国产日韩精品一区二区三区,久久香蕉一区,精品国产不卡

openlayers���结(有参考项目代�?

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

openlayers��结(有参考项目代�?

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