緣起
前面文章介紹了如何在本地釋出OSM資料，並使用 maputnik 自定義 mapbox 格式的地圖樣式。在使用 maputnik 配圖時，如果想要使用自己的圖片作為地圖符號，就需要製作精靈圖。
精靈圖的製作工具有很多，線上網站就有一大堆，但普遍存在一個問題，maputnik 對精靈圖的要求是要有精靈圖和說明精靈圖中圖片資訊的json配置檔案，而這些線上網站的工具，只能生成精靈圖，沒有json配置檔案。
mapbox精靈圖工具
mapbox開源了一個精靈圖製作工具 spritezero，這個工具可以生成精靈圖和對應的json檔案。spritezero 的輸入檔案是svg檔案，輸出檔案是指定比例的精靈圖和對應的json檔案。
我自己在安裝 spritezero 這個工具時總報錯，翻看它的 issues 發現很多人都碰到了這個問題。原因是用到的一個類庫太老了，我最終解決辦法是另闢蹊徑，找了一個它的docker庫 spritezero-docker ， 這個docker庫裡已經把 spritezero 的環境配置好了，直接用就行。
spritezero-docker 使用方法
下面的操作步驟是基於linux系統
-
克隆庫
docker pull dolomate/spritezero -
在當前目錄建立
./data/sprites/_svg資料夾 -
把svg檔案放在
./data/sprites/_svg資料夾中，svg檔案的名稱不要太隨意，名稱會被寫入json配置檔案，後續使用時會用到。
-
在當前目錄執行命令，生成精靈圖：
docker run -it -e FOLDER=_svg -e THEME=sprites -v ${PWD}/data:/data dolomate/spritezero -
生成的精靈圖會存放在
./data/sprites資料夾中
精靈圖黑框問題
檢視生成的精靈圖，你可能會碰上下圖中的問題：只有黑色輪廓
一通排查，發現上面問題的原因是：在svg程式碼中，style的寫法問題。style單獨寫不行，需要內嵌到dom元素中，如下圖：
解決方法，用 AI（Adobe Illustrator） 軟體匯出SVG檔案時，CSS屬性欄選擇“樣式屬性”，style就會內嵌到dom元素中了。下圖是匯出時的正確選項，更深入的可以參考這篇文章
在 maputnik 中使用生成的精靈圖
-
把生成的精靈圖用web伺服器釋出出來，我用的tomcat。記得解決web伺服器的跨域問題，不然呼叫時會報錯。
-
配置精靈圖釋出的路徑，如下圖
-
選擇一個symbol型別的符號，在 Image 選項的下拉框中，會直接顯示精靈圖中的圖片名稱，這個圖片名稱就是前面讓大家起名不要太隨意的SVG檔名稱。
總結：
- 在用 maputnik 配圖時，如果想自定義地圖符號，就要自己製作精靈圖
- 網上的精靈圖製作工具，普遍只能生成精靈圖，沒有json配置檔案，而 maputnik 需要json配置檔案
- mapbox開源了一個精靈圖製作工具 spritezero ，生成的精靈圖有json配置檔案
- spritezero 在安裝時會報錯，原因是用到的一個庫太老了
- spritezero-docker 是spritezero的docker庫，已經解決了安裝環境問題
- 介紹瞭如何使用 spritezero-docker 生成精靈圖
- 生成精靈圖時，如果出現黑框問題，多半是因為style的寫法問題。style需要內嵌到dom元素中
- 介紹瞭如何在 maputnik 中使用生成的精靈圖
相關連線：
- 如何在本地釋出OSM資料：http://gisarmory.xyz/blog/index.html?blog=OSMVectorTiles
- spritezero庫github地址：https://github.com/mapbox/spritezero
- spritezero庫安裝報錯的問題：https://github.com/mapbox/spritezero/issues/84
- spritezero-docker庫github地址：https://github.com/macteo/spritezero-docker
- 如何正確用AI匯出SVG檔案：https://cloud.tencent.com/developer/article/1007666
原文地址：http://gisarmory.xyz/blog/index.html?blog=maputnikSprites
關注《GIS兵器庫》公眾號， 第一時間獲得更多高質量GIS文章。
本文章採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名《GIS兵器庫》（包含連結： http://gisarmory.xyz/blog/），不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。