简介
@geo-maps/countries-coastline-2km5 是一个针对前端开发者的 npm 包。该包提供了全球二公里五百米分辨率的所有国家海岸线数据。可以很好地支持各种前端数据展示、数据分析、可视化等操作。
安装
使用 npm 安装 @geo-maps/countries-coastline-2km5 ：
npm install @geo-maps/countries-coastline-2km5
使用
引入包并且创建一个实例：
const CountriesCoastline = require('@geo-maps/countries-coastline-2km5');
const coastline = new CountriesCoastline();
coastline.load().then(() => {
console.log('国家海岸线数据加载成功！');
});实例对象 coastline 提供以下方法：
getCoordinates
获取指定国家或地区的所有海岸线坐标点。
const coordinates = coastline.getCoordinates('china');在 getCoordinates 方法中，可以传入国家或地区名字的缩写或全称。比如：
coastline.getCoordinates('PY') // 获取巴拉圭的所有海岸线坐标点
coastline.getCoordinates('US') // 获取美国的所有海岸线坐标点getGeoJSON
获取指定国家或地区的所有海岸线坐标点，并将坐标点转化为 GeoJSON 对象。
const geojson = coastline.getGeoJSON('japan');getBbox
获取指定国家或地区的所有海岸线坐标点的范围。
const bbox = coastline.getBbox('Brazil');示例代码
以下是使用 @geo-maps/countries-coastline-2km5 获取中国海岸线并展示在地图上的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
-------------- -
------- ------
------ -----
-
--------
-------
------
---- -------------------------
------- ----------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------
--------
----- --------- - --- ---------------------
----- --- - ----------------------------------- ----- ---
------------------------ -- -
----- ----------- - --------------------------------
----- ------- - -
----- ----------
--------- -
----- ------------------
------------ --------------
--
----------- ---
--
------------------------------
---
---------
-------
-------在以上示例中，我们使用了 Leaflet 技术来展示中国的海岸线数据。代码中包含了一段 HTML 页面以及引入 @geo-maps/countries-coastline-2km5 和 Leaflet 库的 JavaScript 代码。
当数据加载成功后，我们使用 coastline.getCoordinates('CHN') 方法获取中国的海岸线坐标数据。将此数据转化为 GeoJSON 数据并传递给 Leaflet 的 L.geoJSON(geojson) 方法即可展示在地图上。
以上代码可以通过以下命令快速在本地启动一个静态服务器进行测试：
npm install -g serve serve
再使用浏览器访问 http://localhost:5000 即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005687a81e8991b448e4707