WebGIS中矢量切圖的初步研究

 

1.背景

在GIS領域,金字塔技術一直是一個基礎性技術,WMTS規範專門制定了針對切片請求的格式。利用這種技術,前端可以快速展示出指定級別的地圖或影像。

但是,由於切圖本身是一張圖片,圖片上看似是興趣點的要素根本無法進行前端交互。於是,針對興趣點等矢量數據的展示,基本原理都是先獲取到矢量的地理信息(比如GeoJson),在前端繪製(內核爲一個element),於是該element便能進行鼠標響應等交互了。

2.矢量數據的一般展示方法

2.1 矢量數據按需請求

根據需要,每次向服務器(比如根據地理範圍、屬性信息)進行請求,將請求返回的數據繪製在前端。

優點是,按需請求,數據返回量有限,單個請求效率較高。

缺點是,頻繁和服務器交互,在給服務器造成巨大壓力的同時,多個請求,甚至某些重複請求,都會增大前端交互耗時,降低用戶體驗。

2.2 矢量數據一次請求,按需展示

隨着前端技術越來越成熟,電腦內存越來越大,RIA技術對矢量數據的展示做了更多的優化,其中一種常用方式就是矢量數據一次請求,按需展示方式。

比如以下使用LeafLet開發的例子:http://demo.qunee.com/map/LeafLet+MapABC.html

                       

查看後端請求:

 

可以看見,在頁面初始化時就將所有矢量信息讀取到前端,然後根據需求進行分級別聚類展示。

優點是:減少與服務端的交互,降低服務端的壓力,提高用戶體驗。

缺點是:第一次請求返回的數據量過大,網絡耗時較多,服務器在迎接第一次請求時也有相當壓力,並且對客戶端電腦配置有一定的依賴。

3.換一種解決思路——矢量切圖

3.1 何爲矢量切圖

何爲矢量切圖呢?說直白點,就是將矢量數據以建立金字塔的方式,切割成一個一個描述性文件,比如以GeoJson格式組織或者以自定義格式組織。

這是一份矢量數據切圖完後的截圖:

 

文件中具體內容爲geojson格式組織:

 

3.2切圖工具

3.2.1商業切圖工具

在最近召開的esri大會上公佈的esri的一個新的亮點便是他們的arcgispro產品在支持遙感數據處理、三維高效展示外,着重強調了對矢量切圖的支持。但是,目前該產品爲beta版。

早前接觸過蘇州超擎公司,對方的產品也能支持矢量切圖,並且在此基礎上,對方還支持影像數據不切圖壓縮爲流方式前端實時展示。

3.2.2 開源切圖軟件

目前支持矢量切圖的開源軟件,在網上大家比較推崇的是TileStache工具,安裝這個工具比較耗費精力,以下均是該工具需要依賴的其他軟件環境:

 

 

簡單點說,需要配置好GDAL環境,python環境,均配置好後纔可使用。並且目前只測試了在win7上運行,在win8上便不可以。

3.3 前端支持矢量瓦片展示

目前支持矢量瓦片展示的前端有leaflet,openlayers,arcgis js4.0。

3.3.1 arcgis js4.0中的解決方案

展示例子地址爲:http://basemapsbeta.arcgis.com/preview/app/index.html

 

 

其支持的矢量瓦片格式爲滿足Mapbox圖片存儲的格式(https://www.mapbox.com/)。

3.3.2leaflet中的解決方案

展示例子地址爲:http://basemapsbeta.arcgis.com/preview/app/index.html

 

 

這裏支持的是GeoJson格式的矢量瓦片。

4. 目前研究中發現的缺點

a.矢量切圖工具只能切WGS84座標系下的矢量圖層。

b.leaflet只能加載顯示可以轉換爲WGS84座標系的矢量瓦片數據。

5. 優化

5.1前端支持任何座標系下的矢量瓦片

繼承已有GIS框架中的canvastilelayer,利用開源的pbf解析庫,重寫gettile並解析重繪。擺脫leaflet對矢量瓦片座標系的限制。利用該方式,矢量瓦片爲任何座標系均能支持。

 

 

 

5.2前端緩存優化

將讀取過的矢量瓦片以一定的緩存機制緩存至內存中,使用緩存調度算法進行調度。

6.使用場景

a.根據範圍查詢展示矢量數據時,可以完全使用矢量切圖。

b.根據範圍和屬性展示矢量數據時,可以先根據範圍返回數據,在前端根據屬性數據進行過濾,最後展示。

7.有待解決的地方

開源矢量切圖工具目前只能切WGS84的矢量數據,將任何格式數據轉換成WGS84的數據是不現實的。針對這種問題,自己開發矢量切圖工具不失爲一種選擇。開發可以支持點數據的矢量切圖工具難度不大,但是開發能夠支持線和麪數據的矢量切圖工具則存在不小的難度。後續還需繼續研究。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章