地图的开发研究--基于openlayers+geoserver+tomcat的离线地图--本地.shp地图

    基于Openlayers的GIS地图开发：

   地图就是一个一个的图层组合起来的，这些图层就是一些特定格式的地图，通过相应的技术将这些地图放大缩小来展示具体的信息。所以在开发地图之前需要读取相应的图层，而这些图层的存放就存在了疑惑，目前比较流行的是Geoserver服务器（还有ArcGis），本次开发使用的就是此服务器。

   

 Geoserver配置：

  Geoserver是一个功能齐全，遵循 OGC开放标准的开源 WFS-T和 WMS服务器。只能用 j2ee开发。利用 Geoserver可以把数据作为 maps/images来发布 (利用 WMS来实现 )也可以直接发布实际的数据 (利用 WFS来实现 )，同时也提供了修改，删除和新增的功能 (利用 WFS-T)。本次学习开发使用的就是此服务器。但是这仅仅是一个服务器，核心的还是将地图数据加载到服务器中，作为一个单独的图层或者图层组，供其他服务器的调用。

  GeoServer能够发布的数据类型：

     l  地图或影象——应用 WMS（本次开发的静态地图使用），

     l  实时数据——应用 WFS，(路况，交通信息使用)

     l  用户更新、删除和编辑的数据——应用 WFS-T。

  本次开发由于网络上地图资料有限，仅仅找到了一个中国全界地图（geoserver仅支持.shp格式），在http://localhost:8080/geoserver/web/上登陆geoserver服务器通过创建工作区-->创建图层-->图层预览 等一系列的步骤来配置本地地图加载到服务器，形成图层（注意要对工作区开放WMS服务，因为后面调用的时候需要此服务）具体配置参考http://www.cnblogs.com/ycsfwhh/archive/2009/12/16/1625373.html。配置效果图如下：

 

   

关于OpenLayers：

  OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。目前天地图和百度、谷歌几大地图都有OpenLayers的影子，所以学习OpenLayers之后，调用几大在线地图的API或者二次地图开发很有作用。

 

基于OpenLayers和Geoserver的本地地图开发：

 

   前期开发在线地图的时候已经说过，地图需要前台页面放置一个地图的div容器，后台加载地图图层layer到容器中，最终形成地图，openlayers也是如此，下面就展示核心初始代码：

  function init(){

                format = 'image/png';//地图背景图片格式

                var bounds = new OpenLayers.Bounds(     //地图区域范围，

                    73.44696044921875, 3.408477306365967,

                    135.08583068847656, 53.557926177978516

                );

                var options = {

                    controls: [],            

                    maxExtent: bounds,//放大的最大区域范围

                    minResolution:0.02,//最小缩放级别

                    maxResolution: 0.2407768368721008,//最大缩放级别

                    projection: "EPSG:4326",//坐标系

                    units: 'degrees'//单位’度’

                };

                map = new OpenLayers.Map('map', options);

             

由于开发的时候创建的是一个图层，所以只要加载一个图层就可以。如果要加载图层组或多个单独的图层，参考 map.addLayers([tiled,untiled]);即可

 

 

// setup tiled layer   图层1

     //以下代码就是调用的geoserver的WMS服务加载地图图层到jsp页面：其中的url:

http://localhost:8080/geoserver/mytest/wms 为本地配置的geoserver服务器的地址，mytest为新建的工作区；LAYERS中mytest:bou2_4l为新建的图层的名称，

                tiled = new OpenLayers.Layer.WMS(

                    "mytest:bou2_4l - Tiled", "http://localhost:8080/geoserver/mytest/wms",

                    {

                        LAYERS: 'mytest:bou2_4l',

                        STYLES: '',

                        format: format,

                        tiled: true,

                        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom

                    },

                    {

                        buffer: 0,

                        displayOutsideMaxExtent: true,

                        isBaseLayer: true,

                        yx : {'EPSG:4326' : true}

                    } 

                );

            

      // setup single tiled layer  图层2

                untiled = new OpenLayers.Layer.WMS(

                    "mytest:bou2_4l-Untiled", "http://localhost:8080/geoserver/mytest/wms",

                    {

                        LAYERS: 'mytest:bou2_4l',

                        STYLES: '',

                        format: format

                    },

                    {

                       singleTile: true, 

                       ratio: 1, 

                       isBaseLayer: true,

                       yx : {'EPSG:4326' : true}

                    } 

                );

                map.addLayers([tiled,untiled]);//多图层时使用

 

                // 添加控件 如按钮

                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(newOpenLayers.Control.MousePosition({element: $('location')}));

                map.zoomToExtent(bounds);

 

基于OpenLayers的谷歌地图开发：

  代码很相似，唯一不同的是图层调用的不同，这里直接调用的是谷歌地图服务器上的多个图层，然后加载到地图上，调用的方法是new OpenLayers.Layer.Google( ):需要加载谷歌地图的api:

function init()

    {

        //创建map对象，

        map = new OpenLayers.Map("map");

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

        

        //创建google Map图层对象

        var gphy = new OpenLayers.Layer.Google(

            "Google Physical",                      //Google Map Physical图层

            {type: G_PHYSICAL_MAP}

        );

        var gmap = new OpenLayers.Layer.Google(

            "Google Streets",                       //Google Map Streets图层

            {numZoomLevels: 20}                     //设置Google Map的zoom级别

        );

        var ghyb = new OpenLayers.Layer.Google(

            "Google Hybrid",                        //Google Physical图层

            {type: G_HYBRID_MAP, numZoomLevels: 20}

        );

        var gsat = new OpenLayers.Layer.Google(

            "Google Satellite",                     //Google Map Satellite图层

            {type: G_SATELLITE_MAP, numZoomLevels: 22}

        );

        // 添加图层

        map.addLayers([gphy, gmap, ghyb, gsat]);

        // 放大到全屏

        map.zoomToMaxExtent();

    }

 

 

总结：

    学习openlayers，可以说其涵盖的知识点很多，需要学习js的面向对象技术，需要学习地图服务器Geoserver的配置使用，网上关于这方面的介绍大多很重复，而且年代久远，所以学习主要靠自己去探索，虽然目前的地图界面不是很美观，但是能够最终实现地图的显示，还是很欣慰的。其中主要困扰我的是geoserver服务器的配置使用，尤其是要注意授权，因为geoserver的图层数据需要以admin身份读取，另外url的地址到底该如何写一开始也是个问题，网上很笼统，多次尝试之后，终于成功，唯一不足的是本地地图的图层太少了，很多地图网站也都不提供地图了。

效果图：

基于OpenLayers和Geoserver的本地地图

基于OpenLayers的谷歌地图开发：