GeoJSON快速入门教程

GeoJSON是一种使用JSON表示地理数据的格式。它包括点、线串、多边形等几何对象,以及特征和特征集合。GeoJSON对象包含类型和坐标键值对,用于定义空间形状。这篇教程介绍了GeoJSON的基本结构,并提供了各种几何类型的示例。此外,还提到了用于可视化GeoJSON数据的工具,如Tom的GeoJSON工具清单、GeoPandas、GeoJSONApp和geojson.io。
摘要由CSDN通过智能技术生成

GeoJSON (Geo+ JSON ) 这个名字本身就是一个赠品。GeoJSON 是一种使用JavaScript 对象表示法(JSON) 对地理数据结构进行编码的格式。简而言之,GeoJSON 为你提供了一种简单的格式来表示简单的地理特征以及它们的非空间属性。

在这里插入图片描述

如RFC 中所述,JSON 被设计为一种轻量级、基于文本且与语言无关的数据交换格式,人类和机器都易于读写。GeoJSON 基本上使用这种设计策略来表示有关地理特征、它们的属性和它们的空间范围的数据。

想看看具体例子吗?

在这里插入图片描述

GeoJSON 对象可以定义以下内容:

  • 空间中的几何对象:例如,点、线串或多边形等。
  • 特征:特征是空间有界的实体。
  • 特征集合: 也称为 FeatureCollection。

1、GeoJSON对象

几何对象表示坐标空间中的点、曲线和曲面。GeoJSON RFC定义了 GeoJSON 对象可以表示的 7 种几何形状“类型” 。它们是“Point”、“MultiPoint”、“LineString”、“MultiLineString”、“Polygon”、“MultiPolygon”和“GeometryCollection”。

点、线串和多边形形状也称为单一类型的几何对象。而 MultiPoint、MultiLineString 和 MultiPolygon 也称为同构类型的多部分 Geometry 对象。

一旦理解了位置的概念,许多这些形状的构造就会变得清晰。

位置是一个基本的几何结构。简单地说,它是一个由 2 个或 3 个数字组成的数组。前两个数字代表经度和纬度(按此顺序)。第三个(可选)数字代表高度或海拔。因此,位置基本上是数组 [经度、纬度、海拔/高度]。

注意:在不同的地理工具或库中,应该是 [longitude, latitude] 还是 [latitude, longitude] 还没有达成共识。例如,Google Maps API 和 Leaflet.js 期望坐标为 [latitude, longitude],而 GeoJSON、shapefile、D3.js、ArcGIS API 期望坐标为 [longitude, latitude] 格式。因此,请始终注意你的应用程序需要什么顺序。作为参考,可以使用Tom MacWright在他的博客上提供的表格:

在这里插入图片描述

所有几何形状都有两个定义该形状的键值对。你可能还在上面看到的示例 GeoJSON 对象中注意到了它们。这两个键是类型和坐标。“type”必须是我们上面看到的七种类型之一,“coordinates”是一个位置值数组。该数组中元素的确切结构由几何类型决定。

1.1 Point

如你所料,如果我们想表示一个 Point 几何图形,我们需要有一个位置。

在这里插入图片描述

因此,可以将 GeoJSON 中的 Point 定义为:

{ "type": "Point", 
    "coordinates": [30, 10]
}

1.2 MultiPoint

“坐标”值将是 MultiPoint 对象的 Position 对象数组。
在这里插入图片描述

{ "type": "MultiPoint", 
    "coordinates": [ 
        [10, 40], [40, 30], [20, 20], [30, 10] 
    ] 
}

1.3 LineString

对于LineString,我们需要提供两个位置,即线段的起点和终点。
在这里插入图片描述

例如:

{ "type": "LineString", 
    "coordinates": [ 
        [30, 10], [10, 30], [40, 40] 
    ] 
}

1.4 MultiLineString

对于“MultiLineString”类型,“coordinates”成员是 LineString 坐标数组的数组。
在这里插入图片描述

{ "type": "MultiLineString", 
    "coordinates": [ 
        [[10, 10], [20, 20], [10, 40]], 
        [[40, 40], [30, 30], [40, 20], [30, 10]] 
    ] 
}

1.5 Polygon

GeoJSON 标准中的多边形比其他几何形状稍微复杂一些。多边形在 RFC 文档中定义为:

对于“多边形”,“坐标”成员必须是线性环坐标数组的数组”。

所以要理解多边形的定义,我们必须先看一下线性环(LinearRing)的概念。

LinearRing 是具有四个或更多位置的封闭 LineString。“Closed”仅仅意味着LinearRing的起点和终点必须在同一个位置。GeoJSON 格式的多边形是根据多个 LinearRing 形状指定的。Polygon 的外边界是一个 LinearRing,并且可以有多个其他 LinearRing 形状来定义该 Polygon 内的其他复杂环形。

在这里插入图片描述

根据标准,“坐标”数组中的第一个 LinearRing 数组必须是外环,所有后续的 LinearRing 数组都定义了内环。RFC 7946 还定义了这些环的缠绕顺序,它指定外环位置是逆时针定义的,内环位置值是顺时针定义的。这种缠绕顺序对于许多绘图 API 都很有用。

{ "type": "Polygon", 
    "coordinates": [
        [[35, 10], [45, 45], [15, 40], [10, 20], [35, 10]], 
        [[20, 30], [35, 35], [30, 20], [20, 30]]
    ]
}

1.6 MultiPolygon

对于“MultiPolygon”类型,“coordinates”成员是 Polygon 坐标数组的数组。
在这里插入图片描述


{ "type": "MultiPolygon", 
    "coordinates": [
        [
            [[30, 20], [45, 40], [10, 40], [30, 20]]
        ], 
        [
            [[15, 5], [40, 10], [10, 20], [5, 10], [15, 5]]
        ]
    ]
}

1.7 GeometryCollection

GeometryCollection 是你在上面看到的其他几何类型的异构组合。GeometryCollection 对象没有“coordinates”成员,而是有一个名为“geometries”的成员。“geometries”的值是一个数组。该数组的每个元素都是一个 GeoJSON Geometry 对象。此数组可能为空。

{ "type": "GeometryCollection", 
    "geometries": [
      {
        "type": "Point",
        "coordinates": [0, 0]
      }, {
        "type": "Polygon",
        "coordinates": [[[45, 45], [45, -45], [-45, -45], [-45, 45], [45,45]]]
       }
    ]
}

1.8 Feature

在上一节中看到的几何形状定义了可以在地图上绘制的形状。然而,我们在地图上的形状也应该有一些现实世界的意义。此含义由该形状的属性定义。例如,在地图上用多边形标记的建筑物可能有一个名称属性,如“泰姬陵”,可能还有一些其他参数进一步描述了该形状。在 GeoJSON 中,“Feature”类型的对象定义实体的几何形状和属性。

Feature 对象有一个名为“type”且值为“Feature”的成员。它还有一个名为“geometry”的成员,其值为我们上面讨论的任何几何形状或空值。此外,它有一个名为“properties”的成员,其值是一个 JSON 对象(或空值),定义了该对象的属性。它还可以有一个可选的“id”成员,该成员带有一个唯一的字符串或空值,用于指定功能的标识符。

作为 Feature 对象的示例,请查看在本文开头看到的示例 GeoJSON 对象。

在这里插入图片描述

1.9 FeatureCollection

FeatureCollection 对象是 Feature 对象的组合。它是你将在 GeoJSON 文件中观察到的最常见的顶级结构。它有一个成员“type”,其值为“FeatureCollection”,另一个成员名为“features”,其值为 Feature 对象数组。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-80.83775386582222, 35.24980190252168]
      },
      "properties": {
        "name": "DOUBLE OAKS CENTER",
        "address": "1326 WOODWARD AV"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-80.83827000459532, 35.25674709224663]
      },
      "properties": {
        "name": "DOUBLE OAKS NEIGHBORHOOD PARK",
        "address": "2605  DOUBLE OAKS RD"
      }
    }
  ]
}

1.10 杂项 — 边界框

GeoJSON 对象还可能包含一个边界框,用于定义 GeoJSON 对象的边界范围。例如,在二维几何中,边界框只是一个名为“bbox”的成员和一个由四个数字组成的数组作为值。这四个值定义了包含完整 GeoJSON 对象的矩形。

{
       "type": "FeatureCollection",
       "bbox": [100.0, 0.0, 105.0, 1.0],
       "features": [
       //...
       ]
}

Cool!下载我们已经了解了掌握 GeoJSON 数据所需的基础知识,接下来看看一些可用于可视化 GeoJSON 数据的工具。

2、GeoJSON可视化工具

在本节中,我将分享一些流行的基于 GUI 的工具,你可以使用它们来快速可视化 GeoJSON 数据。

2.1 Tom的GeoJSON工具清单

Tom MacWright 在他的 Github 上有一个详尽的实用程序列表,用于转换、处理和分析 GeoJSON 数据。

2.2 GeoPandas教程

对于基于 Python 的环境(例如 Jupyter Notebook),你可以使用 GeoPandas 之类的模块。Twilio 有一个使用 Shaply 和 GeoPandas 的不错的小教程。

2.3 GeoJSON App

在GeoJSON App这个网络应用程序上,你可以直接在 Google 地图上绘制几何形状,并在两个窗格中并排显示 GeoJSON 代码。这种可视化对于理解 GeoJSON 概念非常有帮助。你也可以单击下载 .geojson 文件。

在这里插入图片描述

2.4 geojson.io

geojson.io是一个基于 Web 的编辑器,可以在其中导入和导出 GeoJSON 数据。它还在并排窗格中显示 GeoJSON 代码和可视化输出。

在这里插入图片描述

2.5 QGIS

QGIS 是一款免费的开源跨平台软件,用于查看、编辑和分析地理空间数据。QGIS 支持 GeoJSON 格式,以及大量其他地理空间数据标准。可以从这里下载和安装最新的 QGIS 软件。作为一个例子,我将使用加拿大纳奈莫市的犯罪事件数据。此数据在此处以 GeoJSON 格式提供。

在你的计算机上打开“QGIS Browser”并浏览左侧窗格中的 .geojson 文件。右侧窗格将向你显示数据点的快速预览。
在这里插入图片描述

可以通过单击预览选项卡旁边的属性选项卡来查看属性:

在这里插入图片描述


原文链接:GeoJSON简明教程 — BimAnt

  • 4
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: OpenLayers 3(简称OL3)是一个强大且灵活的开源JavaScript库,用于在网页上创建交互式地图应用程序。它支持多种地图投影、矢量和栅格图层、地图控制器、地图交互、标注、地图导航等功能。 OpenLayers 3的入门教程可以从以下几个步骤开始。首先,你需要在网页中引入OpenLayers 3的JavaScript文件,你可以从官方网站上下载最新的版本。接下来,你可以创建一个HTML容器来显示地图,使用CSS样式来设置容器的大小和样式。 然后,你需要创建一个OpenLayers地图对象。你可以指定地图的目标容器、初始视图(包括中心坐标、缩放级别和旋转角度)以及地图图层。地图图层是地图的基础,你可以添加栅格图层(如OpenStreetMap、Google Maps)、矢量图层(如GeoJSON数据)或自定义图层。 接下来,你可以添加地图交互和控制器来增强用户体验。地图交互包括缩放、漫游、绘制和选择等功能,而控制器包括缩放滑块、鼠标位置显示和比例尺等工具。你可以根据实际需求选择添加哪些交互和控制器。 最后,你可以添加标注或其他地图元素来展示特定的信息。标注可以是点、线或面,你可以自定义它们的样式和弹出窗口内容。你还可以通过事件监听器来响应用户与地图的交互,例如点击标注后显示更多详细信息。 总之,OpenLayers 3的入门教程包括了从基础设置到高级功能的介绍。通过学习这些内容,你可以快速上手创建自己的交互式地图应用程序。你可以参考官方文档和在线教程,同时多练习、多实践,逐步提升你的OpenLayers 3技能。 ### 回答2: OpenLayers 3是一种基于JavaScript的开源地理信息系统(GIS)库,可以用于在Web上展示地理数据并与地图进行交互。以下是OpenLayers 3入门教程的完整内容: 1. 安装OpenLayers 3:首先,您需要从OpenLayers 3官方网站上下载最新版本的库文件。然后将其嵌入您的HTML页面中,可以通过在页面中添加script标签来实现。 2. 创建地图容器:在HTML页面中,创建一个具有特定ID的div元素,该元素将用于容纳地图。 3. 设置地图属性:使用OpenLayers的JavaScript API,您可以设置地图的属性,例如: - 设置地图的中心点和放大级别。 - 添加图层(例如瓦片图层、矢量图层)到地图上。 - 设置地图的投影方式。 4. 添加交互功能:OpenLayers 3提供了多种交互功能,用于与地图进行交互,例如: - 添加缩放控件和导航控件,让用户可以放大缩小地图、平移地图等操作。 - 添加鼠标交互,允许用户点击地图获取坐标、选择要素等。 - 设置地图的交互方式,例如拖动地图、滚轮缩放等。 5. 显示地图:最后,您需要通过JavaScript代码,将地图显示在HTML页面中,在指定的地图容器中渲染地图。 通过以上步骤,您可以使用OpenLayers 3开始创建和展示地图。当然,这只是一个入门教程,您还可以进一步学习OpenLayers 3的高级功能,如添加自定义样式、使用WMS服务、进行地图引导等。OpenLayers 3官方网站提供了丰富的文档和示例,可以帮助您深入学习和应用该库。 ### 回答3: OpenLayers 3 是一个开源的JavaScript库,用于在Web页面上创建交互式地图应用程序。下面是一个适合初学者入门的完整版教程: 1. 环境设置:首先,确保你具备使用JavaScript的基本知识,并在计算机上安装了一种文本编辑器(如Sublime Text)以及一个现代的Web浏览器(如Chrome)。 2. 下载并引入OpenLayers 3:从OpenLayers官方网站下载OpenLayers 3库,并将其引入到你的HTML页面中。你可以通过在`<head>`标签中添加以下代码来实现: `<script src="path/to/openlayers.js"></script>` 3. 创建地图容器:在HTML页面的`<body>`标签中,创建一个`<div>`元素来容纳地图。例如: `<div id="map" style="width: 100%; height: 400px;"></div>` 4. 初始化地图:在JavaScript中,创建一个用于初始化地图的函数。在该函数中,创建一个`new ol.Map`实例,并将其绑定到前面创建的地图容器上。例如: ``` function initMap() { var map = new ol.Map({ target: 'map' }); } ``` 5. 添加图层:在地图中添加图层是非常重要的一步。你可以使用OpenLayers提供的各种图层类型,如Tile Layer、Vector Layer等。以下是向地图添加瓦片图层的示例代码: ``` function initMap() { var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], }); } ``` 6. 设置地图视图:通过设置地图的中心坐标和缩放级别来定义地图的初始视图。例如: ``` function initMap() { var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 10 }) }); } ``` 7. 运行函数:在HTML页面中,使用以下代码运行初始化地图的函数: ``` <script> initMap(); </script> ``` 通过按照以上步骤,你将能够创建一个基本的OpenLayers 3地图应用程序并开始进一步学习和探索更多功能和高级用法。祝你好运!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值