GeoJSON 地图教程

GeoJSON 是一种用于编码地理空间数据的格式，它广泛应用于地图和地理信息系统（GIS）中。本教程将带您了解如何使用 GeoJSON 创建和展示地图。

基础概念

GeoJSON 数据通常包含以下元素：

Feature Collection: 包含一个或多个地理特征的集合。
Feature: 一个具体的地理实体，如点、线或面。
Geometry: 地理实体的几何形状。

创建 GeoJSON

以下是一个简单的 GeoJSON 示例，表示一个点：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Location"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-73.98182824707031, 40.748817070932516]
      }
    }
  ]
}

在地图上展示 GeoJSON

要将 GeoJSON 地图展示在网页上，您可以使用各种地图库，如 Leaflet 或 OpenLayers。

以下是一个使用 Leaflet 展示 GeoJSON 点的示例：

<!DOCTYPE html>
<html>
<head>
  <title>GeoJSON Map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
  <div id="map" style="width: 100%; height: 400px;"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([40.748817070932516, -73.98182824707031], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© OpenStreetMap'
    }).addTo(map);

    var geojson = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "name": "Location"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [-73.98182824707031, 40.748817070932516]
          }
        }
      ]
    };

    L.geoJSON(geojson).addTo(map);
  </script>
</body>
</html>

扩展阅读

如果您想了解更多关于 GeoJSON 的信息，可以访问我们的GeoJSON 教程。