openlayer3 入门常用方法

原创 wangyuyu 教程 openlayer 239阅读 2018-01-10 15:57:15 举报

emmmmmm... 心血来潮搜索了一下openlayer相关笔记,搜索结果居然是空的!!!

然后看到一篇关于百度地图的笔记:传送门 点赞跟收藏都是个位数,看来有点冷门

之前因为工作需要学习了一下openlayer3,现在整理一下写个笔记留作纪念~

(嘛 之前学的时候资料蛮少,现在好像挺多了 )

简介:
OpenLayers 3简称ol3,它是一个开源的Web GIS引擎,使用了JavaScript、最新的HTML5技术及CSS技术,支持dom,canvas和webgl三种渲染方式。在地图数据源方面,支持各种类型的瓦片地图,既支持在线的,也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等;还支持各种矢量地图,比如GeoJSON,TopoJSON,KML,GML等等。随着OpenLayers 3的进一步发展,将支持更多的地图类型。

不兼容openlayer2:
OpenLayers 3完全是重新设计,采用全新的架构,使用方式及API都不一样,只是在功能上完全实现OpenLayers 2已有的功能。为此,使用OpenLayers 3不必先学习OpenLayers 2。但使用过OpenLayers 2,并不等于直接就会用OpenLayers 3,仍然需要从零开始学习。

组成:
OpenLayers 3地图主要是由layer和view组成,layer可以有多个,view只能有一个。

主要组成
大致组成部分如下图,具体含义不做详解

openlayer3入门常用方法

创建地图:
文件引用方式我就不多说了,一个css一个js
1.在页面需要有一个map的容器
2.实例化一个map对象
3.将容器的id绑定到map的target属性中
形式跟创建echart图表类似。如图:

openlayer3入门常用方法
target中也可以绑定dom对象,这样在后期需要对容器有其他操作时比较方便

ol.Map:
logo
创建地图的时候,在地图上生成一个openlayer的官方Logo。这个logo是默认显示的,但是可以设置隐藏,也可以自己定制。

logo

ol.View:
常用:
定位时设置中心点
查看不同级别地区时,设置地图的缩放级别

view.png
获取地图各种值通常用get方法,一些属性值可直接get(‘属性名’)获取
设置值可以用set方法
设置view相关属性之后地图没有改变,可以使用map.render()方法重新渲染地图
另:地图容器宽高发生改变时候,若是地图没有填满容器,可使用map.updateSize()方法

分辨率:
分辨率是屏幕坐标和世界坐标的纽带,通过它,才能知道你在屏幕上用鼠标点击的位置对应于世界地图具体的经纬度位置。
minResolution,图层可见的最小分辨率,当图层的缩放级别小于这个分辨率时,图层就会隐藏;
maxResolution,图层可见的最大分辨率,当图层的缩放级别等于或超过这个分辨率时,图层就会隐藏。
maxResolution是你最模糊级别的切片 的坐标跨度 与 图片像素宽度的比值
比如最模糊级别是全球图片 ,坐标跨度180度,图片尺寸是 512*512,那么这个值就是 180/512.单位为度
如果单位是米,对应换坐标跨度数值就行了(没有太具体认知,这是查资料得到的答案)

知道最大分辨率和缩放级别数(numZoomLevels)目可以直接知道最小和最大的缩放级别
一个相关讲解比较详细的博客

Extent:[minX, minY, maxX, maxY]
限制地图范围
在实际使用中,往往只关心某一个区域的地图,而无需显示整个地球的地图,这样可以聚焦于业务,同时可以减少前端和后台的地图数据。
例:extent: [102, 29, 104, 31]
实现效果:拖拽时地图只能在经度29度到31度,纬度在102到104度之间显示,超过这个范围图层将不可见。

限制地图缩放级别
有时无限制地允许用户缩小或者放大地图,并不是一种明智的做法,在地图上的feature、标注、图形等都会变的不便于查看。为此,适中的地图缩放级别是被大多数场景所需要的。

限制缩放级别.png
注:除了使用minZoom和maxZoom之外,还可以使用minResolution和maxResolution,其具体原理和使用,在分辨率小节有介绍。建议使用minZoom和maxZoom,简单直接。

ol.View的fit函数
说明:自适配区域
例:

fit函数
ol.View的fit函数很强大,可以查看API文档,它的第三个参数还可以设置更多的选项,以适应更多的需要。关于更多的使用,参见官网例子Advanced View Positioning

ol.proj.transform(p1,p2,p3):
说明:一个用于坐标转换的方法
参数:
p1:ol.Coordinate类型的坐标
p2:当前坐标所用的坐标系
p3:转换后的坐标所用的坐标系
例:
ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')
把EPSG:4326的坐标[104.06, 30.67]转换为EPSG:3857的坐标

注:ol默认使用的是EPSG:3857坐标

Source和Layer:
Source和Layer是一对一的关系,有一个Source,必然需要一个Layer,然后把这个Layer添加到Map上,就可以显示出来了。
ol.source:可以发现有很多不同的Source,但归纳起来共三种:ol.source.Tile,ol.source.Image和ol.source.Vector。

ol.source
ol.source.Tile对应的是瓦片数据源,现在网页地图服务中,绝大多数都是使用的瓦片地图,而OpenLayers 3作为一个WebGIS引擎,理所当然应该支持瓦片。
ol.source.Image对应的是一整张图,而不像瓦片那样很多张图,从而无需切片,也可以加载一些地图,适用于一些小场景地图。
ol.source.Vector对应的是矢量地图源,点,线,面等等常用的地图元素(Feature),就囊括到这里面了。

ol.source
属于ol.source.Tile的子类,可以直接使用,而且现在很多地图服务(在线的,或者自己搭建的服务器)都支持xyz方式的请求。国内在线的地图服务,高德,天地图等,都可以通过这种方式加载,本地离线瓦片地图也可以,用途广泛,且简单易学,需要掌握

source.xyz
上面两个简单的例子,Yahoo地图的代码有点不一样:多了tileSize参数的设置。
默认情况下,tileSize为256,这也是现在绝大多数瓦片采用的大小。
但Yahoo地图使用的是512,我们公司地图使用的也是512,所以我的代码中需要显示指定。

tileUrlFunction
说明:这是一个获取瓦片url的函数,如果自定义这个函数,就可以实现不同坐标系之间的转换,从而返回在线地图服务对应瓦片的url。
参数:(tileCoord, pixelRatio, projection)
tileCoord:是一个z、x、y值组成的数组
例:

tileurlfunction.jpg

加载离线瓦片地图
只要把url设置成本地离线瓦片所在路径就可以了

图层管理:
map.removeLayer():删除图层。
setZIndex():为图层设置zindex
由于图层顺序是依照添加顺序排列,所以为避免新的底图盖住原有图层,可以使用setZIndex()为图层设置zindex。接收参数为number类型

Source的搭档Layer:
OpenLayers 3现有的Layer类图以及对应的source

source&layer.png

矢量绘图:
矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得,所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用,是地图数据中非常重要的组成部分。

注:加载矢量图使用的source是ol.source.Vector, layer是ol.layer.Vector

样式设置:
对矢量元素进行样式设置,OpenLayers3 支持两种方式,一种是直接给feature设置样式,一种是给layer设置样式。系统默认优先考虑feature的样式,如果没有,则使用layer的样式,还有一种情况是layer也没有设置样式,则会采用系统默认的样式。
例:

style.png

添加图标:
使用Feature + Style来实现
例:

添加图标

设置图标位置anchor:
针对为什么是[0.5, 1]这种值,表示什么?
默认情况下,位置坐标是按照比例的方式来设置的,范围从0到1,x轴上0表示最左边,1表示最右边,y轴上0表示最上边,1表示最下边。 如代码所示,x设置为0.5可以让图片在x方向上居中,y设置为1可以让图片在y方向上移动到最底端上。
如:

图标示例.jpg

注:除了按照比例进行移动之外,还可以按照像素来计算位置,但必须显示设置anchorXUnits或anchorYUnits为pixels。 根据不同的需要,可以采用不同的单位来设置

图标的click事件:
有两种
1.监听map点击事件,判断点击的元素是否为feature

mapClick.png
2.Feature的select事件

openlayer3入门常用方法

overlay:
说明:提示信息
提示信息在很多业务场景中都需要,比如显示当前位置周边的饭店列表,或者点击饭店,显示饭店详细信息,交通路线,电话号码等等。 鉴于显示的业务信息比较多,所以通常的做法都是采用overlay的方式来做。 用传统的HTML来布局和排版信息,然后附加到地图上的指定位置就可以了。
例:

overlay.jpg
设置点击地图显示overlay

overlay.jpg

在这个地方横插overlay是为了表达:
由点击事件可以看出,overlay可以配合feature的点击效果显示

绘图:
除了内置了用于选取feature的类之外,OpenLayers 3还提供了用户绘图的类ol.interaction.Draw,支持绘制点,线,多边形,圆等绘制。
常用绘图类型:
point:点
LineString:线
Circle:圆
Polygon:多边形
例:

LineString

在实际业务中,可能还需要设置绘图时的样式,限制绘制的点的个数,获取绘制的图形的所有坐标等。
比如绘制矩形的时候需要限制点数为两个
例:

限制点的个数.png

绘图相关事件:
drawstart:绘图开始
drawend:绘图结束
例:绘图结束获取点的坐标

drawend

控件Control:
不会随着地图的移动而移动,处于一个固定的位置。 在实现上,并不是在画布上绘制的,而是使用传统的HTML元素来实现的,便于同地图分离,也便于界面实现。 

Control

控件概览:
OpenLayers 3目前内置的地图控件类都在包ol.control下面,依次有:

ol.control.Attribution: 右下角的地图信息控件(默认显示)
ol.control.FullScreen: 全屏控件
ol.control.MousePosition: 鼠标位置控件
ol.control.OverviewMap: 鸟瞰图控件
ol.control.Rotate: 指北针控件(默认显示)
ol.control.ScaleLine: 比例尺控件
ol.control.Zoom: 缩放按钮控件(默认显示)
ol.control.ZoomSlider: 缩放滚动条控件
ol.control.ZoomToExtent: 放大到设定区域控件

去掉默认显示控件:
var map = new ol.Map({
// 设置地图控件,默认的三个控件都不显示
controls: ol.control.defaults({
attribution: false,
rotate: false,
zoom: false
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[104, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});

还有控件美化、自定义控件等等。因为图片上传达上限了,我主要接触的内容也就这些了,其他扩展性的知识就不写了。

因为项目组变动,只接触了一个多星期ol3,虽然知识很基础,为了防止后面重新接触相关业务,但是之前学的ol3已经被我抛到九霄云外了,记录下来以备后面复习用
另外,虽然小众,但是万一要是有人会用到呢

一些相关资料传送:
OpenLayers 2

OpenLayers 3

OpenLayers 4

OpenLayers中文API

一个中文教程网站:很棒,我写的内容很大部分来自这里。正苦逼的时候找到这个网站,当时觉得整个人生都圆满了哈哈哈

Ol3中Map事件全解析

OpenLayers 3 之 map样式(ol.style)详解

Openlayers 3加载XYZ示例+讲解

GitHub:
缩放拖动旋转矢量图层

聚合效果

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复