转载 openlayers使用笔记1 从例子开始学习openlayers

openlayers使用笔记1 从例子开始学习openlayers

转载自： http://www.blogjava.net/siriusfx/archive/2007/11/26/163104.html

 

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 οnlοad="init()">
    <h1>OpenLayers Test</h1>
    <div id="panel"></div>
    <div id="map"></div>
    <textarea style="display:none" id="serialize" cols="96" rows="10"/>
  </body>