[Drupal] 利用 OSM 的資料,在 Leaflet 地圖畫出行政區

Jiajun Xu 發表於 二, 04/20/2021 - 00:28

零、Drupal 所需模組:

一、獲得目標行政區邊界的 "geojson" 檔:

  1. OpenStreetMap 找到我們要畫的行政區,例如「淡水區」。Tamsui District‬
  2. 在 OSM 的各種 Elements 裡,常見的有:Node、Way、Relation。行政區屬於Relation(關聯)。
  3.  標題的後面會有一串數字,那就是這個 Element 的 ID,淡水區的 ID 是 1296139。
  4. 來到 Overpass Turbo 這個服務(詳細介紹可參見洪老師這篇supaplex 大大這篇
  5. 折騰一陣子以後,發現用 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;
    
    
  6. 把 node 跟 way 那兩行刪掉,留下 relation,按下工具列上的「執行」,接著我們就會看到,地圖上已經出現相應的物件了。
  7. 點選右上角的「資料」頁籤,可以看到構成這個物件的 geojson。點選工具列「匯出」,即可將資料另存為我們想要的檔案格式。在這裡我們存成 geojson 就好。

二、將 geojson 繪製成地圖

  1. 管理工具列:設定 → 系統 → Geocoder → Provider,新增「Geocoder provider」,在下拉式選單中選取「Geojson File」。add geocoder provider
  2. 回到內容類型,新增一個「檔案」欄位,供上傳 geojson 檔。
  3. 新增一「Geofield」欄位,並對於其中的「Geocode」部份採取以下配置:
    1.  Geocode method → Geocode from an existing field
    2. Geocode from an existing field → 選取剛才新增的「檔案」欄位
    3. Geocoder providers → 勾選「Geojson」geocoder
  4. 將 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) 這一句,把它拿掉即可。


延伸閱讀

 
 

 

 

標籤 (Tags)