geoserver与OpenLayers配置

时间:2023-03-09 19:29:32
geoserver与OpenLayers配置

 

 

 

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  
需要用到的程序和资料

  1. JDK 1.6 :

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

安装好JDK1.6

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

安装好Mapinfo

  1. 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

  1. Openalyers 2.5

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

来源: http://www.openlayers.org/

  1. 地图一份

来源:各个现场提供的mapinfo地图或者ESRI公司的shapfile文件

  1. 地图格式转换工具【选用】

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

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

  1. 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内容节选为:

<datastore
id = "szmap_jumindi" enabled = "true" namespace =
"topp" >

<connectionParams >

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value =
"file:data/szmapnew/jumindi_region.shp" />

<parameter name = "namespace" value = "topp"
/>

</connectionParams>

</datastore>

<datastore
id = "szmap_lvdi" enabled = "true" namespace =
"topp" >

<connectionParams >

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value = "file:data/szmapnew/lvdi_region.shp"
/>

<parameter name = "namespace" value = "topp"
/>

</connectionParams>

</datastore>

<datastore
id = "szmap_shangsha" enabled = "true" namespace =
"topp" >

<connectionParams >

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value =
"file:data/szmapnew/shangsha_font_point.shp" />

<parameter name = "namespace" value = "topp"
/>

</connectionParams>

</datastore>

<datastore
id = "szmap_danwei" enabled = "true" namespace =
"topp" >

<connectionParams >

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value =
"file:data/szmapnew/danwei_font_point.shp" />

<parameter name = "namespace" value = "topp"
/>

</connectionParams>

</datastore>

<datastore
id = "szmap_bingguanjiudian" enabled = "true" namespace =
"topp" >

<connectionParams >

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value = "file:data/szmapnew/bingguanjiudian_custom_point.shp"
/>

<parameter name = "namespace" value = "topp"
/>

</connectionParams>

</datastore>

<datastore id = "szmap_jiaotonggandao"
enabled = "true" namespace = "topp" >

<connectionParams >

<parameter
name = "charset" value = "GBK" />

<parameter name = "url" value =
"file:data/szmapnew/jiaotonggandao_region.shp" />

<parameter name = "namespace" value = "topp"
/>

</connectionParams>

</datastore>

<datastore
id = "szmap_daoluzhongxinxian" enabled = "true" namespace =
"topp" >

<connectionParams >

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value =
"file:data/szmapnew/daoluzhongxinxian_polyline.shp" />

<parameter name = "namespace" value = "topp"
/>

</connectionParams>

</datastore>

<datastore
id = "szmap_dise" enabled = "true" namespace =
"topp" >

<connectionParams >

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value =
"file:data/szmapnew/dise_region.shp" />

<parameter name = "namespace" value = "topp"
/>

</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">

<html
xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>OpenLayers map preview</title>

<style
type="text/css">

#map {

width:
800px;

height:
380px;

border: 1px
solid black;

}

</style>

<script
src="http://localhost:8080/geoserver/openlayers/OpenLayers.js"
type="text/javascript">

</script>

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

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>

<body
onload="init()">

<table>

<tr>

<td
style="width:40px" valign="middle"
rowspan="3"><div id="nav"></div></td>

<td
colspan="3" align="right">

<!--
Switch layers when links are pressed -->

<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>

<td
colspan="3"><div id="map"></div></td>

</tr>

<tr>

<td><div id="scale"></div></td>

<td/>

<td
align="right"><div
id="position"></div></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引用

<script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=yourkey"

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">

<NamedLayer> <Name> poi
</Name>

<UserStyle>

<FeatureTypeStyle>

<!-- all the same -->

<Rule>

<PointSymbolizer>

<Graphic>

<Mark>

<WellKnownName>circle</WellKnownName>

<Fill>

<CssParameter name="fill">#FF0000</CssParameter>

<CssParameter
name="fill-opacity">1.0</CssParameter>

</Fill>

</Mark>

<Size>11</Size>

</Graphic>

</PointSymbolizer>

<PointSymbolizer>

<Graphic>

<Mark>

<WellKnownName>circle</WellKnownName>

<Fill>

<CssParameter name="fill">#EDE513</CssParameter>

<CssParameter
name="fill-opacity">1.0</CssParameter>

</Fill>

</Mark>

<Size>7</Size>

</Graphic>

</PointSymbolizer>

<TextSymbolizer>

<Label>

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

</Label>

<Font>

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

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

<CssParameter name="font-size">14</CssParameter>

</Font>

<Fill>

<CssParameter name="fill">#000000</CssParameter>

</Fill>

</TextSymbolizer>

</Rule>

</FeatureTypeStyle>

</UserStyle>

</NamedLayer>

</StyledLayerDescriptor>

在FeatureType 配置中修改样式为:mypoi,然后点应用,再点保存,即可生效,下面是深圳地图的显示效果。

经过再次试验,将字体信息去掉,反而可以显示中文了,修改后的节选

<TextSymbolizer>

<Label>

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

</Label>

<Font>

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

<CssParameter name="font-size">14</CssParameter>

</Font>

<Fill>

<CssParameter name="fill">#0000ff</CssParameter>

</Fill>

</TextSymbolizer>

显示效果为:

5.2  
查看图层的字段信息

在FeatureType 编辑器的最下方,可以看到该图层是字段信息,在写Style的时候,将使用到这些字段名,严格区分大小写。

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

Style节选:

<TextSymbolizer>

<Label>

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

</Label>

<Font>

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

<CssParameter name="font-size">14</CssParameter>

</Font>

<Fill>

<CssParameter name="fill">#FF0000</CssParameter>

</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如下:

<datastore id = "Poi_Ashenzhen_point" enabled =
"true" namespace = "szditu" >

<abstract>深圳地图兴趣点</abstract>

<connectionParams >

<parameter name = "memory mapped buffer" value =
"true" />

<parameter name = "create spatial index" value =
"true" />

<parameter name = "charset" value = "GBK" />

<parameter name = "url" value =
"file:data/szditu/Poi/Ashenzhen_point.shp" />

<parameter name = "namespace" value = "szditu"
/>

</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里看到标注是乱码)

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