在 Web 开发中，地图的应用是十分常见的，而 OpenLayers 则是目前非常流行的一款地图库。npm 包 ol-control-loading 是一个基于 OpenLayers 的控件，用于在地图加载时展示 loading 效果。
安装
要使用 ol-control-loading，你需要先安装 ol 和 ol-control-loading 两个包。你可以使用 npm 进行安装：
npm install ol ol-control-loading --save
简介
ol-control-loading 是一个开源库，基于 OpenLayers 封装而成。这个控件可以在地图加载过程中显示 loading 动画，帮助提醒用户当前地图正在加载，同时让用户有更好的体验。
使用
创建地图
获取到 ol 和 ol-control-loading 之后，我们需要创建一个地图。这里，我们先使用一个最基础的例子创建一个地图。
-- -------------------- ---- -------
---- ---------------
--------
------ ------------
------ --- ---- ---------
------ ---- ---- ----------
------ --------- ---- ----------------
------ --- ---- ----------------
--- --- - --- -----
------- ------
------- -
--- -----------
------- --- -----
--
--
----- --- ------
------- --- ---
----- -
--
---
---------引入 ol-control-loading
在创建地图后，我们需要引入 ol-control-loading：
import LoadingControl from 'ol-control-loading';
添加控件到地图中
完成引入后，我们需要将 ol-control-loading 添加到地图之中，代码如下：
var loadingControl = new LoadingControl({
position: 'center'
});
map.addControl(loadingControl);上述代码中，我们将 loadingControl 添加到中心位置。
然后，我们需要为从源加载的所有图层添加 loadstart 和 loadend 监听器。当图层开始加载时，loadstart 监听器会触发 loading 效果；而当图层加载完毕时，loadend 监听器会结束 loading 效果。
代码如下：
-- -------------------- ---- -------
--- ------ - ----------------
------------------------------ -
------------------------------------- ---------- -
-----------------------
---
----------------------------------- ---------- -
---------------------
---
---完整代码
最后，我们将完整代码整合到一起：
-- -------------------- ---- -------
---- ---------------
--------
------ ------------
------ --- ---- ---------
------ ---- ---- ----------
------ --------- ---- ----------------
------ --- ---- ----------------
------ -------------- ---- ---------------------
--- --- - --- -----
------- ------
------- -
--- -----------
------- --- -----
--
--
----- --- ------
------- --- ---
----- -
--
---
--- -------------- - --- ----------------
--------- --------
---
-------------------------------
--- ------ - ----------------
------------------------------ -
------------------------------------- ---------- -
-----------------------
---
----------------------------------- ---------- -
---------------------
---
---
---------总结
在本文中，我们介绍了如何使用 ol-control-loading。这个控件是基于 OpenLayers 封装而成，用于在地图加载时展示 loading 效果，让用户有更好的体验。同时，我们还提供了示例代码，帮助你更好地理解如何使用 ol-control-loading。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005738981e8991b448e97bd