什么是 leaflet-pip
leaflet-pip 是一个用于在 Leaflet 地图上查找点位所在面的 JavaScript 库，可以用于 Web 和 Node.js 环境，支持 GeoJSON 和 WKT 格式的数据输入。
它的优势在于能够快速的查找某个点位所在的面，比起一些常用的方法，如遍历所有面，计算点与面的位置关系，leaflet-pip 能够更加高效的定位到目标面。因此，它可以应用在一些多点位查询面的场景中，如地图上查询某一省份的边界等。
安装和使用
安装
你可以使用 npm or yarn 安装 leaflet-pip：
--- ------- ----------- ------ - -- ---- --- -----------
使用
首先，在你的项目中引入 Leaflet 库。
---- ---- ------- --- - -- --- ----- ---------------- ------------------------------------------------------- -- ------- ---------------------------------------------------------------
假设你已经有了一个完整的地图，并且导入了一些 GeoJSON 数据：
----- --- - --------------------------- ------- ----
----------------------------------------------------------------------------
----- ------- - -
------- --------------------
----------- --
------- ----------
----------- -
------- ----------
-------------- --
------------ -----------
------------ -----------
------------ -----------
------------ -----------
------------ ----------
--
-
--
--
------------------------------现在，你想查询一下一个特定的点位 [116.232, 40.2195] 应该在哪个面上，我们可以这样编写代码：
------ -------------- ---- -------------- ----- ------ - ----------------- --------- ----- ------ - ------------------------------- ----- ------- - ---------------------- -------- ---------------------
执行后，会在控制台输出一个数组，包含了点所在的面或多个面。
范例
这里演示一个范例，用 leaflet-pip 帮助我们找到一个给定点位的位置，例如遍历整个地图查找地址并显示在地图上。
首先，我们需要一个输入框和一个查找的按钮。
----- ------ ---------------- ----------- ------------------- ------- ----------------------------- ------ ---- -------- ----------------------------
然后，我们需要编写 JavaScript 代码来读取输入框中的内容，用 leaflet-pip 查找位置，把查找结果用标记点的方式显示在地图上。
----- --- - --------------------------- ------- ----
----------------------------------------------------------------------------
--- ---------- - -----------------
--- ----------- - ---------------------------------------
--- ------------ - ----------------------------------------
-------------------------------------- ---------- -
----- ----- - -------------------------
-- ------- -
----- ---------- - ------------------------------------------------------ ----------------------
-----------------
-------------- -- ----------------
---------- -- -
----- -------- - -------------------------------------
----- ------ - --------------------- -------------
----- ------ - -------------------------------
----- ------- - ---------------------- --------
-------------------------
-- --------------- - -- -
--- ---- - - -- - - --------------- ---- -
-----------------------------------
-
--------------------------------------
-
---
-
---以上代码会将查找到的所有点用标记点标记在地图上，并自动的调整地图视角以展示所有标记点。
总结
leaflet-pip 是一个在 GeoJSON 数据中快速查找点所在面的 JavaScript 库，可以应用在多种场景中。在 Leaflet 地图上，我们可以很容易的使用它来实现点位查询，并作为类似的中小型项目的一部分工具箱。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67574