在前端开发中,常常需要调用一些地图相关的库来展示地理信息。gbif-map 就是一个 npm 包,可以帮助我们在 Web 应用中展示物种分布地图和物种信息。
安装
使用 npm 安装 gbif-map:
--- ------- -------- ------
引入
在 HTML 文件中引入 css 文件和 gbif-map.js:
----- ---------------- ------------------------------------------------ ------- ------------------------------------------------------
也可以在 JavaScript 文件中通过 import
引入:
------ ------- ---- ----------- ------ ----------------------------
最简示例
以下是 gbif-map 最简示例的代码:
---- --------------- -------- --- --- - --- ---------------- ----------- ---- --- ---- - ---- ---------
这段代码创建了一个带有 id 为 "map" 的 div,然后创建了一个 GBIFMap 实例并将地图展示在这个 div 上,最后展示了一个包含经纬度信息的点。
API
show(locations: Location[], options?: Options)
展示地图上的 Location,其中 Location 形如 { lat: number, lng: number }
。
我们可以传递一个包含多个 Location 的数组来在地图上展示多个点:
-- ----- ---------- - ---- --- ---- - -- - ---- --- ---- -- - ---
还可以传递一些选项参数来控制地图的展示:
-- ------- -- - -------- ------------ -- --------------------- ---------- ------------- ------- ---- --- -- ----- ----- -- -- ------ -------- --- -- ------ -------- ----- -- ------ ------------ -- ------ -- ---- ------------ ------ -- ----------- --------------- ----- -- ------- ------------ --- -- ---- ---------------- -------- --------- - -------------------- -- -- -------- -------------- -------- ---------- - --------------------- - -- --------- -
clear()
清除地图上的所有点:
------------
fitBounds(locations: Location[])
缩放以适应 locations 数组过的所有点:
--------------- - ---- --- ---- - -- - ---- --- ---- -- - ---
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