Image

零、Drupal 所需模組:
一、獲得目標行政區邊界的 "geojson" 檔:
- 在 OpenStreetMap 找到我們要畫的行政區,例如「淡水區」。
- 在 OSM 的各種 Elements 裡,常見的有:Node、Way、Relation。行政區屬於Relation(關聯)。
- 標題的後面會有一串數字,那就是這個 Element 的 ID,淡水區的 ID 是 1296139。
- 來到 Overpass Turbo 這個服務(詳細介紹可參見洪老師這篇或 supaplex 大大這篇)
- 折騰一陣子以後,發現用 ID 搜尋最快。直接按工具列上的「精靈模式」,輸入「id:1296139」並搜尋,左邊欄位會自動生成 query:
/* This has been generated by the overpass-turbo wizard. The original search was: “id:1296139” */ [out:json][timeout:25]; // gather results ( // query part for: “id:1296139” node(1296139)({{bbox}}); way(1296139)({{bbox}}); relation(1296139)({{bbox}}); ); // print results out body; >; out skel qt;
- 把 node 跟 way 那兩行刪掉,留下 relation,按下工具列上的「執行」,接著我們就會看到,地圖上已經出現相應的物件了。
- 點選右上角的「資料」頁籤,可以看到構成這個物件的 geojson。點選工具列「匯出」,即可將資料另存為我們想要的檔案格式。在這裡我們存成 geojson 就好。
二、將 geojson 繪製成地圖
- 管理工具列:設定 → 系統 → Geocoder → Provider,新增「Geocoder provider」,在下拉式選單中選取「Geojson File」。
- 回到內容類型,新增一個「檔案」欄位,供上傳 geojson 檔。
- 新增一「Geofield」欄位,並對於其中的「Geocode」部份採取以下配置:
- Geocode method → Geocode from an existing field
- Geocode from an existing field → 選取剛才新增的「檔案」欄位
- Geocoder providers → 勾選「Geojson」
- 將 geojson 檔上傳至「檔案」欄位,「geofield」欄位則留白,接著儲存內容,即可。
同場加映
眼尖的網友會注意到,這種方法畫出來的區域,不只有邊界,還會有一個地標 icon,但本文最上面那張用 Leaflet + Views 做出來的、標註有多個地點的大圖,「行政區域」是沒有地標 icon 的。如果我們要把區域的 icon 拿掉,可以在該內容類型的「管理表單顯示」頁籤,將「Geofield」欄位的 Widget 改為「Geofield (WKT)」,該欄位內容就會變成這個樣子:
GEOMETRYCOLLECTION (POLYGON ((121.464298 25.1240618,
121.4648157 25.1242606, 121.4648089 25.1243229,
… , 121.4641153 25.1239855, 121.464298 25.1240618)),
POINT (121.4531477 25.1813044))
這種語法叫 WKT(Well-known text),常用於表示地理資料。然後我們找出 POINT (lat, lon) 這一句,把它拿掉即可。