一步一步制作一幅Mapbox Style風格的園區(qū)地圖

目前Mapbox在自動駕駛領域布局很深,幾個Uber高管入職Mapbox,Vision SDK也開始公測,初入自動駕駛領域的我必須緊跟步伐。
再看看國內(nèi)各大廠,早以換成前端渲染引擎,而朋友圈內(nèi)大佬,
淡叔 Mapbox GL JS本地化實踐
一休哥 《權力的游戲》3d地圖-基于Mapbox customlayer
公瑾 Mapbox本地離線部署
也都在追Mapbox,前端渲染必成大勢所趨。

我理解的前端渲染

前端渲染即借助前端js引擎對地圖矢量瓦片進行渲染。例如:Mapbox gl js就是一個瀏覽器端的渲染引擎,矢量瓦片就是Mapbox Vector Tiles。其優(yōu)勢是什么,看看Mapbox官網(wǎng):

Benefits of vector tiles

Vector tiles have two important advantages over fully rendered image tiles:

  • Styling: as vectors, tiles can be styled when requested, allowing for many map styles on global data
  • Size: vector tiles are really small, enabling global high resolution maps, fast map loads, and efficient caching

Mapbox Streets, our global basemap, is entirely made of vector tiles. Any map data you upload with Mapbox Studio is converted into vector tiles before styling.

總體思路

假如你現(xiàn)在需要對一個園區(qū)進行地圖制作,想做成矢量瓦片并在前端進行渲染,這篇文章適合你。
首先我們要把現(xiàn)有的矢量文件制作成mvt格式的矢量瓦片,接著針對要渲染的各個圖層及背景圖層定義Style(不借助Mapbox Studio情況下),大體就這樣。作者今天就來操作,敬請期待。


接著說,在作者這兩天摸索的同時,非常有幸看到這位大神的著作,拜讀一下收獲頗豐——《開源方案搭建可離線的精美矢量切片地圖服務-1.開篇(附成果演示地址)》,該大神分好幾篇循序漸進講解如何制作一個矢量瓦片圖,并通過Mapbox gl js前端渲染。在這就不班門弄斧了,在大神文章指引下,一步步制作出一張粗略的地圖。

image.png

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容