webGIS（离线版）研究路线归总
特注：不做詳解，說明網(wǎng)上資源很多，找一篇，照著走一遍即可。
1.數(shù)據(jù)源要滿足開源、Free且地理信息要完善
幾經(jīng)周折，選擇了OSM，具體信息可以去其官方查看（它竟然把中國一分為二，大陸、臺灣，坑爹！！！）;
下載源：
http://download.geofabrik.de/asia.html（China ?TaiWan）;
http://osm2vectortiles.org/downloads/
http://download.bbbike.org/osm/bbbike/
我選擇了shp格式的數(shù)據(jù)源，當(dāng)然你也可以選擇osm，然后通過postGIS導(dǎo)入數(shù)據(jù)庫中（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/
具體的時候使用說明，參照官網(wǎng)即可；
部署后，需要用戶登錄（賬號：admin；密碼：geoserver）.
具體的發(fā)布操作(不做詳解)，官網(wǎng)上有具體說明（shp、tif、osm等數(shù)據(jù)格式）
3.給每個圖層加樣式（sld）這個可以通過udig工具去做，所見即所得，非常便捷，況且還有些主題樣式可供選擇（切記：地理數(shù)據(jù)過大時，不要用table去做加載文件內(nèi)的數(shù)據(jù)，程序會假死或崩掉）
4.待數(shù)據(jù)完整發(fā)布之后，該考慮用戶體驗啦，比較地圖數(shù)據(jù)量比較大，吃內(nèi)存，如果是動態(tài)提供服務(wù)的話，CPU也是很緊俏的
網(wǎng)上提出了很好的解決辦法 ：geoserver通過內(nèi)置的geowebcache對發(fā)布的wms服務(wù)進行切圖處理，然后通過gwc進行訪問過濾，若請求的已存在（Tile）則直接返回該靜態(tài)圖片，若請求的不存在，則提交給geoserver重新生成圖片即可
好了，重頭戲來了！！！
?如何實現(xiàn)OL3-->GWC-->GeoServer過程呢？
第一步：在geoserver\WEB-INF\web.xml文件操作如下：
此處做的修改的意義何在呢？字面上看，一目了然就是緩存的路徑，不改默認(rèn)是在C盤的位置，不過，實踐過程中會發(fā)現(xiàn)，切片會比較占空間的。
第二步：在geoserver/data/gwc/geowebcache.xml
第三步：通過GWC把geoserver服務(wù)發(fā)布的地圖切片（此處比較吃CPU、內(nèi)存）
第四步：OL3（前）端的設(shè)置代碼如下：
<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>至此思路已基本理清，期間收獲還需親自體察。。。
?
轉(zhuǎn)載于:https://www.cnblogs.com/meiCode/p/6039992.html
總結(jié)
以上是生活随笔為你收集整理的webGIS（离线版）研究路线归总的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQUERY实现放大镜
- 下一篇： My1stServlet