随着前端技术的发展，地图应用已经成为了 Web 应用中不可或缺的一部分。ESRI 是一个专注于地图和地理信息系统的公司，而 angular-esri-loader 就是一个开源的 npm 包，能够帮助我们在 Angular 应用中更加方便地加载 ESRI 的 JavaScript API，从而加速我们地图应用的开发。
本文将介绍 angular-esri-loader npm 包的基本使用方法，包括其安装、初始化、模块化加载以及使用实例等。
安装 angular-esri-loader
首先，我们需要安装 angular-esri-loader 包。我们可以通过 npm 来进行安装。
npm install angular-esri-loader --save
在 Angular 应用中，我们需要在导入 ESRI 包之前，先导入 angular-esri-loader 包即可。
import { AngularEsriLoaderModule } from 'angular-esri-loader';
@NgModule({
imports: [AngularEsriLoaderModule.forRoot()],
// ...
})
export class AppModule { }在使用之前，我们需要对其进行初始化。我们可以在 AppModule 中使用 AngularEsriLoaderService 来初始化 ESRI api 的基本配置。
-- -------------------- ---- -------
------ - ------------------------ - ---- ----------------------
-- ---
------ ----- ------------ -
------------------- ----------- ------------------------- - -
---------- -
-- -- ---- --- --- -------
----- ------- - -
---- -----------------------------
--
----------------------------------- ---------
-
-以上代码为初始化的一个基本示例。其中，我们在 AppComponent 中使用 AngularEsriLoaderService 服务，将 ESRI api 的默认 options 配置成了一个包含 url 字段的对象。
模块加载
在需要使用 ESRI api 的组件中，我们可以使用 AngularEsriLoaderService 中的 loadEsriModules() 方法来动态加载 ESRI api 中的模块。
-- -------------------- ---- -------
------ - ------------------------ - ---- ----------------------
-----------------
------ ----- ----------- -
-------- ---------------
------------------- ----------- ------------------------- - -
---------- -
-------------------------------------------- ----------------------------
---------- ------------- -- -
-- ------ ---
----- ---- ---------- - --- ----------------- ----------------
-- ---- -------
------------ - --- ----------------- ---- ---------- ------------
-
--
-
-以上代码为组件中使用 ESRI api 的一个基本示例。其中，loadEsriModules() 方法的参数是需要加载的模块列表，返回的结果是每个模块的实例对象。
ESRI api 包的导入
注意：通过模块加载方式使用 ESRI api 会执行 ESRI 的模块化加载机制，如果存在模块依赖的问题，请直接使用 ESRI api 包的导入方式。
在一些较为简单的地图应用场景中，我们不需要使用到动态加载模块的特性，此时我们可以使用直接导入 ESRI 包的方式进行地图开发。
-- -------------------- ---- -------
------ - -- ---- ---- --------------
-- ---
------ ----- ------------ -
-- ----
---- ---------
-- ------
-------- -------------
-- ---
---------- -
-- ---
--------------------------------------- -------------- ---------------------------------------- ------- ------ -- -
-- -----
----- ------ - --- --------
-------- -------------
---
-- -----
------------ - --- ---------
---------- ---------
---- -------
----- ---
------- ----------- --------
---
-- -----
----------------------- ------ ----- ------------ --- -------------
---
-
-以上就是一个完整的 angular-esri-loader 包的使用示例。使用该包能够帮助我们更加方便地在 Angular 应用中集成 ESRI api，能够帮助我们在地图应用的开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd581e8991b448e66fd