简介
Angular 是一款流行的前端框架，其能更好地组织代码、管理依赖、提供丰富的扩展等优势，越来越多的工程师开始抛弃传统地图开发方式，将地图应用与 Angular 框架结合。OpenLayers 是一款开源的地图库，拥有众多的地图源、多种交互方式、众多的插件和自定义能力，可大程度地自定义地图应用。
本文主要介绍在 Angular 中如何结合 OpenLayers 地图库进行地图应用开发。
安装 OpenLayers
使用 Angular CLI 安装 OpenLayers 十分简单，只需要使用 npm 命令行工具进行安装：
npm install ol
初始化 OpenLayers
在 Angular 中使用 OpenLayers 前，需要先引入地图库。可以在主模块（app.module.ts）中引入 OpenLayers：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - -- -- ---- ----- ----------- -------- ---------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
在组件中引入 OpenLayers 可以使用以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -- -- ---- -----
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
---- ----
---------- -
---------------
-
--------- -
-------- - --- --------
------- ------
------- -
--- ---------------
------- --- ---------------
--
--
----- --- ---------
------- --- ---
----- -
--
---
-
-以上代码依次完成了：
- 引入 OpenLayers 库
- 创建一个组件并定义了一个
map对象 - 在
ngOnInit()生命周期钩子中调用initMap()方法 - 在
initMap()方法中创建并配置了一个基础地图
在 Angular 框架中，每个组件都被附加到一个 HTML 模板中，target 属性将 HTML 模板中的一个具有 id 属性的元素作为目标元素，并将 OpenLayers 地图添加到该元素中。
<div id="map"></div>
常用的用于创建并配置 OpenLayers 地图初始化的选项
target：表示地图将显示的 HTML 元素的id。layers：地图的层级要素。view：地图的可视区域。
在地图中添加 Marker
在地图上添加标记是地图应用中经常出现的操作，方法是创建一个源 source（一个要素容器）和一个图层 layer，然后将它们传递给 OpenLayers 地图对象。以下代码演示了如何在地图上添加marker：
-- -------------------- ---- -------
----- ------ - ---- ----
----- ------ - --- ------------
--------- --- -----------------------------------------
---
----- ------ - --- ------------------
--------- --------
---
----- ----- - --- -----------------
------- -------
------ --- ----------------
------ --- ---------------
---- ---------------------
------ ---
--
--
---
-------------------------以上代码依次完成了：
- 创建一个坐标数组
coords，示例数据为[10, 10]，代表longitude和latitude。 - 创建要素对象
Feature，该对象具有一个 Geom 对象并通过设置ol.proj.fromLonLat()方法转化成设定的坐标系。 - 创建一个地图源
source，并将要素对象传入。 - 创建一个图层
layer，将源source传入。设置一个style属性，表示标记的样式。在这里，我选用了一个简单的样式引用站点内部的一个 PNG 文件。 - 将图层添加到地图中。
添加交互
除了基础的操作之外，交互使得用户能够与地图进行更加细粒度的操作。例如，添加一个鼠标缩放交互将允许用户在地图上缩放，该功能可以通过使用 ol.interaction.MouseWheelZoom() 类创建。以下代码演示了如何添加缩放交互：
const zoom = new ol.interaction.MouseWheelZoom(); this.map.addInteraction(zoom);
造成的结果是，用户可通过鼠标滚轮进行缩放。
整合 OpenStreetMap
OpenStreetMap（OSM）是一个开放的地图数据源，我们可以利用 OpenLayers 的ol.source.OSM 类使用其高质量的地图数据，只需像之前一样简单地配置图层即可。
const layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
this.map.addLayer(layer);地图事件
OpenLayers 为数不同的地图操作和事件注册了多个侦听器（listener）。以地图滚轮缩放事件为例，如下：
const zoom = new ol.interaction.MouseWheelZoom();
this.map.addInteraction(zoom);
this.map.on('wheel', (event: any) => {
event.preventDefault();
});可以添加 preventDefault() 方法来防止浏览器的默认滚动行为。通过 this.map.on(，来监听地图上发生的事件。
结论
通过使用 OpenLayers，我们可以很容易地在 Angular 中进行地图应用开发。在本文中，我们介绍了 OpenLayers 基本概念，包括如何将图层添加到地图中、如何添加 Marker、交互以及事件监听等信息，更多关于如何深入地学习 OpenLayers 可以参考其官网。
附：示例代码
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -- -- ---- -----
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
---- ----
---------- -
---------------
----------------
---------------------
-
--------- -
-------- - --- --------
------- ------
------- -
--- ---------------
------- --- ----------------
---
--
----- --- ---------
------- -------------------------- -------
----- --
---
---
-
----------- -
----- ------ - ------- ------
----- ------ - --- ------------
--------- --- ------------------------------------------
---
----- ------ - --- ------------------
--------- ---------
---
----- ----- - --- -----------------
------- -------
------ --- ----------------
------ --- ---------------
---- ---------------------
------ ----
---
---
---
-------------------------
-
---------------- -
----- ---- - --- --------------------------------
------------------------------
-------------------- ------- ---- -- -
-----------------------
---
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670936a6d91dce0dc8776874