npm 包 angular-esri-loader 使用教程

阅读时长 5 分钟读完

随着前端技术的发展,地图应用已经成为了 Web 应用中不可或缺的一部分。ESRI 是一个专注于地图和地理信息系统的公司,而 angular-esri-loader 就是一个开源的 npm 包,能够帮助我们在 Angular 应用中更加方便地加载 ESRI 的 JavaScript API,从而加速我们地图应用的开发。

本文将介绍 angular-esri-loader npm 包的基本使用方法,包括其安装、初始化、模块化加载以及使用实例等。

安装 angular-esri-loader

首先,我们需要安装 angular-esri-loader 包。我们可以通过 npm 来进行安装。

在 Angular 应用中,我们需要在导入 ESRI 包之前,先导入 angular-esri-loader 包即可。

在使用之前,我们需要对其进行初始化。我们可以在 AppModule 中使用 AngularEsriLoaderService 来初始化 ESRI api 的基本配置。

-- -------------------- ---- -------
------ - ------------------------ - ---- ----------------------

-- ---

------ ----- ------------ -
  ------------------- ----------- ------------------------- - -

  ---------- -
    -- -- ---- --- --- -------
    ----- ------- - -
      ---- -----------------------------
    --
    ----------------------------------- ---------
  -
-

以上代码为初始化的一个基本示例。其中,我们在 AppComponent 中使用 AngularEsriLoaderService 服务,将 ESRI api 的默认 options 配置成了一个包含 url 字段的对象。

模块加载

在需要使用 ESRI api 的组件中,我们可以使用 AngularEsriLoaderService 中的 loadEsriModules() 方法来动态加载 ESRI api 中的模块。

-- -------------------- ---- -------
------ - ------------------------ - ---- ----------------------

-----------------
------ ----- ----------- -
  -------- ---------------
  ------------------- ----------- ------------------------- - -

  ---------- -
    -------------------------------------------- ----------------------------
      ---------- ------------- -- -
        -- ------ --- 
        ----- ---- ---------- - --- ----------------- ----------------
        -- ---- -------
        ------------ - --- ----------------- ---- ---------- ------------
      -
    --
  -
-

以上代码为组件中使用 ESRI api 的一个基本示例。其中,loadEsriModules() 方法的参数是需要加载的模块列表,返回的结果是每个模块的实例对象。

ESRI api 包的导入

在一些较为简单的地图应用场景中,我们不需要使用到动态加载模块的特性,此时我们可以使用直接导入 ESRI 包的方式进行地图开发。

-- -------------------- ---- -------
------ - -- ---- ---- --------------

-- ---

------ ----- ------------ -
  -- ----
  ---- ---------
  -- ------
  -------- -------------

  -- ---

  ---------- -
    -- ---
    --------------------------------------- -------------- ---------------------------------------- ------- ------ -- -
      -- -----
      ----- ------ - --- --------
        -------- -------------
      ---
      -- -----
      ------------ - --- ---------
        ---------- ---------
        ---- -------
        ----- ---
        ------- ----------- --------
      ---
      -- -----
      ----------------------- ------ ----- ------------ --- -------------
    ---
  -
-

以上就是一个完整的 angular-esri-loader 包的使用示例。使用该包能够帮助我们更加方便地在 Angular 应用中集成 ESRI api,能够帮助我们在地图应用的开发中更加得心应手。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cd581e8991b448e66fd

纠错
反馈