geoserver与OpenLayers配置入门

geoserver与OpenLayers配置入门
作者：lizongbo 发表于：13:10. 星期六, 一月 5th, 2008
版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明。
http://618119.com/archives/2008/01/05/61.html
--------------------------------------------------------------------------------

geoserver与OpenLayers配置入门

Word文档在： http://618119.com/docs/gis/geoserver_OpenLayers_Config.doc

因工作需要，这几天早对webgis进行摸索，总结如下：

2008年1月

目录

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
2. MapInfo Professional 6.4 SCP中文版或者8.5 SCP英文版
安装好Mapinfo
3. geoserver 1.5.4 或者 1.6.0 Rc2

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

4. Openalyers 2.5

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

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

5. 深圳地图一份
来源： http://www.iseaman.com/down/18/2006/20061106129.html
（这个地图只是局部信息，而且信息两很小，我重新找了份效果还不错的深圳局部地图）

6. 地图格式转换工具

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

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

7. 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
MapInfo6.5中，主菜单–> Tools –>工具–>通用转换器–>通用转换器。
(或者进入 D:\Program Files\MapInfo\Professional\UT，运行IMUTGUI.EXE)
选择源文件格式，选择多个源文件，再选择输出文件夹，点 ok开始进行转换，
IMUTGUI.exe实际是调用 IMUT.exe来进行文件转换的。

对于字段名为中文的，需要先将字段名修改掉，否则编写Style的时候用中文字段可能无法正确读取
修改方法如下：
先打开地图，然后：
主菜单—>Window –> New browser Window（快捷键为F2），打开指定的表，
主菜单选择Browse (浏览) ＞Pick Fields (选取字段)， Pick Fields对话框显示出来。
(我照上面没改出来，我是用转换方式二，先导出成mif文件，然后再用文本编辑器打开mif文件。直接改的字段名)
Update:最后知道了正确的改字段名的方法：
主菜单–>表–> 维护–>表结构–>选择需要修改的表–>选中字段,在字段名输入新的字段名即可.
实际对应的MapBasic为： Alter Table “Bguangdong” ( rename Kind Kindaaa ) Interactive

3 地图格式转换方式(二)
(该步操作是我走的弯路，仅做记录以备忘)
3.1 解压地图
解压深圳地图到 E:\gis\深圳
3.2 打开地图
启动Mapinfo,打开E:\gis\深圳下面所有图层

3.3 导出图层
主菜单–>Table–>Export–>选择要导出的图层，点Export.将图层导出为mif格式的文件。
3.4 转换mif格式为shp格式
运行datatransfer.exe，选择格式和文件，进行转换。
4 GeoServer安装配置
4.1 GeoServer安装
解压geoserver-1.5.4a.bin.zip到 E:\gis\geoserver，
运行E:\gis\geoserver\bin\startup.bat
4.2 配置地图
打开浏览器，访问：http://localhost:8080/geoserver/

4.2.1 登录geoserver
点“配置”，在登录界面输入用户名 ‘admin’，密码’geoserver’

4.2.2 配置数据
登录成功之后，再点“配置”。在配置界面，点“数据”。

在数据配置界面，点“数据库”。

4.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，点“提交”。

4.2.4 新建Feature Type
文件加载成功，进入Feature Type编辑界面，样式选择 point,SRS填写为4326,点生成.

再点“提交”。(千万不要勾上启用缓存，我就是勾上它，结果导致创建的FeaTure Type无法保存，走了弯路)

4.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>
(文件重新加载保存之后，原有的注释说明不见了。)
4.2.6 访问地图
回到首页欢迎界面，点“Mapbuilder 客户端”

找到 topp:bingguanjiudian_custom_point，点 Openlayers。

把地图缩放比例拉到最小，然后点其中一个标注点，网页下面会显示出查询到的信息。

5 Openlayers配置
5.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>
5.2 部署示例
将该页面保存到E:\gis\geoserver\webapps\geoserver\5.htm
5.3 查看效果
访问 http://localhost:8080/geoserver/5.htm 拖动图层，并可点击数据

5.4 加上googlemap图层
5.4.1 申请Google 地图 API 的key

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

申请的url填写为： http://www.618119.com:8080/

5.4.1.1 将域名映射到本地
编辑hosts文件，将www.618119.com映射为127.0.0.1.否则在本地加载不了google map.

5.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]);

5.4.3 查看效果
从图上可以看出mapinfo地图数据和google的卫星照片没有对齐。

6 GeoServer高级设置
6.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>

显示效果为：

6.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的没加载上)：

6.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已经部署成功。

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

7 参考资料

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/

Geoserver 和 OpenLayers

第 31 页 共 30 页

Tags: Apache Tomcat, geoserver, gis, OpenLayers