寫給小白學(xué)習(xí)的地理信息的表示法GeoJSON
簡介
GeoJSON 是一種使用 JSON 來編碼各種地理數(shù)據(jù)結(jié)構(gòu)的格式,是一種輕量級的數(shù)據(jù)交換格式,可以用來表示幾何對象、屬性數(shù)據(jù)、空間參考系統(tǒng)等信息
由兩種對象組成: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屬性的值為FeatureCollectionfeatures屬性的值為Feature對象的數(shù)組
const FeatureCollectionJSON = {
type: "FeatureCollection",
features: [feature],
};Feature
Feature 對象用來表示幾何對象的屬性信息
由 type、geometry 和 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屬性的值為Pointcoordinates屬性的值為一個數(shù)組,數(shù)組的第一個元素為經(jīng)度,第二個元素為緯度
const PointJSON = {
type: "Point",
coordinates: [121.4737, 31.2304],
};MultiPoint
MultiPoint 用來表示多個點
由 type 和 coordinates 兩個屬性組成:
type屬性的值為MultiPointcoordinates屬性的值為一個數(shù)組,數(shù)組的每個元素都是一個點的坐標(biāo)
const MultiPointJSON = {
type: "MultiPoint",
coordinates: [
[121.4737, 31.2304],
[121.4837, 31.2504],
],
};LineString
LineString 用來表示一條線
由 type 和 coordinates 兩個屬性組成:
type屬性的值為LineStringcoordinates屬性的值為一個數(shù)組,數(shù)組的每個元素都是一個點的坐標(biāo)
const LineStringJSON = {
type: "LineString",
coordinates: [
[121.4737, 31.2304],
[121.4837, 31.2504],
],
};MultiLineString
MultiLineString 用來表示多條線
由 type 和 coordinates 兩個屬性組成:
type屬性的值為MultiLineStringcoordinates屬性的值為一個數(shù)組,數(shù)組的每個元素都是一個線的坐標(biāo)數(shù)組
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屬性的值為Polygoncoordinates屬性的值為一個數(shù)組,數(shù)組的第一個元素為外環(huán)的坐標(biāo)數(shù)組,后面的元素為內(nèi)環(huán)的坐標(biāo)數(shù)組
polygon 的坐標(biāo)數(shù)組的第一個元素和最后一個元素是相同的,表示閉合
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屬性的值為MultiPolygoncoordinates屬性的值為一個數(shù)組,數(shù)組的每個元素都是一個面的坐標(biāo)數(shù)組
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屬性的值為GeometryCollectiongeometries屬性的值為幾何對象的數(shù)組
const GeometryCollectionJSON = {
type: "GeometryCollection",
geometries: [
{ type: "Point", coordinates: [121.4737, 31.2304] },
{
type: "LineString",
coordinates: [
[121.4737, 31.2304],
[121.4837, 31.2504],
],
},
],
};可選屬性
這些屬性都是 GeoJSON 的擴(kuò)展屬性,不是 GeoJSON 規(guī)范的一部分
id屬性,用來描述FeatureCollection的唯一標(biāo)識bbox屬性,用來描述FeatureCollection的邊界框- 四至坐標(biāo),一般用來做數(shù)據(jù)裁剪
- 這是一組左上角和右下角的坐標(biāo),示例:
[minLon, minLat, maxLon, maxLat]
properties屬性,用來描述FeatureCollection的屬性crs屬性,用來描述坐標(biāo)參考系
其他
coordinate
coordinate 是一個數(shù)組,表示一個點的坐標(biāo),數(shù)組的長度表示坐標(biāo)的維度,一般是 2 維或 3 維
2維:[lon, lat]3維:[lon, lat, height]
coordinate 的第一個元素表示經(jīng)度,第二個元素表示緯度,第三個元素表示高度
坐標(biāo)順序是 [lon, lat],這個是推薦順序,可由 crs 屬性指定
coordinates 是多維數(shù)組:
- 點:
[lon, lat] - 線:
[[lon, lat], [lon, lat]] - 面:
[[[lon, lat], [lon, lat]]] - 多面:
[[[[lon, lat], [lon, lat]]]]
坐標(biāo)參考系
最常使用的坐標(biāo)系是 EPSG:4326 和 EPSG:3857:
EPSG:4326是WGS84(CGCS2000,大地) 坐標(biāo)系,是GeoJSON規(guī)范的默認(rèn)坐標(biāo)系EPSG:3857是Web Mercator(墨卡托) 坐標(biāo)系,是OpenLayers的默認(rèn)坐標(biāo)系
它們的區(qū)別:
EPSG:4326是經(jīng)緯度坐標(biāo)系,EPSG:3857是投影坐標(biāo)系EPSG:4326的坐標(biāo)范圍是[-180, -90, 180, 90],EPSG:3857的坐標(biāo)范圍是[-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]EPSG:4326的坐標(biāo)單位是度,EPSG:3857的坐標(biāo)單位是米EPSG:4326的坐標(biāo)原點是[0, 0],EPSG:3857的坐標(biāo)原點是[-20037508.342789244, -20037508.342789244]EPSG:4326的坐標(biāo)軸方向是[x, y],EPSG:3857的坐標(biāo)軸方向是[x, -y]
在 ts 中使用
為了在 ts 使用 GeoJSON 能夠有類型約束,我整理整理了一些 GeoJSON 的 ts 類型定義和創(chuàng)建 GeoJSON 的方法:
舉例:
表示一個點和多個點的 GeoJSON 集合:
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" },
},
],
};創(chuàng)建一個幾何對象
const pointGeometry = point<{ id: string }>([120.4737, 31.2304], {
id: "1",
});
const featureGeoJSON = feature<Point>(pointGeometry);參考
以上就是寫給小白的地理信息的表示法GeoJSON的詳細(xì)內(nèi)容,更多關(guān)于GeoJSON地理信息表示法的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS對象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
最近遇到這個問題,JS對象和JSON格式數(shù)據(jù)的相互轉(zhuǎn)換。其實,也就是兩個問題:JS對象轉(zhuǎn)換成為JSON格式數(shù)據(jù)、JSON格式數(shù)據(jù)轉(zhuǎn)換成為JS對象2012-02-02
如何實現(xiàn)json數(shù)據(jù)可視化詳解
最近在工作中開發(fā)一個內(nèi)部功能時碰到的一個需求,要把json數(shù)據(jù)在頁面上展示出來,平時瀏覽器會安裝jsonView這樣的擴(kuò)展來看json數(shù)據(jù),但是程序要用到的話該怎么辦呢?今天在網(wǎng)上搜索的時候,發(fā)現(xiàn)了這個小技巧,分享給大家,有需要的朋友們可以參考借鑒,下面來一起看看吧2016-11-11
使用JSON作為函數(shù)的參數(shù)的優(yōu)缺點
這篇文章主要介紹了使用JSON作為函數(shù)的參數(shù)的優(yōu)缺點,需要的朋友可以參考下2016-10-10
深入淺析同源與跨域,jsonp(函數(shù)封裝),CORS原理
這篇文章主要介紹了同源與跨域,jsonp(函數(shù)封裝),CORS原理,從同源政策中Ajax限制,到跨域問題以及跨域問題的解決方法幫大家更加深入的去了解其中原理2021-08-08
javascript表單域與json數(shù)據(jù)間的交互
找了幾個javascript的框架,都沒有找到我想要的: 提供函數(shù),把某個表單的所有域封裝成json數(shù)據(jù)格式的對象,唯有自己實現(xiàn)一個。2008-10-10
Jquery+asp.net后臺數(shù)據(jù)傳到前臺js進(jìn)行解析的方法
我們經(jīng)常用jquery讀取后臺數(shù)據(jù),后臺返回數(shù)據(jù)。后臺數(shù)據(jù)格式就有很多了,但是js里面沒有什么類型之分2014-05-05

