使用geoserver+openLayers加载google地图

1、准备工作

　　安装java环境即JDK

　　下载geoserver 官网：http://geoserver.org/display/GEOS/Welcome

　　我的描述使用的是geoserver1.7版本，2.0版本类似，只是1.7是中文的，2.0版本可以再使用过1.7版本后自己摸索，大同小异。

　　下载openLayers 官网：http://www.openlayers.org/

　　配置好JAVA_HOME

　　下载地图（shp格式）可到此网站：http://nfgis.nsdi.gov.cn/asp/userinfo.asp?action=queding

　　填写信息后即可下载

2、启动geoserver（安装目录bin\start.bat）

　打开浏览器，访问：http://localhost/:8080/geoserver/ 　　

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

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

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

5、新建数据集
　　在Feature数据集配置界面，点“新建”

　　在新建界面，Feature 数据描述类型，选择Shaperfile，Feature数据集ID，输入“szmap_bingguanjiudian”，点“新建”(此时，由于地图信息还没部署，因此，先将shape格式的数据文件复制到C:\geoserver\data_dir\data\szmapnew。)

　　在数据文件配置界面中，url填写为：file:data/szmapnew/bingguanjiudian_custom_point.shp
　　(表示对应C:\geoserver\data_dir\data\szmapnew\bingguanjiudian_custom_point.shp)
　　Charset填写为：GBK，点“提交”。

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

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

7、应用保存配置
　　然后先点左上角的“应用”，

　　再点“保存”。

8、使用openLayers编写测试页面

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <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 type="text/javascript">
        function setHTML(response)
        {
            OpenLayers.Util.getElement('nodelist').innerHTML = response.responseText;
        };
        function init()
        {
            var map = new OpenLayers.Map("map",{controls:[], 'projection': 'EPSG:4326', 'units':'degrees'});
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
            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);
            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.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);
            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">
                    <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 align="right">
                    <div id="position"></div>
                </td>
            </tr>
        </table>

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

9、部署示例
　　将该页面保存到C:\geoserver\webapps\geoserver\5.htm
10、查看效果
　　访问 http://localhost/:8080/geoserver/5.htm 拖动图层，并可点击数据

11、加上googlemap图层
　　申请Google 地图 API 的key
　　http://www.google.com/intl/zh-CN/apis/maps/signup.html
　　申请的url填写为： http://www.618119.com/:8080/

12、将域名映射到本地

　　编辑hosts文件（C:\WINDOWS\system32\drivers\etc目录下）将localhost改为：www.618119.com，也就是将www.618119.com映射为127.0.0.1.否则在本地加载不了google map.

13、编辑html

　　添加加载google map的javascript代码

代码

　　在init方法里加上

代码

//加载google地图
            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 Streets", {type:G_NORMAL_MAP, 'maxZoomLevel':18} );
            map.addLayers([GMapsStreets]);

14、查看效果
　　访问 http://localhost/:8080/geoserver/5.htm

15、选择地图右边的上+号，选择Base Layer下的Google Streets

到此，基本的用openLayers+geoserver访问地图的功能就实现了

posted on 2009-12-16 10:52 whh 阅读(13744) 评论(2) 编辑收藏举报