寫給小白的地理資訊的表示法:GeoJSON

uccs發表於2023-04-11

簡介

GeoJSON 是一種使用 JSON 來編碼各種地理資料結構的格式,是一種輕量級的資料交換格式,可以用來表示幾何物件、屬性資料、空間參考系統等資訊

由兩種物件組成:Geometry(幾何物件)和 Feature(空間行狀)

  • 幾何物件用來描述地理空間中的點、線、面等幾何形狀
  • 空間行狀用來描述一個有界的實體,包括幾何物件和其他屬性資訊

幾何物件型別有:

  • 點:Point
  • 多點:MultiPoint
  • 線:LineString
  • 多線:MultiLineString
  • 面:Polygon
  • 多面:MultiPolygon
  • 幾何集合:GeometryCollection

空間行狀型別有:

  • 空間行狀:Feature
  • 空間形狀集合:FeatureCollection

舉例

幾何物件和空間行狀可以相互巢狀

const GeoJSON = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [121.4737, 31.2304] },
      properties: { id: 1 },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [121.4837, 31.2504] },
      properties: { id: 2 },
    },
  ],
};

空間行狀

FeatureCollection

FeatureCollectionFeature 物件的集合,用來表示一組 Feature 物件

typefeatures 兩個屬性組成:

  • type 屬性的值為 FeatureCollection
  • features 屬性的值為 Feature 物件的陣列
const FeatureCollectionJSON = {
  type: "FeatureCollection",
  features: [feature],
};

Feature

Feature 物件用來表示幾何物件的屬性資訊

typegeometryproperties 三個屬性組成:

  • type 屬性的值為 Feature
  • geometry 屬性的值為 Geometry 幾何物件
  • properties 屬性的值為屬性物件(可選)
const FeatureJSON = {
  type: "Feature",
  geometry: { type: "Point", coordinates: [121.4737, 31.2304] },
  properties: { id: 1 },
};

幾何物件

Point

Point 用來表示一個點

typecoordinates 兩個屬性組成:

  • type 屬性的值為 Point
  • coordinates 屬性的值為一個陣列,陣列的第一個元素為經度,第二個元素為緯度
const PointJSON = {
  type: "Point",
  coordinates: [121.4737, 31.2304],
};

MultiPoint

MultiPoint 用來表示多個點

typecoordinates 兩個屬性組成:

  • type 屬性的值為 MultiPoint
  • coordinates 屬性的值為一個陣列,陣列的每個元素都是一個點的座標
const MultiPointJSON = {
  type: "MultiPoint",
  coordinates: [
    [121.4737, 31.2304],
    [121.4837, 31.2504],
  ],
};

LineString

LineString 用來表示一條線

typecoordinates 兩個屬性組成:

  • type 屬性的值為 LineString
  • coordinates 屬性的值為一個陣列,陣列的每個元素都是一個點的座標
const LineStringJSON = {
  type: "LineString",
  coordinates: [
    [121.4737, 31.2304],
    [121.4837, 31.2504],
  ],
};

MultiLineString

MultiLineString 用來表示多條線

typecoordinates 兩個屬性組成:

  • type 屬性的值為 MultiLineString
  • coordinates 屬性的值為一個陣列,陣列的每個元素都是一個線的座標陣列
const MultiLineStringJSON = {
  type: "MultiLineString",
  coordinates: [
    [
      [121.4737, 31.2304],
      [121.4837, 31.2504],
    ],
    [
      [121.4727, 31.2314],
      [121.4827, 31.2514],
    ],
  ],
};

Polygon

Polygon 用來表示一個面

typecoordinates 兩個屬性組成:

  • type 屬性的值為 Polygon
  • coordinates 屬性的值為一個陣列,陣列的第一個元素為外環的座標陣列,後面的元素為內環的座標陣列

polygon 的座標陣列的第一個元素和最後一個元素是相同的,表示閉合

const PolygonJSON = {
  type: "Polygon",
  coordinates: [
    [
      [121.4737, 31.2304],
      [121.4837, 31.2504],
      [121.4937, 31.2304],
      [121.4737, 31.2304],
    ],
    [
      [121.4717, 31.2314],
      [121.4827, 31.2524],
      [121.4937, 31.2334],
      [121.4757, 31.2344],
    ],
  ],
};

MultiPolygon

MultiPolygon 用來表示多個面

typecoordinates 兩個屬性組成:

  • type 屬性的值為 MultiPolygon
  • coordinates 屬性的值為一個陣列,陣列的每個元素都是一個面的座標陣列
const MultiPolygonJSON = {
  type: "MultiPolygon",
  coordinates: [
    [
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
    ],
    [
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
    ],
  ],
};

GeometryCollection

GeometryCollection 用來表示幾何物件的集合

typegeometries 兩個屬性組成:

  • type 屬性的值為 GeometryCollection
  • geometries 屬性的值為幾何物件的陣列
const GeometryCollectionJSON = {
  type: "GeometryCollection",
  geometries: [
    { type: "Point", coordinates: [121.4737, 31.2304] },
    {
      type: "LineString",
      coordinates: [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
      ],
    },
  ],
};

可選屬性

這些屬性都是 GeoJSON 的擴充套件屬性,不是 GeoJSON 規範的一部分

  • id 屬性,用來描述 FeatureCollection 的唯一標識
  • bbox 屬性,用來描述 FeatureCollection 的邊界框

    • 四至座標,一般用來做資料裁剪
    • 這是一組左上角和右下角的座標,示例:[minLon, minLat, maxLon, maxLat]
  • properties 屬性,用來描述 FeatureCollection 的屬性
  • crs 屬性,用來描述座標參考系

其他

coordinate

coordinate 是一個陣列,表示一個點的座標,陣列的長度表示座標的維度,一般是 2 維或 3

  • 2 維:[lon, lat]
  • 3 維:[lon, lat, height]

coordinate 的第一個元素表示經度,第二個元素表示緯度,第三個元素表示高度

座標順序是 [lon, lat],這個是推薦順序,可由 crs 屬性指定

coordinates 是多維陣列:

  • 點:[lon, lat]
  • 線:[[lon, lat], [lon, lat]]
  • 面:[[[lon, lat], [lon, lat]]]
  • 多面:[[[[lon, lat], [lon, lat]]]]

座標參考系

最常使用的座標系是 EPSG:4326EPSG:3857

  • EPSG:4326WGS84(CGCS2000,大地) 座標系,是 GeoJSON 規範的預設座標系
  • EPSG:3857Web Mercator(墨卡託) 座標系,是 OpenLayers 的預設座標系

它們的區別:

  • EPSG:4326 是經緯度座標系,EPSG:3857 是投影座標系
  • EPSG:4326 的座標範圍是 [-180, -90, 180, 90]EPSG:3857 的座標範圍是 [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
  • EPSG:4326 的座標單位是度,EPSG:3857 的座標單位是米
  • EPSG:4326 的座標原點是 [0, 0]EPSG:3857 的座標原點是 [-20037508.342789244, -20037508.342789244]
  • EPSG:4326 的座標軸方向是 [x, y]EPSG:3857 的座標軸方向是 [x, -y]

在 ts 中使用

為了在 ts 使用 GeoJSON 能夠有型別約束,我整理整理了一些 GeoJSONts 型別定義和建立 GeoJSON 的方法:

舉例:

  1. 表示一個點和多個點的 GeoJSON 集合:

    使用geojson.d.ts

    type PointType = FeatureCollection<Point | MultiPoint, GeoJsonProperties<T>>;
    
    const point2Geojson: PointType<{ id: string; name?: string }> = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [120.4737, 31.2304],
          },
          properties: { id: "12", name: "uccs" },
        },
        {
          type: "Feature",
          geometry: {
            type: "MultiPoint",
            coordinates: [
              [121.4737, 31.2304],
              [111.4737, 31.2204],
            ],
          },
          properties: { id: "1" },
        },
      ],
    };
  2. 建立一個幾何物件

    使用geojson.helper.ts

    const pointGeometry = point<{ id: string }>([120.4737, 31.2304], {
      id: "1",
    });
    const featureGeoJSON = feature<Point>(pointGeometry);

參考

相關文章