跳至主要内容

建立 Overture 地圖

步驟 1: 下載所需的資料​

Overture Maps 資料以 cloud-native 格式 GeoParquet 釋出。這些資料進一步按 主題 和 類型 進行分區。通過使用像 DuckDB 這樣的工具下載資料，可以充分利用這些特性，實現最佳性能。下載並將資料轉換為 GeoJSON 後，我們可以使用 tippecanoe 為每個主題創建 PMTiles 存檔。

地點資料主題代表現實世界中的業務和興趣點。詳細了解地點資料架構，請參閱 文檔。

  1. 以下 DuckDB 查詢會下載特定邊界框內的地點資料並寫入 GeoJSON 檔案。

    LOAD spatial;
    LOAD httpfs;
    -- Access the data on AWS in this example
    SET s3_region='us-west-2';

    COPY (
        SELECT
            names.primary AS name,
            categories.primary as category,
            ROUND(confidence,2) as confidence,
            ST_GeomFromWKB(geometry) as geometry
    FROM read_parquet('s3://overturemaps-us-west-2/release/2024-07-22.0/theme=places/*/*')
    WHERE
        -- Point geometry doesn't require looking at both min and max:
        bbox.xmin BETWEEN -122.68 AND -121.98 AND
        bbox.ymin BETWEEN 47.36 AND 47.79
    ) TO 'seattle_places.geojson' WITH (FORMAT GDAL, DRIVER 'GeoJSON', SRS 'EPSG:4326');

  2. 接下來，使用 tippecanoe 從 seattle_places.geojson 創建 pmtiles 存檔。

    tippecanoe -fo places.pmtiles -Z13 -z13 -l places seattle_places.geojson
    Tippecanoe flag explanation
    • -fo places.pmtiles The output file will be places.pmtiles. It will be overwritten if it exists.
    • -Z13 and -z13 will produce a tileset starting at zoom 13 and going up to zoom 13 (only 1 zoom level).
    • -l places names the layer "places"

步驟 2：使用 Maplibre + PMTiles 創建地圖​

目前，我們已經從五個 Overture 主題創建了五個 PMTiles 檔案：

  1. places.pmtiles
  2. placenames.pmtiles
  3. buildings.pmtiles
  4. roads.pmtiles
  5. base.pmtiles

本頁的地圖結合了 react maplibre 範例 和 PMTiles。您可以在 GitHub 上 查看原始碼 獲得完整的 react 示例，或到 基於 7 月發佈的地圖 查看非 react 的 PMTiles 實例。

使用 PMTiles 與 react 需要添加 PMtiles protocol：

import maplibregl from 'maplibre-gl';
import { Protocol } from 'pmtiles';

useEffect(() => {
  let protocol = new Protocol();
  maplibregl.addProtocol("pmtiles",protocol.tile);

  ... initialize your map here ...

  return () => {
    maplibregl.removeProtocol("pmtiles");
  }
}, []);

然後，在初始化地圖時使用相對路徑引用圖磚存檔：

  style: {
    sources: {
      roads: {
        type: "vector",
        url: "pmtiles://../example-map/tiles/roads.pmtiles"
      },
      places: {
        type: "vector",
        url: "pmtiles://../example-map/tiles/places.pmtiles"
      },
    ...

步驟 3：為圖層設置樣式​

下面的每個標籤依照 Maplibre Style Spec 包含了地圖的完整樣式，

{
  "id": "placesLabel",
  "type": "symbol",
  "source": "places",
  "source-layer": "places",
  "filter": [
    "all",
    [
      "has",
      "name"
    ],
    [
      ">",
      [
        "get",
        "confidence"
      ],
      0.75
    ]
  ],
  "minzoom": 15,
  "maxzoom": 24,
  "layout": {
    "text-field": [
      "concat",
      "■\n",
      [
        "get",
        "name"
      ]
    ],
    "text-font": [
      "Noto Sans Bold"
    ],
    "text-max-width": 5,
    "text-size": 10,
    "text-line-height": 1,
    "text-justify": "center",
    "text-anchor": "center",
    "text-radial-offset": 0.8,
    "text-padding": 4
  },
  "paint": {
    "text-color": "#071F3F",
    "text-halo-color": "#dce6ef",
    "text-halo-width": 1
  }
}
最後於 更新