Geoserver基本使用、WMS服務發布與OpenLayers測試

本文轉載自查看原文 2014-08-07 16:56 9646 GIS/ geoserver

1.Geoserver與OpenLayers的下載

2.安裝部署Geoserver

環境：jdk 1.7,geoserver-2.5

配置：修改geoserver-2.5/ect/jetty.xml 的端口為8089，避免端口沖突。

 <Call name="addConnector">
      <Arg>
          <New class="org.mortbay.jetty.nio.SelectChannelConnector">
            <Set name="port"><SystemProperty name="jetty.port" default="8089"/></Set>
            <Set name="maxIdleTime">30000</Set>
            <Set name="Acceptors">2</Set>
            <Set name="confidentialPort">8443</Set>
          </New>
      </Arg>
    </Call>

3.啟動、停止Geoserver服務器，准備地圖數據

啟動：在geoserver-2.5/bin下啟動startup.bat

停止：在geoserver-2.5/bin下啟動shutdown.bat

數據：可以說數據文件也可以是數據庫數據，數據庫支持PostGIS、Oralce、Mysql等數據庫，這里我們准備的是*.shp數據。

注：將shp格式數據放在geoserver-2.5/data_dir/data下。

4.創建工作區

啟動服務器后，使用用戶: admin ,密碼：geoserver登錄系統創建工作區。

此處以chinamap為例。

5.添加數據存儲並發布層

這里的數據存儲名稱代表一個分層layer，在同一個工作區不允許重復分層名稱存在。

添加數據存儲並選擇數據類型

選擇對應類型的數據，這里我們選擇shp類型的。

若上面“數據源名稱”填寫的是poi,那么得到的新建圖層就是poi.

點擊“發布”此圖層，設置發布參數：

定義SRS選擇數據的EPSG投影類型，這里因為數據的關系我選的是EPSG:4600，點擊保存"數據存儲"層（layer）發布成功。

6.Layer Preview地圖層預覽

最終加入的數據層可以在此處看到，這里都是添加后的數據層。

圖層（Layers）中也可以看到剛才添加的層.

另外在系統歡迎界面還可以看到所有的層、商店、工作區的統計視圖，點擊即可查看詳情.

7.發布geoserverWMS服務

修改chinamap工作區的參數，勾選WMS服務，修改后點擊保存.

注：這里有個“代理服務器URL"，建議先保持為空，不要填寫任何內容。

驗證WMS是否發布成功，在瀏覽器中輸入地址：http://192.168.1.147:8089/geoserver/wms，看到如下圖所示內容表示發布成功。

8.Openlayers編寫客戶端訪問WMS服務

創建一個web項目GisOpenlayersGeoserver，OpenLayers的包添加的時候很多注意不要加入不必要的包。

創建JSP頁面測試地圖，index.jsp文件內容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <title>OpenLayers map preview</title>  
        <!-- Import OL CSS, auto import does not work with our minified OL.js build -->  
        <link rel="stylesheet" type="text/css" href="${ctx}/openlayers/theme/default/style.css"/>  
        <link rel="stylesheet" href="${ctx}/openlayers/theme/default/google.css" type="text/css"/>  
        <!-- Basic CSS definitions -->  
        <style type="text/css">  
            /* General settings */  
            body {  
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
                font-size: small;  
            }  
            /* Toolbar styles */  
            #toolbar {  
                position: relative;  
                padding-bottom: 0.5em;   
                 
            }  
              
            /* The map and the location bar */  
            #map {  
                clear: both;  
                position: relative;  
                width: 100%;  
                height: 620px;  
                border: 1px solid black;  
            }  
              
            #wrapper {  
                width: 698px;  
            }  
              
            #location {  
                float: right;  
            }  
  
            /* Styles used by the default GetFeatureInfo output, added to make IE happy */  
            table.featureInfo, table.featureInfo td, table.featureInfo th {  
                border: 1px solid #ddd;  
                border-collapse: collapse;  
                margin: 0;  
                padding: 0;  
                font-size: 90%;  
                padding: .2em .1em;  
            }  
              
            table.featureInfo th {  
                padding: .2em .2em;  
                text-transform: uppercase;  
                font-weight: bold;  
                background: #eee;  
            }  
              
            table.featureInfo td {  
                background: #fff;  
            }  
              
            table.featureInfo tr.odd td {  
                background: #eee;  
            }  
              
            table.featureInfo caption {  
                text-align: left;  
                font-size: 100%;  
                font-weight: bold;  
                text-transform: uppercase;  
                padding: .2em .2em;  
            }  
        </style>  
        <!-- Import OpenLayers, reduced, wms read only version -->  
       <script src="${ctx}/openlayers/lib/OpenLayers.js" ></script>  
       <script src="${ctx}/jslib/jquery-1.10.2.min.js" ></script>  
       <!--  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>  --> 
        <script defer="defer" type="text/javascript">  
            var map, measureControls;  
            var untiled;  
            var tiled;  
              
            function init(){  
                format = 'image/png';  
                var bounds = new OpenLayers.Bounds(  //地圖區域范圍  
                    74.137, 6.319,  
                    135.086, 53.558  
                );  
                var options = {  
                    controls: [],  
                    maxExtent: bounds,  
                    maxResolution: 0.23808203125,  
                    projection: "EPSG:4600",  
                    numZoomLevels: 15,   
                    units: 'degrees'  
                };  
                map = new OpenLayers.Map('map', options);  
          
               /**********************加載圖層 開始*******************************/  
              /*   tiled = new OpenLayers.Layer.WMS(  //圖層組  
                    "基礎圖層", "http://localhost:8080/geoserver/wms",  
                    {  
                        height: '330',  
                        width: '698',  
                        layers: 'sf',  
                        styles: '',  
                        srs: 'EPSG:4326',  
                        format: format,  
                        tiled: 'true',  
                        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom  
                    },  
                    {  
                        buffer: 0,  
                        displayOutsideMaxExtent: true  
                    }   
                );*/  
                  
                var streams = new OpenLayers.Layer.WMS(    //圖層組  
                    "中國地州界", "http://192.168.1.147:8089/geoserver/wms",  
                    {  
                       height: '330',  
                        width: '698',  
                        layers: 'chinamap:中國地州界',  
                        styles: '',  
                        srs: 'EPSG:4600',  
                        format: format,  
                        tiled: 'true',  
                        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom  
                    },  
                    {  
                        buffer: 0,  
                        displayOutsideMaxExtent: true  
  
                    }   
                );  
              
                untiled = new OpenLayers.Layer.WMS(  //單獨圖層  
                    "省會城市", "http://192.168.1.147:8089/geoserver/wms",  
                    {  
                        height: '330',  
                        width: '698',  
                        layers: 'chinamap:省會城市',  
                        styles: '',  
                        srs: 'EPSG:4600',  
                        transparent: "true",  
                        format: format  
                    },  
                    {singleTile: true, ratio: 1}   
                );  
               //  untiled.setVisibility(false); //設置為不顯示  
               
                //var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});      
                /* var dm_wms = new OpenLayers.Layer.WMS( "點圖層",  
                "http://127.0.0.1:8080/geoserver/wms",  
                {layers: "sf:bugsites,sf:archsites",  
                 transparent: "true", format: "image/png"});*/  
  
               map.addLayers([streams,untiled]);  
              /********************END 加載圖層*********************************/  
  
               /************************加載一般的基礎控件********************************/     
                map.addControl(new OpenLayers.Control.PanZoomBar({  //添加平移縮放工具條  
                    position: new OpenLayers.Pixel(2, 15)  
                }));  
                map.addControl(new OpenLayers.Control.Navigation());  //雙擊放大,平移  
                map.addControl(new OpenLayers.Control.Scale($('scale')));  //獲取地圖比例尺  
                map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));  //獲取鼠標的經緯度  
                map.setCenter(new OpenLayers.LonLat(100.254, 35.25), 1);  //添加平移縮放工具條  
                map.addControl(new OpenLayers.Control.OverviewMap());  //添加鷹眼圖  
                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));  //圖層切換工具              
                map.addControl(new OpenLayers.Control.Permalink('xxxx'));  //添加永久鏈接  
                //map.addControl(new OpenLayers.Control.MouseToolbar());  
  
                //map.zoomToMaxExtent();  
                var zb=new OpenLayers.Control.ZoomBox({out:true});  
                var panel = new OpenLayers.Control.Panel({defaultControl: zb});  
                map.addControl(panel);  
             /************END************加載一般的基礎控件********************************/     
  
               /***********************鼠標點擊，獲取圖層數據*******************************/     
                map.events.register('click', map, function (e) {  
                    document.getElementById('nodelist').innerHTML = "Loading... please wait...";  
                    var params = {  
                        REQUEST: "GetFeatureInfo",  
                        EXCEPTIONS: "application/vnd.ogc.se_xml",  
                        BBOX: map.getExtent().toBBOX(),  
                        X: e.xy.x,  
                        Y: e.xy.y,  
                        INFO_FORMAT: 'text/html',  
                        QUERY_LAYERS: map.layers[0].params.LAYERS,  
                        FEATURE_COUNT: 50,  
                        Layers: 'ok',  
                        Styles: '',  
                        Srs: 'EPSG:4600',  
                        WIDTH: map.size.w,  
                        HEIGHT: map.size.h,  
                        format: format};  
                    OpenLayers.loadURL("http://192.168.1.147:8089/geoserver/wms", params, this, setHTML, setHTML);  
                    OpenLayers.Event.stop(e);  
                });  
              /**************END*********鼠標點擊，獲取圖層數據*******************************/     
  
            /**********************************點、線、面測量開始**********************************************/  
             var sketchSymbolizers = {  
                "Point": {  
                    pointRadius: 4,   
                    graphicName: "square",  
                    fillColor: "white",  
                    fillOpacity: 1,  
                    strokeWidth: 1,  
                    strokeOpacity: 1,  
                    strokeColor: "#333333"  
                },  
                "Line": {  
                    strokeWidth: 3,  
                    strokeOpacity: 1,  
                    strokeColor: "#666666",  
                    strokeDashstyle: "dash"  
                },  
                "Polygon": {  
                    strokeWidth: 2,  
                    strokeOpacity: 1,  
                    strokeColor: "#666666",  
                    fillColor: "white",  
                    fillOpacity: 0.3  
                }  
            };  
            var style = new OpenLayers.Style();  
            style.addRules([  
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})  
            ]);  
             var styleMap = new OpenLayers.StyleMap({"default": style});  
             measureControls = {  
                line: new OpenLayers.Control.Measure(  
                    OpenLayers.Handler.Path, {  
                        persist: true,  
                        handlerOptions: {  
                            layerOptions: {styleMap: styleMap}  
                        }  
                    }  
                ),  
                polygon: new OpenLayers.Control.Measure(  
                    OpenLayers.Handler.Polygon, {  
                        persist: true,  
                        handlerOptions: {  
                            layerOptions: {styleMap: styleMap}  
                        }  
                    }  
                )  
            };  
             var control;  
            for(var key in measureControls) {  
                control = measureControls[key];
                control.events.on({  
                    "measure": handleMeasurements,  
                    "measurepartial": handleMeasurements  
                });  
                map.addControl(control);  
            }  
            /***************************END************點，線、面積測量*****************************************/  
  
              //添加點標注的圖層  
              markers = new OpenLayers.Layer.Markers("markers");  
              map.addLayer(markers);    
              markers.setZIndex(200);  
              map.zoomTo(2);  
  
       }  
              
        //獲取面積的結果賦值  
          function handleMeasurements(event) {  
            var geometry = event.geometry;  
            var units = event.units;  
            var order = event.order;  
            var measure = event.measure;  
            var element = document.getElementById('output');  
            var out = "";  
            if(order == 1) {  
                out += "面積為: " + measure.toFixed(3) + " " + units;  
            } else {  
                out += "面積為: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";  
            }  
            element.innerHTML = out;  
        }  
        function setHTML(response){  
            document.getElementById('nodelist').innerHTML = response.responseText;  
        };  
        //縮小  
        function zoomOut(){  
            map.zoomOut();  
        }  
        //放大  
        function zoomIn(){  
            map.zoomIn();  
        }  
        //獲取地圖數據  
        function getSize(){  
            alert(map.getSize()+",高度為="+map.getSize().h);  
        }  
        //切換鼠標事件功能  
        function toggleControl(_value) {  
              
            for(key in measureControls) {  
                var control = measureControls[key];  
                if(_value == key ) {  
                    control.activate();  
                } else {  
                    control.deactivate();  
                }  
            }  
        }  
  
        /*********************拉寬並獲取經緯度坐標系*********************************/  
        function boxExtend(){  
            var controlBox = new OpenLayers.Control();  
              OpenLayers.Util.extend(controlBox, {  
                    draw: function () {  
                        this.box = new OpenLayers.Handler.Box( controlBox,  
                            {"done": this.notice},{ "persist": true},  
                            {keyMask:OpenLayers.Handler.MOD_SHIFT });  
                        this.box.activate();  
                    },  
  
                    notice: function (bounds) {       
                        var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom));   
                        var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top));   
                        alert(ll.lon.toFixed(4) + ", " +   
                              ll.lat.toFixed(4) + ", " +   
                              ur.lon.toFixed(4) + ", " +   
                              ur.lat.toFixed(4));  
                    }  
                });  
            map.addControl(controlBox);  
        }  
        var markers,marker;  
        var markArr=new Array();  
        function addMarker(){  
             var url = 'http://www.openlayers.org/dev/img/marker.png';  
                var sz = new OpenLayers.Size(20, 20);  //尺寸大小  
                var calculateOffset = function(size) {  
                                    return new OpenLayers.Pixel(-(size.w/2), -size.h);  
                                 };  
                var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);  
                  
                marker = new OpenLayers.Marker(new OpenLayers.LonLat(113.34851,33.22630), icon);  
                markers.addMarker(marker);  
  
               // marker = new OpenLayers.Marker(madrid, icon.clone());  
               // markers.addMarker(marker);              
        }  
         function removeMarker() {  
                markers.removeMarker(marker);  
         }  
         /*******************多邊形獲取經緯度坐標系*************************/  
         function test(){  
            var getpolygonxy = new OpenLayers.Control();  
            OpenLayers.Util.extend(getpolygonxy, {  
                draw: function() {  
                    this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy ,  
                            { "done": this.notice },{ "persist": true},  
                            { keyMask: OpenLayers.Handler.MOD_SHIFT });  
                    this.polygon.activate();  
                },  
                notice: function(bounds) {  
                    alert(bounds);//坐標信息                      
                }  
            });  
            map.addControl(getpolygonxy);  
         }  
      
        </script>  
    </head>  
    <body onload="init()">  
        <div id="toolbar" style="display:">             
            <input type="button" value="放大" onclick="zoomIn()"/>  
            <input type="button" value="縮小" onclick="zoomOut()"/>  
            <input type="button" value="獲取地圖大小" onclick="getSize()"/>  
            <input type="button" value="平移" onclick="toggleControl('none')"/>  
            <input type="button" value="線路測量" onclick="toggleControl('line')"/>  
            <input type="button" value="測量面積" onclick="toggleControl('polygon')"/>  
            <input type="button" value="shift拉框" onclick="boxExtend()"/>  
            <input type="button" value="顯示標注" onclick="addMarker()"/>  
            <input type="button" value="移除標注" onclick="removeMarker()"/>  
            <input type="button" value="畫多邊形獲取經緯度坐標" onclick="test()"/>  
        </div>  
        <div id="map">  
             
        </div>  
        <div id="wrapper">  
            <div id="location">經緯度坐標</div>  
            <div id="scale">  
            </div>  
            <div id="output">  
            </div>  
        </div>  
        <div id="xystr"></div>  
        <div id="nodelist">  
            <em>Click on the map to get feature info</em>  
        </div>  
    </body>  
</html>

View Code

添加項目到Tomcat啟動測試，Tomcat端口8090，與geoserver所使用的服務端口不一致。測試效果如下：

自此，整個搭建過程完成。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 openlayers4調用geoserver發布的wms服務方法 GeoServer發布WMS/WFS服務 geoserver發布地圖服務WMS 使用GeoServer發布shp數據為WMS服務和WFS服務 openlayers 調用geoserver發布的服務 Cesium調用Geoserver發布的 WMS、WFS服務 Geoserver發布WMS服務出錯分析 Java實現GeoServer通過rest發布shp至WMS服務通過Java代碼自動發布Geoserver的地圖服務WMS ArcGIS API for JS 加載geoserver發布的WMS服務