移動端H5地圖向量SHP網格切分打包方案

標籤：包含   獲得   計算   分享   AC   cache   地理   body   響應   

文章著作權由作者李曉暉和部落格園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景

與離線瓦片方案一樣，同樣是為瞭解決移動端網速和流量問題，但是卻不僅僅於此。傳統的向量資料的展示一般分為兩種方案：

• 通過WMS動態擷取範圍內的向量資料圖片（向量資料由幕後處理成一張圖片返回），在前端疊加展示。
  優點——渲染壓力在後端，前端無壓力。後台對圖片更容易做緩衝（前端把地圖切分成格網，以WMS請求類比WMTS請求）。
  缺點——當前端需要互動時，必須進行動態根據座標查詢地理伺服器（I查詢）。響應稍慢，對後端壓力大。
• 通過WFS服務擷取範圍內的向量資料文本（geojson、pbf等格式），前端解析返回資料動態渲染。
  優點——由於是前端渲染展示，互動便捷，並且可以在前段只有控制樣式。
  缺點——後台和前端在擷取資料和展示資料上均有壓力，當資料量特別大時，前端渲染耗費效能容易卡頓。

而該方案上，當我們將SHP向量資料以一定演算法處理成文字檔存放到移動端後，既可以避免動態擷取資料對服務端的壓力，也可以擁有WFS方案上在前端即時渲染資料時的樣式制定和互動便捷的優點。
整個方案優點總結為：

• 規避手機網速問題
• 規避手機流量問題
• 減少服務端壓力
• 前端要素展示樣式可定製
• 要素互動快速響應

2.兩種離線演算法，兩種離線向量資料處理方案的描述對比2.1方案一（分級向量切片方案）方案描述

向量切片方案在我之前的文章中均有描述：項目角度談向量切片運用以及Geoserver處理自訂規格向量切片方案以及WebGIS中向量切圖的初步研究。簡單敘述為：

• 把向量資料當做瓦片處理，根據切圖原點、瓦片大小、各層級解析度，先在不同層級對SHP進行抽稀簡化，然後將該層級的SHP切分成對應向量資料區塊，再處理成文字格式設定。
• 將向量切片上傳至移動端，H5地圖請求擷取本地向量切片，解析渲染。

方案分析

• 優點: 各層級資料抽稀切片，使得各層級資料量載入均可控制，前端渲染數量也處於可控狀態。
• 缺點：由於要切不同層級下的資料，向量切片比較耗費時間，而且切圖資料量大。不利於快速實施。

2.2方案二（固定格線切片方案）方案描述

• 以固定幾何大小的網格對SHP資料切片處理成文本。
• 前端即時根據此時的可視範圍，基於預製的網格切片大小，算出此時範圍下對應的各切片，請求載入，解析渲染。

方案分析

• 優點：只需根據預製的網格大小將向量資料一次切割產生，效率比較高。
• 缺點：在地圖層級很小顯示全圖時，載入的切片數量過多導致前端渲染壓力非常大。

2.3方案選型

• 方案二優於方案一最大的地方在於實施更快速。
• 方案二最大的缺點是在低地圖層級時顯示的資料過量問題，這裡可以通過兩個手段規避。
  控制顯示層級——即只讓地圖縮放至某個層級上時才載入該向量資料。
  控制顯示數量——將網格資料進一步以責任網格打包，固定人員只展示固定責任網格範圍內的資料。

3.向量資料格切分打包工具的實現3.1SHP資料格切分詳細描述

• 獲得該圖層的幾何範圍，依據切圖原點、網格大小，算出該圖層對應的網格數量（colnums、rownums）以及網格的起始切片的行列編號(startcolnum、startrownum）。
• 以colnums和rownums作為雙迴圈遍曆結束點，依次將圖層中的要素切片，處理成文字檔。
  代碼描述：

//計算格網行列號int colNums = 0, rowNums = 0;colNums = Convert.ToInt32(Math.Ceiling((_maxX - _minX) / inputGridSize));rowNums = Convert.ToInt32(Math.Ceiling((_maxY - _minY) / inputGridSize));

3.2基於單元網格的已有切片打包描述

選用單元網格圖層進行打包，主要原因為單元網格為最小劃分網格，變動相對較少，減少實施次數。利用網格將已有的切片再進行整合打包，可進一步控制前端展示時的向量資料數量。

• 遍曆擷取網格圖層中的網格要素，得到各要素的幾何範圍。
• 依據幾何範圍、網格大小、切圖原點，算出該範圍內包含的瓦片編號。
• 將這些瓦片拷貝至以（要素編碼\組件類型編號)命名的檔案夾中。
• 遍曆處理完所有資料拷貝後，進行整體的檔案壓縮。

注意：
瓦片的打包路徑規範為：

工具介面為:

4.H5地圖前端展示實現4.1詳細描述

前端展示所用演算法與網格打包時所用演算法相同。JS擷取本機資料的思想方法也與我在移動端H5地圖離線瓦片方案中描述的移動端讀取本地瓦片的方法相同。不做累述，核心代碼如下:

var originx=parseFloat(gridClipParams[0]);var originy=parseFloat(gridClipParams[1]);var size=parseFloat(gridClipParams[2]);var vectorSource = new VectorSource({format:format,url:function(extent) {var temurl=GeosService.queryContent(url,servicelayerid,where,extent);if(useMobileCache){var col=Math.floor(Math.abs((extent[0]-originx))/size);var row=Math.floor(Math.abs((extent[1]-originy))/size);//本地測試url//temurl="http://192.168.32.135:8080/gis/tilemap/11010100100907/"+subtypeid+"/"+row+"/"+col+".json";temurl =self.offlineURL+encodeURIComponent(temurl)+"&row="+row+"&col="+ col+"&layername="+subtypeid;}return temurl;},strategy: function(extent,resolution){var minx=extent[0]-size;var miny=extent[1]-size;var maxx=extent[2]+size;var maxy=extent[3]+size;var m=Math.ceil((maxx-minx)/size);var n=Math.ceil((maxy-miny)/size);var extentArr=new Array();for(var i=0;i<m;i++){for(var j=0;j<n;j++){var temextent=[];var temminx=minx+i*size;var temminy=miny+j*size;var temmaxx=minx+(i+1)*size;var temmaxy=miny+(j+1)*size;temextent=[temminx,temminy,temmaxx,temmaxy];extentArr.push(temextent);}}return extentArr;}});

4.2成果展示

由於組件打包是以1000米的網格進行劃分後再打包，可以看見有的不在單元網格區劃內的組件也展示在了地圖上。所以網格切分的大小是一個必鬚根據項目進行調整的參數。

5.移動端打包上傳詳細描述

我將打包上傳單獨進行描述，是因為這一塊整合時需要格外注意檔案的合并方式。

• 手機服務端擷取到責任網格與單元網格的對應關係。
• 將責任網格對應的所有單元網格下的檔案進行合并。合并規則為增蓋方式。合并後的檔案夾名稱為責任網格命名。

責任網格打包檔案夾的路徑說明: \責任網格編碼\組件小類\行號\列號.json

 

　　　　　　　　　　　　　　　　　　　　　  　-----歡迎轉載，但保留著作權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                        　　    如果您覺得本文確實協助了您，可以掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

移動端H5地圖向量SHP網格切分打包方案