geoserver與OpenLayers配置

本文轉載自查看原文 2019-07-12 14:37 409 WebGis知識

geoserver與OpenLayers配置

1 准備工作.... 4

1.1 需要用到的程序和資料... 4

2 地圖格式轉換方式(一) 5

3 地圖格式轉換方式(二) 5

3.1 解壓地圖... 5

3.2 打開地圖... 5

3.3 導出圖層... 6

3.4 轉換mif格式為shp格式... 6

4 GeoServer安裝配置.... 6

4.1 GeoServer安裝... 6

4.2 配置地圖... 6

4.2.1 登錄geoserver. 7

4.2.2 配置數據... 7

4.2.3 新建數據集... 8

4.2.4 新建Feature Type. 10

4.2.5 應用保存配置... 12

4.2.6 訪問地圖... 15

5 Openlayers配置.... 16

5.1 測試頁面... 16

5.2 部署示例... 21

5.3 查看效果... 21

5.4 加上googlemap圖層... 21

5.4.1 申請Google 地圖 API 的key. 21

5.4.1.1 將域名映射到本地... 21

5.4.2 編輯html 22

5.4.3 查看效果... 22

6 GeoServer高級設置.... 23

6.1 自定義圖層的Style. 23

6.2 查看圖層的字段信息... 26

6.3 在Tomcat上部署GeoServer. 27

6.4 自定義名稱空間... 28

7 參考資料.... 31

1 准備工作

相關資料文件下載

1.1 需要用到的程序和資料

JDK 1.6 :

http://www.mnidc.net/software/java_se/jdk-6u3-windows-i586-p.exe

安裝好JDK1.6

MapInfo Professional 6.4 SCP中文版或者8.5 /9.5/10.0英文版

安裝好Mapinfo

geoserver 1.5.4 或者 1.6.0 Rc2或者 2.0.2

http://superb-east.dl.sourceforge.net/sourceforge/geoserver/geoserver-1.5.4a.bin.zip

http://jaist.dl.sourceforge.net/sourceforge/geoserver/geoserver-1.5.4a.src.zip

http://jaist.dl.sourceforge.net/sourceforge/geoserver/geoserver-1.5.4a.war.zip

http://jaist.dl.sourceforge.net/sourceforge/geoserver/geoserver-1.6.0-RC2-war.zip

http://nchc.dl.sourceforge.net/sourceforge/geoserver/geoserver-1.6.0-RC2-pyramid-plugin.zip

http://nchc.dl.sourceforge.net/sourceforge/geoserver/geoserver-1.6.0-RC2-mysql-plugin.zip

來源： http://docs.codehaus.org/display/GEOS/Download

Openalyers 2.5

http://www.openlayers.org/download/OpenLayers-2.5.zip

來源： http://www.openlayers.org/

地圖一份

來源：各個現場提供的mapinfo地圖或者ESRI公司的shapfile文件

地圖格式轉換工具【選用】

http://www.gissky.com/Download/download/2006/datatransfer.rar

來源：http://www.gissky.com/Download/Showsoft.asp?Type=1&ID=216

Apache Tomcat 6.0.14【選用】

http://apache.mirror.phpchina.com/tomcat/tomcat-6/v6.0.14/bin/apache-tomcat-6.0.14.zip

http://apache.mirror.phpchina.com/tomcat/tomcat-6/v6.0.14/src/apache-tomcat-6.0.14-src.zip

來源： http://tomcat.apache.org/

2 地圖格式轉換方式(一)

Mapinfo 8.5中，主菜單 --> Tools -->Universal Translator--> Universal Translator

Source file 中選擇要被轉換的所有tab文件，類型為mapinfo；

Target file 選擇shapfile文件格式，選中文件存放的路徑

3 GeoServer安裝配置

GeoServer1.5和最新的2.0.2操作基本類似，現以1.5為來講解。

3.1 GeoServer安裝

解壓geoserver-1.5.4a.bin.zip到 E:\gis\geoserver，

運行E:\gis\geoserver\bin\startup.bat

3.2 配置地圖

打開瀏覽器，訪問：http://localhost:8080/geoserver/

3.2.1 登錄geoserver

點“配置”，在登錄界面輸入用戶名 'admin'，密碼'geoserver'

3.2.2 配置數據

登錄成功之后，再點“配置”。在配置界面，點“數據”。

在數據配置界面，點“數據庫”。

3.2.3 新建數據集

在Feature數據集配置界面，點“新建”

在新建界面，Feature 數據描述類型，選擇Shaperfile，Feature數據集ID，輸入“szmap_bingguanjiudian”，點“新建”

(此時，由於地圖信息還沒部署，因此，先將shape格式的數據文件復制到E:\gis\geoserver\data_dir\data\szmapnew。)

在數據文件配置界面中，url填寫為：file:data/szmapnew/bingguanjiudian_custom_point.shp

(表示對應E:\gis\geoserver\data_dir\data\szmapnew\bingguanjiudian_custom_point.shp)

Charset填寫為：GBK，點“提交”。

3.2.4 新建Feature Type

文件加載成功，進入Feature Type編輯界面，樣式選擇 point,SRS填寫為4326,點生成.

再點“提交”。(千萬不要勾上啟用緩存，我就是勾上它，結果導致創建的FeaTure Type無法保存，走了彎路)

3.2.5 應用保存配置

然后先點左上角的“應用”，

再點“保存”。

重復上述步驟可配置多個圖層。

數據集的信息保存在

E:\gis\geoserver\data_dir\ catalog.xml

featureTypes信息保存在 E:\gis\geoserver\data_dir\featureTypes

catalog.xml內容節選為：

</connectionParams>

</datastore>

</connectionParams>

</datastore>

</connectionParams>

</datastore>

</connectionParams>

</datastore>

</connectionParams>

</datastore>

</connectionParams>

</datastore>

</connectionParams>

</datastore>

</connectionParams>

</datastore>

(文件重新加載保存之后，原有的注釋說明不見了。)

3.2.6 訪問地圖

回到首頁歡迎界面，點“Mapbuilder 客戶端”

找到 topp:bingguanjiudian_custom_point，點 Openlayers。

把地圖縮放比例拉到最小，然后點其中一個標注點，網頁下面會顯示出查詢到的信息。

4 Openlayers配置

4.1 測試頁面

編寫測試頁面，內容如下：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<head>

<title>OpenLayers map preview</title>

#map {

width: 800px;

height: 380px;

border: 1px solid black;

}

</style>

</script>

var map;

var untiled;

var tiled;

function setHTML(response) {

OpenLayers.Util.getElement('nodelist').innerHTML = response.responseText;

};

function init(){

map = new OpenLayers.Map('map', {controls:[], 'projection': 'EPSG:4326', 'units':'degrees'});

OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;

// setup tiled layer

var bounds = new OpenLayers.Bounds(114.08473735,22.5444392,114.09911765000001,22.5517168)

tiled = new OpenLayers.Layer.WMS(

"topp:danwei_font_point", "http://localhost:8080/geoserver/wms",

{

height: '380',

width: '800',

layers: 'topp:danwei_font_point',

styles: '',

srs: 'EPSG:4326',

format: 'image/png', tiled: 'true', tilesOrigin : "114.08473735,22.5444392"

{maxExtent: bounds, maxResolution: 5.617304687505209E-5, projection: "EPSG:4326", buffer: 0}

);

map.addLayer(tiled);

jiaotonggandao_region = new OpenLayers.Layer.WMS(

"topp:jiaotonggandao_region", "http://localhost:8080/geoserver/wms",

{

height: '392',

width: '800',

layers: 'topp:jiaotonggandao_region',

styles: '',

srs: 'EPSG:4326', transparent: "true",

format: 'image/png', tiled: 'true', tilesOrigin : "114.0836293,22.543578500000002"

{maxExtent: bounds, maxResolution: 6.49429687499814E-5, projection: "EPSG:4326", buffer: 0}

);

map.addLayer(jiaotonggandao_region);

daoluzhongxinxian_polyline = new OpenLayers.Layer.WMS(

"topp:daoluzhongxinxian_polyline", "http://localhost:8080/geoserver/wms",

{

height: '392',

width: '800',

layers: 'topp:daoluzhongxinxian_polyline',

styles: '',

srs: 'EPSG:4326', transparent: "true",

format: 'image/png', tiled: 'true', tilesOrigin : "114.0836293,22.543578500000002"

{maxExtent: bounds, maxResolution: 6.49429687499814E-5, projection: "EPSG:4326", buffer: 0,isBaseLayer:false}

);

map.addLayer(daoluzhongxinxian_polyline);

shangsha_font_point = new OpenLayers.Layer.WMS(

"topp:shangsha_font_point", "http://localhost:8080/geoserver/wms",

{

width: '800',

layers: 'topp:shangsha_font_point',

styles: '',

srs: 'EPSG:4326',

height: '381',

format: 'image/png', transparent: "true",tiled: 'true', tilesOrigin : "114.0838415,22.543650900000003"

{maxExtent: bounds, maxResolution: 6.20898437499462E-5, projection: "EPSG:4326", buffer: 0,isBaseLayer:false}

);

map.addLayer(shangsha_font_point);

//map.addLayer(tiled);

// setup untiled layer

untiled = new OpenLayers.Layer.WMS.Untiled(

"topp:danwei_font_point", "http://localhost:8080/geoserver/wms",

{

height: '380',

width: '800',

layers: 'topp:danwei_font_point',

styles: '',

srs: 'EPSG:4326',

format: 'image/png'

{maxExtent: bounds, maxResolution: 5.617304687505209E-5, projection: "EPSG:4326"}

);

untiled.ratio=1;

untiled.setVisibility(false, false);

//map.addLayer(untiled);

// setup controls and initial zooms

map.addControl(new OpenLayers.Control.PanZoomBar({div:$('nav')}));

map.addControl(new OpenLayers.Control.MouseDefaults());

map.addControl(new OpenLayers.Control.Scale($('scale')));

map.addControl(new OpenLayers.Control.MousePosition({element: $('position')}));

map.addControl(new OpenLayers.Control.LayerSwitcher());

map.addControl(new OpenLayers.Control.OverviewMap());

map.zoomToExtent(bounds);

// support GetFeatureInfo

map.events.register('click', map, function (e) {

OpenLayers.Util.getElement('nodelist').innerHTML = "Loading... please wait..." + map.layers[0].name;

var url = map.layers[0].getFullRequestString({

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: 'topp:danwei_font_point',

styles: '',

srs: 'EPSG:4326',

WIDTH: map.size.w,

HEIGHT: map.size.h},

"http://localhost:8080/geoserver/wms"

);

OpenLayers.loadURL(url, '', this, setHTML, setHTML);

Event.stop(e);

});

}

</script>

</head>

<table>

<tr>

<a id="untiledLink" href="#" onclick="map.removeLayer(tiled);map.addLayer(untiled)">Untiled</a>

<a id="tiledLink" href="#" onclick="map.removeLayer(untiled);map.addLayer(tiled);">Tiled</a>

</td>

</tr>

<tr>

</tr>

<tr>

<td/>

</tr>

</table>

<div id="nodelist">Click on the map to get feature infos</div>

</body>

</html>

4.2 部署示例

將該頁面保存到E:\gis\geoserver\webapps\geoserver\5.htm

4.3 查看效果

訪問 http://localhost:8080/geoserver/5.htm 拖動圖層，並可點擊數據

4.4 加上googlemap圖層

4.4.1 申請Google 地圖 API 的key

http://www.google.com/intl/zh-CN/apis/maps/signup.html

申請的url填寫為： http://www.618119.com:8080/

4.4.1.1 將域名映射到本地

編輯hosts文件，將www.618119.com映射為127.0.0.1.否則在本地加載不了google map.

4.4.2 編輯html

參考 E:\gis\tools\OpenLayers\examples\google.html

增加 google map的js引用

type="text/javascript"></script>

增加圖層

var googlesatellite = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );

map.addLayers([googlesatellite]);

var googlebybrid = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });

map.addLayers([googlebybrid]);

var GMapsStreets = new OpenLayers.Layer.Google( "Google Steets" , {type: G_NORMAL_MAP, 'maxZoomLevel':18} );

map.addLayers([GMapsStreets]);

4.4.3 查看效果

從圖上可以看出mapinfo地圖數據和google的衛星照片沒有對齊。

5 GeoServer高級設置

5.1 自定義圖層的Style

參考E:\gis\geoserver\data_dir\styles\ poi.sld，我自己定義了一個mypoi的樣式，但是由於geoserver直接顯示中文存在問題，於是先將顯示的名稱定義成了拼音。

Mypoi.sld的內容如下：

<?xml version="1.0" encoding="UTF-8"?>

<StyledLayerDescriptor version="1.0.0"

xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"

xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<Rule>

<Mark>

<WellKnownName>circle</WellKnownName>

<Fill>

</Fill>

</Mark>

</Graphic>

</PointSymbolizer>

<Mark>

<WellKnownName>circle</WellKnownName>

<Fill>

</Fill>

</Mark>

</Graphic>

</PointSymbolizer>

<Label>

<ogc:PropertyName>PY</ogc:PropertyName>

</Label>

<Font>

<CssParameter name="font-family">Arial</CssParameter>

<CssParameter name="font-style">Normal</CssParameter>

</Font>

<Fill>

</Fill>

</TextSymbolizer>

</Rule>

</FeatureTypeStyle>

</UserStyle>

</NamedLayer>

</StyledLayerDescriptor>

在FeatureType 配置中修改樣式為：mypoi,然后點應用，再點保存，即可生效，下面是深圳地圖的顯示效果。

經過再次試驗，將字體信息去掉，反而可以顯示中文了，修改后的節選

<Label>

<ogc:PropertyName>Name</ogc:PropertyName>

</Label>

<Font>

<CssParameter name="font-style">Normal</CssParameter>

</Font>

<Fill>

</Fill>

</TextSymbolizer>

顯示效果為：

5.2 查看圖層的字段信息

在FeatureType 編輯器的最下方，可以看到該圖層是字段信息，在寫Style的時候，將使用到這些字段名，嚴格區分大小寫。

將字段名改成英文之后，重新配置Style,

Style節選：

<Label>

<ogc:PropertyName>NAME</ogc:PropertyName>

</Label>

<Font>

<CssParameter name="font-style">italic,bold</CssParameter>

</Font>

<Fill>

</Fill>

</TextSymbolizer>

效果如下(中間有塊圖是google的沒加載上)：

5.3 在Tomcat上部署GeoServer

解壓Tomcat到 E:\gis\apache-tomcat-6.0.14

將geoserver-1.6.0-RC2-war.zip中的geoserver.war解壓到

E:\gis\apache-tomcat-6.0.14\webapps\geoserver

為了地圖數據安全，將地圖數據存放到指定的目錄，比如：E:\gis\gisdata

將E:\gis\apache-tomcat-6.0.14\webapps\geoserver\data下的所有文件復制到E:\gis\gisdata，

再用文本編輯器打開，E:\gis\apache-tomcat-6.0.14\bin\ catalina.bat，在開頭加上下面一行

set JAVA_OPTS=%JAVA_OPTS% -DGEOSERVER_DATA_DIR=E:/gis/gisdata，

保存catalina.bat.

(下面這行是不行的，實際不是環境變量，而是java的Properties，

set GEOSERVER_DATA_DIR=E:\gis\gisdata)

運行 E:\gis\apache-tomcat-6.0.14\bin\startup.bat來啟動Tomcat,

控制太可以看到下面這樣的信息：

2008-1-5 11:11:37 org.apache.catalina.core.StandardEngine start

信息: Starting Servlet Engine: Apache Tomcat/6.0.14

05 一月 11:11:44 ERROR [geoserver.global] -

----------------------------------

- GEOSERVER_DATA_DIR: E:\gis\gisdata

----------------------------------

log4j:WARN File option not set for appender [geoserverlogfile].

log4j:WARN Are you using FileAppender instead of ConsoleAppender?

05 一月 11:11:50 INFO [geoserver.global] - StdOut logging enabled. Log file also output to 'E:\gis\gisdata\logs\geoserver.log'

再瀏覽器中訪問 http://www.618119.com:8080/geoserver，可以看到geoserver已經部署成功。

5.4 自定義名稱空間

登錄管理界面，配置數據,點“名稱空間”。

點“新建”

前綴填寫為： szditu，再點新建。

URI填寫為： http://618119.com/tag/gis.然后點提交。

再點左上角的應用，再點保存。

將重新制作的深圳地圖，復制到 E:\gis\gisdata\data\szditu.

重新配置后的datastore如下：

<abstract>深圳地圖興趣點</abstract>

</connectionParams>

</datastore>

效果如下：

6 參考資料

GeoServer不同服務器安按裝配置、數據發布及客戶端訪問:

http://www.cnblogs.com/salonliudong/archive/2007/04/20/721453.html

Openlayers的 Overlays設置：

http://trac.openlayers.org/wiki/BaseLayersAndOverlays

FeatureTypeStyle參考

http://www.cnblogs.com/xiaotie/archive/2005/08/19/218509.html

Mapinfo的使用：

http://www.cnblogs.com/huhz1979/articles/534691.html

關於gis，重點推薦兩個非常有價值的blog

Classicning Daily Log:

http://www.classicning.com/blog/

Java&GIS – BlogJava:

http://www.blogjava.net/siriusfx/

7 uDig生成Style

手工編寫SLD是非常麻煩的，因此可以用uDig來幫助生成。

7.1 導出sld樣式文件，

選中指定的圖層，然后在主菜單，選Layer 再選Change Style，然后點左下角的Export。就可以導出樣式了。

7.2 四色地圖

在Change Style的時候，選擇Theme，然后選擇條件字段，再選擇主題。

效果（uDig里看到標注是亂碼）

----------------------------------------------------------完---------------------------------------------------------

免責聲明！

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

猜您在找 Openlayers加載Geoserver WFS openlayers 調用geoserver發布的服務 Geoserver+Openlayers拉框查詢 Geoserver基本使用、WMS服務發布與OpenLayers測試 Openlayers+Geoserver（一）：項目介紹以及地圖加載 OpenLayers調用GeoServer發布的影像切片 openlayers4調用geoserver發布的wms服務方法 3月題外：關於GeoServer和OpenLayers3實用開源插件或組件的總結在靜態網頁中加載GeoServer中的地圖(openlayers) Vue中使用Openlayers加載Geoserver發布的ImageWMS