写给小白学习的地理信息的表示法GeoJSON

目录
  • 简介
    • 举例
  • 空间行状
    • FeatureCollection
    • Feature
  • 几何对象
    • Point
    • MultiPoint
    • LineString
    • MultiLineString
    • Polygon
    • MultiPolygon
    • GeometryCollection
  • 可选属性
  • 其他
    • coordinate
    • 坐标参考系
    • 在 ts 中使用

简介

GeoJSON 是一种使用 JSON 来编码各种地理数据结构的格式,是一种轻量级的数据交换格式,可以用来表示几何对象、属性数据、空间参考系统等信息

由两种对象组成:Geometry(几何对象)和 Feature(空间行状)

  • 几何对象用来描述地理空间中的点、线、面等几何形状
  • 空间行状用来描述一个有界的实体,包括几何对象和其他属性信息

几何对象类型有:

  • 点:Point
  • 多点:MultiPoint
  • 线:LineString
  • 多线:MultiLineString
  • 面:Polygon
  • 多面:MultiPolygon
  • 几何集合:GeometryCollection

空间行状类型有:

  • 空间行状:Feature
  • 空间形状集合:FeatureCollection

举例

几何对象和空间行状可以相互嵌套

const GeoJSON = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [121.4737, 31.2304] },
      properties: { id: 1 },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [121.4837, 31.2504] },
      properties: { id: 2 },
    },
  ],
};

空间行状

FeatureCollection

FeatureCollection 是 Feature 对象的集合,用来表示一组 Feature 对象

由 type 和 features 两个属性组成:

  • type 属性的值为 FeatureCollection
  • features 属性的值为 Feature 对象的数组
const FeatureCollectionJSON = {
  type: "FeatureCollection",
  features: [feature],
};

Feature

Feature 对象用来表示几何对象的属性信息

由 typegeometry 和 properties 三个属性组成:

  • type 属性的值为 Feature
  • geometry 属性的值为 Geometry 几何对象
  • properties 属性的值为属性对象(可选)
const FeatureJSON = {
  type: "Feature",
  geometry: { type: "Point", coordinates: [121.4737, 31.2304] },
  properties: { id: 1 },
};

几何对象

Point

Point 用来表示一个点

由 type 和 coordinates 两个属性组成:

  • type 属性的值为 Point
  • coordinates 属性的值为一个数组,数组的第一个元素为经度,第二个元素为纬度
const PointJSON = {
  type: "Point",
  coordinates: [121.4737, 31.2304],
};

MultiPoint

MultiPoint 用来表示多个点

由 type 和 coordinates 两个属性组成:

  • type 属性的值为 MultiPoint
  • coordinates 属性的值为一个数组,数组的每个元素都是一个点的坐标
const MultiPointJSON = {
  type: "MultiPoint",
  coordinates: [
    [121.4737, 31.2304],
    [121.4837, 31.2504],
  ],
};

LineString

LineString 用来表示一条线

由 type 和 coordinates 两个属性组成:

  • type 属性的值为 LineString
  • coordinates 属性的值为一个数组,数组的每个元素都是一个点的坐标
const LineStringJSON = {
  type: "LineString",
  coordinates: [
    [121.4737, 31.2304],
    [121.4837, 31.2504],
  ],
};

MultiLineString

MultiLineString 用来表示多条线

由 type 和 coordinates 两个属性组成:

  • type 属性的值为 MultiLineString
  • coordinates 属性的值为一个数组,数组的每个元素都是一个线的坐标数组
const MultiLineStringJSON = {
  type: "MultiLineString",
  coordinates: [
    [
      [121.4737, 31.2304],
      [121.4837, 31.2504],
    ],
    [
      [121.4727, 31.2314],
      [121.4827, 31.2514],
    ],
  ],
};

Polygon

Polygon 用来表示一个面

由 type 和 coordinates 两个属性组成:

  • type 属性的值为 Polygon
  • coordinates 属性的值为一个数组,数组的第一个元素为外环的坐标数组,后面的元素为内环的坐标数组

polygon 的坐标数组的第一个元素和最后一个元素是相同的,表示闭合

const PolygonJSON = {
  type: "Polygon",
  coordinates: [
    [
      [121.4737, 31.2304],
      [121.4837, 31.2504],
      [121.4937, 31.2304],
      [121.4737, 31.2304],
    ],
    [
      [121.4717, 31.2314],
      [121.4827, 31.2524],
      [121.4937, 31.2334],
      [121.4757, 31.2344],
    ],
  ],
};

MultiPolygon

MultiPolygon 用来表示多个面

由 type 和 coordinates 两个属性组成:

  • type 属性的值为 MultiPolygon
  • coordinates 属性的值为一个数组,数组的每个元素都是一个面的坐标数组
const MultiPolygonJSON = {
  type: "MultiPolygon",
  coordinates: [
    [
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
    ],
    [
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
      [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
        [121.4937, 31.2304],
        [121.4737, 31.2304],
      ],
    ],
  ],
};

GeometryCollection

GeometryCollection 用来表示几何对象的集合

由 type 和 geometries 两个属性组成:

  • type 属性的值为 GeometryCollection
  • geometries 属性的值为几何对象的数组
const GeometryCollectionJSON = {
  type: "GeometryCollection",
  geometries: [
    { type: "Point", coordinates: [121.4737, 31.2304] },
    {
      type: "LineString",
      coordinates: [
        [121.4737, 31.2304],
        [121.4837, 31.2504],
      ],
    },
  ],
};

可选属性

这些属性都是 GeoJSON 的扩展属性,不是 GeoJSON 规范的一部分

  • id 属性,用来描述 FeatureCollection 的唯一标识
  • bbox 属性,用来描述 FeatureCollection 的边界框
    • 四至坐标,一般用来做数据裁剪
    • 这是一组左上角和右下角的坐标,示例:[minLon, minLat, maxLon, maxLat]
  • properties 属性,用来描述 FeatureCollection 的属性
  • crs 属性,用来描述坐标参考系

其他

coordinate

coordinate 是一个数组,表示一个点的坐标,数组的长度表示坐标的维度,一般是 2 维或 3 维

  • 2 维:[lon, lat]
  • 3 维:[lon, lat, height]

coordinate 的第一个元素表示经度,第二个元素表示纬度,第三个元素表示高度

坐标顺序是 [lon, lat],这个是推荐顺序,可由 crs 属性指定

coordinates 是多维数组:

  • 点:[lon, lat]
  • 线:[[lon, lat], [lon, lat]]
  • 面:[[[lon, lat], [lon, lat]]]
  • 多面:[[[[lon, lat], [lon, lat]]]]

坐标参考系

最常使用的坐标系是 EPSG:4326 和 EPSG:3857

  • EPSG:4326 是 WGS84(CGCS2000,大地) 坐标系,是 GeoJSON 规范的默认坐标系
  • EPSG:3857 是 Web Mercator(墨卡托) 坐标系,是 OpenLayers 的默认坐标系

它们的区别:

  • EPSG:4326 是经纬度坐标系,EPSG:3857 是投影坐标系
  • EPSG:4326 的坐标范围是 [-180, -90, 180, 90]EPSG:3857 的坐标范围是 [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
  • EPSG:4326 的坐标单位是度,EPSG:3857 的坐标单位是米
  • EPSG:4326 的坐标原点是 [0, 0]EPSG:3857 的坐标原点是 [-20037508.342789244, -20037508.342789244]
  • EPSG:4326 的坐标轴方向是 [x, y]EPSG:3857 的坐标轴方向是 [x, -y]

在 ts 中使用

为了在 ts 使用 GeoJSON 能够有类型约束,我整理整理了一些 GeoJSON 的 ts 类型定义和创建 GeoJSON 的方法:

举例:

表示一个点和多个点的 GeoJSON 集合:

使用geojson.d.ts

type PointType = FeatureCollection<Point | MultiPoint, GeoJsonProperties<T>>;
const point2Geojson: PointType<{ id: string; name?: string }> = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [120.4737, 31.2304],
      },
      properties: { id: "12", name: "uccs" },
    },
    {
      type: "Feature",
      geometry: {
        type: "MultiPoint",
        coordinates: [
          [121.4737, 31.2304],
          [111.4737, 31.2204],
        ],
      },
      properties: { id: "1" },
    },
  ],
};

创建一个几何对象

使用geojson.helper.ts

const pointGeometry = point<{ id: string }>([120.4737, 31.2304], {
  id: "1",
});
const featureGeoJSON = feature<Point>(pointGeometry);

参考

以上就是写给小白的地理信息的表示法GeoJSON的详细内容,更多关于GeoJSON地理信息表示法的资料请关注我们其它相关文章!

(0)

相关推荐

  • 基于Vue+Openlayer实现动态加载geojson的方法

    加载1个或多个要素 <template> <div id="map" style="width: 100vw; height: 100vh"></div> </template> <script> import "ol/ol.css"; import TileLayer from "ol/layer/Tile"; import VectorLayer from &qu

  • 利用Python实现Shp格式向GeoJSON的转换方法

    一.简介 Shp格式是GIS中非常重要的数据格式,主要在Arcgis中使用,但在进行很多基于网页的空间数据可视化时,通常只接受GeoJSON格式的数据,众所周知JSON(JavaScript Object Nonation)是利用键值对+嵌套来表示数据的一种格式,以其轻量.易解析的优点,被广泛使用与各种领域,而GeoJSON就是指在一套规定的语法规则下用JSON格式存储矢量数据,本文就将针对GeoJSON的语法规则,以及如何利用Python完成Shp格式到GeoJSON格式的转换进行介绍. 二.

  • node将geojson转shp返回给前端的实现方法

    node将geojson转shp需要调用[ogr2ogr][1]库来实现,在调用ogr2ogr库时,因为其通过调用gdal的工具来实现将 geojson转shp,所以需要安装gdal并配置环境变量. 参考文章:https://stackoverflow.com/questions/41253450/error-the-specified-module-could-not-be-found 第一:你要确定你的.node 是好的,然后你可以继续下一步了 第二:你的.node发现不了可能是因为缺少了依

  • Canvas中绘制Geojson数据示例详解

    目录 需求分析 数据处理 将经度和纬度单独拆分出来 计算缩放比例 计算偏移度 将 Coordinates 进行缩放 使用 Canvas 进行绘制 需求分析 在做地图开发的时候遇到一个需求,是在 canvas 中绘制 Geojson 数据 数据格式为 EPSG:4326 的 Polygon: 三维数组 每一项都是由经纬度组成的 第一个点和最后一个点相同,表示 Polygon 是闭合的 [ [ [109.54420471485196, 35.76192112844663], [109.5442361

  • vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp

  • tensorflow基于CNN实战mnist手写识别(小白必看)

    很荣幸您能看到这篇文章,相信通过标题打开这篇文章的都是对tensorflow感兴趣的,特别是对卷积神经网络在mnist手写识别这个实例感兴趣.不管你是什么基础,我相信,你在看完这篇文章后,都能够完全理解这个实例.这对于神经网络入门的小白来说,简直是再好不过了. 通过这篇文章,你能够学习到 tensorflow一些方法的用法 mnist数据集的使用方法以及下载 CNN卷积神经网络具体python代码实现 CNN卷积神经网络原理 模型训练.模型的保存和载入 Tensorflow实战mnist手写数字

  • Python小白学习爬虫常用请求报头

    客户端HTTP请求 URL只是标识资源的位置,而HTTP是用来提交和获取资源.客户端发送一个HTTP请求到服务器的请求消息,包括以下格式: 请求行.请求头部.空行.请求数据 一个典型的HTTP请求 GET https://www.baidu.com/ HTTP/1.1 Host: www.baidu.com Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.1; Wi

  • python小白学习包管理器pip安装

    pip对于使用python的朋友并不陌生,当你想安装python模块的时候一定会首先想到它.pip 是一个安装和管理 Python 包的工具 , 是 easy_install 的一个替换品. 今天来说一下,pip的安装方法. 方法一:脚本安装 $ wget https://bootstrap.pypa.io/get-pip.py $ [sudo] python get-pip.py 方法二:源码安装: $ curl -O https://pypi.python.org/packages/sour

  • 写给小白的JavaScript引擎指南

    关于本文标题,我并不认为参与写或者读本文的人是白痴.但是有时某个话题会让你觉得自己就像个白痴一样,而 JavaScript 引擎就是这些话题之一,至少对于我来说是这样. 有时编写 Web 应用的代码会感觉充满魔力,因为我们只是写了一系列字符,就能在浏览器里看到效果了.但是理解魔法背后的技术,可以帮助你更好地提高编程技巧.至少当你试图解释在 JavaScript 驱动的 web 或移动应用的幕后发生了什么的时候,会觉得自己不那么白痴了. 很多年前,那是我还是个研究生讲师,向一个教授抱怨还没有掌握那

  • 写给想学习Javascript的朋友一点学习经验小结

    当然只是个人的经验,有什么不对的也请高手见谅和指正. 关于到培训学校学习的忠告:别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的.不要浪费你自己(很可能是你父母)的钱和时间.趁早死了这个念头. 关于培训学校的这个我想我要比一般的朋友更有发言权,因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师.英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价是很昂贵的.而你现在要学的是Javascript,呵呵

  • 写给小白看的JavaScript异步

    某天突然写了个方法要从后台调用数据,显示在前台页面,但是输出结果总是空undefined,得不到数据.多方找资料才发现,原来是入了JS异步的"坑". 我们常常听到单线程.多线程.同步.异步这些概念,那么这些东西到底是什么呢? 那么我们先从上面那几个概念说起 单线程.多线程.同步.异步基本理解 每个正在运行的程序(即进程)至少有一个线程,被称为主线程.主线程在启动程序时被创建,用于执行main函数. 1.单线程就是只有一个主线的线程,代码从上往下顺序运行,主线程负责执行程序的所有代码(U

  • 深入解析Python小白学习【操作列表】

    1.遍历列表 需要对列表中的每个元素都执行相同的操作时,可使用for 循环: magicians = ['alice','david','carolina'] for magician in magicians: print(magician) >>>alice >>>david >>>carolina 循环中,Python将首先读取其中的第一行代码: for magician in magicians: 这行代码让Python获取列表magician

  • xUtils3.0框架学习笔记分享

    xUtils是开速开发安卓项目的开源框架,开源项目地址:https://github.com/wyouflf/xUtils3.使用起来非常方便.主要功能包括: 1.xUtils 支持超大文件(超过2G)上传,更全面的http请求协议支持(11种谓词). 2.拥有更加灵活的ORM,更多的事件注解支持且不受混淆影响. 3.图片绑定支持gif(受系统兼容性影响, 部分gif文件只能静态显示), webp; 支持圆角, 圆形, 方形等裁剪, 支持自动旋转等. 4.数据库api简化提高性能, 达到和gre

  • nodejs模块学习之connect解析

    nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子来解决现实的问题. 知其然,并知其所以然这是程序员的天性.所以把常用的模块拿出来看看,看看高手怎么写的,学习其想法,让自己的技术能更近一步. 引言 express 是 nodejs 中最流行的 web 框架.express 中对 http 中的 request 和 response 的处理,还有以中间件为核心的处理流程,非常灵活,足以应对任何业务的

  • Vue服务器渲染Nuxt学习笔记

    关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少.所以想写篇文章学习下SSR,希望能够帮助大家快速理解Vue SSR. 什么是SSR? SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传给浏览器. 优点: SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容.

随机推荐