GeoJSON

GeoJSON 是一种用于表示地理数据的格式，基于 JSON（JavaScript Object Notation）。它可以表示各种地理要素，如点、线、多边形等，以及它们的属性。GeoJSON 格式广泛应用于地理信息系统（GIS）和 Web 地图应用中。

GeoJSON 结构

GeoJSON 对象可以包含以下几种类型：

Point：表示一个点。
LineString：表示一条线。
Polygon：表示一个多边形。
MultiPoint：表示多个点。
MultiLineString：表示多条线。
MultiPolygon：表示多个多边形。
GeometryCollection：表示几何对象的集合。
Feature：表示带有属性的几何对象。
FeatureCollection：表示多个 Feature 对象的集合。

以下是一些 GeoJSON 示例，展示不同类型的地理要素：

Point

{
  "type": "Point",
  "coordinates": [102.0, 0.5]
}

LineString

{
  "type": "LineString",
  "coordinates": [
    [102.0, 0.0],
    [103.0, 1.0],
    [104.0, 0.0],
    [105.0, 1.0]
  ]
}

Polygon

{
  "type": "Polygon",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      [100.0, 0.0]
    ]
  ]
}

Feature

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [102.0, 0.5]
  },
  "properties": {
    "name": "Example Point"
  }
}

FeatureCollection

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "name": "Example Point"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0],
          [103.0, 1.0],
          [104.0, 0.0],
          [105.0, 1.0]
        ]
      },
      "properties": {
        "name": "Example LineString"
      }
    }
  ]
}

使用 GeoJSON

GeoJSON 数据可以直接用于许多地理信息系统（GIS）和 Web 地图应用中，如 Leaflet、Mapbox 和 Google Maps 等。以下是一个在 React 中使用 react-leaflet 显示 GeoJSON 数据的示例：

import React from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const geojsonData = {
   "type": "Feature",
   "properties": {
      "name": "Example Polygon",
      "color": "blue",
      "weight": 2,
      "opacity": 1,
      "fillColor": "red",
      "fillOpacity": 0.5
   },
   "geometry": {
       "type": "Polygon",
       "coordinates": [
         [
           [102.0, 0.0],
           [103.0, 0.0],
           [103.0, 1.0],
           [102.0, 1.0],
           [102.0, 0.0]
         ]
       ]
    }
};

const geojsonStyle = (feature) => {
  return {
    color: feature.properties.color,
    weight: feature.properties.weight,
    opacity: feature.properties.opacity,
    fillColor: feature.properties.fillColor,
    fillOpacity: feature.properties.fillOpacity,
  };
};

const MapComponent = () => {
  return (
    <MapContainer center={[0.5, 102.5]} zoom={13} style={{ height: "100vh", width: "100%" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      <GeoJSON data={geojsonData} style={geojsonStyle} />
    </MapContainer>
  );
};

export default MapComponent;

在这个示例中，我们使用 react-leaflet 的 GeoJSON 组件来显示 GeoJSON 数据，并通过 style 属性设置样式。你可以根据需要调整 GeoJSON 数据和样式选项。

常见的 `properties` 属性

GeoJSON 的 Feature 对象中的 properties 字段是一个自由形式的 JSON 对象，可以包含任何与该地理要素相关的属性信息。GeoJSON 规范并没有对 properties 字段中的属性做具体限制，这意味着你可以根据需要添加任何自定义属性。

虽然 properties 字段是自由形式的，但在实际应用中，通常会包含以下一些常见属性：

名称和描述：
- name：要素的名称。
- description：要素的描述。
样式属性（用于地图渲染）：
- color：线条颜色。
- weight：线条宽度。
- opacity：线条不透明度。
- fillColor：填充颜色。
- fillOpacity：填充不透明度。
分类和标签：
- category：要素的分类。
- tags：要素的标签列表。
时间属性：
- timestamp：时间戳。
- start_time：开始时间。
- end_time：结束时间。
其他自定义属性：
- 任何其他与要素相关的信息，例如 population、elevation、temperature 等。

GeoJSON 结构​

Point​

LineString​

Polygon​

Feature​

FeatureCollection​

使用 GeoJSON​

常见的 properties 属性​