随着前端技术的发展,地图应用已经成为了 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