1. 程式人生 > >開源方案搭建可離線的精美向量切片地圖服務-1.開篇(附成果演示地址)

開源方案搭建可離線的精美向量切片地圖服務-1.開篇(附成果演示地址)

 先不說廢話直接上地址:(所有東西都在阿里雲的共享雲虛擬主機上,訪問地圖可以會有點慢,請多多包涵)。

TIM截圖20180524180242

TIM截圖20180524180416

TIM截圖20180524180314

1.技術路線

本系列教程主要使用的開源技術有下面三點

1.基於postgresql資料庫的postgis空間資料外掛,主要儲存空間地理資訊,也可加快向量切片的速度。

2.GeoServer進行圖層資料的管理,以及向量切切片的生成。

3.Mapbox進行圖層樣式的設計,以及地圖展示與操作功能。

2.從向量切片談起

      移動網際網路的到來,大家每天都離不開地圖服務,從2005年穀歌推出谷歌地圖服務後,地圖服務經歷了一代又一代的發展,從簡單的基於圖片的切片到現在進入了個性化定製的地圖的時代,地圖走入我們生活的方方面面。新一代的地圖都是以向量切片的方式展示,通俗來說就是每次請求只返回資料,而地圖的渲染都來自與前端瀏覽器。這樣做不僅大大減少小地圖伺服器的壓力,而且為地圖定製化提供了可能。我們常見的百度地圖、高德地圖現在都是向量切片方式。下面我們用百度地圖的例子展示向量切片的優點。

普通切片

返回是一張圖片,圖片的資料量挺大的,其次一旦生成的圖片,那麼所有的屬性資料將不存在,圖片修改起來麻煩,而且個性化定製也很難實現。

TIM截圖20180524170752

向量切片

      返回的是含有屬性資訊的地理資料,這樣不僅資料量比較小,而且保留了屬性資料,為個性化定製地圖的實現提供可能。可以在前端基於WebGL的方式已自己喜歡的樣式進行地圖的渲染,而非直接由伺服器生成圖片返回。相對與圖片方式還有一個很大的好處就是不存在放大級別過高受到圖片解析度的影響,可以在任何解析度下顯示都很清晰。

image

        下面是百度地圖個性化定製頁面,大家可以點選測試一下,可以使用類似css格式定製地圖。http://developer.baidu.com/map/custom/

,我們使用的mapbox也是使用類似的方式,進行地圖個性化定製。

TIM截圖20180524173625

3小結

       最近公司專案中要將原有的圖片型別切片方案切換成向量切片,最近一直研究這方面的技術。發現網上對於我們這些新手提供整套解決方案的文章比較少,所以我把我目前所掌握的技術寫出了分享給大家,某些方面存在一些疑惑,提出來和大家一起交流一下,這篇是算是開篇介紹吧,後面我會把所有用到的技術以及整套測試資料和原始碼分享給大家!!下篇主要講一下PostGIS資料儲存,以及GeoServer圖層管理以及向量切片的生成。

待續。。。。。。。。。。。。。。。。。。。。。

作者:ATtuing