openlayers_study_one

openlayers提供了幾十個示例，很具有代表性。
現在做一個測試，包含多個圖層、縮放條、工具條、鼠標位置、彈出窗口，其中圖層分別來自geoserver提供的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>