简介
mapbox-gl-overpass 是一个 npm 包，提供了一种方便获取 OpenStreetMap 要素的方式。此包可以在 Mapbox GL 中使用，支持开箱即用的 Overpass API 查询构建器，不需要繁琐的 API 请求。
安装
通过 npm 安装
npm install mapbox-gl-overpass
或
yarn add mapbox-gl-overpass
使用
mapbox-gl-overpass 利用了 Mapbox GL 事件系统、样式和数据源 API，以及 Overpass API 查询构建器，结合使用可以方便地获取 OSM 要素。
初始化
-- -------------------- ---- ------- ------ -------- ---- ------------ ------ ---------------- ---- --------------------- ----- --- - --- -------------- ---------- ------ ------ ------------------------------------- ------- ------- ---- ----- --- --- ----- -------- - --- ----------------------
添加图层
要添加用 Overpass 检索的数据，有以下 4 个步骤
- 在 style.json 中定义一些图层用于装载数据：
-- -------------------- ---- -------
-
----- -----------
------- -------
--------- -----------
-------- -
------------- ------
--------------- ---
--
--------- ------ -------- ----------
-- 用 Overpass 的查询语言在 http://overpass-turbo.eu/ 查询要素。例如查询西雅图的所有非居民区：
-- -------------------- ---- ------- ----------------------- -- ----- ---- --------- -- ------ -- ------------------------------------- - -- ----- --- ------- --- ------- ---- -- --- ---- -------------------------------- ------------------------------------- -------------------------------- ------------------------------------- - ----------------- -- ------ --- ------------ ----------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- ------- ------- --- ---- -----
- 把查询语言转换成 JSON 格式的 Overpass API 查询（在 overpass turbo 的查询面板下方可以找到）：
-- -------------------- ---- -------
-
------- ------
-------- -
-------- -- -----------------
-------- -- ----------------
--
--------- -
------ ----------
------ ------------
--------- ----
--
---------- -
----------
-
-- 调用
overpass.addLayer(options)把数据加载到设置好的图层上：
-- -------------------- ---- -------
-------------------
--- -----------
------ -
----- ------
------- -
---- ----------
---- ------------
------- -----
--
-------- -
-------- -- ---------------
-------- -- ---------------
--
--
---示例代码
此示例代码利用 Overpass 查询 OpenStreetMap 中附近的默认 POI。可以查看 JSON 响应，被加载到 Mapbox GL 中：
-- -------------------- ---- -------
------ -------- ---- ------------
------ ---------------- ---- ---------------------
------ ---- ---- -------------
----- --- - --- --------------
---------- ------
------ -------------------------------------
------- ------- ----
----- ---
---
----- -------- - --- ----------------------
-------------------
--- -----------
------ -
----- ------
------- -
---- --------
---- ---------
------- ----
--
--
------------- --------- -------- -- -
---------------------- ---------
-- ------------------------- -
----- ---------- - --------------
------------------------- --------- ---- -------- -----
-
--
---
------------------ ------------------------------结论
mapbox-gl-overpass 提供了一种方便获取 OpenStreetMap 要素的方式，使用起来非常简单，不需要繁琐的 API 请求。它结合了 Mapbox GL 的事件系统、样式和数据源 API，以及 Overpass API 查询构建器，使得获取 OSM 上感兴趣的数据变得更加容易。为开发者提供了值得学习和使用的思路，同时其代码示例也赋予开发者具体的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be381e8991b448e5943