前言
在今天的前端开发中，地图是非常常用的一类组件。然而，在处理地图数据时，我们经常需要使用到 topjson 格式的数据，但是如何获取这样的数据并进行处理却很多人不清楚。本文将为大家介绍一个 npm 包 topojson-osm-fetch ，它可以让我们在前端轻松获取 OpenStreetMap 中的数据并将其转化成 topjson 格式。
安装
通过 npm 可以很方便地安装 topojson-osm-fetch ，在终端输入以下命令即可：
npm install topojson-osm-fetch
使用
获取 OpenStreetMap 数据的前提是需要知道我们想要获取哪个区域的数据，所以我们首先需要获取我们要使用的地图的界限。
获取地图界限
在 OpenStreetMap 中，有两种获取地图界限的方法：
- 手动查找
- 使用 Overpass API
手动查找相对比较简单，我们可以打开 OpenStreetMap 网站，然后找到我们需要的区域，然后复制该区域的边界信息。这个信息一般可以在地图链接的 URL 中找到，例如下面 URL 中的 bbox 参数：
https://www.openstreetmap.org/export#map=6/37.643/117.072&layers=C &bbox=116.17374,35.16535,121.97144,38.40525
我们需要将 bbox 参数提取出来，然后传入下面的函数中：
const fetchOSMData = require('topojson-osm-fetch');
fetchOSMData({
bounds: [minLat, minLon, maxLat, maxLon],
});当然，也可以直接使用 Overpass API 来获取数据。这里我就不再展开讲解了，感兴趣的可以去查阅相关文档。
获取数据
获取到地图的边界信息后，我们就可以开始获取数据了。我们只需要将边界信息传给 fetchOSMData 函数，然后处理回调中的数据即可：
-- -------------------- ---- -------
----- ------------ - ------------------------------
--------------
------- -------- ------- ------- --------
--
------------ -- -
------------------
--
------------ -- -
-------------------
---这里的 data 是一个包含了一些 GeoJSON 对象的 Object。我们可以将它转化成 topojson 格式：
-- -------------------- ---- -------
----- ------------ - ------------------------------
----- -------- - ---------------------------
--------------
------- -------- ------- ------- --------
--
------------ -- -
----- -------- - ---------------- ---- ---
----- ----- - ------------------- ---- -- -
--------------------- --------- -- -
------ -------------------
--
---
-------------------
--
------------ -- -
-------------------
---这里使用了 topojson-client 来进行转化，该库提供了很多方便的函数来处理 topojson 数据。需要注意的是，这里的 feature.properties 也需要根据实际情况来修改，否则生成的图形将没有属性信息。
示例
下面是一个完整的例子，获取北京市的地图数据并将其转化成 topojson 格式：
-- -------------------- ---- -------
----- ------------ - ------------------------------
----- -------- - ---------------------------
--------------
------- ------ ------ ----- -------
--
------------ -- -
----- -------- - ---------------- ---- ---
----- ----- - ------------------- ---- -- -
--------------------- --------- -- -
------ -------------------
--
---
-------------------
--
------------ -- -
-------------------
---总结
在本文中，我们介绍了如何使用 topojson-osm-fetch 包来获取 OpenStreetMap 的数据并将其转化成 topojson 格式。这个包的实现原理非常简单，大家可以自行查看其源码。但是，这里我们得到了很多指导性的内容，例如如何获取地图边界信息、如何获取 OpenStreetMap 的数据、如何将 GeoJSON 转化成 topojson 格式等。希望这篇文章能够给大家带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7c238a385564ab6a49