admin 管理员组文章数量: 1087139
2024年3月29日发(作者：splitrate是什么)
OpenLayers3基础教程——OL3基本概念
从本节开始，我会陆陆续续的更新有关OL3的相关文章——OpenLayers3基础教程，欢迎大家
关注我的博客，同时也希望我的博客能够给大家带来一点帮助。
概述：
OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但
从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式
从底层重写。OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快
速显示大型矢量数据集，这些功能将在以后的版本中加入。
基本概念：
1、Map
OpenLayers 3的核心部件是Map（）。它被呈现到对象target容器（例如，
包含在地图的网页上的div元素）。所有地图的属性可以在构造时进行配置，或者
通过使用setter方法，如setTarget（）。
1
2、View
ol. View负责地图的中心点，放大，投影之类的设置。
一个实例包含投影projection，该投影决定中心
center
的坐标系以及分辨
率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：
3857），以米为地图单位。
放大
zoom
选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由
maxZoom
（默认值为28）、
zoomFactor
（默认值为2）、
maxResolution
（默认
由投影在256×256像素瓦片的有效成都来计算） 决定。起始于缩放级别0，以每
像素
maxResolution
的单位为分辨率，后续的缩放级别是通过zoomFactor区分之
前的缩放级别的分辨率来计算的，直到缩放级别达到
maxZoom
。
3、Source
OpenLayers 3使用子类获取远程数据图层，包含免费的和商业的地
图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据
（GeoJSON格式、KML格式…）等。
4、Layer
一个图层是资源中数据的可视化显示，OpenLayers 3包含三种基本图层类型：
、
和
。
2
用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分别率的缩
放级别组织的瓦片图片网格组成。
用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。
用于显示在客户端渲染的矢量数据。
总结：
上述片段可以合并成一个自包含视图和图层的地图配置：
OpenLayers3基础教程——加载资源
概述：
本节讲述如何在Ol3中加载wms图层并显示到地图中。
Ol3下载：
你可以在OL官网去下载，下载地址为/download/，也可以去我
的百度云盘下载，下载地址为/s/1o6wwHTo。官网上的最新版
本为3.6.0，我的网盘的版本为3.0.0，不过官网上的链接好像是失效的。
3
OL3必须资源引入：
OL3必须引入的资源有两个，一个为样式文件，；一个为js文件，。
OL3加载wms：
在Ol3中，可以通过两种方式加载WMS，一种是
，其对应的资源
为
MS，他它的定义方式为：
一种是
，其对应的资源为S，它的定义方式为：
显示资源：
OL3中显示资源使用Map实现的，一个Map实例包括target，即地图展示的div的id；
layers，地图要现实的图层集合；view，包括投影，中心点等信息，定义方式为：
4
将上面的内容连起来，完整的代码如下：
5
OpenLayers3基础教程——OL3 介绍control
概述：
本文讲述的是Ol3中的control的介绍和应用。
OL2和OL3 control比较：
相比较Ol2的control，OL3显得特别少，下图分别为Ol2和Ol3的control：
6
Ol2的control
相比较Ol2，OL3保留了mouseposition，scaleline，zoom，zoomslider，而将很多东
西例如draw等转移到了interaction下面，下图为Ol3的interaction：
7
OL3中control的常用操作：
Ol3中control的常用操作包括获取control集，添加，删除。
获取control集
OL3添加control示例：
下面是一个比较完成的OL3的Control的示例，
8
9
10
OpenLayers3基础教程——OL3之Popup
概述：
11
本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的
Popup功能。
接口简介：
overlay跟l一样，是一个可见的窗口，但是不和Control一样，不
是固定在地图区域的某个部分，而是显示在一个地图坐标上，随着地图的移动或者
缩放而移动的。其调用方式如下：
12
13
14
调用示例：
1、 popup样式
15
16
示例完整代码如下：
17
18
19
20
OpenLayers3基础教程——OL3 介绍interaction
概述：
本节主要讲述OL3的交互操作interaction，重点介绍draw，select以及modify。
接口说明：
OL3的interaction继承自ts，下面实现了以下几中交互操作：
创建方式为：
var interaction = new ctionType({options});
添加和移除方式为：
eraction(draw);
Interaction(draw);
1、draw
21
new
(options)
22
23
24
25
2、select
26
27
28
2、 modify
29
30
共享个地图控件的样式
概述：
今天给大家分享一个个人觉得比较好看的自己做的地图控件。
效果：
网址; /gisshixisheng/article/details/47682477
源代码下载地址：/detail/gisshixisheng/9008937
OL记载Arcgis Server切片
概述：
本文讲述如何在OpenLayers中调用Arcgis Server切片并显示。
思路：
在OpenLayers中加载Arcgis Server切片用XYZ图层，Arcgis Server的切片调用地
址我们可以看到如下：
31
可以看到，切片的请求地址为
localhost:6080/arcgis/rest/services/china/MapServer/z/y/x，其中，z为缩放级别，
x，y分别为改切片距离tileOrigin的行列号，其计算方式为：
将之封装为一个OpenLayers扩展类eLayer，该类的代码方
式为：
32
代码中涉及到的参数可以从
localhost:6080/arcgis/rest/services/china/MapServer?f=pjson返回的JSON数据中
获取，如下：
33
34
35
OL3实现多图联动
36
37
版权声明：本文标题：2016最新openlayers 3 基础教程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1711686305a605620.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论