openlayers使用笔记1 从例子开始学习openlayers - java&gis - blogjava.txt

txt文档,记录了gis开发中openlayers的开发笔记

openlayers使用笔记1 从例子开始学习openlayers - Java&GIS - BlogJava   
Java&GIS

BlogJava  ::  首页  ::  新随笔  ::  联系  ::  聚合   ::  管理 posts - 13,  comments - 23,  
trackbacks - 0 
            <2007年11月>

      日一二三四五六
      28293031123
      45678910
      11121314151617
      18192021222324
      2526272829301
      2345678

常用链接
  我的随笔 
  我的评论 
  我的参与 
  最新评论 
留言簿(6)
  给我留言 
  查看公开留言 
  查看私人留言 
随笔档案
  2007年12月 (1) 
  2007年11月 (2) 
  2007年8月 (1) 
  2007年6月 (1) 
  2007年4月 (1) 
  2007年2月 (1) 
  2007年1月 (2) 
  2006年12月 (1) 
  2006年8月 (3) 
搜索

    
最新评论 
  1. re: Internet上的WMS/WFS地图服务器资源 
  注释能加上点就好了？ 

  --kenzhang 
  2. re: 使用开源项目打造GIS应用系统 
  [e-mail] 
  --ldl 
  3. re: Geoserver 1.5.2 安装与测试 
  Your Potential, Our Passion! 好像是某个大公司的口号，好像是微软的？记得不是很清楚了！ 

  --Ryan 
  4. re: Geoserver 1.5.1测试手记 
  不错,有窝了...呵呵 
  --BeanSoft 
  5. re: Geoserver的工程部署说明 
  知道如何将GeoServer部署到WebSphere上面吗 
  我的QQ：278104696 
  MSN：[e-mail] 

  --http://salonliudong.cnblogs.com 
阅读排行榜
  1. 以Geotools和Geoserver为基础开发的商业webgis系统即将上线运营(2367) 
  2. 使用开源项目打造GIS应用系统(2276) 
  3. 测试Geoserver1.4.0(2022) 
  4. apache2.2 tomcat5.0 整合步骤（支持集群负载均衡）(1959) 
  5. Geoserver的工程部署说明(1827) 
评论排行榜
  1. 以Geotools和Geoserver为基础开发的商业webgis系统即将上线运营(8) 
  2. 使用开源项目打造GIS应用系统(6) 
  3. 测试Geoserver1.4.0(3) 
  4. apache2.2 tomcat5.0 整合步骤（支持集群负载均衡）(2) 
  5. Geoserver 1.5.1测试手记(1) 
openlayers使用笔记1 从例子开始学习openlayers 
openlayers提供了几十个示例，虽然每个示例都很简单，但却很具有代表性，值得初学者学习。
现在我想做一个测试，包含多个图层、缩放条、工具条、鼠标位置、弹出窗口，其中图层分别来自geoservr
提供的WMS和WFS服务接口。
主要代码如下：
样式定义，定义地图大小，工具条位置和替换按钮图片。
<style type="text/css">
        #map {
            width: 640px;
            height: 475px;
            border: 1px solid black;
        }

        .olControlPanel div { 
          display:block;
          position: absolute;
                    top: 0px;
                    left: 190px;
          width:  60px;
          height: 23px;
          margin: 5px;
        }
        .olControlPanel .olControlMouseDefaultsItemActive { 
          background-image: url("/openlayers/img/Pan.gif");
        }
        .olControlPanel .olControlMouseDefaultsItemInactive { 
          background-image: url("/openlayers/img/PanSelected.gif");
        }
        .olControlPanel .olControlZoomBoxItemInactive { 
          width:  60px;  
          height: 23px;
          position: absolute;
                    top: 0px;
                    left: 250px;
          background-image: url("/openlayers/img/ZoomInSelected.gif");
        }
        .olControlPanel .olControlZoomBoxItemActive { 
          width:  60px;  
          height: 23px;
          position: absolute;
                    top: 0px;
                    left: 250px;
          background-image: url("/openlayers/img/ZoomIn.gif");
        }
         .olControlPanel .olControlSelectFeatureItemInactive { 
          width:  60px;  
          height: 23px;
          position: absolute;
                    top: 0px;
                    left: 310px;
          background-image: url("/openlayers/img/InfoSelected.gif");
        }
        .olControlPanel .olControlSelectFeatureItemActive { 
          width:  60px;  
          height: 23px;
          position: absolute;
                    top: 0px;
                    left: 310px;
          background-image: url("/openlayers/img/Info.gif");
        }
    </style>
JS代码，核心部分。
<script src="/openlayers/OpenLayers.js"></script>
    <script type="text/javascript">
        <!--
        //定义全局变量
        var map, layer, selectControl, selectedFeature;
        //关闭弹出窗口的函数
        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        //构造弹出窗口的函数
        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.Anchored("chicken", 
                                     
feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(250,75),
                                     "<div style='font-size:.8em'>" + 
feature.attributes['cq:LNAME'] +"</div>",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        //销毁弹出窗口的函数 
        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
        //地图和页面加载函数
        function init(){
            //设置地图缩放范围和缩放等级，0级比例尺最小
            map = new OpenLayers.Map( $('map'), {  maxScale: 500, minScale: 
500000, numZoomLevels: 5 });
            //加载行政区图层，WMS栅格图像
            layer = new OpenLayers.Layer.WMS( "District", 
                    "http://192.98.151.17:8081/geoserver/wms", {layers: 
'cq:GMAP_DISTRICT'} );
            map.addLayer(layer);
            //加载水系图层，WMS栅格图像
            layer = new OpenLayers.Layer.WMS( "Water", 
                    "http://192.98.151.17:8081/geoserver/wms", {layers: 
'cq:GMAP_LAKE', 'transparent': true, format: 'image/png' } );
            map.addLayer(layer);
            //加载单位图层，WFS矢量数据，由openlayers在客户端绘制，注意：数量太多会导致速度缓慢
            layer = new OpenLayers.Layer.WFS( "Unit", 
                    "http://192.98.151.17:8081/geoserver/wfs", {typename: 
'cq:GPOI_GOV'}, 
               {  
                      typename: 'unit', 
                      featureNS: 'http://www.openplans.org/cq', 
                      extractAttributes: true, 
                      maxfeatures: 10,
                      textAttrToDisplay: 'lname' 
               } );
            map.addLayer(layer);
            //在地图上添加按钮和工具条
            zb = new OpenLayers.Control.ZoomBox();
            var panel = new OpenLayers.Control.Panel({defaultControl: zb});
            selectControl = new OpenLayers.Control.SelectFeature(layer, 
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect, hover: true});
            panel.addControls([
                new OpenLayers.Control.MouseDefaults(), zb, selectControl
            ]);
            map.addControl(panel);
           
            map.addControl(new 
OpenLayers.Control.PanZoomBar({zoomWorldIcon:false}));
            map.addControl(new 
OpenLayers.Control.LayerSwitcher({'ascending':false}));
            map.addControl(new OpenLayers.Control.MousePosition());
            //设置初始地图的中心坐标和缩放等级
            map.setCenter(new OpenLayers.LonLat(106.5, 29.5), 3);
            
        }
        // -->
    </script>
HTML代码
<body onload="init()">
    <h1>OpenLayers Test</h1>
    <div id="panel"></div>
    <div id="map"></div>
    <textarea style="display:none" id="serialize" cols="96" rows="10"/>
  </body>


posted on 2007-11-26 10:58 天狼 阅读(788) 评论(0)  编辑  收藏 
 
刷新评论列表  


      标题请输入标题
      姓名请输入你的姓名
      主页
            请输入验证码 
            验证码*  

      内容(请不要发表任何与政治相关的内容) 请输入评论内容


      Remember Me?
         登录  使用高级评论  新用户注册  返回页首  恢复上次提交       
      [使用Ctrl+Enter键可以直接提交]
      该文被作者在 2007-11-26 20:06 编辑过
       

       





Powered by: 
BlogJava  
Copyright ©2007 天狼