在前端开发中，常常需要调用一些地图相关的库来展示地理信息。gbif-map 就是一个 npm 包，可以帮助我们在 Web 应用中展示物种分布地图和物种信息。
安装
使用 npm 安装 gbif-map：
npm install gbif-map --save
引入
在 HTML 文件中引入 css 文件和 gbif-map.js：
<link rel="stylesheet" href="./node_modules/gbif-map/css/gbif-map.css"> <script src="./node_modules/gbif-map/js/gbif-map.js"></script>
也可以在 JavaScript 文件中通过 import 引入：
import GBIFMap from 'gbif-map'; import 'gbif-map/css/gbif-map.css';
最简示例
以下是 gbif-map 最简示例的代码：
<div id="map"></div>
<script>
var map = new GBIFMap('#map');
map.show([{ lat: 50, lng: 0 }]);
</script>这段代码创建了一个带有 id 为 "map" 的 div，然后创建了一个 GBIFMap 实例并将地图展示在这个 div 上，最后展示了一个包含经纬度信息的点。
API
show(locations: Location[], options?: Options)
展示地图上的 Location，其中 Location 形如 { lat: number, lng: number }。
我们可以传递一个包含多个 Location 的数组来在地图上展示多个点：
// 展示两个点
map.show([
{ lat: 50, lng: 0 },
{ lat: 60, lng: 10 }
]);还可以传递一些选项参数来控制地图的展示：
-- -------------------- ---- ------- -- ------- -- - -------- ------------ -- --------------------- ---------- ------------- ------- ---- --- -- ----- ----- -- -- ------ -------- --- -- ------ -------- ----- -- ------ ------------ -- ------ -- ---- ------------ ------ -- ----------- --------------- ----- -- ------- ------------ --- -- ---- ---------------- -------- --------- - -------------------- -- -- -------- -------------- -------- ---------- - --------------------- - -- --------- -
clear()
清除地图上的所有点：
map.clear();
fitBounds(locations: Location[])
缩放以适应 locations 数组过的所有点：
map.fitBounds([
{ lat: 50, lng: 0 },
{ lat: 60, lng: 10 }
]);showSpecies(speciesList: Species[]) / addSpecies(speciesList: Species[])
展示/添加物种信息，其中 Species 形如：
-- -------------------- ---- ------- - ------- --------------------------------------- ----------------- ----- ---------- ------- ---------- ------ -------- ----------- ------------- --------- ----------- ------------- -- -
-- -------------------- ---- -------
----------------
-
------- ---------------------------------------
----------------- ----- ----------
------- ----------
------ --------
----------- -------------
--------- -----------
------------- --
-
---示例应用
以下代码演示如何使用 gbif-map 展示物种分布地图和物种信息。
-- -------------------- ---- -------
---- ---------------
--- ------------------
------ -------- --------------------------- -----------------
------ -------- ---------------------------- ----------------
------ -------- ------------------------------ -----------------
-----
--------
----- ---- - -
---------- -
- ---- ----- ---- ----- --
- ---- ----- ---- ----- --
- ---- ----- ---- ----- -
--
------------ -
-
------- ---------------------------------------
----------------- ----- ----------
------- ----------
------ --------
----------- -------------
--------- -----------
------------- --
-
-
--
----- --- - --- ----------------
-------------------------
----- ------------ - ----------------------------------------
-------------------------------------- -------- ------- -
----- --------- - -----------------------------
-- ----------- -
-----------------------------------------------------
-------------- -- ----------------
------------- -- -
------------
-------------------------
--------------------------
------------------------------
---
-
--
---------这段代码创建了一个带有 id 为 "map" 的 div 和一个包含物种信息的列表。当用户点击列表中的某个物种时，会调用 GBIF API 获取物种信息并在地图上展示物种分布地图和物种信息。当用户返回列表界面时，地图回到初始状态。
总结
通过本文的介绍，我们学习了如何使用 npm 包 gbif-map 来展示地图和物种信息，并使用代码给出了详细的示例。gbif-map 带有丰富的选项参数和 API，可以灵活地满足我们的需求。我们可以将 gbif-map 应用于各种地图相关的场景，进一步丰富我们的前端技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a630d0927023822514