什么是 leaflet-pip
leaflet-pip 是一个用于在 Leaflet 地图上查找点位所在面的 JavaScript 库，可以用于 Web 和 Node.js 环境，支持 GeoJSON 和 WKT 格式的数据输入。
它的优势在于能够快速的查找某个点位所在的面，比起一些常用的方法，如遍历所有面，计算点与面的位置关系，leaflet-pip 能够更加高效的定位到目标面。因此，它可以应用在一些多点位查询面的场景中，如地图上查询某一省份的边界等。
安装和使用
安装
你可以使用 npm or yarn 安装 leaflet-pip：
npm install leaflet-pip --save # or yarn add leaflet-pip
使用
首先，在你的项目中引入 Leaflet 库。
<!-- 首先引入 leaflet CSS 和 JS --> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
假设你已经有了一个完整的地图，并且导入了一些 GeoJSON 数据：
-- -------------------- ---- ------- ----- --- - --------------------------- ------- ---- ---------------------------------------------------------------------------- ----- ------- - - ------- -------------------- ----------- -- ------- ---------- ----------- - ------- ---------- -------------- -- ------------ ----------- ------------ ----------- ------------ ----------- ------------ ----------- ------------ ---------- -- - -- -- ------------------------------展开代码
现在，你想查询一下一个特定的点位 [116.232, 40.2195] 应该在哪个面上，我们可以这样编写代码：
import pointInPolygon from 'leaflet-pip'; const latlng = L.latLng(40.2195, 116.232); const layers = L.geoJson(geojson).getLayers(); const results = pointInPolygon(latlng, layers); console.log(results);
执行后，会在控制台输出一个数组，包含了点所在的面或多个面。
范例
这里演示一个范例，用 leaflet-pip 帮助我们找到一个给定点位的位置，例如遍历整个地图查找地址并显示在地图上。
首先，我们需要一个输入框和一个查找的按钮。
<div> <input id="searchInput" type="text" placeholder="输入地址"> <button id="searchButton">查找</button> </div> <div id="map" style="height:600px;"></div>
然后，我们需要编写 JavaScript 代码来读取输入框中的内容，用 leaflet-pip 查找位置，把查找结果用标记点的方式显示在地图上。
-- -------------------- ---- ------- ----- --- - --------------------------- ------- ---- ---------------------------------------------------------------------------- --- ---------- - ----------------- --- ----------- - --------------------------------------- --- ------------ - ---------------------------------------- -------------------------------------- ---------- - ----- ----- - ------------------------- -- ------- - ----- ---------- - ------------------------------------------------------ ---------------------- ----------------- -------------- -- ---------------- ---------- -- - ----- -------- - ------------------------------------- ----- ------ - --------------------- ------------- ----- ------ - ------------------------------- ----- ------- - ---------------------- -------- ------------------------- -- --------------- - -- - --- ---- - - -- - - --------------- ---- - ----------------------------------- - -------------------------------------- - --- - ---展开代码
以上代码会将查找到的所有点用标记点标记在地图上，并自动的调整地图视角以展示所有标记点。
总结
leaflet-pip 是一个在 GeoJSON 数据中快速查找点所在面的 JavaScript 库，可以应用在多种场景中。在 Leaflet 地图上，我们可以很容易的使用它来实现点位查询，并作为类似的中小型项目的一部分工具箱。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67574
