OpenLayers3入门教程.pdf

1、OpenLayers 3 入门教程入门教程 Derect By:黄进 OpenLayers 3 入门教程|1 摘要 OpenLayers 3 对 OpenLayers 网络地图库进行了根本的重新设计。版本 2 虽然被广泛使用，但从 JavaScript 开发的早期发展阶段开始，已日益现实出它的落后。OL3 已运用现代的设计模式从底层重写。最初的版本旨在支持第 2 版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。与版本 2 一样，数据可以被任意投影。最初的版本还增加了一些额外的功能，如能够方便地旋转地图以及显示地图动画。OpenLayers 3 同时设计了一些主要的新功能

2、，如显示三维地图，或使用 WebGL 快速显示大型矢量数据集，这些功能将在以后的版本中加入。OpenLayers 3 入门教程|2 目录 基本概念 4 Map 4 View 4 Source 5 Layer 5 总结 6 Openlayers 3 实践 7 1 地图显示 7 1.1 创建一副地图 7 1.2 剖析你的地图 8 1.3 Openlayers的资源 11 2 图层与资源 12 2.1 网络地图服务图层 12 2.2 瓦片缓存 14 2.3 专有栅格图层（Bing）18 2.4 矢量图层 20 2.5 矢量影像 23 3 控件与交互 24 3.1 显示比例尺 24 3.2 选择要素

3、26 3.3 绘制要素 29 OpenLayers 3 入门教程|3 3.4 修改要素 31 4 矢量样式 33 4.1 矢量图层格式 33 4.2 矢量图层样式 35 4.3 设置矢量图层的样式 38 OpenLayers 3 入门教程|4 基本概念 Map OpenLayers 3 的核心部件是 Map（ol.Map）。它被呈现到对象target容器（例如，包含在地图的网页上的div元素）。所有地图的属性可以在构造时进行配置，或者通过使用 setter方法，如 setTarget（）。var map=new ol.Map(target:map);View ol.View负责地图的中心点，放

4、大，投影之类的设置。Map Layer View Source OpenLayers 3 入门教程|5 一个ol.View实例包含投影projection，该投影决定中心center 的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地图单位。放大zoom 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由maxZoom（默认值为 28）、zoomFactor（默认值为 2）、maxResolution（默认由投影在 256256 像素瓦片的有效成都来计算）决定。起始于缩放级别 0，以每像素maxResolution 的单位为分辨

5、率，后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的，直到缩放级别达到maxZoom。map.setView(new ol.View(center:0,0,zoom:2 );Source OpenLayers 3 使用ol.source.Source子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如 OpenStreetMap、Bing、OGC 资源（WMS 或 WMTS）、矢量数据（GeoJSON格式、KML格式）等。var osmSource=new ol.source.OSM();Layer 一个图层是资源中数据的可视化显示，OpenLayers 3 包含

6、三种基本图层类型：ol.layer.Tile、ol.layer.Image 和 ol.layer.Vector。OpenLayers 3 入门教程|6 ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分辨率的缩放级别组织的瓦片图片网格组成。ol.layer.Image用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。ol.layer.Vector用于显示在客户端渲染的矢量数据。var osmLayer=new ol.layer.Tile(source:osmSource);map.addLayer(osmLayer);总结 上述片段可以合并成一个自包含视

7、图和图层的地图配置：new ol.Map(layers:new ol.layer.Tile(source:new ol.source.OSM(),view:new ol.View(center:0,0,zoom:2 ),target:map );OpenLayers 3 入门教程|7 Openlayers 3 实践 1 地图显示 1.1 创建一副地图 在 openlayers中，Map 是图层、各种交互以及处理用户交互控件的集合，地图由三个基本成分生成：标记，样式声明和初始化代码。以下是一个完整的 OpenLayers3 地图示例。#map height:256px;width:512px;O

8、penLayers 3 example My Map var map=new ol.Map(target:map,layers:new ol.layer.Tile(title:Global Imagery,source:new ol.source.TileWMS(url:http:/maps.opengeo.org/geowebcache/service/wms,params:LAYERS:bluemarble,VERSION:1.1.1 ),view:new ol.View(OpenLayers 3 入门教程|8 projection:EPSG:4326,center:0,0,zoom:0,

9、maxResolution:0.703125 );（1）下载 https:/ 1.2 剖析你的地图。1.2 剖析你的地图 OpenLayers 3 入门教程|9 正如前一部分演示的那样，一副地图通过将标记，样式声明和初始化代码三部分组织在一起而生成，接下来将详细的介绍这三个组成部分。1.2.1 地图标记 标记为上例中的地图生成的一个文档元素：在此示例中，我们用元素作为地图显示的容器，其他块级元素也能做视图的容器。在这种情况下，我们设置容器的id属性，所以我们可以将其作为地图的对象。1.2.2 地图样式 OpenLayers 带有一个默认的样式表，指定地图相关的元素应如何显示，我们明确的将样式表

10、引用到map.html页面中。OpenLayers 不对地图的大小做预定义，因此在默认样式表之后，我们需要包括至少一个自定义样式声明来说明地图在页面上的空间。#map height:256px;width:512px;在该示例中，我们使用地图容器的id值作为选择器，并明确定义地图容器的高为 256px，宽为 512px。样式声明直接包含在文档的部分。在大多数情况下，地图相关的样式说明是链接到外部样式表的一个大型主题网站的一部分。1.2.3 地图初始化 生成地图的下一步包含一些初始化代码，在该示例中，我们在文档的前添加 元素来实现。OpenLayers 3 入门教程|10 var map=new

11、 ol.Map(target:map,layers:new ol.layer.Tile(source:new ol.source.TileWMS(url:http:/maps.opengeo.org/geowebcache/service/wms,params:LAYERS:bluemarble,VERSION:1.1.1 ),view:new ol.View(projection:EPSG:4326,center:0,0,zoom:0,maxResolution:0.703125 );注：这些步骤的顺序很重要，OpenLayers 库必须在在自定义脚本执行之前加载，在此示例中，OpenLay

12、ers 库在文档的部分加载（）。同样的，在文档中作为显示容器的元素（该实例中为）准备好之前，自定义地图初始化代码是不能执行的，将初始化代码添加到文档中的后面，我们能在地图生成前，确保库已加载，显示容器已准备好。接下来，将详细介绍初始化脚本的内容。脚本创建了一个包含一些配置选项的ol.Map对象：target:map 我们使用显示容器的id属性来告诉地图构造函数将地图交付到何处，在该示例中，我们通过字符串“map”作为地图构造函数的对象。这个语法方便快捷，也可以更详细的使用元素的直接引用（e.g.document.getElementById(map)）。图层配置创建了一个显示在地图中的图层：l

13、ayers:OpenLayers 3 入门教程|11 new ol.layer.Tile(source:new ol.source.TileWMS(url:http:/maps.opengeo.org/geowebcache/service/wms,params:LAYERS:bluemarble,VERSION:1.1.1 ),不用担心对以上的语法不了解，图层创建在后续章节中会有详细的介绍。最重要的是理解地图显示的是图层的集合。为了显示一副地图，至少需要添加一个图层。最后一步是定义视图，指定投影、中心点，放大级别，在该示例中，还指定了maxResolution，以确保请求的范围不超过 Geo

14、WebCache 能处理的范围。view:new ol.View(projection:EPSG:4326,center:0,0,zoom:0,maxResolution:0.703125)以上，成功剖析了一副地图的显示，接下来将介绍更多关于 OpenLayers 的开发。1.3 Openlayers 的资源 OpenLayers 库提供丰富的功能，尽管开发者对每个功能都提供了示例，并且让其他有经验的程序员找到属于他们自己的方式来组织代码，很多用户仍觉得从头开始是一个挑战。1.3.1 通过示例学习 新用户很可能会发现研究 OpenLayer的示例代码以及库的功能是开始起步最有效的方式。http

15、:/openlayers.org/en/master/examples/1.3.2 查看 API 参考 OpenLayers 3 入门教程|12 在理解了构成以及控制一幅地图的基本组成之后，搜索 API帮助文档以了解方法签名、对象属性的详细信息。http:/openlayers.org/en/master/apidoc/2 图层与资源 2.1 网络地图服务图层 当向地图中添加图层，图层的资源通常用来获取将要显示的数据，数据请求可以是影像数据，也可以是矢量数据。栅格数据是服务端提供的图片信息，矢量数据是服务器交付的结构化信息，在客户端（浏览器）进行显示。有许多不同类型的服务提供栅格地图数据，这部

16、分涉及到符合 OGC 网络地图服务（WMS）规范的供应商。2.1.1 创建图层 在 1.1 创建一副地图 创建的地图示例的基础上，修改图层来理解其运行机制。layers:new ol.layer.Tile(title:Global Imagery,source:new ol.source.TileWMS(url:http:/maps.opengeo.org/geowebcache/service/wms,params:LAYERS:bluemarble,VERSION:1.1.1 )完整示例代码详见 1.1创建一副地图。2.1.2 The ol.layer.Tile 构造函数 在 1.1 创建一副地图创建的示例中，使用的数据资源是ol.source.TileWMS，我们可以从title 关键字的字面上理解它的含义，但是基本上来说，这里的关键字可以是任意名称，在 OpenLayers 3 入门教程|13 OpenLayers 3 中，图层和资源有一个区别，而在 OpenLayers 2 中，这两部分一起组成了一个图层。ol.layer.Tile表示图像的规则网格，而ol.layer.Im