openlayers提供了幾十個(gè)示例，雖然每個(gè)示例都很簡(jiǎn)單，但卻很具有代表性，值得初學(xué)者學(xué)習(xí)。
現(xiàn)在我想做一個(gè)測(cè)試，包含多個(gè)圖層、縮放條、工具條、鼠標(biāo)位置、彈出窗口，其中圖層分別來自geoservr
提供的WMS和WFS服務(wù)接口。
主要代碼如下：
樣式定義，定義地圖大小，工具條位置和替換按鈕圖片。
<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;
        //關(guān)閉彈出窗口的函數(shù)
        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        //構(gòu)造彈出窗口的函數(shù)
        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);
        }
        //銷毀彈出窗口的函數(shù)
        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
        //地圖和頁面加載函數(shù)
        function init(){
            //設(shè)置地圖縮放范圍和縮放等級(jí)，0級(jí)比例尺最小
            map = new OpenLayers.Map( $('map'), {  maxScale: 500, minScale: 500000, numZoomLevels: 5 });
            //加載行政區(qū)圖層，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矢量數(shù)據(jù)，由openlayers在客戶端繪制，注意：數(shù)量太多會(huì)導(dǎo)致速度緩慢
            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());
            //設(shè)置初始地圖的中心坐標(biāo)和縮放等級(jí)
            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>