矢量地理數據如何切片?

想在web前端直接表現矢量的地理數據,做一些應用。但是有些矢量數據非常大,載入速度很慢。然後查到有tile vector的方法,想知道這個是如何做到的。


了解一下SVTiles http://www.supermap.com.cn:8090/iserver/help/html/Subject_introduce/Cache/MapCache/TileFormat/SVTiles_Cache.htm
以及Mapnik Vector Tiles Mapnik Vector Tiles
再補充幾個,最近比較熱門的mapbox vector-tile-spec,arcgis 10.4中支持的矢量瓦片格式就是這個,建議直接從2.0或以上版本開始研究:
GitHub - mapbox/vector-tile-spec: Mapbox Vector Tile specification
現在有中文翻譯了:vector-tile-spec/README_zh.md at master · jingsam/vector-tile-spec · GitHub
百度echarts裡面的,不是切片,但思路也可供參考:
echarts/compress.js at 2ce08d4cd8e9db6e3930f4f58e0f19a58f32a7e0 · ecomfe/echarts · GitHub echarts/parseGeoJson.js at 2ce08d4cd8e9db6e3930f4f58e0f19a58f32a7e0 · ecomfe/echarts · GitHub
SuperMap REST中的tileFeature,它與前述SVTiles的區別是前者用於存儲多個瓦片(通常是一個地圖只存儲一份),這個用於每個瓦片請求:
http://support.supermap.com.cn:8090/iserver/help/html/mergedProjects/SuperMapiServerRESTAPI/root/maps/map/tileFeature.htm

一般的考慮點有以下幾方面:如何分塊(通常和地圖本身分塊相同),如何減少傳輸量(選用protobuff格式/delta-encoding編碼/)、如何簡化數據(通過zigzag/simplify-js等),如何加速渲染(使用屏幕像素坐標系,返回opengl/webgl可識別的二進位格式等)。

------矢量瓦片貌似是近期熱點?再補充些信息。

1)客戶端製圖:矢量瓦片一般會結合OpenGL/WebGL等新一代渲染技術,從而實現data-server + client-render+analysis,所以還需要考慮瓦片如何進行渲染,多層瓦片如何組織為一幅地圖並進行渲染,如何與現有的地圖製圖方案(符號、樣式、專題圖等)結合。這方面可以參考 Mapbox GL Style Spec (Mapbox Style Specification), ArcGIS 10.x的矢量瓦片方案也是等同採用了這套樣式規範。

另外也有一種新的技術思路,就是直接採用OpenGL渲染技術,將原始數據剖分為BufferObject,這種方案可以進一步節省客戶端渲染時間。但由於已經丟失了空間位置信息,從而也限制了其使用場景,失去了客戶端計算的能力。

2)2D與3D的矢量化集成:暫不展開。

3)矢量瓦片與原始空間數據的一體化管理:暫不展開。


各GIS平台廠商都提供了切片方案和工具,都能夠做到。


arcgis API for javascript 4.0beta2已經可以支持矢量地圖的載入了


就說說開源的,服務端有geoserver,mapserver,前端有openlayers,arcgis js api或flex也很強大,以上網上教學資源也很豐富。


推薦閱讀:

看啥雙拱門,來學 webpack 3啊
極樂技術周報(第十二期)
在移動端使用transform: translate代替top left marg等做位移有好處么 ?
手淘的Flexible方案能使用雪碧圖嗎?

TAG:前端開發 | 地圖 | GIS地理信息系統 |