在進行GIS項目開發中,常使用Geoserver做爲開源的地圖服務器,Geoserver是一個JavaEE項目,常經過Tomcat進行部署。而GeoWebCache是一個採用Java實現用於緩存WMS-Tile(瓦片)的開源項目。當客戶端請求一張新地圖和Tile時,GeoWebCache將攔截這些調用而後返回緩存過的Tiles。若是找不到緩存再調用服務器上的Tiles,從而提升地圖展現的速度。最新版本的GeoServer已經完成了GeoWebCache的內嵌。javascript
然而,在實際的生產環境中,地圖緩存服務器應當是獨立部署的結點,這樣的優點是能夠避免集羣結點開啓緩存配額後的文件鎖衝突;另外一方面,緩存切片及耗費CPU內存等資源,配置獨立的地圖緩存服務器可減小切片請求對地圖服務器資源的佔用。html
因爲矢量切片(vector tile)的流行,愈來愈多的主流地圖網站都採起了矢量切片地圖的設計方案,其中mapbox基於prototype提出的mvt格式的矢量切片方案收到了較爲普遍地的承認。在服務器端,可以完成矢量切片本地發佈、調用的方式目前大體有三種:前端
(1) ArcGIS系列,在ArcGIS10.5PRO等最新版本中已經支持了矢量切片的發佈,但其是商業軟件,非開源,在實際項目研發使用相對困難。java
(2) Mapbox studio支持本地數據的上傳和發佈,但其處理速度很慢,且許多地理數據涉密或體量較大,不適合採起這種方式。web
(3) GeoServer2.11版本之後,安裝矢量切片插件geoserver-2.11-SNAPSHOT-vectortiles-plugin即可以完成矢量切片的製做與發佈。這種方式純開源,相對實用性較高,本文主要針對這一方案進行探討。json
採起GeoServer做爲矢量切片的服務器使用簡單方便,利用內置的GeoWebCache能夠將矢量切片完成相似柵格瓦片(png/jpeg)的本地化緩存,以提高地圖服務的傳輸效率。但在實際項目研發過程當中發現,使用內置的GeoWebCache進行矢量切片預緩存將耗費較大的CPU和內存等資源,影響geoserver服務器的運行效率,所以須要將GeoServer與GeoWebCache進行分佈部署。目前網絡上對這方面的研究主要停留在將GeoWebCache做爲柵格瓦片緩存服務器的獨立部署,沒有對其在矢量瓦片方面的應用進行說明。跨域
1.GeoServer部分緩存
矢量瓦片地圖服務的發佈依舊在安裝了GeoServer的服務器中完成,其發佈過程與正常發佈過程無差別。雖然新版本中依舊會內嵌GeoWebCache,但這裏咱們僅僅是發佈服務,實際調用中並不使用內嵌的GeoWebCache進行矢量瓦片的緩存。tomcat
2.GeoWebCache部分前端框架
這裏將GeoWebCache安裝在與上述分離的另外一臺服務器中,將其安裝在Tomcat的Webapps中便可。安裝好後,在webapps中打開geowebcache/WEB-INF/web.xml,在其中完成緩存文件地址的配置。值得注意的是,網上的教程均採起添加一個<context-param>的方式完成緩存地址配置,但筆者在實際測試中發現,不能隨意進行緩存地址的添加,其默認地址爲C:\Users\Administrator\AppData\Local\Temp\geowebcache。所以,只能夠在這個文件夾或者其子文件夾中進行設置,做爲緩存文件地址。
修改好web.xml文件的配置後,重啓tomcat,在上述緩存文件地址中就能夠發現geowebcache.xml這個文件了。geowebcache.xml用於地圖服務攔截與緩存的設置,在其中的<layers>標籤中添加:
<wmsLayer> <!--地圖名稱,這個會在前端調用的時候中用到--> <name>vectorTile:BJ_LN</name> <!--圖片格式,要與geoserver發佈服務時所選的格式保持一致--> <mimeFormats> <string>image/jpeg</string> <string>image/png</string> <string>application/x-protobuf;type=mapbox-vector</string> <string>application/json;type=geojson</string> </mimeFormats> <!--使用的瓦片格網座標系,這裏也要與geoserver發佈服務時所選座標系保持一致--> <gridSubsets> <gridSubset> <gridSetName>EPSG:4326</gridSetName> </gridSubset> <gridSubset> <gridSetName>EPSG:900913</gridSetName> </gridSubset> </gridSubsets> <!--wms服務地址,其中vectorTile爲geoserver地圖服務的工做空間--> <wmsUrl> <string>http://10.5.201.111:8090/geoserver/vectorTile/wms?service=WMS</string> </wmsUrl> <wmsLayers>vectorTile:BJ_LN</wmsLayers> </wmsLayer>
3.WEB前端調用部分
支持矢量切片地圖服務的前端框架不少,這裏筆者主要介紹利用openlayers3和mapbox-gl兩種前端框架對上述發佈的服務進行調用的方式。
(1) OL3:(目前支持EPSG:4326/ EPSG:900913兩種投影方式的geoserver服務)
var lyr ="vectorTile:BJ_LN"; var vector = newol.layer.VectorTile({ // 矢量切片的數據源 source: new ol.source.VectorTile({ projection: projection4326, format: new ol.format.MVT(), tileGrid:ol.tilegrid.createXYZ({ extent:ol.proj.get('EPSG:4326').getExtent(), maxZoom: 19 }), // 矢量切片服務地址 tileUrlFunction:function(tileCoord){ return 'http://10.5.201.29:8080/geowebcache/service/tms/1.0.0/' +lyr+'@EPSG%3A4326@pbf/'+(tileCoord[0]-1) +'/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) +'.pbf'; } }) });
(2) mapbox-gl:(目前僅支持EPSG:900913一種投影方式的geoserver服務)
"sources":{ "composite": { "url":"mapbox://mapbox.mapbox-streets-v5", "type":"vector" }, "os": { "type":"vector", "scheme": "tms", "tiles": [ "http://10.5.201.29:8080/geowebcache/service/tms/1.0.0/vectorTile:BJ_LN@EPSG:900913@pbf/{z}/{x}/{y}.pbf" ] }, },
4.geoserver和geowebcache的CORS跨域問題處理
在前端初次調用矢量切片地圖服務時,多會報錯:「已阻止跨源請求:同源策略禁止讀取位於 http://xxx.xxx.com 的遠程資源。(緣由:CORS 頭缺乏 ‘Access-Control-Allow-Origin‘)」
這裏須要咱們對服務器的Tomcat以及geoserver和geowebcache進行CORS(跨域資源共享)配置,具體操做見http://www.bubuko.com/infodetail-2041942.html.上述文章僅僅介紹了geoserver的CORS配置,參照其方式能夠對geowebcache進行配置。