3.1　OpenLayers

3.1.1　简介

OpenLayers是一个开源（基于BSD 2-clause协议）的JavaScript类库，可以用来制作客户端交互式地图，实现地图展示、数据可视化、空间分析和数据编辑等功能。它使用JavaScript语言编写，支持各种主流浏览器，具有丰富的API和插件，可以快速构建和部署WebGIS应用程序。

OpenLayers具有以下特性。

（1）支持瓦片图层：OpenLayers支持从任何用户能找到的XYZ或TMS格式的瓦片资源中提取地图瓦片并在前端展示，也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务。

（2）支持矢量切片：OpenLayers支持矢量切片的访问和展示，包括MapBox矢量切片中的PBF格式、GeoJSON格式和TopoJSON格式的矢量切片等。

（3）支持矢量图层：能够渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据，包括矢量切片形式的数据，也可以被认为是在矢量图层中渲染。

（4）支持OGC规范：OpenLayers支持OGC制定的WMS、WFS等GIS网络服务规范。

（5）运用前沿技术：利用Canvas 2D、WebGL以及HTML 5中其他最新的技术来构建功能，同时支持在移动设备上运行。

（6）易于定制和扩展：可以直接调整CSS为地图控件设计样式，而且可以对接到不同层级的API进行功能扩展，或者使用第三方库来定制和扩展。

（7）面向对象的思想：最新版本的OpenLayers采用纯面向对象的ECMA Script 6进行开发，可以说，在OpenLayers中“万物皆对象”。

（8）优秀的交互体验：OpenLayers实现了类似于Ajax的无刷新功能，可以结合很多优秀的JavaScript功能插件，带给用户更多丰富的交互体验。

OpenLayers更详细的介绍可参阅其官网https://openlayers.org/。

3.1.2　引用

OpenLayers的引用有两种方式，一种是使用script标签和link标签，通过CDN或静态文件地址进行引入。script标签引入JavaScript压缩文件，link标签引入样式文件。使用标签方式引用OpenLayers的方法如下：

     <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css"
     type="text/css">
     <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/
     javascript"></script>

另外一种方式是通过npm引入。这是使用框架的推荐引用方法，如Vue、React等。这种方法从npm仓库中下载框架包，优点如下。

（1）可以使用如Webpack等打包工具进行管理。

（2）当安装包的体积比较大，而用户只需要使用部分功能时，npm方式可以实现按需引入，减小文件体积，提高下载速度。

通过npm方式引入OpenLayers的方式如下：

     npm install ol -S                // 安装ol
     import 'ol/ol.css';              // 引入ol样式文件
     import Map from 'ol/Map';        // 按需引入Map
     import View from 'ol/View';        // 按需引入View

3.1.3　核心类说明

OpenLayers中的类是一种用于封装、组织和实现代码的概念，是用于构建和管理地图的重要组成部分。开发人员需要了解和使用OpenLayers中的类，以便更好地实现地图的展示和操作。OpenLayers中有很多核心的类，如Map、Layer、View、Source和Control等，都是做了封装实现的。OpenLayers还提供了许多其他的类，例如Geometry、Style、Interaction等。图3-1所示是结合官方文档和GitHub上的源码，对OpenLayers中类之间的关系和类的继承的总结。

1．Map

Map（ol/Map）是OpenLayers中最主要的核心组件，它渲染在一个目标（target）容器中（例如页面中的一个div），通过它可以修改地图参数、添加图层、交互、组件等。所有的地图属性都可以在定义时初始化，同时也可以通过它所提供的Setter方法修改Map属性，例如通过setTarget( )方法可以改变地图的装载容器。

Map的常用配置参数及说明如表3-2所示。

Map的常用方法及说明如表3-3所示。

Map的常用事件及说明如表3-4所示。

2．View

View类是OpenLayers中用于管理地图视图的类，它控制了地图视觉相关的参数，包括地图的中心点、缩放级别、旋转角度等。View还定义了地图的投影，决定了地图中心点的坐标、单位以及地图渲染的分辨率等参数，默认的地图投影是EPSG:3857（Web墨卡托投影）。

View的常用配置参数如表3-5所示。

View的常用方法及说明如表3-6所示。

小技巧

由于View只控制跟视图相关的参数，所以同一个View可以被应用于多个地图，实现多个地图的联动效果。代码3-1实现了两个地图的联动。

上述代码在初始化地图map1、map2时都使用了同一个视图View，实现了两个地图联动的功能，运行后的效果如图3-2所示。

3．Source

Source表示地图数据源，可以用来进行数据的加载、解析、转换等操作。通过OpenLayers的API可以添加、删除Source，例如添加Source到Map中、移除Source等。作为OpenLayers中的一个类，在创建Source时需要指定数据源的类型，如矢量数据源（如GeoJSON、KML）、栅格数据源（如WMS）、瓦片数据源（如XYZ），以及自定义数据源等。

Source类及各子类的关系如图3-3所示。

1）ol.source.XYZ

切片数据源可加载标准的切片，XYZ格式为{x}/{y}/{z}，TMS格式为{x}/{-y}/{z}，配置参数如表3-7所示。

定义一个XYZ类型的Source示例代码如下：

     new ol.source.XYZ({
        url：'x={x}&y={y}&z={z}'
     })

2）ol.source.WMTS

WMTS服务数据源，配置参数如表3-8所示。

创建一个WMTS数据源的方法如下：

3）ol.source.TileWMS

通过切片的方式调用WMS服务，默认返回的是256大小的图片，配置参数如表3-9所示。

创建一个TileWMS数据源的方法如下：

4）ol.source.ImageWMS

WMS数据源，每次地图拖曳或缩放都会根据当前视图重新请求数据，配置参数如表3-10所示。

创建一个ImageWMS数据源的方法如下：

5）ol.source.ImageStatic

静态图片资源，如常见的PNG、JPG、SVG等格式的图片。在某些版本中SVG被当成图片格式处理，使其无法无限放大。配置参数如表3-11所示。

创建一个ImageStatic数据源的方法如下：

     new ol.source.ImageStatic({
         url： /data/tem.png',//静态图片地址
         imageExtent： [11475147, 1746775, 14259949, 5133008]
     })

6）ol.source.ImageCanvas

Canvas画布数据源，通过该数据源可以使用Canvas的绘图接口显示数据或者添加动画，配置参数如表3-12所示。

创建一个ImageCanvas数据源的方法如下：

7）ol.source.Vector

矢量数据源，可以通过文件URL或Features两种方式进行创建，需要注意：通过URL方式创建需要指定文件的转换格式。配置参数如表3-13所示。

创建一个Vector数据源的方法如下：

8）ol.source.Cluster

点聚类，当点数据数量比较多且分布比较密集时，为表达分布的密集程度，通常会采用聚类的形式。Cluster通过配置聚类参数，将距离较近的点聚类到一个点上，配置参数如表3-14所示。

创建一个Cluster数据源的方法如下：

9）ol.source.VectorTile

矢量数据切片数据源，配置参数如表3-15所示。

创建一个VectorTile数据应用的方法如下：

     new ol.source.VectorTile({
         format： new ol.format.MVT(),
         url： '{z}/{x}/{y}.pbf'
     })

4．Layer

在OpenLayers中，Layer用于进行地图数据的显示。通过它可以进行地图数据的展示、筛选等操作。OpenLayers提供了多种类型的Layer类，例如VectorLayer、TileLayer、ImageLayer、XYZLayer等。不同的Layer类有不同的属性和方法，可以根据需要进行配置和扩展。在创建Layer时，需要指定图层的数据源。Layer可以使用不同的数据源来定义，例如GeoJSON、WMS、XYZ等。

可以通过OpenLayers的API方法添加、删除、显示或隐藏Layer，需要注意的是，在使用Layer时需要考虑到数据的性质和规模，以及用户体验和性能方面的问题。可以根据需要对Layer进行优化和调整，例如使用瓦片数据来提高性能、使用渐进式加载来提高用户体验等。

在OpenLayers中，数据源最终都会以图层的方式呈现出来，一个数据源可以被多次使用形成不同的图层并以不同的样式展示。OpenLayers中图层和图层类之间、图层和数据源之间的关系如图3-4所示。

1）ol.layer.Tile

切片图层，数据源为XYZ、WMTS、TileWMS等，初始化配置参数如表3-16所示。

创建一个Tile图层的方法如下：

     new ol.layer.Tile({
         source： new ol.source.XYZ({
              url：'x={x}&y={y}&z={z}'
         })
     })

2）ol.layer.Image

图片图层，如WMS、静态图片等。初始化配置参数如表3-17所示。

创建一个Image图层的方法如下：

     new ol.layer.Image({
         source： imageSource
     })

3）ol.layer.Vector

矢量图层，指将矢量数据源在客户端的渲染，初始化配置参数如表3-18所示。

说明：在创建Vector图层时，如果使用StyleFunction定义样式，则StyleFunction会接收一个feature参数。如下代码所示，StyleFunction中通过判断不同的feature类型，为图层设置不同的颜色。

5．Controls

在OpenLayers中，Control是一种用于创建地图控件的类。OpenLayers提供了多种类型的控件，例如ZoomControl（缩放控件）、ScaleLineControl（比例尺控件）、MousePositionControl（鼠标位置控件）、FullScreenControl（全屏控件）等。每种控件类都具有不同的属性和方法，可以根据需要进行配置和扩展。

Control作为OpenLayers中的一个类，在创建Control时需要指定控件的属性。可以使用简单的HTML标签来定义Control，也可以使用JavaScript对象来定义。

使用Control可以增强地图的交互性和易用性，使用户能够更方便地使用地图功能。需要注意的是，在使用Control时需要考虑到不同控件之间的布局和位置关系，以及用户体验和可用性方面的问题。OpenLayers中默认的控件有9种，如图3-5所示。

1）ol.control.defaults

地图默认控件，包含ol.control.Zoom、ol.control.Rotate、ol.control.Attribution。其配置参数如表3-19所示。

修改默认控件的方法如下，本例中将属性控件、缩放控件、旋转控件设置为不可用。

     ol.control.defaults({
         attribution： false,
         zoom： false,
         rotate： false
     })

2）ol.control.MousePosition

鼠标移动位置控件，其配置参数如表3-20所示。

创建一个鼠标位置控件的示例代码如下：

3）ol.control.OverviewMap

鹰眼图控件，其配置参数如表3-21所示。

创建一个鹰眼图控件的代码，如new ol.control.OverviewMap( )。

4）ol.control.ScaleLine

比例尺控件，因地图投影后纬度方向变形较大，所以比例尺控件采用Y轴方向计算其比例尺。ol.control.ScaleLine的配置参数如表3-22所示。

创建一个比例尺控件的代码，如new ol.control.ScaleLine({})。

6．Interactions

Interactions类是用于实现地图交互的类，它提供一些方法和事件，可以响应用户的操作。OpenLayers中的交互包括默认交互和矢量交互，默认交互是OpenLayers框架默认添加的交互，包括DragRotate（拖曳旋转）、DoubleClickZoom（双击放大）、DragPan（拖曳漫游）、PinchRotate（双指旋转）、PinchZoom（双指缩放）、KeyboardPan（键盘漫游）、KeyboardZoom（键盘缩放）、MouseWheelZoom（鼠标滚轮缩放）、DragZoom（拖曳缩放），矢量交互包括Select（选择）、Draw（绘制）、Modify（修改）、Snap（捕捉）。Interactions的类别如图3-6所示，后面标记了√的是默认交互。

1）ol.interaction.defaults

地图默认交互的顺序是固定的（图3-6所示的顺序），初始化一个地图，会自动添加默认交互。如果想改变顺序，则需要在创建地图前排好序，并设置对应的地图初始化参数。一些场景中还可以使用如下方法激活或禁用交互，下列方法是禁用双击放大地图的交互功能。

2）ol.interaction.Select

矢量选择交互是一种用于选择地图要素的交互方法，可以通过鼠标或触屏单击操作，选择地图上的点、线、面等矢量要素。默认情况下，选中要素后，样式会发生变化。通过此交互，可以实现选中要素高亮等效果，使得要素选中变得更加明显。其配置参数如表3-23所示。

其常用方法如表3-24所示。

创建一个Select交互的方法如下：

3）ol.interaction.Draw

矢量图层绘制交互，一种用于绘制地图要素的交互方式，可以通过鼠标或触屏单击操作，绘制地图上的点、线、面等要素。常用配置参数如表3-25所示。

其常用方法如表3-26所示。

创建一个绘制交互的示例代码如下：

4）ol.interaction.Modify

矢量图形编辑交互，通过Modify可以修改地图上已经添加或绘制的要素，一般与Select交互配合使用。常用配置参数如表3-27所示。

创建一个编辑交互的示例代码如下：

7．Overlay

Overlay用于在地图上添加覆盖层，可以是任何HTML元素，例如弹出窗口、菜单、文本标签等。使用Overlay可以轻松实现一些常见的用户交互功能，使用户与地图交互时获得更多的信息和更好的体验。

Overlay作为OpenLayers中的一个类，在创建Overlay时需要指定一个DOM元素作为其内容，并可以设置Overlay的位置、大小、偏移量等属性。Overlay可以在地图上的任何位置显示，并且会随着地图的缩放和平移而移动。

Overlay的常用配置参数及说明如表3-28所示。

表3-29为Overlay的常用方法。

创建一个Overlay的示例代码如下：

8．Style

Style可以控制要素的颜色、大小、边框、填充、透明度等属性，从而使地图上的要素具有不同的外观和视觉效果，使用户能够更清楚地理解地图数据。

OpenLayers提供了多种类型的Style类，例如CircleStyle、IconStyle、StrokeStyle、FillStyle、TextStyle等。Style作为OpenLayers中的一个类，在创建时需要指定要素的类型，具体如下。

（1）image：点样式，一般为一个图标或带颜色的填充图形。

（2）stroke：边框样式，线的样式、多边形的边框样式等通过它来设置。

（3）fill：填充样式，多边形的填充样式通过它来设置。

（4）text：文本标注样式。

Style的常用参数配置及说明如表3-30所示。

小技巧： 通过styleFunction可以实现很多比较复杂的样式，其返回值可以是一个Style对象，也可以是一个Style数组。下面的代码演示了styleFunction返回数组，并展示线的节点，实现效果如图3-7所示。

1）ol.style.Fill

填充样式，其配置参数如表3-31所示。

2）ol.style.Image

基础类，包括ol.style.Icon、ol.style.Circle、ol.style.RegularShape。

3）ol.style.Icon

图标样式，其配置参数如表3-32所示。

4）ol.style.RegularShape

如设置了radius参数，则为规则多边形，如设置了radius1和radius2则为星形，其配置参数如表3-33所示。

5）ol.style.Circle

圆形样式，其参数如表3-34所示。

6）ol.style.Stroke

边框样式，其配置参数如表3-35所示。

7）ol.style.Text

文本样式，其配置参数如表3-36所示。

9．Projection

Projection可以进行不同坐标系之间转换和投影变换，使地图数据正确地显示在地图上。OpenLayers中支持多种常见的地图投影方式，如Web墨卡托、EPSG:4326等。每种投影方式都具有不同的坐标系和参数，可以使用EPSG代码、Proj4字符串或自定义参数来定义Projection。需要注意的是，在使用Projection时需要确保地图数据和投影方式的一致性，否则地图数据可能会显示不正确或者产生偏差。

1）Proj方法

OpenLayers中Proj提供了坐标定义或坐标转换等方法，常用方法与参数如表3-37所示。

2）ol.proj.Projection

定义投影，其配置参数与说明如表3-38所示。

使用Projection定义投影的示例代码如下： aWbBwWWY0Aag/tsMTv6qE5TdTYCpcZJ12uTQBZpuh2DXHifIxdgsMdiYCm7b5Q0E