653 字
3 分鐘
臺北城市儀表板開發筆記 — 3. 建立地圖，在地圖顯示圖標
前文講完組件的建立，本文將說明為該組件新增地圖功能，如上圖在地圖上顯示圖標。
地圖原理
台北城市儀表板使用 Mapbox 作為地圖工具，可以整合多樣功能，台北城市儀表板目前支援八種地圖呈現類型，包含Circle、Fill、Symbol等，詳見官方文件。
與組件不同的是，組件的資料來源來自 Postgres 資料庫，而地圖的資料來源自前端的靜態檔案 geojson。
建立地圖流程
以下為建立地圖的流程，本範例使用上篇的雙北公有市場資料，並顯示地圖上。
- 整理資料，資料要包含經緯度
- 將資料轉為 geojson
- 將 geojson 放於前端
- 修改資料庫的地圖參數
第一步、整理資料
同上一篇的資料，這裡有包含市場名稱、地址、經緯度。
第二步、將資料轉為 geojson 放於前端
下載上面的檔案為 CSV，透過轉換工具將 CSV，轉為 geojson。
轉完的檔案會長如下，把它下載下來，取個名字，這裡我用 market.geojson
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 121.3973452,25.1465144 ] }, "properties": { "name":"下庄公有市場", "address":"新北市八里區舊城路19號", "city":"新北市", "district":"八里區" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 121.4728191,25.0197886 ] }, "properties": { "name":"中央公有市場", "address":"新北市三重區中央北路26號", "city":"新北市", "district":"三重區" } } ]}第三步、將 geojson 放於前端
將 market.geojson 放於 Taipei-City-Dashboard-FE/public/mapData，其他地圖的 geojson 也都是放在這。
第四步、修改資料庫的地圖參數
接著在資料庫修改參數，需要更動到兩個資料表，位於 dashboardmanager.public
1. 修改 component_maps
component_maps 儲存了地圖的元件資訊，包含呈現類型、圖標、參數。
新增一筆設定：
- id：表單ID，設一個數字
- index ：地圖ID，設為 market，要跟上面 geojson 命名一樣
- title：標題
- type：地圖類型，本範例顯示圖標，使用 symbol，詳見文件
- source：資料來源，使用 geojson
- icon：圖標， 目前只支援七種，詳見文件
- paint：畫布參數，本範例用不到
- property：圖標參數對應，顯示網頁上，與 geojson 中的欄位對應
INSERT INTO "public"."component_maps" ( "id", "index", "title", "type", "source", "icon", "paint", "property") VALUES ( '87', 'market', '市場', 'symbol', 'geojson', 'bus', '{}', '[{"key":"name","name":"市場名稱"},{"key":"address","name":"地址"}]');2. 修改 query_charts
新增上筆後，我們上面地圖 ID 是 87，將他寫入 map_config_ids
SQL 語法如下
UPDATE "public"."query_charts"SET "map_config_ids" = '{87}'WHERE "index" = 'market_map'這樣就完成了，在地圖上點選圖標，會顯示相關資訊
