介绍
GeoJSON 是一种用于编码地理数据的格式，它基于 JSON 标准，并支持各种地理数据结构，如点、线、面等。而 geojson-utils 正是一个基于 GeoJSON 的 JavaScript 工具库，它提供了一系列对 GeoJSON 数据进行操作的方法，如坐标变换、计算距离、判断点是否在区域内等，非常方便实用。
在本篇文章中，我们将详细介绍 geojson-utils 的使用方法。包括安装、引入、基本 API 的应用，以及配合 Mapbox GL JS 库的实战应用。
安装
geojson-utils 被发布在 npm 上，因此可以通过 npm 命令来进行安装：
npm install geojson-utils
引入
安装完成后，只需在需要使用的文件中引入 geojson-utils 模块即可：
const geojson = require('geojson-utils')常用 API
距离计算
首先，让我们来看一下计算两个点之间距离的方法 distance()
const point1 = { type: 'Point', coordinates: [30.5, 50.5] }
const point2 = { type: 'Point', coordinates: [40.5, 60.5] }
console.log(geojson.distance(point1, point2)) // 1067.5918790710902distance() 方法接受两个包含 coordinates 属性的 GeoJSON Point 对象作为参数，并返回它们之间的距离，单位为米（m）。
坐标变换
geojson-utils 还提供了一些坐标变换方法，如 bboxToPolygon() 和 convertToDMS()。
bboxToPolygon() 方法可以将矩形边框（Bounding Box，也就是 bbox）转为多边形：
const bbox = [30.5, 50.5, 40.5, 60.5]
const polygon = geojson.bboxToPolygon(bbox)
console.log(polygon)
// { type: 'Polygon',
// coordinates: [ [ [ 40.5, 50.5 ], [ 40.5, 60.5 ], [ 30.5, 60.5 ], [ 30.5, 50.5 ], [ 40.5, 50.5 ] ] ] }convertToDMS() 方法可以将十进制度数转为度分秒表示：
const coordinate = [30.5, 50.5]
const dms = geojson.convertToDMS(coordinate)
console.log(dms) // [ { degree: 30, minute: 30, second: 0, direction: "E" }, { degree: 50, minute: 30, second: 0, direction: "N" } ]空间关系判断
geojson-utils 还提供了一些常用的空间关系判断方法，如 pointInPolygon() 和 pointInCircle()。
pointInPolygon() 方法可以判断点是否在指定的多边形内部：
const polygon = { type: 'Polygon',
coordinates: [ [ [ 40.5, 50.5 ], [ 40.5, 60.5 ], [ 30.5, 60.5 ], [ 30.5, 50.5 ], [ 40.5, 50.5 ] ] ] }
const point1 = { type: 'Point', coordinates: [35.5, 57.5] }
console.log(geojson.pointInPolygon(point1, polygon)) // true
const point2 = { type: 'Point', coordinates: [45.5, 57.5] }
console.log(geojson.pointInPolygon(point2, polygon)) // falsepointInCircle() 方法可以判断点是否在指定圆形区域内部：
const circle = { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [40.5, 50.5] }, radius: 1000 }
const point1 = { type: 'Point', coordinates: [40.5, 51.5] }
console.log(geojson.pointInCircle(point1, circle)) // true
const point2 = { type: 'Point', coordinates: [41.5, 51.5] }
console.log(geojson.pointInCircle(point2, circle)) // false更多方法
除了上述方法，geojson-utils 还提供了一系列方便实用的方法，如：
polygonContainsPolygon()判断一个多边形是否包含另一个多边形centroid()获取多边形的中心点坐标distanceToLine()计算点到线的距离- 等等
详细的 API 可以在 npm 官网 中查看。
实战示例
下面我们来演示一个实战案例。我们将使用 geojson-utils 和 Mapbox GL JS 库，实现在地图上绘制圆形区域，并在其中随机生成一些点，并判断这些点是否在圆形区域内。
首先，我们要引入依赖的库：
<!-- 引入 Mapbox GL JS 库 --> <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' /> <!-- 引入 geojson-utils --> <script src='https://cdn.jsdelivr.net/npm/geojson-utils@1.0.0/lib/index.js'></script>
接着，我们可以编写一段 JS 代码来绘制圆形区域：
-- -------------------- ---- -------
-- -----
-------------------- - ----- ------------
----- --- - --- --------------
---------- ------
------ -------------------------------------
------- ----- ----
----- -
--
-------------- ---------- -
-- ------
--- ------ - ----- ---
--- ------ - ----
--- ------- - - ------ --- ------ --------- ----------- -- -
--- ------ - ---------------------- ------- --------
--------------
--- ---------
----- -------
------- -
----- ----------
----- ------
--
------ -
------------- ----------
--------------- ---
-
--
--这段代码中，我们通过 circle() 方法生成了一个圆形区域，然后将其作为一个 GeoJSON 对象，添加到地图中。最终效果如下：
接下来，我们可以在圆形区域内随机生成一定数量的点，并判断它们是否在圆形区域内：
-- -------------------- ---- -------
-- --------------
--- -------- - --
------- - - --- - ------- -
--- ----- - -------------------------------------- -------
--- ------- - - ----- ---------- ----------- --- --------- ----- -
----------------------
-- ------------------------------
--- ----- - ---------
------------------------------- -------- -
----- - ---------
-
-------------------------- -
----- ----------
----- -------
--
--------------
--- ------------
----- ---------
------- ------------
------ -
---------------- --
--------------- ----------
-
--
-这段代码中，我们通过 randomPositionInCircle() 方法在圆形区域内随机生成了一些点，并将它们作为 GeoJSON Feature 对象，添加到地图中。同时，我们也利用了 pointInCircle() 方法，判断这些点是否在圆形区域内，并设置它们的颜色。最终效果如下：
至此，我们已经完成了 geojson-utils 的一个实战应用。我们在地图上绘制了一个圆形区域，并随机生成了一些点，在运用 geojson-utils 提供的方法，判断这些点是否在圆形区域内。我们可以看到，geojson-utils 在这个案例中发挥了重要的作用，它让我们能够轻松地操作 GeoJSON 数据，提高了地理信息数据的处理效率。
总结
本篇文章介绍了一个基于 GeoJSON 的 JavaScript 工具库 geojson-utils，它提供了一系列对 GeoJSON 数据进行操作的方法，如坐标变换、计算距离、判断点是否在区域内等，非常实用。我们通过详细的讲解，学会了 geojson-utils 的基本使用方法，并通过实战案例，演示了如何将 geojson-utils 配合 Mapbox GL JS 库使用，实现在地图上绘制圆形区域和判断点是否在其中。
geojson-utils 对于从事地理信息相关开发的前端工程师来说，是一款非常有价值的工具库，它能够提高开发效率，加快开发进程。希望本文能够帮助到正在使用 geojson-utils 的开发者，也希望更多的前端工程师了解和利用这个工具库，为地理信息项目的开发带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67576