在前端开发中,使用地图是一个很常见的需求。而地图中的坐标系统是不同于我们日常生活中使用的经纬度标准的。因此我们需要一个工具将我们日常生活中的经纬度数据转换为地图中使用的坐标数据。今天介绍一个npm包wellknown,它可以将WKT(well-known-text)格式的文本转换为GeoJson格式,从而用于地图绘制。
WKT和GeoJson
WKT
WKT(well-known text)即众所周知的文本格式,是一种用于表示几何对象的文本格式。是OGC标准和ISO标准。
常见的WKT格式如下:
"POINT(30 10)" "LINESTRING(30 10, 10 30, 40 40)" "POLYGON((30 10, 40 40, 20 40, 10 20, 30 10))" "MULTIPOINT((10 40), (40 30), (20 20), (30 10))" "MULTILINESTRING((10 10, 20 20, 10 40), (40 40, 30 30, 40 20, 30 10))" "MULTIPOLYGON(((30 20, 45 40, 10 40, 30 20)), ((15 5, 40 10, 10 20, 5 10, 15 5)))" "GEOMETRYCOLLECTION(POINT(10 10), POINT(30 30), LINESTRING(15 15, 20 20))"
GeoJson
GeoJson 是一种基于 JSON(JavaScript对象表示法)的地图格式,它支持点、线和面等几何要素(geometry),并支持除空间数据外的其他数据属性(properties)。
在GeoJson中,一个点表示如下:
-- -------------------- ---- ------- - ------- ---------- ----------- - ------- -------- -------------- ------- ---- -- ------------- - -------- -------- - -
一个面的表示如下:
-- -------------------- ---- ------- - ------- ---------- ------------- --- ----------- - ------- ---------- -------------- - - ------- ----- ------- ----- ------- ----- ------- ----- ------- ---- - - - -
wellknown使用教程
安装
在安装wellknown之前,你需要先在你的项目中引入geojson。可以使用以下命令安装geojson和wellknown:
npm install --save geojson wellknown
使用
在使用wellknown之前,我们需要了解一下wellknown提供的两个方法:
wellknown.parse(wktString)
将WKT格式的字符串转换为GeoJson格式的方法。
import wellknown from 'wellknown' const wktString = 'POINT(30 10)' const geoJson = wellknown.parse(wktString) console.log(geoJson) // 输出:{ type: 'Point', coordinates: [ 30, 10 ] }
wellknown.stringify(geojsonObject)
将GeoJson格式的对象转换为WKT格式的字符串的方法。
-- -------------------- ---- ------- ------ --------- ---- ----------- ----- ------- - - ----- -------- ------------ ---- --- - ----- --------- - ---------------------------- ---------------------- -- ----------- ---
示例代码
-- -------------------- ---- ------- ------ --------- ---- ----------- -- ------------------------- ----- --------- - --------- ---- ----- ------- - -------------------------- -- -------------- -------------------- -- - ----- -------- ------------ - --- -- - - -- ------------------------- ----- ---------- - ---------------------------- -- ----------- ----------------------- -- -------- ---
总结
通过本文的介绍,我们了解了地图坐标系统中WKT格式的表示以及其转换为GeoJson格式的方法,同时也学习了npm包wellknown的使用方法。在日常的前端开发中,我们常常会遇到地图绘制的需求,wellknown可以很好地解决数据格式的问题,为我们提供方便。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5efeb1f6403f2923b035bbdb