webGIS（离线版）研究路线归总

特注：不做详解，说明网上资源很多，找一篇，照着走一遍即可。

1.数据源要满足开源、Free且地理信息要完善

几经周折，选择了OSM，具体信息可以去其官方查看（它竟然把中国一分为二，大陆、台湾，坑爹！！！）;

下载源：

http://download.geofabrik.de/asia.html（China TaiWan）;

http://osm2vectortiles.org/downloads/

http://download.bbbike.org/osm/bbbike/

我选择了shp格式的数据源，当然你也可以选择osm，然后通过postGIS导入数据库中（postgreSQL、Oracle、DB2等），此处不做详解（http://blog.csdn.net/bobantangzlt/article/details/16992585）；

2.部署geoserver （http://www.cnblogs.com/ada-zheng/archive/2013/07/16/3192921.html）（不做详解）

下载地址：http://geoserver.org/download/

具体的时候使用说明，参照官网即可；

部署后，需要用户登录（账号：admin；密码：geoserver）.

具体的发布操作(不做详解)，官网上有具体说明（shp、tif、osm等数据格式）

3.给每个图层加样式（sld）这个可以通过udig工具去做，所见即所得，非常便捷，况且还有些主题样式可供选择（切记：地理数据过大时，不要用table去做加载文件内的数据，程序会假死或崩掉）

4.待数据完整发布之后，该考虑用户体验啦，比较地图数据量比较大，吃内存，如果是动态提供服务的话，CPU也是很紧俏的

网上提出了很好的解决办法：geoserver通过内置的geowebcache对发布的wms服务进行切图处理，然后通过gwc进行访问过滤，若请求的已存在（Tile）则直接返回该静态图片，若请求的不存在，则提交给geoserver重新生成图片即可

好了，重头戏来了！！！

如何实现OL3-->GWC-->GeoServer过程呢？

第一步：在geoserver\WEB-INF\web.xml文件操作如下：

此处做的修改的意义何在呢？字面上看，一目了然就是缓存的路径，不改默认是在C盘的位置，不过，实践过程中会发现，切片会比较占空间的。

第二步：在geoserver/data/gwc/geowebcache.xml

第三步：通过GWC把geoserver服务发布的地图切片（此处比较吃CPU、内存）

第四步：OL3（前）端的设置代码如下：

<pre name="code" class="html"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>china EPSG:4326 image/png</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
  body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
  body { border: 0px; margin: 0px; padding: 0px; }
  #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="OpenLayers.js"></script>  
<script type="text/javascript" src="zh-CN.js"></script>
<script type="text/javascript">               
  var map, demolayer;                                                                        
  OpenLayers.DOTS_PER_INCH = 90.71428571428572;
  OpenLayers.Util.onImageLoadErrorColor = 'transparent';
  function init(){
    var mapOptions = { 
      resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 
        0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 
        3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 
        2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 
        1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7
      ],
      projection: new OpenLayers.Projection('EPSG:4326'),
      maxExtent: new OpenLayers.Bounds(-180.0,-90.0,180.0,90.0),
      units: "degrees",
      controls: []
      
    };
    map = new OpenLayers.Map('map', mapOptions );
    
   
    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(new OpenLayers.Control.MousePosition({element: $('location')}));
     // map.events.register("zoomend", this, function (e) {  
     //        if (map.getZoom() > 10)  
     //        {  
     //            map.setCenter(map.getCenter(),10);  
     //        } 
     //        if (map.getZoom() < 4)  
     //        {  
     //            map.setCenter(map.getCenter(),4);  
     //        } 
     //    });  
      
    demolayer = new OpenLayers.Layer.WMS(
      "china","http://192.168.0.110:8080/geoserver/gwc/service/wms",
      {layers: 'china:ChinaMap', format: 'image/png' },
      { tileSize: new OpenLayers.Size(256,256)}
    );
    map.addLayer(demolayer);
    map.zoomToExtent(new OpenLayers.Bounds(73.45100463600005, 18.16324718800007, 
      134.976797647, 53.53194315200005)
    );
    
  }
</script>
</head>
<body onLoad="init()">
  <div id="map"></div>
</body>
</html>

至此思路已基本理清，期间收获还需亲自体察。。。

posted @ 2016-11-07 18:22 米兰_跳跳虎阅读(1092) 评论(0) 编辑收藏举报

刷新页面返回顶部

代码的魅力

webGIS（离线版）研究路线归总

公告