GeoJSON 数据

一、GeoJSON 数据的概述

GeoJSON 是一种基于 JSON 格式的地理信息数据交换格式,它用于表示地理要素及其属性。GeoJSON 可以用来描述点、线、面等几何形状,并且可以为这些几何形状添加额外的属性信息,被广泛应用于地理信息系统(GIS)、Web 地图开发等领域。

GeoJSON 是一种灵活且强大的地理数据格式,适用于多种场景。通过学习 GeoJSON 的结构和使用方法,可以更好地处理地理数据,并将其应用到地图开发中。

GeoJSON 是一种非常有用的地理信息数据格式,它提供了一种简洁而强大的方式来表示地理要素。通过定义不同的几何形状和属性信息,可以灵活地描述各种地理数据。在 Web 地图开发和 GIS 领域,它是一种常见的数据交换和存储格式,通过各种库和工具,可以方便地将 GeoJSON 数据可视化和进行分析处理。在使用时,需要注意数据结构的正确性和完整性,以及不同库对 GeoJSON 的解析和使用方式,以确保地理信息的准确表示和处理。

二、GeoJSON 的基本结构数据结构

GeoJSON 数据是一个 JSON 对象,通常包含以下字段:

  • type:表示 GeoJSON 对象的类型,常见的有:

    • FeatureCollection:表示一个要素集合。

    • Feature:表示一个要素(包含几何信息和属性)。

    • PointLineStringPolygon 等:表示具体的几何类型。

  • features :当 typeFeatureCollection 时,features 是一个数组,包含多个 Feature 对象。

  • geometry :表示几何信息,包含 typecoordinates 字段。

  • properties:表示属性信息,是一个键值对对象,可以存储任意自定义数据。

三、GeoJSON 的几何类型

GeoJSON 支持多种几何类型,常见的包括:

Point:表示一个点。

javascript 复制代码
{
  "type": "Point",
  "coordinates": [114.31, 30.52] // [经度, 纬度]
}

LineString:表示一条线。

javascript 复制代码
{
  "type": "LineString",
  "coordinates": [
    [114.31, 30.52],
    [114.32, 30.53],
    [114.33, 30.54]
  ]
}

Polygon:表示一个多边形。

javascript 复制代码
{
  "type": "Polygon",
  "coordinates": [
    [
      [114.31, 30.52],
      [114.32, 30.52],
      [114.32, 30.53],
      [114.31, 30.53],
      [114.31, 30.52] // 第一个点和最后一个点相同,表示闭合
    ]
  ]
}

MultiPoint(多点)

javascript 复制代码
{
    "type":"MultiPoint",
    "coordinates":[[lon1,lat1],[lon2,lat2],[lon3,lat3],...]
}
  • 例如:
javascript 复制代码
{
    "type":"MultiPoint",
    "coordinates":[
        [116.4074,39.9042],
        [116.4174,39.9142],
        [116.4274,39.9242]
    ]
}
  • coordinates 包含多个点的坐标,这些点是相互独立的。

MultiLineString(多线)

javascript 复制代码
{
    "type":"MultiLineString",
    "coordinates":[
        [[lon1,lat1],[lon2,lat2],[lon3,lat3],...],
        [[lon4,lat4],[lon5,lat5],[lon6,lat6],...]
    ]
}
  • 例如:
javascript 复制代码
{
    "type":"MultiLineString",
    "coordinates":[
        [
            [116.4074,39.9042],
            [116.4174,39.9142],
            [116.4274,39.9242]
        ],
        [
            [116.4374,39.9342],
            [116.4474,39.9442],
            [116.4574,39.9542]
        ]
    ]
}
  • coordinates 包含多个 LineString 的坐标数组。

MultiPolygon(多面)

javascript 复制代码
{
    "type":"MultiPolygon",
    "coordinates":[
        [[[lon1,lat1],[lon2,lat2],[lon3,lat3],...,[lon1,lat1]]],
        [[[lon4,lat4],[lon5,lat5],[lon6,lat6],...,[lon4,lat4]]]
    ]
}
  • 例如:
javascript 复制代码
{
    "type":"MultiPolygon",
    "coordinates":[
        [
            [
                [116.3974,39.8942],
                [116.4074,39.9042],
                [116.4174,39.9142],
                [116.3974,39.8942]
            ]
        ],
        [
            [
                [116.4274,39.9242],
                [116.4374,39.9342],
                [116.4474,39.9442],
                [116.4274,39.9242]
            ]
        ]
    ]
}
  • coordinates 包含多个 Polygon 的坐标数组。

四、GeoJSON 的要素(Feature)

一个 Feature 对象表示一个地理要素,包含几何信息和属性信息。

  • geometry:几何信息。

  • properties:属性信息。

javascript 复制代码
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [114.31, 30.52]
  },
  "properties": {
    "name": "武汉",
    "population": 12000000
  }
}

五、GeoJSON 的要素集合(FeatureCollection)

一个 FeatureCollection 对象表示多个要素的集合。

  • features :一个数组,包含多个 Feature 对象。
javascript 复制代码
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [114.31, 30.52]
      },
      "properties": {
        "name": "武汉",
        "population": 12000000
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [116.46, 39.92]
      },
      "properties": {
        "name": "北京",
        "population": 22000000
      }
    }
  ]
}

六、GeoJSON 的坐标参考系(CRS)

GeoJSON 默认使用 WGS84 坐标系(EPSG:4326),即经纬度坐标。如果需要使用其他坐标系,可以通过 crs 字段指定。

javascript 复制代码
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [114.31, 30.52]
  },
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:EPSG::4326"
    }
  }
}

七、GeoJSON 的应用场景

1.地图数据可视化

  • 在 OpenLayers 等地图开发库中,使用 GeoJSON 作为数据源,将地理要素数据加载到地图上,通过 VectorSourceVectorLayer 进行显示。
javascript 复制代码
import VectorLayer from "ol/layer/Vector.js";
import VectorSource from "ol/source/Vector.js";
import GeoJSON from "ol/format/GeoJSON.js";
const vectorSource = new VectorSource({
    url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
    format: new GeoJSON()
});
const vectorLayer = new VectorLayer({
    source: vectorSource
});
  • 上述代码通过 VectorSource 加载一个 GeoJSON 数据源,GeoJSON 格式类会将原始的 GeoJSON 数据解析为 OpenLayers 可以处理的要素数据。

2.数据交换

作为地理数据的通用格式,方便在不同系统之间传输。

3.空间分析

结合 GIS 工具进行空间查询和分析。

4.示例:加载 GeoJSON 数据并显示

以下是一个完整的示例,展示如何使用 OpenLayers 加载 GeoJSON 数据并显示在地图上。

GeoJSON 数据

javascript 复制代码
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [114.31, 30.52],
            [114.32, 30.52],
            [114.32, 30.53],
            [114.31, 30.53],
            [114.31, 30.52]
          ]
        ]
      },
      "properties": {
        "name": "武汉",
        "population": 12000000
      }
    }
  ]
}

OpenLayers 代码

javascript 复制代码
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { OSM } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import { Style, Fill, Stroke } from "ol/style";

// 创建地图
const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new OSM(), // 使用 OSM 底图
    }),
  ],
  view: new View({
    center: [114.31, 30.52],
    zoom: 10,
    projection: "EPSG:4326",
  }),
});

// 加载 GeoJSON 数据
const vectorSource = new VectorSource({
  url: "data.geojson", // GeoJSON 文件路径
  format: new GeoJSON(),
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    fill: new Fill({
      color: "rgba(255, 0, 0, 0.6)", // 填充颜色
    }),
    stroke: new Stroke({
      color: "green", // 边框颜色
    }),
  }),
});

map.addLayer(vectorLayer);

八**、GeoJSON 的优点**

  • 简单易读
    • 由于是基于 JSON 的,它易于阅读和编写,也易于在不同编程语言之间解析和生成。
  • 轻量级
    • 数据结构紧凑,适合在网络上传输,适用于 Web 应用程序。
  • 广泛支持
    • 许多 GIS 工具、地图库和在线服务都支持 GeoJSON 格式,方便数据共享和互操作。

九**、GeoJSON 的注意事项**

  • 坐标顺序
    • 坐标顺序通常是经度在前,纬度在后,与传统的地理坐标表示顺序一致。
  • 数据完整性
    • 确保数据的 typecoordinates 结构正确,特别是在处理复杂的几何形状时,要保证闭合多边形等结构的完整性。
相关推荐
微臣愚钝2 小时前
前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表 (To-Do List)
前端·javascript·css·html
傻小胖3 小时前
shallowRef和shallowReactive的用法以及使用场景和ref和reactive的区别
javascript·vue.js·ecmascript
YoloMari4 小时前
组件中的emit
前端·javascript·vue.js·微信小程序·uni-app
CaptainDrake4 小时前
力扣 Hot 100 题解 (js版)更新ing
javascript·算法·leetcode
追光少年33226 小时前
Learning Vue 读书笔记 Chapter 2
前端·javascript·vue.js·vue3
前端熊猫6 小时前
JavaScript 的 Promise 对象和 Promise.all 方法的使用
开发语言·前端·javascript
傻小胖7 小时前
vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定
前端·javascript·vue.js
我想学LINUX8 小时前
【2024年华为OD机试】 (C卷,200分)- 机器人走迷宫(JavaScript&Java & Python&C/C++)
java·c语言·javascript·python·华为od·机器人
觉醒法师8 小时前
JS通过ASCII码值实现随机字符串的生成(可指定长度以及解决首位不出现数值)
开发语言·前端·javascript·typescript
fengfeng N8 小时前
Vue3在img标签中绑定数据模型中的url图片无法显示问题
开发语言·前端·javascript