Mapbox GL JS學習筆記三：使用官方工具Mapbox Studio

聲明：我本地開發使用的Mac系統，所以不敢保證在其它系統尤其是Windows系統下可行。

目前Mapbox官方最新的工具在線版的Mapbox Studio，其實在很早之前Mapbox官方推出過一個離線版的Mapbox Studio（全稱是Mapbox Studio Classic），目前這個工具已經在Github上開源，同時官方也明確指出不再更新這個離線版的工具，但是作為自己練習使用或者比較小的項目還是可以直接使用的。

本來這一篇是想要將開源的工具也一併介紹，但是篇幅所限這裡先暫時介紹官方的Mapbox Studio和Mapbox Studio Classic這兩款工具。

第一種：最新的工具Mapbox Studio

工具地址：https://www.mapbox.com/studio/

Mapbox Studio工具是非常強大的在線工具，包含很多的內容，比如設置矢量瓦片資源、修改地圖樣式等等功能。這裡我們只做矢量瓦片導出其它功能就不做相關介紹。

發布相關步驟：

1.登錄後台

2.上傳資源

3.查看數據集

4.點擊Export to tileset發布資源

發布成功後在tilesets目錄中可以看到新的矢量瓦片服務

5.本地調用

第二種：已經被官方捨棄的工具Mapbox Studio Classic

工具下載地址：https://www.mapbox.com/help/define-mapbox-studio-classic/

具體操作步驟：

1.打開Mapbox Studio Classic

2.新建sources

3.新建圖層

4.選擇本地資源

5.顯示本地資源

6.保存工程到本地

7.修改資源說明

8.點擊導出矢量瓦片

9.將生成的mbtiles文件添加到本地nodejs伺服器資源目錄，重啟nodejs服務。

10.前端顯示代碼，這裡添加了核心顯示的代碼，其餘的代碼可以參考前幾篇文章內容：

map.on(load, function() { //台灣 var taiwan_tile_source = { type: vector, tiles: [ http://localhost:7777/v2/tiles/{z}/{x}/{y}.pbf; ], maxzoom: 8 }; var taiwan_polygon_layer = { id: taiwan_polygon_id, type: fill, source: taiwan_tile_source, source-layer: TWN_adm2, paint: { "fill-color": "#00ffff", "fill-opacity": 1, "fill-outline-color": "#ff0000" } }; var taiwan_normal_line_layer = { id: taiwan_normal_line_id, type: line, source: taiwan_tile_source, source-layer: TWN_adm2, layout: { line-join: round, line-cap: round }, paint: { "line-color": "#0000ff", "line-width": 2 } }; var taiwan_select_line_layer = { id: taiwan_select_line_id, type: line, source: taiwan_tile_source, source-layer: TWN_adm2, layout: { line-join: round, line-cap: round }, paint: { "line-color": "#ffffff", "line-width": 2 }, "filter": ["==", "ID_2", ""] }; map.addSource(taiwan_tile_source, taiwan_tile_source); map.addLayer(taiwan_polygon_layer); map.addLayer(taiwan_normal_line_layer); map.addLayer(taiwan_select_line_layer);});map.on(click, function(e) { map.setFilter("taiwan_select_line_id", ["==", "ID_2", ""]) var features = map.queryRenderedFeatures(e.point, { layers: [taiwan_polygon_id] }); if (!features.length) { return; } var feature = features[0]; // console.log(feature.geometry.coordinates) // console.log(feature.properties) for (var key in feature.properties) { console.log("key is: " + key + ", value is: " + feature.properties[key]) } map.setFilter("taiwan_select_line_id", ["==", "ID_2", feature.properties.ID_2]) // map.setPaintProperty("chongxingcun_land_line_id", "line-color", "#00ff00") var popup = new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML("<p>"+ feature.properties.NL_NAME_2+"</p>") .addTo(map);});

顯示結果：

交互顯示：