GeoJSON簡介

GeoJSON 是一種廣泛使用的格式，用於表示地理數據，例如點、線、多邊形等地理要素。它基於JSON格式，結構簡單且可讀性高，因此非常適合在 Web 應用中傳遞和顯示地理信息。Leaflet 支援對 GeoJSON 的完整操作，可以直接將 GeoJSON 數據載入地圖，並進行樣式設置和互動操作。
GeoJSON範例結構

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [121.5654, 25.0330]
            },
            "properties": {
                "name": "台北 101"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [121.564, 25.033],
                        [121.566, 25.033],
                        [121.566, 25.035],
                        [121.564, 25.035],
                        [121.564, 25.033]
                    ]
                ]
            },
            "properties": {
                "name": "信義區"
            }
        }
    ]
}

GeoJSON基本結構

GeoJSON 的結構非常簡單，類似於 JSON，包含幾何數據和屬性信息。每個 GeoJSON 對象至少有兩個核心部分：
type：指定數據的類型（例如 FeatureCollection、Feature、Point 等）。
coordinates：表示地理對象的經緯度坐標。

properties（可選）：附加的屬性數據，用來存儲與地理對象相關的信息（例如名稱、描述等）。

type的可填入值

1.FeatureCollection

FeatureCollection是GeoJSON的最外層結構，表示一組地理要素的集合。

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [121.5654, 25.0330]
            },
            "properties": {
                "name": "台北 101"
            }
        }
    ]
}

2.Feature

表示單個地理對象，包括它的幾何數據和屬性。

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [121.5654, 25.0330]
    },
    "properties": {
        "name": "台北 101"
    }
}

3.Point

表示地圖上的單個地理點，通常由一對經緯度坐標表示。

{
    "type": "Point",
    "coordinates": [121.5654, 25.0330]
}

4.LineString

表示一條由多個點連接成的線

{
    "type": "LineString",
    "coordinates": [
        [121.5654, 25.0330],
        [121.5670, 25.0340],
        [121.5690, 25.0350]
    ]
}

5.Polygon

表示一個封閉的多邊形，由多個點組成。第一個和最後一個點必須相同，形成封閉區域。可以有“洞”，表示多邊形內部的空白區域。

{
    "type": "Polygon",
    "coordinates": [
        [
            [121.564, 25.033],
            [121.566, 25.033],
            [121.566, 25.035],
            [121.564, 25.035],
            [121.564, 25.033]
        ]
    ]
}

6.MultiPoint

{
    "type": "MultiPoint",
    "coordinates": [
        [121.5654, 25.0330],
        [121.5670, 25.0340]
    ]
}

7.MultiLineString

表示多條線的集合。

{
    "type": "MultiLineString",
    "coordinates": [
        [
            [121.5654, 25.0330],
            [121.5670, 25.0340]
        ],
        [
            [121.5690, 25.0350],
            [121.5710, 25.0360]
        ]
    ]
}

8.MultiPolygon

表示多個多邊形的集合，通常用於表示不連續的多個區域。

{
    "type": "MultiPolygon",
    "coordinates": [
        [
            [
                [121.564, 25.033],
                [121.566, 25.033],
                [121.566, 25.035],
                [121.564, 25.035],
                [121.564, 25.033]
            ]
        ],
        [
            [
                [121.570, 25.040],
                [121.572, 25.040],
                [121.572, 25.042],
                [121.570, 25.042],
                [121.570, 25.040]
            ]
        ]
    ]
}

9.GeometryCollection

表示一組不同類型的幾何對象的集合，可以是點、線、多邊形的組合。

{
    "type": "GeometryCollection",
    "geometries": [
        {
            "type": "Point",
            "coordinates": [121.5654, 25.0330]
        },
        {
            "type": "Polygon",
            "coordinates": [
                [
                    [121.564, 25.033],
                    [121.566, 25.033],
                    [121.566, 25.035],
                    [121.564, 25.035],
                    [121.564, 25.033]
                ]
            ]
        }
    ]
}

10.properties

是可選的屬性部分，包含與地理對象相關的額外信息。properties 可以存儲任意的鍵值對，用來描述這些地理要素的屬性。

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [121.5654, 25.0330]
    },
    "properties": {
        "name": "台北 101",
        "height": 509.2,
        "city": "台北市"
    }
}

套用geojson

若geojson寫在js檔案內可以直接使用

L.geoJSON(geojsonData).addTo(map);

但如果是寫一個外部的獨立json檔就得使用fetch或其他方式引入

今天先這樣，明天見