---
# System prepended metadata

title: 繪製地圖

---

# 繪製地圖
2020.10.09
地圖:
下載JOSM

![](https://i.imgur.com/I3S86Ab.png)

新增圖層
點選下載(上面第二排第三個)
圈選區域 下載地圖

![](https://i.imgur.com/sHaMCq7.png)

利用旁邊的工具描繪房間
因為描繪房間如果一個一個縣拉會不方便
所以可以上網搜尋ｊｏｓｍ繪製建築物的外掛，下載使用
這個就是
![](https://i.imgur.com/K19Ew7k.png)


如果畫別的樓層就新增圖層

![](https://i.imgur.com/lR1h9r1.png)
記得要給每間教室命名
![](https://i.imgur.com/mfw7BY3.png)

新增圖層畫路徑
每一條路徑都要有label
路徑存檔名稱.geojson
![](https://i.imgur.com/HE5afj1.png)



路徑跟地圖都要新增名稱等等
畫完將每個圖層輸出


# 將路徑匯入mapbox
開啟mapbox
![](https://i.imgur.com/oPIKw5p.png)
新增styles
![](https://i.imgur.com/t5m7EWD.png)
上傳完後跳出頁面即可得到乙個專屬的網址！！
因為地圖上要出現教室名稱
必須有兩個同樣的圖層（一個是出現地圖一個是出現文字）
![](https://i.imgur.com/R8ROD5z.png)


# 將地圖放入程式碼
style=上面得到的專屬網址
path= 在josm上畫的路徑
![](https://i.imgur.com/aR909iK.png)



# 手機測試
![](https://i.imgur.com/zT4lJ3p.png)





