2022年OpenLayers入门教程 .pdf
《2022年OpenLayers入门教程 .pdf》由会员分享,可在线阅读,更多相关《2022年OpenLayers入门教程 .pdf(42页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、OpenLayers 3 入门教程Derect By: 黄进名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 1摘要OpenLayers 3对 OpenLayers网络地图库进行了根本的重新设计。版本2 虽然被广泛使用,但从 JavaScript 开发的早期发展阶段开始,已日益现实出它的落后。 OL3 已运用现代的设计模式从底层重写。最初的版本旨在支持第2 版提供的功能,提供大量商业或免费
2、的瓦片资源以及最流行的开源矢量数据格式。与版本2 一样,数据可以被任意投影。最初的版本还增加了一些额外的功能,如能够方便地旋转地图以及显示地图动画。OpenLayers 3同时设计了一些主要的新功能,如显示三维地图,或使用WebGL 快速显示大型矢量数据集,这些功能将在以后的版本中加入。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 2目录基本概念4Map 4View 4Source 5
3、Layer 5总结6Openlayers 3 实践71 地图显示71.1创建一副地图71.2 剖析你的地图81.3 Openlayers的资源112 图层与资源122.1 网络地图服务图层122.2 瓦片缓存142.3 专有栅格图层( Bing)182.4 矢量图层202.5 矢量影像233 控件与交互243.1 显示比例尺243.2 选择要素263.3 绘制要素29名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页,共 42 页 - - - - - - - - - OpenLa
4、yers 3 入门教程 | 33.4 修改要素314 矢量样式334.1矢量图层格式334.2矢量图层样式354.3 设置矢量图层的样式38名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 4基本概念Map OpenLayers 3 的核心部件是 Map (ol.Map)。它被呈现到对象target容器(例如,包含在地图的网页上的div元素)。所有地图的属性可以在构造时进行配置,或者通过使
5、用setter方法,如 setTarget ()。var map = new ol.Map(target: map); View ol. View负责地图的中心点,放大,投影之类的设置。Map Layer View Source 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 5一个ol.View实例包含投影projection,该投影决定中心center的坐标系以及分辨率的单位,如果没
6、有指定(如下面的代码段),默认的投影是球墨卡托(EPSG:3857 ),以米为地图单位。放大zoom选项是一种方便的方式来指定地图的分辨率,可用的缩放级别由maxZoom(默认值为 28)、zoomFactor(默认值为 2)、maxResolution(默认由投影在256 256 像素瓦片的有效成都来计算)决定。起始于缩放级别0,以每像素maxResolution的单位为分辨率,后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的,直到缩放级别达到maxZoom。map.setView(new ol.View( center: 0, 0, zoom: 2 );Sourc
7、e OpenLayers 3 使用ol.source.Source子类获取远程数据图层,包含免费的和商业的地图瓦片服务,如 OpenStreetMap 、Bing、OGC资源( WMS 或 WMTS)、矢量数据( GeoJSON格式、KML 格式)等。var osmSource = new ol.source.OSM();Layer 一个图层是资源中数据的可视化显示,OpenLayers 3包含三种基本图层类型:ol.layer.Tile、ol.layer.Image和ol.layer.Vector。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - -
8、- - - - - 名师精心整理 - - - - - - - 第 6 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 6ol.layer.Tile用于显示瓦片资源,这些瓦片提供了预渲染,并且由特定分别率的缩放级别组织的瓦片图片网格组成。ol.layer.Image用于显示支持渲染服务的图片,这些图片可用于任意范围和分辨率。ol.layer.Vector用于显示在客户端渲染的矢量数据。var osmLayer = new ol.layer.Tile(source: osmSource); map.addLayer(osmLayer);总结上述片段可以
9、合并成一个自包含视图和图层的地图配置:new ol.Map( layers: new ol.layer.Tile(source: new ol.source.OSM() , view: new ol.View( center: 0, 0, zoom: 2 ), target: map ); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 7Openlayers 3 实践1 地图显示1.1
10、 创建一副地图在 openlayers中,Map 是图层、各种交互以及处理用户交互控件的集合,地图由三个基本成分生成:标记,样式声明和初始化代码。以下是一个完整的OpenLayers3地图示例。#map height: 256px; width: 512px; OpenLayers 3 example My Mapvar map = new ol.Map( target : map, layers : new ol.layer.Tile( title: Global Imagery, source : new ol.source.TileWMS( url: http:/maps.opengeo
11、.org/geowebcache/service/wms, params : LAYERS : bluemarble, VERSION : 1.1.1 ) ) , view: new ol.View( 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 8 projection: EPSG:4326 , center : 0, 0, zoom: 0, maxResolution : 0.70
12、3125 ) ); (1) 下载 https:/ 创建一个新的文件,命名为map.html,将以上代码复制进该文件后放入下载的文件夹的根目录下;(3) 在浏览器中输入: http:/localhost:8000/ol_workshop/map.html,我们将打开一个工作的地图。成功地创建了第一张地图,我们将继续关注地图的组成部分,详见1.2 剖析你的地图。1.2 剖析你的地图名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页,共 42 页 - - - - - - - - - O
13、penLayers 3 入门教程 | 9正如前一部分演示的那样,一副地图通过将标记,样式声明和初始化代码三部分组织在一起而生成,接下来将详细的介绍这三个组成部分。1.2.1 地图标记标记为上例中的地图生成的一个文档元素:在此示例中,我们用元素作为地图显示的容器,其他块级元素也能做视图的容器。在这种情况下,我们设置容器的id属性,所以我们可以将其作为地图的对象。1.2.2 地图样式OpenLayers带有一个默认的样式表,指定地图相关的元素应如何显示,我们明确的将样式表引用到map.html页面中。OpenLayers不对地图的大小做预定义,因此在默认样式表之后,我们需要包括至少一个自定义样式声
14、明来说明地图在页面上的空间。#map height: 256px; width: 512px; 在该示例中,我们使用地图容器的id值作为选择器,并明确定义地图容器的高为256px,宽为 512px。样式声明直接包含在文档的部分。在大多数情况下,地图相关的样式说明是链接到外部样式表的一个大型主题网站的一部分。1.2.3 地图初始化名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 10生成地
15、图的下一步包含一些初始化代码,在该示例中,我们在文档的前添加元素来实现。var map = new 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:
16、 0, maxResolution: 0.703125 ) ); 注:这些步骤的顺序很重要,OpenLayers 库必须在在自定义脚本执行之前加载,在此示例中,OpenLayers 库在文档的部分加载()。同样的,在文档中作为显示容器的元素(该实例中为)准备好之前,自定义地图初始化代码是不能执行的,将初始化代码添加到文档中的后面,我们能在地图生成前,确保库已加载,显示容器已准备好。接下来,将详细介绍初始化脚本的内容。脚本创建了一个包含一些配置选项的ol.Map对象:target: map我们使用显示容器的id属性来告诉地图构造函数将地图交付到何处,在该示例中,我们通过字符串“ map”作为地图
17、构造函数的对象。这个语法方便快捷,也可以更详细的使用元素的直接引用( e.g. document.getElementById(map))。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 11图层配置创建了一个显示在地图中的图层:layers: new ol.layer.Tile( source : new ol.source.TileWMS( url: http:/maps.open
18、geo.org/geowebcache/service/wms, params : LAYERS : bluemarble, VERSION: 1.1.1 ) ) , 不用担心对以上的语法不了解,图层创建在后续章节中会有详细的介绍。最重要的是理解地图显示的是图层的集合。为了显示一副地图,至少需要添加一个图层。最后一步是定义视图,指定投影、中心点,放大级别,在该示例中,还指定了maxResolution,以确保请求的范围不超过GeoWebCache 能处理的范围。view: new ol.View( projection: EPSG:4326 , center : 0, 0, zoom: 0,
19、maxResolution: 0.703125) 以上,成功剖析了一副地图的显示,接下来将介绍更多关于OpenLayers的开发。1.3 Openlayers 的资源OpenLayers 库提供丰富的功能,尽管开发者对每个功能都提供了示例,并且让其他有经验的程序员找到属于他们自己的方式来组织代码,很多用户仍觉得从头开始是一个挑战。1.3.1 通过示例学习新用户很可能会发现研究OpenLayer的示例代码以及库的功能是开始起步最有效的方式。http:/openlayers.org/en/master/examples/名师资料总结 - - -精品资料欢迎下载 - - - - - - - - -
20、- - - - - - - - - 名师精心整理 - - - - - - - 第 12 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 121.3.2 查看 API参考在理解了构成以及控制一幅地图的基本组成之后,搜索API 帮助文档以了解方法签名、对象属性的详细信息。http:/openlayers.org/en/master/apidoc/2 图层与资源2.1 网络地图服务图层当向地图中添加图层,图层的资源通常用来获取将要显示的数据,数据请求可以是影像数据,也可以是矢量数据。栅格数据是服务端提供的图片信息,矢量数据是服务器交付的结构化信息,在客户
21、端(浏览器)进行显示。有许多不同类型的服务提供栅格地图数据,这部分涉及到符合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 ) ) 完整示例代码详见
22、1.1创建一副地图。2.1.2 The ol.layer.Tile构造函数名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 13在 1.1创建一副地图创建的示例中,使用的数据资源是ol.source.TileWMS,我们可以从title 关键字的字面上理解它的含义,但是基本上来说,这里的关键字可以是任意名称,在OpenLayers 3 中,图层和资源有一个区别,而在OpenLayers
23、2 中,这两部分一起组成了一个图层。ol.layer.Tile表示图像的规则网格,而ol.layer.Image表示单个图像,基于图层类型,我们将使用不同的资源(ol.source.TileWMS与ol.source.ImageWMS)。2.1.3 The ol.source.TileWMS 构造函数url 指向的是 WMS 服务的在线资源, params 是对象参数名称及其值,由于在OpenLayers 中,默认 WMS 版本是 1.3.0,如果 WMS 不支持该版本,需要在params 中提供一个低版本。(1) 该示例中 WMS 提供了一个名为“ openstreetmap ”的图层,将
24、LAYERS 参数的值由“bluemarble”改为“ openstreetmap ”,代码如下:new ol.layer.Tile( title: Global Imagery, source : new ol.source.TileWMS( url: http:/maps.opengeo.org/geowebcache/service/wms, params: LAYERS : openstreetmap, VERSION : 1.1.1 ) ) (2) 改变图层与资源,用单一图像取代瓦片,再这个过程中,需要将资源的url 修改为 http:/suite.opengeo.org/geose
25、rver/wms,将LAYERS参数的值修改为“opengeo:countries”,完成修改后,利用浏览器的开发工具,确保请求的是单一图像而不是 256 256像素的瓦片。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页,共 42 页 - - - - - - - - - OpenLayers 3 入门教程 | 14了解了从网络地图服务动态获取数据的机制,接下来将深入了解瓦片缓存服务。2.2 瓦片缓存默认情况在,瓦片图层请求一个256 256像素的图像来填充地图视窗,当你平移
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022年OpenLayers入门教程 2022 OpenLayers 入门教程
限制150内