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.Image表示单个图像，基于图层类型，我们将使用不同的资源（ol.source.TileWMS与ol.source.ImageWMS）。
2.1.3Theol.source.TileWMS构造函数url指向的是WMS服务的在线资源，params是对象参数名称及其值，由于在OpenLayers中，默认WMS版本是1.3.0，如果WMS不支持该版本，需要在params中提供一个低版本。
（1）该示例中WMS提供了一个名为“openstreetmap”的图层，将LAYERS参数的值由“bluemarble”改为“openstreetmap”，代码如下：
newnewol.layer.Tile（title:
GlobalImagery,source:
newnewol.source.TileWMS（url:
http:
/maps.opengeo.org/geowebcache/service/wms,params:
LAYERS:
openstreetmap,VERSION:
1.1.1）
（2）改变图层与资源，用单一图像取代瓦片，再这个过程中，需要将资源的url修改为http:
/suite.opengeo.org/geoserver/wms，将LAYERS参数的值修改为“opengeo:
countries”，完成修改后，利用浏览器的开发工具，确保请求的是单一图像而不是256256像素的瓦片。
OpenLayers3入门教程|14了解了从网络地图服务动态获取数据的机制，接下来将深入了解瓦片缓存服务。
2.2瓦片缓存默认情况在，瓦片图层请求一个256256像素的图像来填充地图视窗，当你平移或缩放地图，将发出更多图片请求来填充你没有访问过的地方。
浏览器会缓存一些请求的图像，这通常需要大量的处理器来动态渲染图像。
由于瓦片图层以规律的网格请求图像，这使得服务器能够缓存这些图片请求并且在下次浏览相同区域的时候返回该缓存结果，从而获得更好的性能。
2.2.1ol.source.XYZ网络地图服务规范使得客户端能够请求的内容具有灵活性，如果没有限制，在实践中，缓存会变得困难甚至不可能实现。
另一种几段情况是，服务器可能只提供固定缩放级别和规律网格的瓦片，这种情况可以概括为XYZ资源的瓦片图层X/Y代表网格的行与列，Z代表缩放级别。
2.2.2ol.source.OSMOpenStreetMap（OSM）投影是为了收集并免费提供世界地图的数据，OSM提供了一些不同的数据渲染作为瓦片缓存集，这些渲染符合基本的XYZ网格配置，并且可以在OpenLayers地图中使用。
ol.source.OSM图层可以访问OpenStreetMap瓦片资源。
OpenLayers3入门教程|15
（1）打开1.1创建一副地图创建的map.html文件，将地图初始化代码替换为以下代码：
varmap=newol.Map（target:
map,layers:
newol.layer.Tile（source:
newol.source.OSM（）,view:
newol.View（center:
ol.proj.transform（-93.27,44.98,EPSG:
4326,EPSG:
3857）,zoom:
9）,controls:
ol.control.defaults（attributionOptions:
collapsible:
false）;
（2）在文档的中，添加以下图层属性的样式说明：
#mapwidth:
512px;height:
256px;.ol-attributionacolor:
black;（3）保存修改，在浏览器中查看该页面：
http:
/localhost:
8000/ol_workshop/map.html：
OpenLayers3入门教程|162.2.2.1投影回顾地图的视图定义：
view:
newol.View（center:
ol.proj.transform（-93.27,44.98,EPSG:
4326,EPSG:
3857）,zoom:
9）地理空间数据可能来自各种坐标参照系，一个数据集可能是以度为单位的地理（经纬）坐标系，另一个可能是以米为单位的投影坐标系，对坐标系的全面讨论超出了本实践的范围，但了解其基本概念是很重要的。
OpenLayers3需要知道所使用数据的坐标系，在内部，由ol.proj.Projection对象展现，ol.proj命名空间中的transform方法使用字符串表示坐标参考系（上述示例中的EPSG:
4326以及EPSG:
3857）。
OpenStreetMap瓦片数据是墨卡托投影，因此，我们需要使用墨卡托坐标了设置初始化时的中心点。
由于一个地方的地理坐标相对来说更容易知道，使用ol.proj.transform方法将地理坐标系（EPSG:
4326）转化为墨卡托坐标系（EPSG:
3857）。
OpenLayers3入门教程|17OpenLayers3包含地理坐标系与墨卡托坐标系间相互转换的方法，因此我们可以使用ol.proj.transform方法而不需要任何额外的工作。
如果想要使用其他投影的数据，再使用ol.proj.transform方法之前需要添加一些额外的信息。
例如，使用EPSG:
21781坐标参照系的数据，添加以下两条script标签到页面中：
然后在应用程序代码中，注册该投影并设置其有效范围，代码如下：
/ThiscreatesaprojectionobjectfortheEPSG:
21781projection/andsetsavalidityextentinthatprojectionobject.varprojection=ol.proj.get（EPSG:
21781）;projection.setExtent（485869.5728,76443.1884,837076.5648,299941.7864）;2.2.2.2图层创建layers:
newol.layer.Tile（source:
newol.source.OSM（）,之前的示例中，创建一个新图层后，将其添加到地图配置对象的图层数组中，以上代码接受资源的所有默认选项。
2.2.2.3样式.ol-attributionacolor:
black;如何处理地图控件是本章节意外的内容，但是这里的样式声明让你先睹为快。
默认情况下ol.control.Attribution控件被添加到所有地图中，这使得地图视窗中显示图层资源的归属信息来源，上述声明改变了地图中归属信息的样式（版权行再地图的右下方）。
OpenLayers3入门教程|18掌握了公开可用的缓存瓦片集的图层用法，接下来将介绍专有的栅格图层，详见2.3专有栅格图层。
2.2.2.4属性控件配置默认情况下，ol.control.Attribution控件在页面上添加了一个i（information）按钮，点击即可显示归属地信息。
为了符合OpenStreetMap的使用条款，并且将OpenStreetMap的归属地信息一直展现出来，可添加以下代码在ol.Map构造函数中最为可选对象。
controls:
ol.control.defaults（attributionOptions:
collapsible:
false）这段代码移除了i按钮，使得归属地信息一直展现在视图中。
2.3专有栅格图层（Bing）在前面的章节中，图层是基于符合标准的WMS以及自定义瓦片缓存显示的，在线地图（或者瓦片地图客户端）主要是通过可用的专有地图瓦片服务进行广泛推广，OpenLayers提供的图层类型能通过使用它们的API来调用这些专有服务。
本章节使用的示例，是在上一章节示例的基础上，添加一个使用Bing瓦片的图层。
（1）将map.html文件中配置OSM资源的代码替换为ol.source.BingMaps：
source:
newol.source.BingMaps（imagerySet:
Road,key:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3）注：
Bing瓦片API要求用户注册一个API密钥，该密钥将在地图应用程序中使用，示例中的密钥不能再产品中使用。
（1）保存修改，在浏览器中查看该页面：
http:
/localhost:
8000/ol_workshop/map.html：
OpenLayers3入门教程|19完整示例代码如下：
#mapheight:
256px;width:
512px;.ol-attributionacolor:
black;OpenLayers3exampleMyMapvarmap=newol.Map（target:
map,layers:
newol.layer.Tile（OpenLayers3入门教程|20source:
newol.source.BingMaps（imagerySet:
Road,key:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3）,view:
newol.View（center:
ol.proj.transform（-93.27,44.98,EPSG:
4326,EPSG:
3857）,zoom:
9）;2.4矢量图层矢量图层由ol.layer.Vector展示，并处理客户端矢量数据的显示。
以下将使用最初的WMS示例来获取一个世界地图，并在其基础上添加一个带有一些要素的矢量图层。
#mapheight:
256px;width:
512px;OpenLayers3exampleMyMapvarmap=newol.Map（OpenLayers3入门教程|21target:
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（projection:
EPSG:
4326,center:
0,0,zoom:
0,maxResolution:
0.703125）;2.4.1添加矢量图层
（1）打开map.html文件，将初始化WMS的示例复制其中，保存修改后在浏览器中确定地图正常显示：
http:
/localhost:
8000/ol_workshop/map.html。
（2）在地图初始化代码中，找到瓦片图层的加载，在其后添加一下新的图层，以下代码实现请求一组存放在GeoJSON中的要素：
newol.layer.Vector（title:
Earthquakes,source:
newol.source.GeoJSON（url:
data/layers/7day-M2.5.json）,style:
newol.style.Style（image:
newol.style.Circle（radius:
3,fill:
newol.style.Fill（color:
white）OpenLayers3入门教程|22）以上示例显示了世界地图，附以白色的圆圈代表地震带。
注：
GeoJSON数据坐标系与地图视图的相同，均为EPSG:
4326，因此无需再次设置投影，只有在资源与视图的投影不同的情况下，才需要在资源中明确指定projection属性来表示要素缓存的投影，这以为着地图视图的投影通常可以被指定。
2.4.2详细说明上述示例中，设置图层的标题title为“Earthquakes”
升级会员 