前言
随着前端技术的不断发展，越来越多的项目开始采用前端框架进行开发。而作为 GIS 领域的开发者，如何将前端框架和地图集成起来，达到更好的交互和展示效果，成为了我们亟需解决的问题。npm 包 essence-ng2-esrimap 正是为了解决这个问题而诞生的。
essence-ng2-esrimap 是一个基于 Angular 2 的 Web GIS 开发框架，支持多种地图类型和图层，提供了地图交互、数据显示、搜索、标注等常用功能。本篇文章将为大家详细介绍这个 npm 包的使用方法，并结合示例代码进行讲解。
安装
在使用 essence-ng2-esrimap 之前，需要先安装 Angular2。安装 Angular2 可以通过 npm 包管理器进行安装，具体命令如下：
npm install -g @angular/cli
接下来，我们就可以在项目中安装 essence-ng2-esrimap 包。使用命令：
npm install essence-ng2-esrimap --save
使用
在安装完 essence-ng2-esrimap 包之后，我们就可以在项目中引用该包，然后在代码中添加相应的指令，即可使用该包提供的各项功能了。
引用
在 app.module.ts 文件中添加以下内容：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ----------------------
-----------
-------- -
--------------
-------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -指令
引用完成后，我们就可以在组件的模板中使用 essence-ng2-esrimap 提供的组件了。比如在一个组件中，添加地图组件的代码如下：
<esri-map [mapConfig]="mapConfig"></esri-map>
其中，mapConfig 是我们自定义配置的地图参数，包括地图服务地址、初始显示范围等信息。具体可以参考官方文档。
示例代码
以下是一个完整的运用 essence-ng2-esrimap 制作的地图应用的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------
--------- -----------------------------------
-
--
------ ----- ------------ -
--------- - -
-------- ----------
------- ---- ----
----- -
--
-在上面的代码中，我们使用 AppComponent 组件来展示地图。在 mapConfig 中，我们设置了地图 basemap 类型为街道地图，中心点位于经度 88，纬度 33 的位置，缩放级别为 4。
总结
通过本文的介绍，我们了解了 npm 包 essence-ng2-esrimap 的基本用法，以及如何结合 Angular2 进行地图应用开发。相信这对于正在学习前端 GIS 开发的朋友们会有所帮助。在实际项目中，我们可以根据需求选择合适的地图服务和图层，进一步扩展和优化 essence-ng2-esrimap 的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bcc81e8991b448e56f6