文章目录

  • 笔记来自:
  • 代码示例
  • 1.常见的开源WebGIS平台
  • 2.框架结构
  • 3.常见的坐标系统
  • 4.比例尺
  • 5.GiS矢量,栅格数据
  • 6.矢量地图和瓦片地图
  • 7.地理要素
  • 8.GiS坐标转换
  • 9.OpenLayers框架结构
  • 10.GiS数据结构
  • 11.数据(source)与图层(layer)
  • 12.数据渲染(加载css)
  • 13.Map容器的创建组成
  • 14.Map与Layer的关系
  • 15.事件机制
  • 16.OpenLayers API概述
    • 核心类与组件
    • 各类事件
    • 其他组件
  • 17.创建一个openlayer的html
  • 18.导航控件(缩放,定位)
  • 19.对地图的基本操作(缩放,复位),代码实现
  • 20.创建一个列表窗口,可以选择图层
  • 21.鼠标位置控件:显示鼠标位置坐标
  • 22.地图比例尺:scaleLine
  • 23.地图鹰眼:OverviewMap
  • 24.全屏显示(fullscreen)
  • 25.图层探查:将上层的选中的图层移除,显示下层的图层
  • 26.动画效果
  • 27.绘制几何图形
  • 28.测量(距离,面积)
  • 29.地图加载原理
  • 30.数据加载原理
  • 31.基础地图数据:ArcGIS,MapGIS等(只需要一个url)
  • 32.新的数据格式:KML,GML.GeoJSON等
  • 33.公共地图数据:百度,bing
  • 34.多元数据叠加
  • 35.瓦片网格显示
  • 36.地图打印
  • 37.绘制点线面
  • 38.接上面的点线面图形样式编辑
  • 39.图形交互编辑:修改点线面要素
  • 40.图形信息保存到数据库
  • 41.OGC
  • 42.加载WMTS数据
  • 43.加载WMS数据
  • 44.加载WFS数据
  • 45.加载WCS数据
  • 46.OpenLayers之高级功能篇
    • 标注功能
    • 图文标注
  • 47.popup标注:popup:弹出窗口标注
  • 48.聚合标注
  • 49.动态投影
  • 50.视图联动
  • 51.定位导航
  • 52.热点图

笔记来自:

代码示例

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。

参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
  • 画完以后还原画图背景
  • restore() 返回之前保存过的路径状态和属性。(调用save的时候)

代码说明

  • 实现图层探查功能的关键是图层裁剪，将顶层图层按照一定区域(如本示例中是以鼠标的当前位置为圆心，根据半径值大小设定一个圆）裁剪。实现的核心为图层事件、画布方法的应用。

    • (1)获取鼠标位置:为地图视图添加鼠标的mousemove与mouseout事件监听，通过调用map的getEventPixel方法获取当前鼠标位置的坐标点（mousePosition)。
    • (2）图层画布裁剪:为=影像图层==（顶层图层）添加precompose事件监听
      • 在影像图层渲染前进行画布裁剪，即以当前鼠标位置mousePosition为圆心，以设定的radius为半径，设置影像图层画布区域为一个圆，然后通过其画布对象的==clip()==方法裁剪画布，将影像图层画布裁剪为一个圆的形状;
      • 同时为影像图层(顶层图层）添加 postcompose事件监听，在影像图层渲染后还原画布背景，即通过其画布对象的==restore()==还原画布(回到调用save的状态)。
    • (3）裁剪半径大小控制:为当前的document对象添加keydown事件监听，通过键盘Up与 Down按键改变裁剪圆的半径。

26.动画效果

OpenLayers 的动画效果由 ol.animation类提供，其子类为各种动画效果

  • 如:

    • 旋转动画( ol.animation.rotate)、
    • 弹性移动效果（ol.animation.pan)、
    • 反弹动画效果（ol.animation.bounce)等。
  • 可在渲染地图前设置这些动画，动画可单独使用，也可组合使用，以实现飞行、螺旋、后强等特效
  • div
  • Map
  • 城市的投影坐标
  • 动画:旋转到沈阳
   //旋转动画document.getElementById('rotate').onclick = function () {//旋转动画var rotate = ol.animation.rotate({//持续时间duration: 2000,//旋转角度rotation: -4 * Math.PI});//地图渲染前设置旋转动画效果(rotate)map.beforeRender(rotate);//定位view.setCenter(shenyang);};

ol.animation.rotate类：

  • 已经弃用(建议使用ol.View的animate方法来代替)。
  • 该类是实现一个更新视图实现旋转功能的动画过渡效果。

构造函数：ol.animation.rotate(options)

  • 参数说明：

    • options：（Object类型）可选项，设置该对象其他属性，以键值对的形式设置。

      • 【1】rotation：（number|undefined类型）可选项，设置旋转值(弧度),通常用map.getView().getRotation()设置。
        如果没有定义,那么0。
      • 【2】anchor：（ol.Coordinate|undefined类型）可选项，设置旋转中心/锚。
        如果未指定的，视图的映射围绕中心旋转。
      • 【3】start：（number|undefined类型）可选项，设置动画的开始时间。
        默认值是immediately（立即）。
      • 【4】duration：（number|undefined类型）可选项，设置动画的持续时间,以毫秒为单位。
        默认值是1000。
      • 【5】easing：（undefined|function类型）可选项，设置easing方法。可以使用ol.easing或一个自定义函数。
        默认是ol.easing.inAndOut。

  • 动画:弹性和反弹效果定位:easing和bounce后面会给出函数

     //弹性效果定位document.getElementById('elastic').onclick = function () {var pan = ol.animation.pan({duration: 2000,//松开的参数值easing: elastic,/** @type {ol.Coordinate} */source: (view.getCenter())});//地图渲染前设置动画效果(pan)map.beforeRender(pan);//定位view.setCenter(beijing);};//反弹效果定位document.getElementById('bounce').onclick = function () {//移动效果var pan = ol.animation.pan({//持续时间duration: 2000,//松开的参数值easing: bounce,/** @type {ol.Coordinate} */source: (view.getCenter())});//地图渲染前设置动画效果(pan)map.beforeRender(pan);//定位view.setCenter(shanghai);};

ol.animation.pan类：

  • 已经弃用(建议使用ol.View的animate方法来代替)。
  • 该类是实现一个更新视图实现移动功能的动画过渡效果。

构造函数：ol.animation.pan(options)

  • 参数说明：

    • options：（Object类型）可选项，设置该对象其他属性，以键值对的形式设置。

      • 【1】source：（ol.Coordinate类型）必选项，设置开始平移的位置,通常map.getView().getCenter()。
      • 【2】start：（number|undefined类型）可选项，设置动画的开始时间。
        默认值是immediately（立即）。
      • 【3】duration：（number|undefined类型）可选项，设置动画的持续时间,以毫秒为单位。
        默认值是1000。
      • 【4】easing：（undefined|function类型）可选项，设置easing方法。可以使用ol.easing或一个自定义函数。
        默认是ol.easing.inAndOut。
     //反弹值function bounce(t) {var s = 7.5625, p = 2.75, l;if (t < (1 / p)) {l = s * t * t;} else {if (t < (2 / p)) {t -= (1.5 / p);l = s * t * t + 0.75;} else {if (t < (2.5 / p)) {t -= (2.25 / p);l = s * t * t + 0.9375;} else {t -= (2.625 / p);l = s * t * t + 0.984375;}}}return l;}//弹性值function elastic(t) {return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;}

其他的动画效果

  • 自旋效果定位
     //自旋效果定位document.getElementById('spin').onclick = function () {var duration = 2000;var start = +new Date();//移动效果var pan = ol.animation.pan({duration: duration,/** @type {ol.Coordinate} */source: (view.getCenter()),start: start});//旋转效果var rotate = ol.animation.rotate({duration: duration,//旋转角度rotation: 2 * Math.PI,start: start});//地图渲染前设置动画效果(pan+rotate)map.beforeRender(pan, rotate);//定位view.setCenter(wuhan);};
  • 飞行效果定位
        //飞行效果定位document.getElementById('fly').onclick = function () {//持续时间（毫秒）var duration = 2000;var start = +new Date();//移动效果var pan = ol.animation.pan({//设置持续时间duration: duration,/** @type {ol.Coordinate} */source: (view.getCenter()),start: start});
  • 反弹效果
      //反弹效果var bounce = ol.animation.bounce({//设置持续时间duration: duration,//4倍分辨率resolution: 4 * view.getResolution(),start: start});//地图渲染前设置动画效果(pan+bounce)map.beforeRender(pan, bounce);//定位view.setCenter(guangzhou);};
  • 螺旋效果定位
         //螺旋效果定位document.getElementById('spiral').onclick = function () {//持续时间（毫秒）var duration = 2000;var start = +new Date();//移动效果var pan = ol.animation.pan({duration: duration,/** @type {ol.Coordinate} */source: (view.getCenter()),start: start});//反弹效果var bounce = ol.animation.bounce({duration: duration,//2倍分辨率resolution: 2 * view.getResolution(),start: start});//旋转效果var rotate = ol.animation.rotate({duration: duration,//旋转角度rotation: -4 * Math.PI,start: start});//地图渲染前设置动画效果(pan+bounce+rotate)map.beforeRender(pan, bounce, rotate);//定位view.setCenter(haikou);};

代码说明:

  • 结合动画效果实现定位功能的关键是先设置动画,即先调用beforeRender方法设置动画效果，其参数为实例化的动画对象。

    • (1）ol.animation.rotate:旋转动画效果，以地图中心为中心点顺时针旋转，duration为动画持续时间（毫秒)，rotation为旋转的角度，start为开始时间。
    • (2) ol.animation.pan:弹性移动动画效果,可实现基于基准点上下弹性移动的效果, duration为动画持续时间（毫秒)，easing为动画效果释放的参数值，source为弹性移动的基准点(设为地图中心点)，start为开始时间。
    • (3) ol.animation.bounce:反弹动画效果，即实现地图从设定的分辨率缩放到当前地图分辨率的动画特效，duration为动画持续时间（毫秒)，resolution为地图分辨率，start 为开始时间。

27.绘制几何图形

  <div><select id="type"><option value="None">无</option><option value="Point" selected="selected">点</option><option value="LineString">线</option><option value="Polygon">多边形</option><option value="Circle">圆</option><option value="Square">正方形</option><option value="Box">长方形</option></select></div><div id="mapCon"></div>
  • Map:layers
          //实例化一个矢量图层Vector作为绘制层var source = new ol.source.Vector({ wrapX: false });var vector = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 0.2)'}),stroke: new ol.style.Stroke({color: '#ffcc33',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#ffcc33'})})})});//将绘制层添加到地图容器中map.addLayer(vector);
  • 更改绘制类型(正方形改圆形)
         /*** 用户更改绘制类型触发的事件.* @param {Event} e 更改事件*/typeSelect.onchange = function (e) {//移除绘制图形map.removeInteraction(draw);//添加交互绘制功能控件addInteraction();};//添加交互绘制功能控件addInteraction();

代码说明:

  • 在本示例中，加载一个矢量图层绘制层vector，在实例化此图层对象时统一设置了绘制的几何图形样式;然后通过调用 addInteraction函数加载交互绘制图形控件

  • addInteraction函数


  • coordinate有五个点,最后一个点是结束的位置,就是与开始位置重叠,完整闭合状态

      //根据绘制类型进行交互绘制图形处理function addInteraction() {//绘制类型var value = typeSelect.value;if (value !== 'None') {if (source == null) {source = new ol.source.Vector({ wrapX: false });//添加绘制层数据源vector.setSource(source);}var geometryFunction, maxPoints;if (value === 'Square') {value = 'Circle';//正方形图形（圆）geometryFunction = ol.interaction.Draw.createRegularPolygon(4);}else if (value === 'Box') {value = 'LineString';maxPoints = 2;geometryFunction = function (coordinates, geometry) {if (!geometry) {//多边形geometry = new ol.geom.Polygon(null);}var start = coordinates[0];var end = coordinates[1];geometry.setCoordinates([[start, [start[0], end[1]], end, [end[0], start[1]], start]]);return geometry;};}//实例化交互绘制类对象并添加到地图容器中draw = new ol.interaction.Draw({//绘制层数据源source: source,/** @type {ol.geom.GeometryType}几何图形类型 */type: value,//几何信息变更时调用函数geometryFunction: geometryFunction,//最大点数maxPoints: maxPoints});map.addInteraction(draw);}else {source = null;//清空绘制图形vector.setSource(source);}}

代码说明:

  • 交互绘制几何图形的关键是实例化 ol.interaction.Draw控件，设置其关键参数,并将此控件添加到地图容器中。
  • 支持点、线、圆、多边形图形，在创建交互控件时，直接设置控件对象的 type参数即可;
  • 除此之外，正方形和长方形图形作为规则多边形，需要通过geometryFunction参数单独处理。
    • (1) Source:绘制图层的数据源，即承载几何图形要素的数据源。
    • (2) type:绘制的几何图形类型,即 ol.geom.GeometryType,包括Point、LineString、PolygonMultiPoint、MultiLineString、MultiPolygon,Circle等。
    • (3) geometryFunction:当几何坐标更新时调用此函数，在此当绘制类型为“正方形”和“长方形”时，需要通过此函数设置其几何对象，即为“正方形”时通过绘图控件对象的createRegularPolygon(4)创建，为“长方形”时则调用多边形(ol.geom.Polygon)的setCoordinates方法设置多边形的几何坐标串。
    • (4）maxPoints:绘制图形结束前多边形或线的最大点数，线默认为2，多边形默认为3。

28.测量(距离,面积)

  • div
  • Map
  • 类型变化时
  • addInteraction()




代码说明:

  • 先加载绘图控件（ol.interaction.Draw)，在实例化此控件时设置当前绘图要素的样式

  • 然后分别调用==createHelpTooltip()==与 ==createMeasureTooltip()==创建帮助信息提示框和测量工具提示框对象;

  • 最后绑定绘图控件对象的drawstart与 drawend事件，实现绘图测量功能。

  • 其中，在 drawstart事件处理函数中，由事件对象得到当前绘制的要素( sketch)，通过绘制要素的几何对象绑定change事件，根据事件监听的几何对象类型（ ol.geom.Polygon或ol.geom.LineString)

  • 调用formatArea()与formatLength()计算输出面积值或长度值。

  • 帮助提示框代码

  • 测量工具提示框

代码说明:

  • 分别通过==createHelpTooltip()==与 ==createMeasureTooltip()==创建帮助信息提示框和测量工具提示框

  • 这些都是基于OpenLayers 的 =ol.Overlay==实现的

  • 即动态创建叠加层对象与其目标容器（div层)，并将叠加层对象添加到地图容器中。

  • 计算长度与面积

    ol.proj.transform （坐标，源，目标）

将坐标从源投影转换为目标投影。这将返回一个新坐标（并且不会修改原始坐标）。

代码说明:

  • 上述代码为测量功能的关键代码，通过 formatLength()与 formatArea()分别计算输出长度值和面积值。

  • 在计算长度值或面积值时可通过两种方式进行计算，

    • 一种是使用测地学的方法基于数据的投影坐标系进行计算，
    • 另一种则是调用线几何对象或多边形对象的方法直接获取值。

  • 鼠标移动事件:

代码说明:

  • 测量功能的核心是为地图容器绑定鼠标移动事件(pointermove)
  • 在其回调函数中根据当前测量类型，用弹框控件显示帮助提示信息;
  • 同时为地图容器绑定鼠标移出事件( mouseout），在此事件触发后隐藏提示框。

29.地图加载原理

1．瓦片地图

  • 瓦片地图是指将矢量地图文档或影像数据进行预处理，采用高效的缓存机制形成的缓存图片集，可在网页中快速加载，效果较好。

  • 在Web端加载瓦片地图一般有两种方式

    • 一种为直接读取缓存加载，即读取磁盘中以目录方式存储的瓦片图片集
    • 一种需要有服务资源提供支持的接口，通过服务接口读取瓦片数据并在客户端显示，这种方式需要有服务资源提供支持
      • 即需要提供瓦片数据服务的GIS服务器支持，可以是第三方的网络在线瓦片服务（如 Google地图、OSM地图、百度地图等)
      • 也可以是WMTS，还可以是其他 GIS服务器发布的自定义类型的瓦片服务等。

  • 瓦片地图加载的原理为:通过Ajax请求瓦片服务或数据，根据瓦片的级数、行列号分别获取对应的瓦片图像,将其按照请求的空间范围组织好（即按照网格组织瓦片)，形成一幅地图显示在网页中。

2．矢量地图

  • 类似地，在 Web端加载矢量地图，一般也有两种方式:

    • 一种是直接读取矢量格式文件，即存储在磁盘中的GML、KML等格式的失量文件;
    • 另一种是调用矢量数据服务接口,通过服务接口读取矢量要素，这种方式同样需要有服务资源的文持，
      • 即而发布矢量服务的GIS的矢量服务器，可以是WMS、WFS等OGC服务，
      • 也可以是其他GIS服务器发布的自定义类型的矢量服务等。
      • OGC标准介绍

  • 矢量地图加载的原理为:通过Ajax请求矢量服务或数据，根据请求到的矢量要素在客户端实时生成矢量地图并显示到网页中。

区别

  • 瓦片地图加载与矢量地图加载的主要区别为数据的预处理机制。

    • 瓦片数据经过了裁剪处理，已形成缓存的图片集，在加载时比实时生成图片快，事半功倍。瓦片地图速度快，效果好，可满足基本网络环境下的快速出图要求，适用于地图变更少的应用。
    • 矢量地图能满足Web上实时的数据处理、分析等要求，WebGIS平台一般都对矢量地图加载进行了优化，还提供了负载均衡机制，能支持海量数据发布，适用于地图需要实时更新的应用。
  • 在项目开发中量地图和瓦片地图可以叠加显示，强强联合，满足更多的应用需求。

30.数据加载原理

  • 数据加载的基本原理与方法为:图层（Layer）与数据源(Source)均分为
  • Image、Tile、Vector三大类型，在实例化图层对象时，要对应设置其数据源。

    • (1）瓦片数据:一般使用ol.layer.tile+ol.source.tile这种方式加载，

      • ol.source.tile的子类是封装好的各种瓦片数据源，可以根据具体的数据源类型进行扩展。
      • 瓦片数据也可以使用ol.layer.Image +ol.source.Image的方式加载，同样可以进行扩展开发。

    • (2）矢量数据:使用ol.layer. Vector+ol.source.Vector的方式加载，其矢量数据源一般有两种设置方式。

      • 一种为features方法,即设置features参数静态加载矢量数据,或者调用addFeature()或addFeatures()进行动态加载;
      • 另一种则为url+format方式，即通过设置矢量数据url地址和数据格式加载数据。

31.基础地图数据:ArcGIS,MapGIS等(只需要一个url)

  • 这些GIS数据具有特定的格式，如 ArcGIS、MapGIS、SuperMap平台的GIS 数据等。

  • div

  • 不同类型的数据实现方法:

    • 加载ArcGIS Server的 Rest服务瓦片: ol.layer.Tile+ol.source.TileArcGISRest。
    • 加载ArcGIS Online的在线瓦片数据: ol.layer.Tile+ol.source.XYZ.
    • 加载ArcGIS Server的 Rest服务矢量: ol.layer. Vector+ol.source.Vector。

  • 选择数据的监听事件:选择列表改变数据

  • laodArcGISAMap():加载的关键代码:

    • 移除存在的图层
    • 加载ArcGIS MapServer地图
    • 加载ArcGIS MapServer地图
    • 加载ArcGIS REST地图



  • setMapView:

代码说明:

  • 上面是加载 ArcGIS各种类型数据的核心代码，不管是瓦片还是矢量，均调用相应的数据服务，因此都是基于数据url 请求并加载数据。

    • (1)加载ArcGIS Server Rest服务瓦片:使用ol.layer.Tile+ol.source.TileArcGISRest实现

      • TileArcGISRest的url参数是数据服务的请求地址，使用它请求ArcGIS Server 发布的Rest 瓦片地图服务。

    • (2）加载ArcGIS Online=地图:使用ol.layer.Tile+ol.source.XYZ实现

      • ol.source.XYZ的url参数是瓦片服务的请求地址。

    • (3) 加载ArcGIS Server的 Rest服务矢量地图:使用ol.layer.Vector+ol.source.Vector实现

      • 通过 Vector数据源的 loader参数设置加载矢量要素的函数
      • 然后通过Ajax的方式请求矢量数据服务
      • 再通过ol.format.EsriJSON解析数据，调用readFeatures方法解析和读取要素
      • 最后调用矢量数据源对象的addFeatures方法加载要素，添加到矢量图层中进行渲染和显示。

32.新的数据格式:KML,GML.GeoJSON等

  1. KML
  • KML是一种文件格式,用于在地图浏览器（如Goioogle地球、Google地图和谷歌手机地图）中显示地理数据。
  • 在地理空间相关的网站上，KML无处不在，它支持类似Google地图,微软虚拟地球这样商业化的地图API和OpenLayers这样开源的地图API，并支持导入、导出KML 数据。
  • Google把 KML作为一种开放标准进行了发布，被开放地理空间联盟（OpenGeospatial Consortium，Inc.，OGC）采用，目前是由OGC维护的国际标准。
  1. GML
  • GML (Geography MarkupLanguage）是一种地理标记语言，它由0GC于1999年提出，并得到了许多公司的大力支持，如 Oracle、Galdos、MapInfo、CubeWerx等。
  • GML能够表示地理空间对象的空间数据和非空间属性数据。

3.GPX

  • GPX(GPS eXchange Format，GPS交换格式）是一种XML格式，也是一种为应用软件设计的通用的GPS数据格式
  • 它可以用来描述路点、轨迹、路程。
  • 这个格式是免费的，它保存的位置、海拔和时间可以在不同的GPS设备和软件之间进行交换。
  1. GeoJSON
  • GeoJSON是一种对各种地理数据结构进行编码的格式,是基于JSON对象表示法的地理空间信息数据交换格式。
  • GeoJSON对象可以表示几何、特征或者特征集合。
  • GeoJSON支持的几何类型有:点、线、面、多点、多线、多面和几何集合。
  • GeoJSON里的特征包含一个几何对象和其属性，特征集合表示一系列特征。
  • 针对这些主流的开放数据格式，OpenLayers均提供了这些格式数据的解析类，即对应的Format子类。
  • 在加载数据时,通过矢量图层(ol.layer.Vector)与矢量数据源(ol.source. Vector)进行加载。
  • 在此仅以加载GeoJSON、KML、GPX格式的数据为例，如图所示。
  • div
  • 加载数据


代码说明:

  • 根据客户端选择的数据类型，设置数据地址 dataUrl、地图中心点center和当前缩放级数zoom，通过 loadVectData方法加载相应类型的矢量数据

  • 并设置地图视图的中心点与缩放级数。

  • 初始默认加载GeoJSON格式的矢量数据（countries.geojson)。

  • laodVectData()

代码说明:

  • loadVectData方法就是根据传入的数据类型和矢量数据地址
  • 通过对应的数据格式类进行解析，读取矢量要素并加载到矢量图层中。
  • 数据源使用url+format方式加载矢量数据
    • GeoJSON格式数据:使用ol.format.GeoJSON类进行解析。
    • KML格式数据:使用ol.format.KML类进行解析。
    • GPX格式数据:使用ol.format.GPX类进行解析。
  • 另外，除了使用示例中的url+format设置矢量数据源的方式
  • 还可以调用数据解析类( format）的readFeatures方法读取矢量要素集
  • 通过features参数设置数据源。
  • 同时，也可以调用数据源对象的 addFeature方法来加载单个矢量要素
  • 代码如下。

33.公共地图数据:百度,bing

  • 首先实例化一个地图容器对象 map
  • 然后通过界面的功能项加载选中类型的公共地图数据。
  • 除了百度地图，其他公共地图均为OpenLayers 封装的对应类型的地图数据源，=使用非常简便==。
  • 由于OpenLayers 没有提供加载百度地图的数据源，因此需要我们进一步研究，根据百度地图的瓦片数据请求地址使用合适的数据源扩展来实现。
  • Map
  • 选定地图类型事件
  • loadMap
  • 先移除现有的
  • osm
  • MapQuest
  • bing
  • 百度
  • onChange

代码说明:

  • 在loadMap函数中,根据数据类型分别进行处理,实例化对应数据类型的数据源加载地图。

  • 上述不同类型的数据分别采用如下方式进行实现。

    • ①加载OSM 地图瓦片:ol.layer.Tile+ ol.source.OSM。
    • ②加载 MapQuest地图:ol.layer.Tile+ ol.source.MapQuest。
    • ③加载BingMap地图: ol.layer.Tile+ ol.source.=BingMaps==
      • 其中 BingMaps 数据源的 key参数为请求 BingMap地图的许可码
      • imagerySet参数则为地图类型
    • ④加载百度地图: ol.layer.Tile+ ol.source.TileImage
      • ol.source.Tilelmage为通用的瓦片数据源，要根据百度地图瓦片裁图类型与url请求地址设置 TileImage数据源的关键参数。

  • laoadBaiduMap()




代码说明:

  • 上述为加载百度地图的关键代码，主要根据百度地图的相关参数实例化ol.source.Tilelmage
  • 关键参数如下。
    • tileUrlFunction:设置瓦片地图url的函数，需要设置百度地图在线请求地址为"http://online2.map.bdimg.com/tile/?qt=tile&x=”＋ ‘{X}’+"&y="+ '{y} '+ “&z=”+ ‘{z}’+”&styles=pl&udt=20141219&scaler=1"，其瓦片级数与行列号（即x、y、z）需要通过tileUrlFunction进行动态设置。
    • =projection==:地图投影坐标系，百度地图采用EPSG:3857投影坐标系。
    • tileGrid:瓦片网格，实例化ol.tilegrid.TileGrid类
      • 设置瓦片裁图的瓦片原点 origin为[0.0]、瓦片大小 tileSize为256，并设置瓦片级数对应的分辨率数组为resolutions。
      • 分辨率数组resolutions通过百度地图的瓦片地图范围extent和瓦片大小 tileSize计算得到，即由上述getResolutions方法获得。

34.多元数据叠加

  • Map

代码说明:

  • 在叠加图层数据时，不管是通过Map的 layers参数设置,还是调用其addLayer方法加载，都按照先后顺序进行叠加
  • 即最后添加的图层将显示到地图的最上层，最先添加的图层则位于地图的最底层。

35.瓦片网格显示

  • Map

代码说明:

  • 网格信息图层加载方式与瓦片图层类似，在实例化ol.source.TileDebug时，一般需要设置如下两个关键参数。

    • (1) projection:地图投影坐标系，设置为瓦片地图的坐标系。
    • (2) tileGrid:网格信息，设置为瓦片数据的网格信息，一般通过调用瓦片图层数据源对象的getTileGrid方法得到。

36.地图打印

  • Web端的地图打印是指输出当前视窗范围内的地图，即将当前地图导出为一张图片存储到客户端。
  • 不同的浏览器提供了各自的截屏功能，可以基于浏览器的截屏功能或插件实现导出地图图片的功能。
  • OpenLayers 渲染地图有不同的渲染模式，即 Canvas、DOM、WebGL方式,
    可以基于地图渲染容器对象来实现导出图片的功能。

代码说明:

  • 本示例采用Canvas渲染方式加载地图,使用地图渲染容器Canvas的toDataURL方法来实现当前地图图片的导出功能。
  • 首先为a标签对象添加click事件，然后在此单击事件函数中添加map 的 postcompose事件监听,在.postcompose的处理函数中实现导出图片的功能。

37.绘制点线面

  • 要素
  • 实例化
  • Map

代码说明:

  • 上述代码为添加点、线、区要素的关键代码，通过图层数据源的features 设置矢量要素，要素的样式信息则通过矢量图层对象的style参数进行设置。

    • ①点要素的样式函数: createPointStyleFunction，设置点要素的图形样式(image）与文本样式(text）。
    • ②线要素的样式函数: createLineStyleFunction，设置线要素的图形样式( stroke）与文本样式(text）)。
    • ③区要素的样式函数: createPolygonStyleFunction，设置区要素的图形样式(stroke、fill )与文本样式（text)。

38.接上面的点线面图形样式编辑

  • 点要素样式

图形样式设置


  • HTML <fieldset> 标签

    • <fieldset> 标签可以将表单内的相关元素分组。
    • <fieldset> 标签会在相关表单元素周围绘制边框。
  • HTML <label> 标签
    • <label> 标签为 input 元素定义标注（input前面的文字就是用label设置的）。
    • <input> 的value是设置表单里面显示的文字.

文字样式设置

  • HTML <select> 标签

    • 下拉框,<option> 是下拉的每个选项
    • selected 是预选定,跟<input>的checked一样

点线面对象设置:这里只给出点的

创建文本样式的函数:createTextStyle()

  • 我错了 10:不是保留小数的意思
  • 点,线,面函数



代码说明:

  • 上述为点、线、区要素样式函数的具体实现代码，基本实现思路为

    • 先获取界面中设置的样式属性项的值
    • 然后设置到对应的样式类中。
    • 其中，创建文本样式为统一的函数，即 createTextStyle
    • 它有如下两个参数。
      • ① feature:矢量要素，通过feature 的 get方法将要素name属性设置为显示的文本 text.
      • ② dom:要素样式的 dom对象，此 dom对象存储了文本样式的各个属性项,以此来获取当前面板中各个属性项的值，用来实例化ol.style.Text。

  • 编写控制要素样式面板的代码，实现点、线、区要素样式设置的切换功能

  • 并为样式更新按钮注册单击事件，在其单击事件函数中调用图层对象的setStyle方法统一设置要素样式。

  • jQuery siblings() 方法

定义和用法

  • siblings() 方法返回被选元素的所有同级元素。
  • 同级元素是共享相同父元素的元素。

filter 可选。规定缩小搜索同级元素范围的选择器表达式。

代码说明:

  • 控制点、线、区要素的样式信息，其关键是调用矢量图层对象的setStyle方法。其中，由点、线、区的样式函数作为setStyle方法的参数
  • 例如点要素的样式函数为createPointStyleFunction，其参数为需要设置样式的点要素。

39.图形交互编辑:修改点线面要素

  • 实例化source layer,addLayer()
  • 编辑要素功能

代码说明:

  • 为实现选中要素后编辑几何图形的功能，封装了一个 Modify控件,
  • 分别实现初始化init方法，设置事件的setEvents方法、设置是否激活控件的setActive方法在调用时先调用Modify的 init方法进行初始化
  • 然后调用setActive方法激活控件。
    • init:在初始化时

      • 首先加载交互选择要素的控件（ol.interaction.Select)
      • 然后加载一个交互编辑控件(ol.interaction.Modify)
      • 在实例化交互编辑控件时设置修改的 features为当前选中的要素，
      • 最后调用setEvents方法进行选择控件激活状态变更的处理。
    • setEvents:在此方法中为当前选择控件添加激活变更事件
      • 在其事件处理函数中返回当前选择要素集的第一个要素
      • 要修改的那个要素。
    • setActive:在此方法中分别调用选择控件和编辑控件的setActive方法，对这两个控件的是否激活状态进行控制。

CSS :active 选择器

  • 定义和用法
  • :active向活动的链接添加特殊的样式。
  • 当你点击一个链接时它变成活动链接。

JavaScript forEach() 方法

  • 定义和用法

    • forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
    • 注意: forEach() 对于空数组是不会执行回调函数的。
array.forEach(function(currentValue, index, arr), thisValue)
  • function(currentValue, index, arr):必需。 数组中每个元素需要调用的函数。
  • thisValue:可选。传递给函数的值一般用 “this” 值。
    • 如果这个参数为空， “undefined” 会传递给 “this” 值

40.图形信息保存到数据库



  • HTML

代码说明:

  • 在功能界面中，创建一个id为menu的div容器，添加图形绘制类型列表，用户可通过此列表项切换绘制类型;
  • id为dialog-confirm 的div容器，则为绘制图形后弹出的图形信息设置对话框，此对话框使用jQuery UI实现，设置其样式信息，并初始化对话框。

HTML input disabled 属性

  • 定义和用法

    • disabled 属性是一个布尔属性。
    • disabled 属性规定应该禁用的 <input> 元素。
    • 被禁用的 input 元素是无法使用和无法点击的。

  • 点线面切换事件

代码说明:

  • 通过addInteraction函数添加交互绘制控件，在切换绘制图形类型时清除当前绘制图形
  • 即调用map的removeInteraction方法移除绘制控件对象。
  • 图形绘制的关键代码如下。


代码说明:

  • 在地图中加载一个交互绘制控件（ol.interaction.Draw)，添加drawend事件监听
  • 在其回调函数drawEndCallBack中进行图形几何信息与属性信息的处置。
    • ① 在回调函数中首先打开属性设置对话框，即由jQuery UI 的方法打开，通过用户交互设置图形的属性信息。
    • ② 同时，得到当前绘制的矢量要素，再通过getGeometry方法得到要素几何信息，进而调用getCoordinates方法得到几何图形的坐标，拼接为字符串类型的坐标串，便于传递到后台存储。

jQuery 对话框部件（Dialog Widget）

  • 用法

    • 描述：在一个交互覆盖层中打开内容。
    • 对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。
    • 对话框窗口可以移动，重新调整大小，默认情况下通过 ‘x’ 图标关闭。

JavaScript join() 方法

  • 定义和用法

    • join() 方法用于把数组中的所有元素转换一个字符串。
    • 元素是通过指定的分隔符进行分隔的。
  • 对话框


代码说明:

  • 上述为属性设置对话框（dialog-confirm)的初始化方法
  • 其中关键为“提交”按钮的响应处理，即调用submitData方法提交当前绘制图形的几何与属性信息到后台处理。
  • 将数据提交到后台进行保存的代码如下。

  • ajax

代码说明:

  • 上述代码为客户端提交数据到后台处理的关键代码，
  • 使用前后台交互的 Ajax方式实现，本示例基于jQuery 的ajax()方法提交数据。
  • 使用Ajax方式进行前后台数据传参时,在前台一般要先将数据处理为字符串形式
  • 如本示例中要传递的参数为几何类型(geoType)、几何坐标串( geoData)、图形属性数据( attData)。

结合.NET框架，在后台新建一个数据操作的一般处理文件(DataHandler.ashx)

  • 在此文件中进行数据存储操作，将图形数据存入关系数据库的对应表中。
  • 其中，数据库信息设置在配置文件 Web.config 中，包括数据库名称、访问的用户名和密码。
  • 本示例操作的数据库为OL3Database
  • 绘制的点、线、区分别存储在数据库表PointsInfo、LinesInfo、PolygonsInfo中。

  • DataHandler.ashx的关键代码如下。


代码说明:

  • 上述为 DataHandler.ashx中 ProcessRequest的关键代码
  • 主要是接收和处理从客户端传递过来的参数
  • 然后通过.NET的数据库操作对象与方法存储客户端传递过来的数据。
  • 数据存储主要分为如下几个步骤，数据更新和删除操作与之类似。
    • 第1步:使用SqlConnection创建数据库连接对象，基于SqlCommand命令的Connection参数设置其连接对象。
    • 第2步:创建SOL语句（本示例为insert 语句，将图形信息存储到数据库表中)，通过SqlCommand命令的 CommandText进行设置。
    • 第3步:调用数据库连接对象的Open()方法打开数据库，与目标数据库建立连接
    • 第4步:调用SqlCommand命令的 ExecuteNonQuery()执行SQL 语句，将记录插入到数据表中,并返回操作结果。
    • 第5步:最后调用数据库连接对象的Close()方法关闭数据库，断开连接。

C#的split()分割字符串

  • 简单的说：
str.Split("====");
//这样是错误的，只能
str.Split('=');
//参数只能是char类型的，不能是字符串的

41.OGC


  • 针对OGC 服务的数据显示，OpenLayers 封装了一些数据源
  • 如针对 WMTS 数据的ol.source.WMTS，针对 WMS 数据的ol.source.ImageWMS、ol.source.TileWMS等。
  • 这些OGC数据的显示，与其他类型的数据加载方法类似，即通过图层+数据源的方式加载显示
  • 在实例化数据源对象时设置请求OGC服务的url地址与相关参数
  • 但不同服务类型的OGC数据加载方法有些区别。
    • WMTS:即瓦片数据服务，WMTS 的 GetTile接口返回的就是单张瓦片，其服务调用与其他类型的瓦片服务相同。

      • WMTS的数据显示与瓦片地图加载类似,可以使用ol.layer.Tile+ ol.source.WMTS 加载显示，由数据源(ol.source.WMTS）内部处理与请求WMTS服务，加载所请求范围内的瓦片地图。
    • WMS:即地图服务，WMS的 GetMap接口返回指定范围内的地图图片,因此可以用图片图层方式加载，也可以用瓦片图层方式加载。
      • 即可以使用ol.layer.Image+ol.source.ImageWMS 加载,或者使用ol.layer.Tile + ol.source.TileWMS加载。
    • WCS服务与WMS类似, WCS 的GetCoverage接口返回指定范围内的影像图片,因此 WCS数据显示方法与WMS数据显示方法基本相同。
    • WFS:即要素服务，WFS 的 GetFeature接口返回GML等格式的矢量数据，其服务调用与其他类型的矢量地图服务相同。
      • 因此，WFS 的数据显示与矢量地图加载类似，可以使用ol.layer. Vector+ ol.source.Vector方式加载。

42.加载WMTS数据

WMTS 提供瓦片数据服务，通过 WMTS可以将发布的瓦片地图加载到客户端显示。

ArcGIS Online发布的美国地图WMTS服务的基地址是：

http://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/
  • HTML
  • 编写加载WMTS数据的代码
    • 其关键为创建瓦片图层（ol.layer.Tile）对象，瓦片图层的数据源为实例化的ol.source.WMTS
    • 在此 WMTS 数据源中必须设置WMTS服务基地址参数（url)、瓦片网格对象参数（tileGrid)、投影坐标系参数 （ projection）等。
    • 加载 WMTS数据的关键代码如下。
  • 实例化WMTS

wrapX 布尔值 （默认为false） 是否水平包装世界。

代码说明:

  • 上述加载WMTS 数据的关键为实例化 WMTS 数据源（ol.source.WMTS)
  • 需要设置如下一些关键参数。
    • url:请求WMTS 服务的url地址参数，即 WMTS服务的基地址。
    • format:请求WMTS服务返回的瓦片图像文件格式,一般用png格式。
    • projection: WMTS瓦片的投影坐标系参数，在此设置为EPSG:3857。
    • tileGrid:瓦片网格信息参数对象，此参数最为关键,使用ol.tilegrid.WMTS对象进行
      设置。

      • 其中, origin为瓦片图原点
      • resolutions为瓦片的分辨率数组(与瓦片级数对应),
      • matrixlds则为矩阵标识列表，与瓦片地图级别保持一致。

43.加载WMS数据

WMS提供地图服务，通过WMS可以将发布的地图加载到客户端里显示。

  • HTML

代码说明:

  • 本示例中分别介绍三种加载WMS 数据的方式,在界面中通过单选按钮(radio)进行加载图层的控制。
  • 点击事件

代码说明:

  • 由当前选择的单选按钮项得到加载WMS 数据的参数,然后通过loadWMSMap函数实现对应WMS 数据的加载功能。
  • 加载WMS 数据的关键代码如下。
  • image图层
  • params WMS请求参数。
    • 至少LAYERS需要一个参数。
    • STYLES是 ''默认。VERSION是1.3.0默认。
    • WIDTH，HEIGHT，BBOX 和CRS（SRS对于WMS版本<1.3.0）将被动态地设置。
  • serverType 类型的远程的WMS服务器：mapserver，geoserver或qgis。
  • Tile图层
  • Tilegrid

代码说明:

  • 上述分别用了三种方式加载 WMS 数据，其关键为实例化 WMS 数据源，并设置关键参数。

    • 方式一:使用ol.layer.Image + ol.source.ImageWMS方式加载，在实例化ImageWMS数据源时设置如下关键参数。

      • url:请求WMS服务的url地址，即为WMS服务的基地址。
      • params:请求 WMS服务的参数对象,与WMS的GetMap接口保持一致,设置为WMSGetMap接口的各个参数项,如LAYERS即为请求的图层名参数。
      • serverType:请求的服务类型，即提供WMS 服务的服务器类型，如MapServer,GeoServer、QGIS 等。
    • 方式二:使用ol.layer.Tile + ol.source.TileWMS方式加载，在实例化TileWMS 数据源时设置的关键参数与方式一相同。
    • 方式三:使用ol.layer.Tile + ol.source.TileWMS方式加载，不同的是这种方式使用512×256的瓦片网格。
      • 通过 TileWMS 数据源的 tileGrid 参数设置瓦片网格对象，设置为实例化的ol.tilegrid.TileGrid 网格对象。

44.加载WFS数据

WFS提供要素服务，类似于常用的矢量地图服务,通过WFS 可以将发布的矢量要素加载到客户端显示。

使用基于geoserver发布的一个WFS 服务，其基地址为:

http://demo.boundlessgeo.com/geoserver/wfs
  • HTML
  • 编写加载WFS 数据的代码，即实例化矢量图层（ol.layer. Vector）和矢量数据源( ol.source.Vector),将矢量图层加载到地图容器中。
  • 关键为矢量数据源对象的设置，通过loader参数设置请求 WFS服务的方法
  • 以此方法请求WFS的GetFeature接口，解析返回的矢量数据加载到矢量数据源中。

代码说明:

  • 由当前单选按钮控制是否加载WFS 数据，即分别通过 Map的 addLayer方法与removeLayer方法实现WFS数据图层的加载与移除功能


代码说明:

  • 加载WFS的矢量数据，与加载其他基础地图的矢量数据方法相同。

    • 加载 WFS数据的关键是通过Ajax方式请求WFS的GetFeature接口
    • 在 Ajax请求的回调函数中用数据解析类(ol.format.GeoJSON）解析返回的矢量数据
    • 最后将解析得到的矢量要素加载到数据源中。
    • 在本示例中，采用JSONP方式的Ajax方法请求WFS服务，在其服务请求的url地址中指定服务回调方法,便于在此回调中处理请求返回的矢量数据。

45.加载WCS数据

WCS提供影像服务，与 WMS类似，通过 WCS可以将发布的影像地图加载到客户端显示

基于 MapGIS 发布的一个中国影像的 WCS 服务，其服务基地址为

http://127.0.0.1:6163/igs/rest/ogc/WCSServer

请求getcoverage接口，其 coverage为china:china3857。

  • HTML
  • 封装 WCS数据源(ol.source.ImageWCS)。
  • 由于OpenLayers 暂时没有直接提供WCS的数据源,在此基于MapGIS的WCS服务
  • 根据ol.source.ImageWMS 封装了一个ol.source.ImageWCS，即 imagewcssource.js，放置到ol库的数据源目录(../ol/source)下。

代码说明:

  • 上述加载WCS 数据时，关键为实例化WCS 数据源，需要设置WCS的基地址和 GetCoverage请求的必备参数项。

    • 请求getcoverage接口，其 coverage为china:china3857。
  • 除了上述加载方法，另外还可以使用ImageStatic 数据源加载，即将WCS的数据作为一张图片进行加载
  • 关键代码如下。

代码说明:

  • 上述代码使用ol.source.ImageStatic加载 WCS 数据，其中在实例化此数据源对象时，url参数设置为WCS GetCoverage接口的完整请求串，imageExtent参数设置为WCS影像数据的范围。

46.OpenLayers之高级功能篇

标注功能

  • 地图标注是将空间位置信息点与地图相关联，通过图标、窗口等形式把点相关的信息展现到地图上。
  • 地图标注也是 WebGIS中比较重要的功能之一，在大众应用中较为常见。
  • 基于地图标注丰富GIS应用，可以为用户提供更多个性化的地图服务，如标注兴趣点等。
  • (用小红旗代表驻地,波浪线代表河流)

标注的基本原理:

  • 获取标注点的空间位置(X、Y逻辑坐标)，在该位置上叠加显示图标(或包含信息的小图片)，必要时以窗口形式显示详细的信息。

  • 其中，在获取标注点X、Y值时需要注意:

    • 通过鼠标在地图上单击获取到的是窗口坐标，一般需将窗口坐标转为逻辑坐标后才能使用。

  • 在OpenLayers 框架中，提供了实现标注功能的各类控件与方法

    • 主要基于叠加(ol.Overlay)对象和HTML网页控件实现，其中展示标注信息的 HIML控件可以使用UI库实现相应的界面特效。
    • 另外，OpenLayers 使用独立的样式类设置矢量要素信息，提供的ol.style.Icon类可以为矢量点要素设置图片标识, ol.style.Text类则可以直接设置矢量点要素的文本信息
    • 因此,可以通过矢量点要素方式实现标注功能。

图文标注

  • 即使用小图片作为标注点，它是最简单的标注形式，也是其他自定义标注的基础。
  • 图文标注，指同时使用文本和图片的标注，通过文本结合图标来展现标注点的信息，也是一种简单的地图标注。
    • 一般情况下，文本用来描述标注点的关键词或主题信息（如名称等)
    • 小图标则作为标注点的位置标识，也包含一定的属性信息（如类型等)。

图片标注功能

  • 一般使用OpenLayers 的ol.Overlay，结合 HTML 的一个 div或img标签元素实现。
  • 若要实现文本标识，则与添加图片标注类似，创建一个 ol.Overlay对象，关联HTML的text或a标签元素实现。
  • 在实现叠加层标注时，要将ol.Overlay对象与HTML控件关联。
  • 另外，也可以使用加载矢量点要素的方式实现，设置点要素的图形样式为ol.style.Ilcon,文本样式为ol.style.Text。

  • 通过单选按钮(radio）控制添加叠加层标注和添加矢量层标注的功能项,以及添加叠加层标注的HTML标签元素。
  • 叠加层标注需要在界面中创建一个标注层（容器)
  • 如此id为 label的容器，所有叠加层标注点均在此标注容器中创建。

代码说明:

  • 上述id为 label的div层为叠加层标注的容器，每创建一个图文标注点，需要在此标注容器中分别新增一个图形元素( marker)和一个文本元素(address)。
  • 在上述代码中，label容器中添加的marker和 address元素，即为静态添加的武汉标注点。
  • 示例样式设置的代码如下。

代码说明:

  • 上述设置的样式中

    • class为 marker的是叠加层标注样式，主要设置标注点图形信息，一般可设置为img图标或者圆点;
    • class为 address 的是叠加层标注的文本标签样式，可以设置文本的字体、颜色、大小等样式。

编写加载静态标注的代码

  • 用矢量点要素方式添加“北京”标注点，用叠加层方式添加“武汉”标注点。
  • 添加静态图文标注的代码如下。

代码说明:

  • 上述代码为静态加载标注的方法，即已知标注点的坐标信息(北京、武汉),直接添加标注点到地图中。

矢量标注点实现方法:

  • 与加载矢量要素相同，分别实例化矢量图层（ol.layer. Vector）和矢量数据源（ol.source. Vector)，将矢量图层加载到地图容器中。

    • 其中，数据源中设置的矢量点要素，通过实例化 ol.Feature创建，分别设置要素的几何信息( geometry）与属性信息（如name、population）等。
    • 矢量要素的样式通过setStyle方法进行设置，由createLabelStyle函数实现。

  • ol.Feature的关键参数如下。

    • geometry:几何图形对象，标注点一般设置为ol.geom.Point对象，需要使用逻辑坐标点。
    • 自定义的属性项，如name、population等，可根据需要自行定义，这些属性项可通过get方法进行获取,如feature.get('name')
    • (当然这是设置好的name才可以用get去获取设置好的name)。

叠加层标注点实现方法:

  • 实例化叠加层（ol.Overlay)对象，关联界面中创建的HTML元素，调用Map的 addOverlay方法将其加载到地图容器中。

    • 在本示例中添加图文标注，需要分别创建图标与文本两个ol.Overlay对象，并分别关联标注容器(label)里创建的图形标签元素( marker）和文本标签元素(address）。
  • ol.Overlay类的关键参数如下。
    • position:叠加对象的地理位置，使用逻辑坐标点。
    • element:目标元素，即 Overlay对象关联的HTML元素，承载Overlay的界面元素。
    • element: 覆盖元素。
  • createLabelStyle()

代码说明:

  • createLabelStyle()为设置矢量点样式的函数，使用ol.style.Icon设置点的图形参数(image)

    • 使用ol.style.Text设置点的文本参数(text)。
    • 其中，实例化 ol.style.lcon对象时，src参数设置为图片的相对地址;
    • 实例化ol.style.Text对象时，text参数设置为要显示的文本内容
    • 此示例通过“feature.get('name')”显示矢量要素的name属性值。
    • anchor 默认值为图标中心。
  • 点击地图界面添加自定义的标注

代码说明:

  • 交互添加标注，要为map添加鼠标单击事件监听，在click事件的回调中得到鼠标单击点的逻辑坐标点，然后分别通过addVectorLabel 与 addOverlayLabel方法添加一个新的标注点。


  • textContent和innerText的效果的一样的,不用的是有些浏览器不支持textContent
  • innerHtml也可以设置文本,且可以识别标签,而前面两个会把标签当做字符串输出

代码说明:

  • 通过地图单击事件用鼠标交互添加标注点，与静态加载标注点方法基本相同，不同之处在于添加叠加层标注点时需要动态创建标注的目标HTML元素。
  • 在上述addOverlayLabel函数中，通过 dom的createElement . appendChild等方法
  • 在标注层(label）中动态创建图形元素（ marker）和文本元素(address)。

47.popup标注:popup:弹出窗口标注

  • Popup标注，即通过冒泡方式显示标注点的详细信息，一般结合基本标注点使用。
  • Popup标注比较灵活，可以结合 HTML、CSS等自定义标注信息的样式，在弹出框中描述标注点详细信息。
  • 在图片标注基础上增加鼠标单击事件监听，鼠标单击图标时弹出自定义内容的 Popup标注，
  • ① Popup标注的目标容器: id为popup的div层,其class 设置为ol-popup，默认的 Popup标注框样式,可自定义其高宽、背景等样式。
  • ② Popup标注的关闭按钮: id为 popup-closer的a元素，其class设置为ol-popup-closer,默认的关闭按钮样式，同样可以自定义其样式。
  • ③ Popup标注的内容容器: id为 popup-content 的div层，用于显示标注的详细信息。

编写添加Popup标注的关键代码:

  • 本实例中通过单击北京市标注点的图标弹出 Popup标注，因此需要结合地图单击事件实现，在单击北京市标注图标时动态弹出 Popup标注。

添加Popup标注。

  • 实例化 ol.Overlay对象，关联 Popup标注容器(id为popup 的 div层)，调用addOverlay方法将Overlay对象添加到地图容器中。
  • 其中，要为 Popup标注的关闭按钮添加单击事件隐藏Popup标注,还要实现动态创建Popup标注内容的addFeatrueInfo方法。


  • 实例化 ol.Overlay对象时，通过element参数关联 Popup标注的目标容器(id为 popup的 div层)。
  • 如果要关闭（隐藏）弹出的 Popup标注，则调用setPosition()将其 position参数设置为undefined。
  • 通过addFeatrueInfo函数，传入标注点信息对象，实现动态创建Popup标注内容的功能。
  • 在显示 Popup标注内容的容器中（即id为 content的div层)，分别创建a、div,img 等元素节点展示标注点的详细信息。

结合地图事件弹出 Popup标注。

  • 添加地图的单击事件，在单击选中标注元素时，调用上述addFeatrueInfo函数动态创建Popup弹出框内容，并通过setPosition方法设置其Overlay对象的position参数弹出 Popup标注。

  • forEachFeatureAtPixel （像素，回调，opt_options）
    • 检测与视口上的像素相交的要素，并对每个相交的要素执行回调。
    • 回调结果，即上一次回调执行的返回值，或第一个真实回调返回值。

代码说明

  • 为map添加地图单击事件，在其事件的回调中

    • 调用map的forEachFeatureAtPixel法判断当前是否捕获到要素
    • 当捕获到要素时基于当前要素(feature）的详细信息动态创建Popup标注的内容，并弹出此 Popup标注。

  • 为map添加 pointermove事件，在其事件回调中

    • 调用map的 hasFeatureAtPixel方法判断是否捕获到要素
    • 当捕获到要素时切换鼠标指针类型。

  • hasFeatureAtPixel （pixel，opt_options）{boolean}

    • 检测要素是否与视口上的像素相交。
    • 返回值：给定的像素处有特征吗？(布尔值,true or false)

48.聚合标注

  • 聚合标注，是指在不同地图分辨率下，通过聚合方式展现标注点的一种方法。
  • 其设计目的就是为了减少当前视窗下加载标注点的数量，提升客户端渲染速度。
  • 因为如果在地图上添加很多标注点，当地图缩放到小级别（即大分辨率）时会出现标注重叠的现象，既不美观，渲染效率也会受到影响。
  • 此时，可以根据地图缩放级数（zoom)的大小，将当前视窗的标注点进行聚合显示。
  • 创建1w个要素数据源

  • 加载聚合标注的矢量图层

代码说明:

  • 通过加载矢量要素方式实例化ol.source. Vector对象，设置随机创建的10000个矢量要素;

    • 然后创建ol.source.Cluster对象，将之前创建的矢量数据源对象作为ol.source.Cluster的数据源
    • 并设置聚合距离参数 distance;
    • 最后将ol.source.Cluster对象作为ol.layer.Vector的数据源，将矢量图层对象加载到地图容器中。
  • ol.source.Cluster的关键参数如下。
    • source:聚合要素的数据源，本示例设置的是加载包含10 000个随机矢量要素的矢量数据源对象。
    • distance:聚合距离参数，当标注间距离小于此值时进行聚合，本示例设置的是40个像素。

实现“添加聚合标注”与“移除聚合标注”按钮的处理函数

  • 即通过 addLayer与removeLayer方法添加与移除包含聚合数据源的矢量图层。

代码说明:

  • 在实现添加与移除功能时，可以调用getSource()获取其数据源对象。

    • 添加聚合标注时，先设置图层的数据源，即设置为含有矢量要素的聚合数据源对象(clusterSource),然后添加图层;
    • 移除聚合标注时，则在移除图层前通过数据源的clear()方法移除所有要素。

49.动态投影

  • 每个地图数据在 Web端加载显示时，都需要设置其投影坐标系。
  • OpenLayers 在地图视图对象中有一个投影坐标系参数( projection)，加载地图时通过此参数设置地图的投影坐标系。
  • 在实际应用中，叠加图层数据需要确保在统一的投影坐标系下，有时候需要对坐标点地图数据进行投影转换操作。
  • OpenLayers 框架下针对地图投影坐标系的操作均由ol.proj.Projection类实现。
  • 例如，提供的ol.proj.transform()方法可以对坐标点进行投影转换
  • 目前,OpenLayers 已定义了两种常用的投影坐标系
  • 即地理经纬度的EPSG:4326和Web墨卡托的 EPSG:3857。
  • 本示例将一个 EPSG:3857的矢量地图，转换到自定义的投影坐标系(ESRI:53009）中显示
  • 如图所示。

  • div
  • 第一个地图容器默认加载MapQuest瓦片与GeoJSON的矢量地图，设置视图的projection参数为EPSG:3857的投影坐标系对象;
  • 另一个地图容器动态加载 GeoJSON的矢量地图，设置视图的 projection参数为自定义的 ESRI:53009的投影坐标系对象，并通过ol.Graticule加载显示参考系标线。



  • ol / proj / proj4.register （proj4）
    • 使proLa4中的投影（带有proj4.defs()）在OpenLayers中可用。
    • 每当对proj4注册表进行更改时（例如在调用之后），都​​应调用此函数proj4.defs()。
    • 此功能不会修改现有的转换。
  • import Graticule from 'ol/layer/Graticule';
    • 为坐标系渲染网格的层（当前仅支持EPSG：4326）。
    • 请注意，视图投影必须同时定义range和worldExtent。

代码说明:

  • 上述代码的关键是创建自定义投影坐标系对象

    • 先通过proj4.defs()定义球形摩尔魏特投影坐标系（ESRI:53009)
    • 然后实例化ol.proj.Projection对象，创建 ESRI:53009对应的投影坐标系对象。
    • 基于创建的投影坐标系对象，将加载的矢量地图投影到此投影坐标系中显示。

50.视图联动

  • 视图联动是指两个以上的地图实现地图联动操作，即操作其中一个地图时另外联动的地图同步响应变更，跟随操作地图视图。

  • 多视图联动功能，可以在加载不同地图数据的地图容器中联动操作，在不同地图视窗中查看同一范围内的不同的地图数据，辅助进行GIS相关的操作与分析。

  • 本示例实现了三个地图视图联动的功能，三个地图分别加载三个不同的地图数据

    • 第一个用Canvas渲染模式加载 MapQuest的OSM地图
    • 第二个用DOM渲染模式加载 MapQuest的 sat地图
    • 第三个则用WebGL渲染模式加载OSM 瓦片地图
    • 如图上图所示。

  • HTML

代码说明:

  • 针对三种渲染方式分别创建三个地图容器，在这三个地图容器中实现地图联动。

    • 其中，非IE内核浏览器全部支持 Canvas、DOM、WebGL渲染方式
    • 而IE浏览器则只支持Canvas与 DOM渲染方式。
      • 因此，在 WebGL渲染方式的地图容器中，添加了一个显示提示信息的div层。
  • 分别创建三个不同渲染方式的地图对象，关联到对应的地图容器。
  • 三个地图联动,需要先设置一个地图为主图，然后在其他两个地图中将其视图对象设置为主图的视图对象。
  • canvas
  • DOM
  • webgl

代码说明:

  • 地图联动的关键是为每个地图设置同一个视图对象（ol.View)，一般设置一个地图为主图，在其他两个地图中将其视图对象设置为主图的视图对象。
  • 上述代码中，将canvas渲染模式的地图作为主图，在实例化其他两个地图时，通过主图对象的getView()方法得到主图视图对象，将其他两个地图的view参数设置为主图的view对象。

51.定位导航

  • 地图定位导航功能，不仅能在PC上应用，还支持各类平板、手机等智能移动终端，目前应用非常广泛。
  • 针对地图定位导航功能，OpenLayers 框架提供了实现此功能的控件( ol.Geolocation)
    • 可以根据当前终端设备的GPS接口，实现实时导航定位功能
    • 也可以基于数据库或本地的导航数据动态模拟导航轨迹。
  • HTML
  • <code> 标签是一个短语标签，用来定义计算机代码文本。

创建一个定位导航对象

  • 即实例化导航定位控件（ol.Geolocation)，调用此对象的setTracking接口启动位置跟踪，在地图上添加定位标注点，并将定位详细信息更新至右上角的定位信息面板中。
  • 创建一个定位控件
  • 定位开启关闭监听事件




代码说明:

  • 实现实时导航定位功能的关键是加载定位控件（ol.Geolocation)，调用定位控件对象的setTracking方法启动位置跟踪功能，同时绑定此控件对象的如下三个事件。

    • ①导航位置变更事件（change:position):当前导航位置变更时触发此事件，在事件回调中获取当前定位坐标点，在地图上添加矢量标注点，并以此为地图中心进行定位。
    • ②导航定位控件变更事件（change):当控件信息变更时，更新界面右上角面板中的导航位置等相关信息。
    • ③精确模式定位事件(change:accuracyGeometry):当缩放到一定分辨率时，响应此事件，在事件回调中设置精确定位点要素的几何信息。

  • 上述示例实现了一个最简单的PC端导航定位功能。除了单点定位外，还可以动态模拟某实物的实时运动轨迹，以及标绘其导航路线等。

  • 实现原理基本相同，即通过计时器控制，在地图上动态添加当前定位点图标，并销毁前一个定位图标。

  • 其关键为定位点的方向，要根据当前定位点的方向得到角度值，相应设置地图的旋转角度。

  • 在此，基于本地JSON格式的定位轨迹数据，沿着模拟轨迹数据实现动态导航定位功能

  • 如图所示。


代码说明:

  • 实现导航定位功能，关键是实例化 ol.Geolocation，即创建一个导航定位控件对象，设置其投影坐标系( projection）和追踪参数(trackingOptions)。
  • 在本示例中，通过叠加层方式的标注标识定位点，因此要添加一个图片标注，即实例化 ol.Overlay，关联界面中设置的标注元素。

加载模拟轨迹数据

  • 为导航功能按钮添加单击事件，根据模拟轨迹数据设置定位控件的各项参数值，以便实现定位功能。
  • 导航监听事件
  • shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值(被删除的元素)。
  • timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。
  • on(类型，侦听器)聆听某种类型的事件。当前类型触发事件时,执行侦听器函数,上面是执行渲染

代码说明:

  • 上述为模拟导航功能实现的关键代码，使用本地模拟的轨迹数据,在导航功能按钮的单击事件函数中使用计时器进行动态导航。
  • 即根据计时器，每隔一段时间读取一个定位点，通过simulatePositionChange方法将定位点数据分别设置到导航定位控件对象的各项参数中。

为导航定位控件添加 change事件监听

  • 在控件信息变化时添加定位点并更新轨迹面板信息。

代码说明:

  • 当客户端读取本地模拟的轨迹点数据并设置到导航定位控件对象时
  • 会触发导航定位控件的change事件，在地图上添加定位点，并更新信息面板中定位点的相关信息。

为地图对象设置地图渲染前执行的方法(beforeRender)

  • 在地图渲染前更改地图中心点与旋转角度。

代码说明:

  • 实现地图容器对象的beforeRender方法，在地图渲染前改变地图中心点与旋转角度
  • 以实现导航定位时根据当前定位点的位置与角度同步更新地图视图的功能。

52.热点图

  • 热点图，也称为热力图，是一种以特殊高亮的形式显示事物密度分布、变化趋势等的图示方法
  • 通常用不同颜色的区块叠加在地图上进行显示，以颜色变化展现事物的状态与变化趋势等。
  • 在热力图中，一般红色表示密集区、橙色次之、绿色较少。
  • 例如，景区人群分布热力图,可以很直观地在地图上表示景区拥挤指数等。
  • HTML



代码说明:

  • 实现热点图的关键是基于ol.layer.Heatmap创建热点图图层对象，根据热点图层的颜色梯度( gradient)、热点半径(radius)、模糊尺寸(blur)等渲染热点图。
  • 在本示例中，分别通过调用热点图层的setRadius.setBlur接口，设置热点图渲染因子热点半径(radius)与模糊尺寸(blur)。
  • 另外，还通过热点图层数据源的addfeature事件,在加载热点图层矢量要素时,根据地震震级属性设置矢量要素的weight属性值。

Web GiS之 OpenLayes 笔记相关推荐

  1. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  2. 《Web GIS原理与应用开发》读书笔记（7）

    第七章 在客户端绘制矢量数据 以下均掺杂个人理解 书目:Web GIS 原理与应用开发 -- 刘光 曾敬文 曾庆丰 著 HTML5的出现为浏览器提供了一系列全新的功能.Canvas的问世提升了GIS在 ...

  3. 《Web GIS原理与应用开发》读书笔记（6）

    第六章 使用Web地图API访问地图服务 以下均掺杂个人理解 书目:Web GIS 原理与应用开发 -- 刘光 曾敬文 曾庆丰 著 6.1 Web地图API API:Application Progr ...

  4. 《Web GIS原理与应用开发》读书笔记（5）

    第五章 切片地图 以下均掺杂个人理解 书目:Web GIS 原理与应用开发 -- 刘光 曾敬文 曾庆丰 著 如果要提高Web地图的访问速度,使用地图切片的非常有效的方法. 地图切片就是在多个比例尺下配 ...

  5. 《Web GIS原理与应用开发》读书笔记（1）

    第一章 Web GIS 概述 以下均掺杂个人理解 书目:Web GIS 原理与应用开发 -- 刘光 曾敬文 曾庆丰 著 1.1 GIS的发展 20世纪60年代,世界上第一个地信系统:加拿大地理信息系统 ...

  6. Web GIS离线解决方案

    Web GIS离线解决方案 参考文章: (1)Web GIS离线解决方案 (2)https://www.cnblogs.com/luxiaoxun/p/5022333.html 备忘一下.

  7. Web GIS及其应用

    摘 要:分析了Web GIS的主要特点,探讨了Web GIS的关键技术,比较了几种流行的Web GIS软件,并简单举例说明了Web GIS的应用. 关键词:Web GIS 关键技术 应用 中图分类号: ...

  8. 用mapXtreme Java开发web gis应用 (上)

    1．开发控件的选择目前影响较大的国外地理服务器有Mapinfo MapXtreme.MapObject.Autodesk Map Guide.ArcIMS.Argcgisserver以及国内的Supe ...

  9. 《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

    最近想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序,所以需要在本地搭建Node.js Web的开发测试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴 ...

最新文章

  1. Eclipse Spring Boot实现热部署
  2. python numpy使用
  3. Linux中查看负载
  4. c语言选择题答案在哪查,C语言选择题及答案
  5. 关于ppt中嵌入echarts图表
  6. 真香 Jenkins 主从模式解决问题So Easy~
  7. UOJ #206. 【APIO2016】Gap
  8. 封装和使用Docker流程
  9. css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐
  10. JavaIO流——文件的读取与传输
  11. 任务调度：开源大数据调度框架Taier(太阿)
  12. rdl报表 mysql_SSRS报表服务随笔(rdl报表服务)-报表参数
  13. 许小年：企业家精神的衰落与重振
  14. 华为各类工程师通信基础面试题目及答案
  15. 2020-08-31
  16. http的长连接和短连接（史上最通俗！）以及应用场景
  17. 互联网晚报 | 1月13日 星期四 | 恒驰5首车下线；抖音电商测试快递服务“音尊达”；中国移动10086 App月底停止运营...
  18. SAP 公司间标准委外流程
  19. PAD智龙迷城（puzzle and dragon）辅助转珠算法思路和python实现
  20. Maven找不到依赖终极解决方案

热门文章

  1. 关于等保2.0要求配置的身份鉴别（口令长度、复杂度、有效期）（口令登录失败、锁定多长时间）
  2. 三维Tensor维度分析,举例mask[0,:],mask[:,:,0],mask[:,0,:]
  3. 如何解决The connected J-Link is defective,Proper operation cannot be guaranteed......
  4. GUI 剖析之 控件篇1）按钮控件
  5. java赋值运算的类型转换出新的问题_学习Java基本数据类型与转换++,--等问题总结...
  6. Windows7家庭版升级为旗舰版
  7. win7家庭版升级到旗舰版实例
  8. python async await threading_Python - 从使用线程到使用 async/await
  9. hosts文件没生效，怎么办？
  10. VMware9虚拟机安装MAC OS X Mountain Lion 10.8.2详细图文教程