介绍
points-in-polygon 是一个常用于前端地图开发的 NPM 包，它提供了一种快速有效的方法来判断点是否在多边形内。在地图应用中，判断一个点是否在多边形内可以应用于地理围栏、行政区域边界、自定义区域等多种场景。
本文将详细介绍 points-in-polygon 的使用方法，包括安装、接口使用等方面，同时提供示例代码和结果展示，帮助读者深入了解这个包的使用方法。
安装
要使用 points-in-polygon，你需要在你的项目中先安装它。你可以使用以下命令来安装它：
npm install points-in-polygon
API
points-in-polygon 仅提供一个 API：pointsInPolygon(points, polygon)，其中 points 是需要判断的点数组，polygon 是多边形的点数组。
pointsInPolygon(points, polygon) 的作用是判断 points 中的点是否在 polygon 中，并返回一个包含布尔值和状态码的对象。其中布尔值代表该点是否在多边形内，状态码是一个数值，其含义如下：
1：成功，点在多边形内；0：成功，点在多边形外；-1：判断失败，多边形为空或不合法。
在使用该 API 时请注意，传入的点坐标数组的顺序必须是顺序或逆序，而传入的多边形数组的顺序一定是顺时针。
示例代码
下面的示例代码演示了如何使用 points-in-polygon 判断一个点是否在一个多边形内。在这个例子中，我们将使用 <canvas> 绘制出多边形和点的位置，并实时测试点是否在多边形内。此外，我们还使用了 lodash 和 store 库来管理状态和处理数据。
-- -------------------- ---- -------
-- -- ------ - ----- -
------ - ---- --------
------ ----- ---- -------
-- -- -----------------
------ --------------- ---- -------------------
-- -----
----- ----- - -
-- -----
-------- -
----- -----
----- ----
----- -----
----- -----
----- ----
--
-- ------
------- -
----- -----
---- ----
----- ----
--
-- -------------
------- --
-
-- - ----- --- ----- -
----- ----- - ------------------
-- -- ---- -- ------ ---------
--- ------ - -----------------------------------
------------ - ---
------------- - ---
-- -- ------ ------
--- --- - -----------------------
-- -------
-------- ---- -- -
-- -----
---------------
------------------------------- --------------------
--- ---- - - -- - - --------------------- ---- -
------------------------------- --------------------
-
---------------
------------
-- ---
--- ---- - - -- - - -------------------- ---- -
-- ----------
--- ------ - -------------------------------- --------------
-- ---------
------------------------- -------
------------- - ----------- - --------- - ---------
---------------
--------------------------- ------------------- -- -- - - --------
---------------
----------
-
-
-- -- ----- --------- ------
-------------- -- -
-- -- ------
---------------- -- ------------- --------------
-- ---- ------
------
--
-- ----- ------
------运行结果
当你运行上面的代码后，将会得到类似以下的运行结果：
可以看到，我们在界面中绘制了一个多边形和三个点，使用 points-in-polygon 判断了这三个点是否在多边形内，并在 Canvas 中标出了这些点的位置和判断结果。
总结
通过本篇文章，我们了解了 points-in-polygon 的使用方法，它为前端开发者提供了一种快速有效的方法来判断点是否在多边形内。同时，我们还提供了一个详细的示例代码，希望读者可以更好地理解和运用这个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576e81e8991b448d46c0