Web GiS之 OpenLayes 笔记

笔记来自:

代码示例

1.常见的开源WebGIS平台

2.框架结构

3.常见的坐标系统

4.比例尺

• 简单来讲，地图都是对现实世界的抽象缩小，比例尺代表了抽象的程度。
• 比例尺越小,抽象程度越高，表达的地物就少而简单:比例尺越大,抽象程度越低，表达的地物就越详细。
• 如图所示，同一个湖泊在较大比例尺地图上以面来表示，可以看到湖泊的轮廓，而在较小比例尺地图上就只是以线来表示。
• 这个对地物进行抽象的过程存在于数据采集这个环节，对于采集到的数据，在软件中我们是可以实现比例尺的无极缩放的，这时候改变的就不再是抽象程度,而是显示的地理范围了。

5.GiS矢量,栅格数据

• 如图所示，同样信息的表达，在左边的矢量数据中，我们看到的是清晰的点、线、面的实体，来表达河流、湖泊、地块这样的信息;
• 而右边的栅格数据中我们看到的则是一个个格子，相同的像元值在地图上展示出相同的颜色，从而也呈现出河流、湖泊、地块的形态。
• 虽然都能表达出一样的信息，但是这两种存储模型是完全不同的
• 矢量是以对象为单位，我们可以把一个湖泊的面积等属性都存储在该对象中;
• 而用栅格表达，湖泊则是由一组像元组成，我们不可能将整个湖泊的面积分别赋予每个像元。
• 实际应用中，大部分地图数据为矢量数据，遥感影像为栅格数据。
  

6.矢量地图和瓦片地图

矢量地图

• 何为矢量地图?矢量地图通常指采用矢量数据模型存储的矢量数据组织的地图。
• 矢 量地图加载是根据客户端请求的地图范围实时从服务器的地图数据库取图
• 实时生成请求范 围对应的地图，返回给客户端一张地图图片
• 其中，遥感影像与矢量地图采用同样的出图机 制和方法，如图所示。
  

瓦片地图

• 何为瓦片?瓦片即网格中有多个类似瓦片的图片集。

• 瓦片数据是将矢量或影像数据进行预处理，采用高效的缓存机制（如金字塔）形成的缓存图片集，采用“级、行、列”方式进行组织，可在网页中快速加载。

• 因此，瓦片地图加载是根据客户端请求的地图范围和级别，通过计算行列号获取对应级别下网格的瓦片(即服务器预裁剪的图片)，由这些瓦片集在客户端形成一张地图

• 如图所示
  

• 矢量地图是真正用点线面画出来的地图

• 瓦片地图则是一些已经准备好的图片

7.地理要素

• 在客观世界中存在着许多复杂的地物、现象和事件。
• 它们可能是有形的，如山脉、水系河道、水利设施、土木建筑、港口海岸、道路网系、城市分布、资源分布等；
• 也可能是无形的，如气压分布、流域污染程度、环境变迁等。
• 对地球表面上一定上一定时间内分布的复杂地物、现象和事件的空间位置以及它们相互的空间关系进行抽象简化表达的结果，称为地理要素或地理空间实体。
• 地理要素有一个典型的特征即空间特征，就是地理要素肯定存在于地理空间的某个位置，具有一定的空间形状、空间分布以及彼此之间的相互空间关系。
• 从地理要素的定义上不难发现，空间位置特征、属性特征、空间关系特征和时间特征是地理要素的四个基本特征。

8.GiS坐标转换

• 在WebGIS开发中，通常会涉及逻辑坐标与窗口坐标的转换。
• 逻辑坐标与窗口坐标的转换也是一个非常关键的步骤，要明白两者的含义。地图发布到Web 上，涉及地理空间位置在网页容器中的表示。
• 逻辑坐标指实际的地理坐标，即数据坐标系，表示真实的地理空间位置:
• 窗口坐标指Web网页中地图逻辑坐标对应的屏幕坐标，是根据网页中地图容器布局(大小与位置)，将地图逻辑坐标进行转换得到的。
• 当在客户端实现图形交互绘制、地图查询、编辑等功能时,鼠标交互获取到的是窗口坐标，通常要将其转换为对应的逻辑坐标，进而实现具体功能。
• 数据坐标到窗口坐标的映射可以看成现实世界中的景物在PC浏览器窗口中的显示。
  窗口坐标系与数据坐标系存在比例关系，这个比例关系可以理解为数据坐标系中单位长度与窗口坐标系中的长度的投影
  如图所示,如果窗口坐标系的原点是数据坐标系中Q点的投影，那么,位于数据坐标系中的一个坐标点时，它们之间存在以下换算关系。
  • x’=(x-Xo)×r
  • y=(y-Yo)×r
  • 其中，r是窗口坐标系中的单位长度与数据坐标系中对应的实际长度之比，类似于地图比例尺。
    

9.OpenLayers框架结构

• 上面我们初步了解了OpenLayers是什么、能做什么、有什么意义,接下来通过OpenLayers3的框架体系，进一步了解和认识OpenLayers 3。
• MetaCarta公司设计OpenLayers的目的，就是为了能够在客户端更好地展现和操作地图。
• OpenLayers 将抽象事物具体化为类，其核心类是Map、Layer、Source、View，几乎所有的动作都围绕这几个核心类展开，以实现地图加载和相关操作。
• OpenLayers3的体系架构示意图如图所示。
• 由OpenLayers 3的体系架构示意图可见:
  • 整个地图看作一个容器(Map),核心为地图图层(Layer),对应图层的数据源(Source)与矢量图层样式(Style)、地图表现相关的地图(View)
  • 除此之外容器中还有一些特别的层和控件（如地图交互操作控件)，以及绑定在Map和 Layer 上的一系列待请求的事件。
  • 底层是OpenLayers 的数据源，即 Image、GML、KML、JSON、OGC服务资源等，均为 source与 format 命名空间下的子类，这些数据经过Renderer渲染，显示在地图容器中的图层Layer上。
  • 其中，地图容器（Map）与图层(Layer)的渲染，提供了Canvas、DOM、 WebGL三种渲染类型，分别由 ol.renderer.Map 与ol.renderer.Layer实现。
    

10.GiS数据结构

• 我们来了解OpenLayers 3 的空间要素数据结构与组织。从表现形态上看，地理空间数据的矢量数据由点、线、面三类要素构成。
• 将这些要素对应到Web客户端表现，需要抽象为相应的类,包括它们之间的关系。
• 在OpenLayers 3中,空间矢量数据的抽象模拟主要由ol.geom.Geometry抽象基类下的几何对象子类实现。
• 图中表现了Geometry基类及其子类的继承关系。
  
• 从图可见，OpenLayers 3的Geometry类重构后与之前版本有较大变动。
• 几何对象类
  • 即 Point 与MultiPoint(点与多点)
  • LineString 与 MultiLineString(线与多线)
  • Polygon与MultiPolygon(区与多区)
  • LinearRing (线性环)
  • Circle(圆)
  • 均继承于SimpleGeometry抽象类，SimpleGeometry 与GeometryCollection则继承于Geometry抽象基类。
  • 其中，LinearRing只能作为区几何组成部分使用，GeometryCollection则为Gcometry对象集合。
  • 在组织矢量要素时，通过Feature类 (ol.Feature)来实现，或者通过ol.Collection即 (Feature集合)组织为要素集合。
• 上述为矢量数据的基本结构与组织原理，这是GIS的基础。基于客户端的数据组织与渲染机制，将矢量数据渲染为矢量地图，在客户端显示。

11.数据(source)与图层(layer)

• 地图数据根据数据源( Source）可分为Image、Tile、Vector三大类型的数据源类

• 对应设置到地图图层(Layer）的 Image、Tile、Vector三大类别的图层中

• 如图所示，其中，矢量图层Vector通过样式( Style)来设置矢量要素渲染的方式和外观。
  

• ol.source. Vector是矢量数据源基类，为矢量图层提供具体的数据来源，包括直接组织或读取的矢量数据（Featrues)、远程数据源的矢量数据(即通过url设置数据源路径)等。

• 若是url设置的矢量数据源，则通过解析器Format(即ol.format.Feature的子类)来解析各类矢量数据

• 如XML. Text、JsON. GML、KML、GPS、WFS、WKT、GeoJSON等地图数据。

• 从上述OpenLayers 3的空间数据组织可知,地图数据的数据源可分为Image、Tile、Vector三大类型

• 其中，Image为图片数据源，Tile为瓦片数据源，两者本质基本相同，均为图片或图片集。

• Vector类型则为矢量数据源，由其 format属性设置解析数据类型

• GML数据解析为例

  • 其实现原理为:先通过接口调用得到GML格式的文本数据
  • 然后通过ol.format.GML的读写方法来解析这个文本数据，读取得到及其几何对象(Geometry)等
  • 最后结合样式(Style)通过相应的渲染器在客户端绘制渲染出来。不管是什么格式的数据，都能解析得到基本的Point、LineString 之类的Geometry对象然后就可以进行客户端渲染，也就是我们在地图上看到的那些内容。

12.数据渲染(加载css)

• 基于OpenLaycrs的地图应用整个表现过程为:
  • 先通过URL（服务地址/文件路径)获取数据
  • 然后用各种格式的解析器解析数据
  • 再用所谓的渲染器在图层中进行渲染
  • 最后结合相应的控件表现出来，成为一幅我们看到的==“动态”地图==。
    
• 图像和瓦片数据Web 客户端仅仅是图片,不包含其他的几何信息和属性信息，均通过HTML中的img标签显示，即通过数据源对应的图像渲染器进行渲染。
• 瓦片数据是将矢量或影像裁剪得到的多个图片集，渲染时需要根据级别、行列号获取对应图片，在 Web客户端以网格方式组织每级的瓦片地图进行渲染。

13.Map容器的创建组成

• 对于地图(Map)的渲染,必须由一个或多个图层 (Layers&Sources),一个地图视图( view)以及一个目标容(DIv层)实现
• 即在创建一个Map实例时必须设置其图层(（Layers)、视图(View)与目标容器(Target)，这也是地图显示必备的三要素
• Map函数声明格式为:ol.Map(options)。
• 例如，在 HTML页面的body中创建一个ID为“ map”的DIV层,定义一个Map对象的代码如下。
  
• 瓦片图层如下:
  

在Viewport容器里，分别创建了如下三个关键的内容层，分别渲染呈现地图容器中的内容。

• (1）地图渲染层:根据图层渲染方式创建DOM或者Canvas元素，地图本身通过此容器进行渲染呈现。例如，基于canvas方式渲染，对应创建canvas元素。

• (2）内容叠加层: 如:class为 ol-overlayContainer的 DIV层元素，装载叠加层（ol.Overlay)内容，如在地图上添加的图片、标注等。

• (3）地图控件层:如:class为ol-overlayContainer-StopEvent的DIV层元素,装载显示地图控件或叠加内容。例如，在该层里创建默认加载的三个地图控件元素。

14.Map与Layer的关系

Map作为地图容器，可以加载各种数据格式的图层。

• 地图容器中加载的图层（Layers）按其加载的先后顺序进行呈现，即按顺序分层叠加显示
• 如图所示。这些Layers或以图层数组方式存储，或通过ol.Collection 以图层组(layerGroup)方式存储。
  
• 其中，对于地图控件、叠加层内容的显示，可以通过设置对应界面元素(即 HTML元素)的z_index值，在地图上以z_index值为序进行叠加显示(调整窗口图层的优先级)

15.事件机制

• 地图移动结束事件（ moveend)、地图框架渲染事件（ postrender)。
• 地图浏览器事件类(ol.MapBrowserEvent)继承于ol.MapEvent类，是控制整个地图交互的核心提供外部设备（如鼠标、触摸屏）与地图交互的主要事件类型。
• 如单击(singleclick . click )、双击（dbclick)、指针移动(pointermove)、==指针拖拽（pointerdrag)==等
  

16.OpenLayers API概述

核心类与组件

OpenLayers API官网

• (1) Map（ol.Map):地图容器，核心部分，可加载各类地图与功能控件，用于渲染显示动态地图。
• (2) View (ol.View):地图视图，控制地图缩放等基本交互、地图投影坐标系、地图中心点、分辨率、旋转角度等。
• (3) Layers（ol.Layer.Base)：图层，包含多个调用数据的子类，由其子类实例加载地图数据，必须结合图层数据源（Sources）匹配使用。
• (4) Sources (ol.source.Source):图层数据源，与图层子类对应，由数据源的实例来加载各种类型的地图数据。
• (5) Format (ol.format.Feature):数据解析类，此类用于读/写各种格式的数据，创建了多种格式的子类，即数据解析器。目前支持多种数据格式，如 GeoJSON、GML、XML、WKT.WFS等。
• (6) Geometry (ol.geom.Geometry);地理空间对象的几何实体，由其子类（如 Point.LineString、Polygon）的实例构成了我们所看到的矢量地图
• (7) Feature （ol. Feature):地图要素，可看成矢量地图的组成单元，是地图中的主要部分，点、线、面等几何实体均可组织为地图要素，配合要素的样式渲染到客户端的地图上。
• (8) Overlay( ol.Overlay):叠加层,即叠加到地图上显示的要素，关联自定义的一个 HTML元素，由一个单一的地图坐标点确定叠加位置。与控件（Control）类似，但不同的是叠加元素不是在一个固定的屏幕位置上，而是通过关联一个地图逻辑坐标点跟随地图移动，如标注点、popup 等。
• (9) Controls (ol.control.Control):即通常所说的控件类，提供各种各样的地图功能控件，如地图缩放控件（Zoom)、鼠标位置控件（MousePosition)、鹰眼（OverViewMap)、比例尺(ScaleLine）等。
• (10) Interaction (ol.interaction.Interaction):地图交互控件类。地图交互一般用鼠标与键
  盘操作去操控，因此Interaction子类为基于鼠标与键盘操控的地图交互功能控件，如选择要素控件(Select)、键盘缩放地图控件（KeyboardZoom)、鼠标控件基类(Pointer)下的绘制控件（Draw)、修改控件（Modify)、拖放平移地图控件（DragPan）等。
• (11) Style(ol.style.Style):样式类，通过其子类实例来渲染矢量要素的样式，包括填充样式（Fill)、边界样式(Stroke)、图标样式(Image与 Icon)、文字样式（Text)等。
• (12 ) Projections( ol.pro.Projection):地图投影定义类，包括EPSG:4326( ol.proj.EPSG4326）与EPSG:3857 (ol.proj.EPSG3857）的定义，在地图视图(View)中可以设置地图的投影坐标系，也可以通过ol.proj提供的方法进行投影变换。
• (13) Renderer ( ol.renderer.Renderer):渲染器。支持 Canvas、DOM、WebGL三种渲染方式。可通过设置 Map 的renderer属性设定地图渲染方式。

各类事件

• (1)MapEvent（ol. MapEvent):地图事件类，继承自goog.events.Event、oli.MapEvent,其子类为ol.MapBrowserEvent，可查看ol.Map中有哪些事件触发了地图事件，如单击(click),双击（ dblclick)、鼠标拖拽（ pointerdrag)、鼠标移动(pointermove)、==单次点击（singleclick)==等事件触发地图浏览器事件（ol.MapBrowserEvent)，而移动结束(moveend）事件等则触发地图事件。
• ( 2）ObjectEvent ( oL.ObjectEvent ) : ol.Object的事件，继承自 goog.events.Event .oli.ObjectEvent，提供属性变更事件（Propertychange)，当属性发生变更时触发此事件。
• (3）另外，还有地图交互绘制事件（ ol.interaction.DrawEvent )、交互选择事件(ol.SelectEvent)、集合事件（oL.CollectionEvent)、地图渲染事件(ol.render.Event )等，具体说明可查看OpenLayers 3的API。

其他组件

• (1) ol.Tile:瓦片基类,提供 getTileCoord方法获取瓦片的坐标信息，其子类(ol.ImageTile)还提供 getImage方法获取瓦片的HTML 图像元素。
• (2) ol.Image:图像类，继承于ol.ImageBase，提供 getImage方法获取 HTML图像元素(可能是一个Canvas、Image、Video）。
• (3 ) ol.Collection:集合类，扩展的JS数组，提供针对集合操作的简便方法, add与remove都将引发集合变更事件。
• (4) ol.DeviceOrientation:设备定位，提供了从 DeviceOrientation事件访问相应信息的方法，可以通过HTML 5 DeviceOrientation了解更多规范细节。现在很多新的电脑、平板、手机等都提供了硬件支持设备定位，可以实现移动端导航定位功能。
• (5) ol.Geolocation:地理位置，提供 HTML5地理定位功能的辅助类，提供接口实现导航定位功能。
• (6) ol.Graticule:网格标线,在地图上绘制坐标系的网格。

17.创建一个openlayer的html

• 创建一个HTML 网页，在网页的<head>标签中引入== ol.js 与 ol.css==。
• 在网页的<body>中新建一个div 作为地图容器,设置其id为“map”，并通过CSS设置此容器的样式。
• 编写代码，实现一个可加载OSM地图的功能示例。
  
  

代码说明

• OpenLayers 3初始化一幅地图( map）时，至少需要一个可视区域(view),一个或多个图层(layer)，和一个地图加载的目标HTML标签( target)。

• 因此，在上述代码中，分别通过target、layers、view参数设置加载地图必备的瓦片图层、地图视图和地图加政的目标HTML标签。这是一种最简单的静态加载地图的方法。

  • (1) ol.Map:地图容器类，是OpenLayers 的核心部件，用于显示地图，可以加载各种类型的图层，加载地图控件（如缩放、比例尺、鹰眼等)，以及与地图交互的功能控件等。通过实例化地图容器对象来加载地图，并对target、layers、view参数进行设置，这也是地图加载的必备三要素。
  • (2) ol.layer.Tile:瓦片图层类，主要用于加载瓦片图（即根据显示级别对各级进行切片后的地图)。通过实例化瓦片图层对象，绑定其数据源(source）加载对应的瓦片地图。
  • (3) ol.source.OSM:封装的OpenStreetMap在线瓦片服务数据的数据源类，创建此数据源对象并加载到瓦片图层中。
  • (4) ol.View:地图视图类，主要是控制地图与人的交互，如缩放、调整分辨率及旋转地图等。通过实例化地图视图对象，设置地图的中心点(center)、==初始显示级数（zoom)==等参数。

• 除了提供 layers参数来设置图层，Map还提供了addLayer方法动态加载图层对象，使得地图数据的加载显示更为灵活。

• 例如，通过调用addLayer方法加载OSM瓦片图层的关键代码如下。
  

在OpenLayers 的地图容器内，通过ol.control.defaults默认加载了3个常用控件:

• 缩放控件（ ol.control.Zoom )

• 旋转控件( ol.control.Rotate )

• 图层数据源属性控件(ol.control.Attribution)

• 因此在默认情况下，可通过鼠标或地图容器左上角的缩放按钮控制地图的缩放，也可通过右下角的图层数据源属性控件展开或折叠具体的数据源信息。

18.导航控件(缩放,定位)

• 导航条的主要功能是实现地图的按级缩放，拖动导航条上的滑块可实现缩放操作
• 向上拖动为放大地图，向下拖动为缩小地图。

OpenLayers 框架提供的控制地图缩放的相关控件包括:

• 地图缩放控件（ol.control.Zoom)、
• 缩放滑块(ol.control.ZoomSlider)、
• 按钮式缩放到特定范围的控件(ol.control.ZoomToExtent)。
• 用户可以自定义这些控件的样式,使用起来非常灵活，因此，可以将地图缩放控件（oL.control.Zoom)与缩放滑块（ol.control.ZoomSlider)）结合应用，实现最为常见的地图导航条功能。
  
• 在加载地图之后，分别初始化 ZoomSlider、ZoomToExtent 控件(new)，并通过Map的addControl方法将其加载到地图容器中。
• 其中，ZoomToExtent 控件设置的地图范围大概为北京(坐标)，单击此控件按钮可以将当前地图缩放到已设置的地图范围。

//实例化zoomslider控件并加载到地图容器中
var zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);
//实例化zoomToExtent控件并加载到地图容器中
var zoomToExtent = new ol.control.ZoomToExtent
extent:[
	13100000, 4290000,
	13200000, 5210000
	]
});
map.addControl(zoomToExtent);

• 代码说明:地图控件加载非常简单，即实例化控件对象，调用Map的 addControl方法加载到地图容器中即可。
• 上述 ZoomToExtent控件设置了extent参数,此参数为地图的缩放范围,即将当前地图缩放到此范围，在视图域中会显示此范围内的地图。

19.对地图的基本操作(缩放,复位),代码实现

• 在地图容器的div层中分别新建4个按钮(button)，设置按钮的id值，并通过CSS设置这些功能按钮的样式。

• 为这些按钮添加相应的单击函数，在函数中调用OpenLayer 3中操控地图视图的相应方法，分别实现单击放大、单击缩小、移动到某一位置及复位的功能。

• 按钮div(四个按钮)

• ol.Map(最初始的Map)
  
  

• 拿到初始Map的View数据(大概就是复位的时候用的数据)
  

• 点击缩小
  

• 点击放大
  

• 平移(定位到xx)
  
  
  

• 复位
  

  • 开始时获取的view参数

• 代码说明:OpenLayer 的地图缩放、平移、旋转等基本操作，都是通过地图视图View进行控制的，并且是通过调用地图视图相应set方法实现的。

• 在具体实现时，需要先通过Map 的 getView()获取当前地图的视图对象，进而使用此视图对象调用其get方法来获取当前的缩放级数（zoom）、中心点（center）、旋转角度（rotaticion）等参数。

  • 1．缩放地图
    • 缩放地图是通过 View的setZoom方法实现的,缩放的级数由setZoom方法的参数进行设置。
    • 首先通过 view.getZoom()获得当前地图的级数，然后调用setZoom方法进行缩放。
    • 即view.setZoom(zoom - l)可将地图缩小一级，通过view.setZoom(zoom+1)可将地图放大一级。
  • 2．移动地图
    • 移动地图其本质就是改变当前地图的中心点，可通过地图视图的setCenter方法实现。
    • 首先通过Map对象获得当前地图的视图对象，然后调用其setCenter即可
    • 此方法的参数就是地图中心的坐标点（ol.Coordinate)。

20.创建一个列表窗口,可以选择图层

• 窗口div,<li>标签从Map中获取动态添加
  
• 获取Map的所有图层和每个图层的name,用数组存储
  
• 一个封装的方法loadLayersControl(后面有调用),用来处理将Map数据加到列表窗口中
  
  
• setInnerText():方法在后面有定义:将name设置到label标签上(后边label写成lable了不要介意)
  
  
• Map和调用函数loadLayersContrl()
  
  

代码说明:

• (1）创建地图容器对象map，分别加载4个图层:OSM瓦片、MapQuest影像、JSON 与KML格式的矢量图。在初始化这些瓦片或矢量图层时，新增了一个name属性，用于标识当前图层的数据内容，即图层名称。
• (2）封装了一个加载图层列表的功能函数 loadLayersControl，其两个参数 map与id分别为地图容器对象、图层列表容器id(ul的id不是div的id)。
  • 此功能函数主要包括以下三个部分。
  • ① 调用Map的 getLayers方法获取当前地图容器中加载的所有图层(存入图层数组layer中)。
  • ② 遍历这些图层，通过图层对象调用get(‘name’)得到图层名（存入图层名称数组layerName)，调用getVisible()得到图层的可见属性（存入图层可见属性数组layerVisibility)。
  • ③ 分别新增li元素，用来承载图层项，在li中创建复选框( checkbox)控制图层显示，创建label元素显示图层名称。其中，通过 addChangeEvent方法为checkbox元素绑定变更事件，在事件实现中通过Layer 的 setVisible万法控制图层显示，即复选框选中显示图层,否则隐藏对应图层。
• (3）在初始化显示地图后，调用封装的loadLayersControl函数，动态加载图层列表。

21.鼠标位置控件:显示鼠标位置坐标

• div
  
• Map
  
  
• 鼠标位置控件.createStringXY():下面贴出了API
  
  

主要参数

• (1) coordinateFormat:坐标值的显示格式。
• (2) projection:投影坐标系，将当前鼠标位置的坐标点设置为当前坐标系下的相应值进行显示。
• (3 ) target:关联显示其坐标点信息的目标容器，即最外层容器元素，此示例中为新创建的id为mouse-position的 div元素。
• (4) className:坐标信息采用的显示样式的类名即坐标值文本的样式类名。此示例中新定义的样式类名为custom-mouse-position。

22.地图比例尺:scaleLine

• Map
  
  
• 比例尺控件

代码说明:

• 实例化比例尺控件（ol.control.ScaleLine)，可以使用默认设置，也可以根据应用需求设置此控件的相关参数。
• 例如，在本示例中设置比例尺的单位units为metric，即米制度量单位。

23.地图鹰眼:OverviewMap

• Map
• 鹰眼控件

代码说明

• (1) layers:鹰眼容器内加载的图层，鹰眼容器与地图容器类似，可以根据需要加载不同于主图的图层数据，但要确保主图与鹰眼的略缩图在同一坐标系下。
• (2）collapseLabel:将鹰眼控件展开时功能按钮上的标识。
• (3）label:鹰眼控件折叠时功能按钮上的标识，与collapseLabel相对。
• (4) collapsed:鹰眼控件初始加载时是否展开显示，本示例设置其初始时为展开显示状态。
• (5) className:为鹰眼控件的类名，根据此类名来定义整个鹰眼控件的样式，此示例中新定义的样式类名为ol-overviewmap ol-custom-overviewmap。

24.全屏显示(fullscreen)

25.图层探查:将上层的选中的图层移除,显示下层的图层

• 当多图层叠加显示时，顶层图层会遮盖下层图层。

• 图层探查的作用:就是方便查看位于下层的图层数据，辅助进行功能操作或分析，是一款非常实用的工具。

• 图层探查的原理:就是在客户端裁剪上层图层，将上层图层挖掉一部分，让下层图层数据可见。

• Map
  
  

• 地图数据资源
  
  

• 通过up,down控制裁剪的大小范围
  

  • render():相当于启动Map,将Map加载==start开始
  • 鼠标移动触发事件:

• event.originalEvent属性。该方法的作用是指向原始的事件对象。

• 裁剪:下面会有一些方法的解释
  

• save() 保存当前环境的状态。

• beginPath() 起始一条路径，或重置当前路径。

• arc() 创建弧/曲线（用于创建圆形或部分圆）。

• lineWidth 设置或返回当前的线条宽度。

• stroke() 绘制已定义的路径。

• clip() 从原始画布剪切任意形状和尺寸的区域。

• HTML canvas arc() 方法:

  • 画一个圆的步骤

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

• arc() 方法创建弧/曲线（用于创建圆或部分圆）。

• 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

参数	描述<