OpenLayers3入门教程.pdf
《OpenLayers3入门教程.pdf》由会员分享，可在线阅读，更多相关《OpenLayers3入门教程.pdf（42页珍藏版）》请在冰豆网上搜索。
OpenLayers3入门教程入门教程DerectBy:
黄进OpenLayers3入门教程|1摘要OpenLayers3对OpenLayers网络地图库进行了根本的重新设计。
版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。
OL3已运用现代的设计模式从底层重写。
最初的版本旨在支持第2版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。
与版本2一样，数据可以被任意投影。
最初的版本还增加了一些额外的功能，如能够方便地旋转地图以及显示地图动画。
OpenLayers3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。
OpenLayers3入门教程|2目录基本概念4Map4View4Source5Layer5总结6Openlayers3实践71地图显示71.1创建一副地图71.2剖析你的地图81.3Openlayers的资源112图层与资源122.1网络地图服务图层122.2瓦片缓存142.3专有栅格图层（Bing）182.4矢量图层202.5矢量影像233控件与交互243.1显示比例尺243.2选择要素263.3绘制要素29OpenLayers3入门教程|33.4修改要素314矢量样式334.1矢量图层格式334.2矢量图层样式354.3设置矢量图层的样式38OpenLayers3入门教程|4基本概念MapOpenLayers3的核心部件是Map（ol.Map）。
它被呈现到对象target容器（例如，包含在地图的网页上的div元素）。
所有地图的属性可以在构造时进行配置，或者通过使用setter方法，如setTarget（）。
varmap=newol.Map（target:
map）;Viewol.View负责地图的中心点，放大，投影之类的设置。
MapLayerViewSourceOpenLayers3入门教程|5一个ol.View实例包含投影projection，该投影决定中心center的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：
3857），以米为地图单位。
放大zoom选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由maxZoom（默认值为28）、zoomFactor（默认值为2）、maxResolution（默认由投影在256256像素瓦片的有效成都来计算）决定。
起始于缩放级别0，以每像素maxResolution的单位为分辨率，后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的，直到缩放级别达到maxZoom。
map.setView（newol.View（center:
0,0,zoom:
2）;SourceOpenLayers3使用ol.source.Source子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据（GeoJSON格式、KML格式）等。
varosmSource=newol.source.OSM（）;Layer一个图层是资源中数据的可视化显示，OpenLayers3包含三种基本图层类型：
ol.layer.Tile、ol.layer.Image和ol.layer.Vector。
OpenLayers3入门教程|6ol.layer.Tile用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分辨率的缩放级别组织的瓦片图片网格组成。
ol.layer.Image用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。
ol.layer.Vector用于显示在客户端渲染的矢量数据。
varosmLayer=newol.layer.Tile（source:
osmSource）;map.addLayer（osmLayer）;总结上述片段可以合并成一个自包含视图和图层的地图配置：
newol.Map（layers:
newol.layer.Tile（source:
newol.source.OSM（）,view:
newol.View（center:
0,0,zoom:
2）,target:
map）;OpenLayers3入门教程|7Openlayers3实践1地图显示1.1创建一副地图在openlayers中，Map是图层、各种交互以及处理用户交互控件的集合，地图由三个基本成分生成：
标记，样式声明和初始化代码。
以下是一个完整的OpenLayers3地图示例。
#mapheight:
256px;width:
512px;OpenLayers3exampleMyMapvarmap=newol.Map（target:
map,layers:
newol.layer.Tile（title:
GlobalImagery,source:
newol.source.TileWMS（url:
http:
/maps.opengeo.org/geowebcache/service/wms,params:
LAYERS:
bluemarble,VERSION:
1.1.1）,view:
newol.View（OpenLayers3入门教程|8projection:
EPSG:
4326,center:
0,0,zoom:
0,maxResolution:
0.703125）;
（1）下载https:
/1.2剖析你的地图。
1.2剖析你的地图OpenLayers3入门教程|9正如前一部分演示的那样，一副地图通过将标记，样式声明和初始化代码三部分组织在一起而生成，接下来将详细的介绍这三个组成部分。
1.2.1地图标记标记为上例中的地图生成的一个文档元素：
在此示例中，我们用元素作为地图显示的容器，其他块级元素也能做视图的容器。
在这种情况下，我们设置容器的id属性，所以我们可以将其作为地图的对象。
1.2.2地图样式OpenLayers带有一个默认的样式表，指定地图相关的元素应如何显示，我们明确的将样式表引用到map.html页面中。
OpenLayers不对地图的大小做预定义，因此在默认样式表之后，我们需要包括至少一个自定义样式声明来说明地图在页面上的空间。
#mapheight:
256px;width:
512px;在该示例中，我们使用地图容器的id值作为选择器，并明确定义地图容器的高为256px，宽为512px。
样式声明直接包含在文档的部分。
在大多数情况下，地图相关的样式说明是链接到外部样式表的一个大型主题网站的一部分。
1.2.3地图初始化生成地图的下一步包含一些初始化代码，在该示例中，我们在文档的前添加元素来实现。
OpenLayers3入门教程|10varmap=newol.Map（target:
map,layers:
newol.layer.Tile（source:
newol.source.TileWMS（url:
http:
/maps.opengeo.org/geowebcache/service/wms,params:
LAYERS:
bluemarble,VERSION:
1.1.1）,view:
newol.View（projection:
EPSG:
4326,center:
0,0,zoom:
0,maxResolution:
0.703125）;注：
这些步骤的顺序很重要，OpenLayers库必须在在自定义脚本执行之前加载，在此示例中，OpenLayers库在文档的部分加载（）。
同样的，在文档中作为显示容器的元素（该实例中为）准备好之前，自定义地图初始化代码是不能执行的，将初始化代码添加到文档中的后面，我们能在地图生成前，确保库已加载，显示容器已准备好。
接下来，将详细介绍初始化脚本的内容。
脚本创建了一个包含一些配置选项的ol.Map对象：
target:
map我们使用显示容器的id属性来告诉地图构造函数将地图交付到何处，在该示例中，我们通过字符串“map”作为地图构造函数的对象。
这个语法方便快捷，也可以更详细的使用元素的直接引用（e.g.document.getElementById（map））。
图层配置创建了一个显示在地图中的图层：
layers:
OpenLayers3入门教程|11newol.layer.Tile（source:
newol.source.TileWMS（url:
http:
/maps.opengeo.org/geowebcache/service/wms,params:
LAYERS:
bluemarble,VERSION:
1.1.1）,不用担心对以上的语法不了解，图层创建在后续章节中会有详细的介绍。
最重要的是理解地图显示的是图层的集合。
为了显示一副地图，至少需要添加一个图层。
最后一步是定义视图，指定投影、中心点，放大级别，在该示例中，还指定了maxResolution，以确保请求的范围不超过GeoWebCache能处理的范围。
view:
newol.View（projection:
EPSG:
4326,center:
0,0,zoom:
0,maxResolution:
0.703125）以上，成功剖析了一副地图的显示，接下来将介绍更多关于OpenLayers的开发。
1.3Openlayers的资源OpenLayers库提供丰富的功能，尽管开发者对每个功能都提供了示例，并且让其他有经验的程序员找到属于他们自己的方式来组织代码，很多用户仍觉得从头开始是一个挑战。
1.3.1通过示例学习新用户很可能会发现研究OpenLayer的示例代码以及库的功能是开始起步最有效的方式。
http:
/openlayers.org/en/master/examples/1.3.2查看API参考OpenLayers3入门教程|12在理解了构成以及控制一幅地图的基本组成之后，搜索API帮助文档以了解方法签名、对象属性的详细信息。
http:
/openlayers.org/en/master/apidoc/2图层与资源2.1网络地图服务图层当向地图中添加图层，图层的资源通常用来获取将要显示的数据，数据请求可以是影像数据，也可以是矢量数据。
栅格数据是服务端提供的图片信息，矢量数据是服务器交付的结构化信息，在客户端（浏览器）进行显示。
有许多不同类型的服务提供栅格地图数据，这部分涉及到符合OGC网络地图服务（WMS）规范的供应商。
2.1.1创建图层在1.1创建一副地图创建的地图示例的基础上，修改图层来理解其运行机制。
layers:
newol.layer.Tile（title:
GlobalImagery,source:
newol.source.TileWMS（url:
http:
/maps.opengeo.org/geowebcache/service/wms,params:
LAYERS:
bluemarble,VERSION:
1.1.1）完整示例代码详见1.1创建一副地图。
2.1.2Theol.layer.Tile构造函数在1.1创建一副地图创建的示例中，使用的数据资源是ol.source.TileWMS，我们可以从title关键字的字面上理解它的含义，但是基本上来说，这里的关键字可以是任意名称，在OpenLayers3入门教程|13OpenLayers3中，图层和资源有一个区别，而在OpenLayers2中，这两部分一起组成了一个图层。
ol.layer.Tile表示图像的规则网格，而ol.layer.Im
升级会员 