如何創(chuàng)建 mapbox 精靈圖

時(shí)間：2023-07-06 16:15:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-06 16:15:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何創(chuàng)建 mapbox 精靈圖：

緣起

前面文章介紹了如何在本地發(fā)布OSM數(shù)據(jù)，并使用 maputnik 自定義 mapbox 格式的地圖樣式。在使用 maputnik 配圖時(shí)，如果想要使用自己的圖片作為地圖符號(hào)，就需要制作精靈圖。

精靈圖的制作工具有很多，在線網(wǎng)站就有一大堆，但普遍存在一個(gè)問題，maputnik 對(duì)精靈圖的要求是要有精靈圖和說(shuō)明精靈圖中圖片信息的json配置文件，而這些在線網(wǎng)站的工具，只能生成精靈圖，沒有json配置文件。

mapbox精靈圖工具

mapbox開源了一個(gè)精靈圖制作工具 spritezero，這個(gè)工具可以生成精靈圖和對(duì)應(yīng)的json文件。spritezero 的輸入文件是svg文件，輸出文件是指定比例的精靈圖和對(duì)應(yīng)的json文件。

我自己在安裝 spritezero 這個(gè)工具時(shí)總報(bào)錯(cuò)，翻看它的 issues 發(fā)現(xiàn)很多人都碰到了這個(gè)問題。原因是用到的一個(gè)類庫(kù)太老了，我最終解決辦法是另辟蹊徑，找了一個(gè)它的docker庫(kù) spritezero-docker ， 這個(gè)docker庫(kù)里已經(jīng)把 spritezero 的環(huán)境配置好了，直接用就行。

spritezero-docker 使用方法

下面的操作步驟是基于linux系統(tǒng)

1. 克隆庫(kù)
   docker pull dolomate/spritezero
   
2. 在當(dāng)前目錄創(chuàng)建 ./data/sprites/_svg 文件夾
   
3. 把svg文件放在 ./data/sprites/_svg 文件夾中，svg文件的名稱不要太隨意，名稱會(huì)被寫入json配置文件，后續(xù)使用時(shí)會(huì)用到。

1. 在當(dāng)前目錄執(zhí)行命令，生成精靈圖：
   docker run -it -e FOLDER=_svg -e THEME=sprites -v ${PWD}/data:/data dolomate/spritezero
   
2. 生成的精靈圖會(huì)存放在 ./data/sprites 文件夾中
   

精靈圖黑框問題

查看生成的精靈圖，你可能會(huì)碰上下圖中的問題：只有黑色輪廓




一通排查，發(fā)現(xiàn)上面問題的原因是：在svg代碼中，style的寫法問題。style單獨(dú)寫不行，需要內(nèi)嵌到dom元素中，如下圖：













解決方法，用 AI（Adobe Illustrator） 軟件導(dǎo)出SVG文件時(shí)，CSS屬性欄選擇“樣式屬性”，style就會(huì)內(nèi)嵌到dom元素中了。下圖是導(dǎo)出時(shí)的正確選項(xiàng)，更深入的可以參考這篇文章

在 maputnik 中使用生成的精靈圖

1. 把生成的精靈圖用web服務(wù)器發(fā)布出來(lái)，我用的tomcat。記得解決web服務(wù)器的跨域問題，不然調(diào)用時(shí)會(huì)報(bào)錯(cuò)。
   
2. 配置精靈圖發(fā)布的路徑，如下圖
   

1. 選擇一個(gè)symbol類型的符號(hào)，在 Image 選項(xiàng)的下拉框中，會(huì)直接顯示精靈圖中的圖片名稱，這個(gè)圖片名稱就是前面讓大家起名不要太隨意的SVG文件名稱。

總結(jié)：

1. 在用 maputnik 配圖時(shí)，如果想自定義地圖符號(hào)，就要自己制作精靈圖
2. 網(wǎng)上的精靈圖制作工具，普遍只能生成精靈圖，沒有json配置文件，而 maputnik 需要json配置文件
3. mapbox開源了一個(gè)精靈圖制作工具 spritezero ，生成的精靈圖有json配置文件
4. spritezero 在安裝時(shí)會(huì)報(bào)錯(cuò)，原因是用到的一個(gè)庫(kù)太老了
5. spritezero-docker 是spritezero的docker庫(kù)，已經(jīng)解決了安裝環(huán)境問題
6. 介紹了如何使用 spritezero-docker 生成精靈圖
7. 生成精靈圖時(shí)，如果出現(xiàn)黑框問題，多半是因?yàn)閟tyle的寫法問題。style需要內(nèi)嵌到dom元素中
8. 介紹了如何在 maputnik 中使用生成的精靈圖

相關(guān)連接：

1. 如何在本地發(fā)布OSM數(shù)據(jù)：http://gisarmory.xyz/blog/index.html?blog=OSMVectorTiles
2. spritezero庫(kù)github地址：https://github.com/mapbox/spritezero
3. spritezero庫(kù)安裝報(bào)錯(cuò)的問題：https://github.com/mapbox/spritezero/issues/84
4. spritezero-docker庫(kù)github地址：https://github.com/macteo/spritezero-docker
5. 如何正確用AI導(dǎo)出SVG文件：https://cloud.tencent.com/developer/article/1007666

---

原文地址：http://gisarmory.xyz/blog/index.html?blog=maputnikSprites

關(guān)注《GIS兵器庫(kù)》公眾號(hào)， 第一時(shí)間獲得更多高質(zhì)量GIS文章。







本文章采用 知識(shí)共享署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際許可協(xié)議 進(jìn)行許可。歡迎轉(zhuǎn)載、使用、重新發(fā)布，但務(wù)必保留文章署名《GIS兵器庫(kù)》（包含鏈接： http://gisarmory.xyz/blog/），不得用于商業(yè)目的，基于本文修改后的作品務(wù)必以相同的許可發(fā)布。