Layer 是什么
- 图层就像是含有文字或图形等元素的图片,一张张按顺序叠放在一起,组合起来形成页面的最终效果。
Layer
就是创建这一张张图的函数。 Layer
是派生所有图层类型的基类。定义了诸多不同图层类型共用的特征和方法。- 要使用
Layer
需要先从source
接收到的数据,然后添加到map
中。
常用参数
className
设置图层元素的 CSS类名称。extent
图层渲染的边界范围。zIndex
图层渲染的z-index
。在渲染时,图层将被排序,首先是 Z-index,然后是位置。source
该层的数据来源。map
地图实例。render
将覆盖图层的默认渲染。
常用监听事件
prerender
图层开始渲染之前。postrender
渲染完成之时。error
发生任何错误。change
图层发生修改。
OpenLayers中的图层类型
Graticule
,地图上覆盖的网格标尺图层。HeatMap
,热力图。Vector
,矢量图。VectorImage
,单张的矢量图层。VectorTile
,矢量瓦片图层。WebGLPoints
,WebGL渲染的海量点图层。Tile
,栅格图层。
使用图层
Graticule 图层
- 为坐标系渲染网格的层(目前仅支持 EPSG:4326)。请注意,视图投影必须同时定义范围和世界范围。
var gra = new ol.layer.Graticule({
strokeStyle: new ol.style.Stroke({
color: 'rgba(255,120,0,0.9)',
width: 2,
lineDash: [0.5, 4]
}),
showLabels: true,
wrapX: false
})
map.addLayer(gra)
HeatMap 图层
- 用于将矢量数据渲染为热图的层。
var vector = new ol.layer.Heatmap({
source: new ol.source.Vector({
url: 'https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
blur: parseInt(5),
radius: parseInt(2)
})
map.addLayer(vector)
- 通过
blur
控制圆点的边缘,对边缘做模糊化。radius
则规定了圆点的半径。
Vector 图层
- 矢量图层是用来渲染矢量数据的图层类型,一般用于绘制区域覆盖层。
var source = new ol.source.Vector({
url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
})
vectorLayer = new ol.layer.Vector({
//初始化矢量图层
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
//线样式
color: '#ffcc33',
width: 2
})
})
})
map.addLayer(vectorLayer)
WebGLPoint 海量点图层
- 当数据量大的时候,我们需要在图层上绘制点。使用
WebGLPoint
能大量提升性能。 WebGLPoint
Layer 是由 WebGL 作为渲染引擎的点图层,众所周知,WebGL在渲染大量数据(>10k)效率明显优于Canvas或SVG,所以对于有大数据量前端渲染需求的,WebGL作为渲染引擎几乎是唯一的选择。
const vectorSource = new ol.source.Vector({
url: 'https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson',
format: new ol.format.GeoJSON()
})
let pointLayer = new ol.layer.WebGLPoints({
source: vectorSource,
style: {
symbol: {
symbolType: 'circle',
size: ['interpolate', ['linear'], ['get', 'population'], 40000, 8, 2000000, 28],
color: '#006688',
rotateWithView: false,
offset: [0, 0],
opacity: ['interpolate', ['linear'], ['get', 'population'], 40000, 0.6, 2000000, 0.92]
}
}
})
map.addLayer(pointLayer)
- 在
OpenLayers
中图层是一等公民,简单来说就是所有功能都是基于图层实现的。比如海量点功能,第一层加载栅格瓦片图层,然后通过海量点图层绘制图像,然后覆盖到栅格瓦片图层上。
一、创建地图
Map
1、地图创建地图底图:需要用new ol.Map({})
地图map
是由图层layers
、一个可视化视图view
、用于修改地图内容的交互interaction
以及使用UI组件的控件control
组成的。
(1)、创建基本地图
let map = new ol.Map({
target: 'map',//对象指向
layers: [//图层
new ol.layer.Tile({//这里定义的是平铺图层
source: new ol.source.OSM()//图层源 定义图层映射协议
})
],
view: new ol.View({//视图
center: ol.proj.fromLonLat([37.41, 8.82]),//地图中心
zoom: 4//缩放层级
})
});
(2)、属性选项
new ol.Map({
target: 'map',//对象映射:要将`map`对象附加到div,` map`对象将`target`作为参数,值是`div`的`id`
layers: [//图层
new ol.layer.Tile({//这里定义的是平铺图层
source: new ol.source.OSM()//图层源 定义图层映射协议
})
],
view: new ol.View({//视图
center: ol.proj.fromLonLat([37.41, 8.82]),//地图中心
zoom: 4//缩放层级
}),
controls:[//最初添加到映射中的控件 如未设置 使用默认控件
new ol.control.Control({
element:,//元素是控件的容器元素(DOM)。只有在开发自定义控件时才需要指定这一点
render: ,//控件重新呈现时调用的函数
target: //如果想在映射的视图端口之外呈现控件,指定目标
})
],
interactions:[//最初添加到映射中的交互 如未设置 使用默认交互
new ol.interaction.Interaction({
handleEvent
})
],
overlays:[
new ol.Overlay()
],
maxTilesLoading:16,//同时加载的最大瓷砖数 默认16
loadTilesWhileAnimating:false,//
loadTilesWhileInteracting:false,//
moveTolerance:1,//光标必须移动的最小距离(以像素为单位)才能被检测为map move事件,而不是单击。增加这个值可以使单击地图变得更容易
pixelRatio:window.devicePixelRatio,//
keyboardEventTarget:,//要监听键盘事件的元素
})
(3)、地图事件
地图事件 | 含义 |
---|---|
click | 无拖动单击 |
dblclick | 无拖动双击 |
moveend | 移动地图结束时 |
movestart | 移动地图开始时 |
pointerdrag | 当拖动指针时触发 |
pointermove | 当指针移动时触发。注意,在触摸设备上,这是在地图平移时触发的,因此与mousemove 不同 |
postcompose | |
postrender | 在映射帧呈现后触发 |
precompose | |
propertychange | 当属性被更改时触发 |
rendercomplete | 渲染完成时触发,即当前视图的所有源和tile都已加载完毕,所有tile都将淡出 |
singleclick | 一个真正的无拖放和无双击的单击。注意,这个事件被延迟了250毫秒,以确保它不是双击 |
(4)、地图方法
地图方法 | 功能 |
---|---|
addControl(control) | 将给定的控件添加到地图中 |
removeControl(control) | 从地图中移除已给定的控件 |
addInteraction(interaction) | 将给定的交互添加到地图中 |
removeInteraction(interaction) | 从地图中移除已给定的交互 |
addLayer(layer) | 将给定的图层添加到地图的顶部 |
removeLayer(layer) | 从地图中移除已给定的图层 |
addOverlay(overlay) | 将给定的叠加层添加到地图中 |
removeOverlay(overlay) | 从地图中移除已给定的叠加层 |
forEachFeatureAtPixel(pixel, callback, opt_options) | 检测与视图端口上的像素相交的特性,并对每个相交的特性执行回调。检测中包含的层可以通过opt_options 中的layerFilter 选项配置 |
forEachLayerAtPixel(pixel, callback, opt_options) | 检测在视图端口上的像素处具有颜色值的层,并对每个匹配的层执行回调。检测中包含的层可以通过opt_layerFilter 配置 |
getControls() | 获取地图控件 |
getCoordinateFromPixel(pixel) | 获取给定像素的坐标。这将返回地图视图投影中的坐标。 |
getEventCoordinate(event) | 返回浏览器事件的视图投影中的坐标 |
getEventPixel(event) | 返回浏览器事件相对于视图端口的地图像素位置 |
getFeaturesAtPixel(pixel, opt_options) | 获取视图端口上与像素相交的所有特性 |
getInteractions() | 获取地图交互 |
getLayerGroup() | 获取与此地图关联的图层组 |
setLayerGroup(layerGroup) | 设置与此地图关联的图层组 |
getLayers() | 获取与此地图关联的图层的集合 |
getOverlayById(id) | 通过其标识符获取覆盖(overlay. getId() 返回的值)。注意,索引将字符串和数字标识符视为相同的。getoverlaybyid(2) 将返回id为2或2的叠加层。 |
getOverlays() | 获得地图叠加 |
getPixelFromCoordinate(coordinate) | 获取坐标的像素。它接受地图视图投影中的坐标并返回相应的像素 |
getSize() | 获取地图尺寸 |
setSize(size) | s设置地图尺寸 |
getTarget() | 获取呈现此映射的目标。注意,这将返回作为选项或setTarget 中输入的内容。如果这是一个元素,它将返回一个元素;如果是字符串,它会返回这个字符串 |
setTarget(target) | 设置要将地图呈现的目标元素 |
getTargetElement() | 获取呈现此映射的DOM 元素。与getTarget 相反,这个方法总是返回一个元素,如果映射没有目标,则返回null |
getView() | 获取地图视图。视图管理中心和分辨率等属性。 |
setView(view) | 设置地图视图 |
getViewport() | 获取作为map 视图端口的元素 |
hasFeatureAtPixel(pixel, opt_options) | 检测在viewport 上是否与一个像素相交。可以通过opt_layerFilter 配置在检测中包含的层。 |
Layers
2、图层定义图层:地图图层layers:[...]
组定义映射中可用的图层组,用来盛放地图上的各种元素,其在地图上的显示顺序是按照数组中元素序列从下到上呈现的,可以直接在创建地图时定义图层,多个图层的时候可以单独定义。
const layer = new ol.layer.Vector({//这里定义的是图层类型(Image/Title/Vector)
source:new ol.source.Vector(),//矢量图层源 源是用于获取映射块的协议【必须】
style:[],//图层样式 【必须】
feature:[],//图层元素 【必须】
})
- 添加指定图层:
map.addLayer(layer)
; - 移除指定图层:
map.removeLayer(layer)
;
图层是轻量级容器,从数据源Source
获取数据。
Source
d子类分别有,分别对应不同图层类:
ol.source.ImageSource()
ol.source.TileSource()
ol.source.VectorSource()
Source
主要有以下属性选项:
new ol.source.VectorSource({
attributions:,//
attributionsCollapsible:,//布尔值 默认为true
projection:,//投影系
state:'ready',//默认为'ready'
wrapX:false,//默认为false
})
ol.layer.Tile()
和ol.layer.Image()
图层类都具有相同的属性如下:
new ol.layer.Tile/Image({//以下为图层的属性选项, 都可设置,所以皆有getter/setter
opacity:2,//透明度 区间范围为(0, 1) 默认为1
visible:true,//显示属性 布尔值 默认为true
extent:[],//图层渲染的边界范围。该层将不会在此范围之外呈现
zIndex:2,//图层渲染的索引层级。在渲染时,图层将被排序,首先是z-idnex,然后是位置,当为undefined时,对于添加到映射的layers集合中的层,zIndex为0,或者当使用该层的setMap()方法时,zIndex为无穷大
minResolution:3,//该层可见的最小分辨率(包括在内)
maxResolution:6,//该层可见的最大分辨率(包括在内)
repload:0,//预加载。将低分辨率瓦片加载到预加载级别。0表示没有预加载 默认为0
source:new ol.source.TileSource()/ImageSource(),//图层源
map: ,//把图层覆盖在地图上,地图不会在它的图层集合中管理这个图层,这个图层将被呈现在顶部,这对于临时层非常有用。
})
ol.layer.Tile()
(1)平铺图层。
对于提供预呈现、平铺的网格图像的层源,这些网格按特定分辨率的缩放级别组织。
ol.layer.Image()
(2)图像图层。
服务器呈现的映像,可用于任意范围和分辨率。
ol.layer.Vector()
(3)矢量图层。
在客户端呈现矢量数据,其属性具备getter
和setter
new ol.layer.Vector({//以下为图层的属性选项, 都可设置,所以皆有getter/setter
opacity:2,//透明度 区间范围为(0, 1) 默认为1
visible:true,//显示属性 布尔值 默认为true
extent:[],//图层渲染的边界范围。该层将不会在此范围之外呈现
zIndex:2,//图层渲染的索引层级。在渲染时,图层将被排序,首先是z-idnex,然后是位置,当为undefined时,对于添加到映射的layers集合中的层,zIndex为0,或者当使用该层的setMap()方法时,zIndex为无穷大
minResolution:3,//该层可见的最小分辨率(包括在内)
maxResolution:6,//该层可见的最大分辨率(包括在内)
renderOrder:,//呈现顺序。函数用于在呈现前对特性进行排序。默认情况下,特性是按照创建它们的顺序绘制的。使用null来避免排序,但是得到一个未定义的绘制顺序
renderBuffer:100,//默认为100 缓冲区
renderMode:'vector',//默认为'vector' 矢量图层的渲染模式
source:new ol.source.VectorSource(),//图层源
map: ,//把图层覆盖在地图上,地图不会在它的图层集合中管理这个图层,这个图层将被呈现在顶部,这对于临时层非常有用
declutter:false,//默认为false 整理图片和文字。清理应用于所有图像和文本样式,优先级由样式的z-index定义。z-index指数越低,优先级越高
style:new ol.style.Style(),//图层样式
updateWhileAnimating:false,//默认为false
updateWhileInteracting:false,//默认为false
})
其中渲染模式有两种:
'image'
:矢量图层被渲染为图像。性能很好,但是点符号和文本总是随着视图旋转,像素在缩放动画中缩放'vector'
:矢量图层被呈现为向量。即使在动画期间也有最准确的渲染,但性能较慢
Feature
1)用于地理特征的矢量元素,具有几何geometry()
和其他属性,类似于矢量文件格式(如GeoJSON
)中的特性。
- 添加矢量元素:通过
vectorsource().addFeature(feature)
添加到矢量图层上。 - 移除图层所有的矢量元素:
vectorsource().clear()
let feature = new ol.Feature({
geometry: new ol.geom.Polygon(polyCoords),
labelPoint: new ol.geom.Point(labelCoords),
style:new ol.style.Style({}),
name: 'My Polygon'
});
定义矢量元素:
new ol.Feature()
,;矢量元素样式:
- 设置样式:
new ol.style.Style()
,也可以使用feature.setStyle(style)
,未定义的话,可以使用它的盛放容器layer
的样式; - 获取样式:
feature.getStyle()
- 设置样式:
一个
feature
只有一个默认几何属性geometry
,可以有任意数量的命名几何图形:- 获取默认几何属性:
feature.getGeometry()
; - 设置几何属性:
feature.setGeometry(geometry)
; - 设置几何属性名:
feature.setGeometryName(name)
; - 矢量元素要呈现的几何图形的特征属性、几何图形或函数由
geometry
属性选项设定,主要有以下几种子类模块:ol.geom.Circle()
:圆形ol.geom.Geometry()
:几何图形ol.geom.GeometryCollection()
:ol.geom.LinearRing()
:环线ol.geom.LineString()
:线段ol.geom.Point()
:点ol.geom.Polygon()
:多边形ol.geom.MultiLineString()
ol.geom.MultiPoint()
ol.geom.MultiPolygon()
ol.geom.SimpleGeometry()
- 获取默认几何属性:
feature
的稳定标识符ID
:- 设置
feature
的id
:feature.setId(id)
,当id
可能相同时,可以这样加以区分
feature.setId(id + "featureName");
- 获取
feature
的id
:vector.getSource().getFeatureById()
或者vectorsource().getFeatureById()
- 设置
feature
的set(key, value, opt_silent)
:- 设置
key
:feature.set("keyName",name)
,keyName
是字符串,自己根据情况设置 - 获取
key
:之前设置的什么,就获取什么,feature.get("keyName")
,会得到设置的值
- 设置
Style
2)矢量特征呈现样式的容器。在重新呈现使用样式的特性或图层之前,通过set*()
方法对样式及其子元素所做的任何更改都不会生效。
new ol.style.Style({
geometry:new ol.geom.LineString(),//有以上ol.geom模块的几何图形可以参考
fill:new ol.style.Fill({//填充样式
color:color//颜色、渐变或图案
}),
image:new ol.style.Image({//图像
opacity:,//数值
rotateWithView:,//布尔值
rotation:,//数值
scale://数值
}),
image:new ol.style.Icon({//可以使用图片资源
anchor:[0.5,0.5],//锚。默认值是图标中心 默认值是[0.5,0.5]
anchorOrigin:'top-left',//锚的原点:左下角、右下角、左上方或右上方。默认是左上
anchorXUnits:'fraction',//指定锚点x值的单位。'fraction'的值表示x值是图标的'fraction'。'pixels'的值表示像素中的x值,默认为'fraction'
anchorYUnits:'fraction',//指定锚点y值的单位。'fraction'的值表示y值是图标的'fraction'。'pixels'的值表示像素中的y值,默认为'fraction'
color:color,//颜色、渐变或图案
crossOrigin:,
img:,//图标的图像对象 如果没有提供src选项,则必须已经加载了提供的图像
imgSize:,//
offset:[0,0].//偏移值,默认为[0,0]
offsetOrigin:'top-left',//偏移量的原点,bottom-left, bottom-right, top-left or top-right. 默认是`top-left`
opacity:1,//默认是1 (0,1)
scale:1,//默认是1
rotation:0,//以弧度旋转(顺时针方向正旋转) 默认为0
size:,//图标大小(以像素为单位)。可与偏移量一起用于定义要从原点(sprite)图标图像使用的子矩形
src:'',//图像URL源
rotateWithView:false,//是否旋转视图中的图标 默认为false
}),
stroke:new ol.style.Stroke({//描绘
width: ,//宽
color:color,//颜色、渐变或图案
lineCap:'round',//线帽风格 butt, round, 或者 square 默认 round
lineJoin:'round',//线连接方式 bevel, round, 或者 miter 默认 round
lineDash: [],//线间隔模式 这个变化与分辨率有关 默认为undefined Internet Explorer 10和更低版本不支持
lineDashOffset:0,//线段间隔偏移 默认0
miterLimit:10,// 默认10
}),
text:new ol.style.Text({//文字
font:'',//默认是'10px sans-serif'
text:'',//文本内容
textAlign:'center',//文本对齐 'left', 'right', 'center', 'end' 'start'.针对于placement: 'point',默认为'center';针对于placement: 'line',默认是让渲染器选择不超过maxAngle的位置
textBaseline:'middle',//文本基线 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic' 默认'middle'
placement:'',//文本布置
scale:,
padding:[0,0,0,0],//文本周围的像素填充。数组中值的顺序是[top, right, bottom, left]
fill:new ol.style.Fill(),//如果未设置,默认未#333
stroke:new ol.style.Stroke(),
offsetX:0,//水平文本偏移量(以像素为单位)。正值将把文本右移。默认0
offsetY:0,//垂直文本偏移量(以像素为单位)。正值会将文本向下移动。默认0
rotation:0,//默认0
rotateWithView:false,
backgroundFill: ,//当placement:“point”时,填充文本背景的样式。默认为无填充
backgroundStroke: ,//当placement:“point”时,描绘文本背景的样式。默认为无描绘
}),
zIndex:,
})
ol.geom.Geomtry()
是矢量几何对象的抽象基类,通常只用于创建子类,而不是在应用程序中实例化。它的方法如下:
方法 | 功能 |
---|---|
set(key, value) | 设置值。key :关键名字(字符串);value :值 |
get(key) | 获取值 |
setProperties(values, opt_silent) | 设置键值对的集合。注意,这将更改任何现有属性并添加新属性(它不会删除任何现有属性)。 |
getProperties() | 获取一个包含所有属性名和值的对象 |
getClosestPoint(point, opt_closestPoint) | 将几何图形的最近点作为坐标返回到经过的点 |
getExtent(opt_extent) | 获取几何的范围 |
getKeys() | 获取对象属性名称列表 |
getRevision() | 获取此对象的版本号。每次修改对象时,它的版本号都会增加。 |
intersectsCoordinate(coordinate) | 如果该几何图形包含指定的坐标,则返回true 。如果坐标位于几何图形的边界上,则返回false |
rotate(angle, anchor) | 围绕给定的坐标旋转几何图形。这将修改现有的几何坐标 |
scale(sx, opt_sy, opt_anchor) | 缩放几何图形(可选原点)。这将修改现有的几何坐标。sx:x方向上的缩放因子; sy:Y轴上的缩放因子; opt_anchor`:缩放原点(默认为几何范围的中心) |
simplify(tolerance) | 创建这个几何图形的简化版本 |
transform(source, destination) | 将圆的每个坐标从一个坐标系变换到另一个坐标系。在适当的位置修改几何图形。如果不想修改几何图形,请首先clone() 它,然后在克隆上使用此函数。在内部,一个圆目前由两点表示:圆心[cx, cy] 和圆心右边的点[cx + r, cy] 。这个transform 函数只变换这两点。所以得到的几何形状也是一个圆,而这个圆并不等同于通过变换原圆的每一点得到的形状 |
translate(deltaX, deltaY) | 翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体,那么首先clone() 这个几何体 |
以下是ol.geom.Geomtry
抽象基类创建的常见子类模块:
ol.geom.Circle()
1)new ol.geom.Circle({
center:[],//中心点
radius:2,//圆半径
layout://布局
})
方法 | 功能 |
---|---|
applyTransform(transformFn) | 对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形,请首先clone() 它,然后在克隆上使用此函数 |
clone() | 把几何图形复制一份 |
getCenter() | 返回中心坐标 |
getFirstCoordinate() | 返回几何图形的第一个坐标 |
getLastCoordinate() | 返回几何图形的最后一个坐标 |
getLayout() | 返回几何图形的layout |
getRadius() | 返回圆的半径 |
getType() | 获取这个几何图形的类型 |
intersectsExtent(extent) | 测试几何形状和经过的区域是否相交,返回布尔值 |
rotate(angle, anchor) | 围绕给定的坐标旋转几何图形。这将修改现有的几何坐标。angle :以弧度为单位的旋转角度;anchor :旋转中心 |
scale(sx, opt_sy, opt_anchor) | 缩放几何图形(可选原点)。这将修改现有的几何坐标。sx :x方向上的缩放因子;sy :Y轴上的缩放因子;opt_anchor :缩放原点(默认为几何范围的中心) |
setCenter(center) | 将圆心设置为coordinate |
setCenterAndRadius(center, radius, opt_layout) | 设置圆的中心(coordinate )和半径(number ) |
setRadius(radius) | 设置圆的半径。半径的单位是投影的单位。 |
transform(source, destination) | 将圆的每个坐标从一个坐标系变换到另一个坐标系。在适当的位置修改几何图形。如果不想修改几何图形,请首先clone() 它,然后在克隆上使用此函数。在内部,一个圆目前由两点表示:圆心[cx, cy] 和圆心右边的点[cx + r, cy] 。这个transform 函数只变换这两点。所以得到的几何形状也是一个,而这个圆并不等同于通过变换原圆的每一点得到的形状 |
translate(deltaX, deltaY) | f翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体,那么首先clone() 这个几何体 |
ol.geom.LineString(coordinates, opt_layout)
2)new ol.geom.LineString({
coordinate:[],//坐标。对于内部使用,平面坐标结合opt_layout也可以接受
layout: //Layout
})
方法 | 功能 |
---|---|
appendCoordinate(coordinate) | 将经过的坐标追加到linestring 的坐标里 |
applyTransform(transformFn) | 对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形,请首先clone() 它,然后在克隆上使用此函数 |
clone() | 把几何图形复制一份 |
forEachSegment(callback) | 遍历每条线段,调用提供的回调函数。如果回调函数返回一个真值,则函数立即返回该值。否则函数返回false |
getCoordinateAt(fraction, opt_dest) | 沿着线段返回给定部分的坐标。fraction 是一个介于0和1之间的数字,其中0是线段的开始,1是线段的末尾 |
getCoordinates() | 返回线段的坐标 |
setCoordinates(coordinates, opt_layout) | s设置线段的坐标 |
getFirstCoordinate() | 返回几何图形的第一个坐标 |
getLastCoordinate() | 返回几何图形的最后一个坐标 |
getLayout() | 返回几何图形的Layout |
getLength() | 在投影平面上返回线段的长度 |
getType() | 得到这个几何图形的类型 |
intersectsExtent(extent) | 测试几何形状和通过的范围是否相交 |
rotate(angle, anchor) | 围绕给定的坐标旋转几何图形。这将修改现有的几何坐标 |
scale(sx, opt_sy, opt_anchor) | 缩放几何图形(可选原点)。这将修改现有的几何坐标。sx:x方向上的缩放因子; sy:Y轴上的缩放因子; opt_anchor`:缩放原点(默认为几何范围的中心) |
translate(deltaX, deltaY) | 翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体,那么首先clone() 这个几何体 |
ol.geom.Point(coordinates, opt_layout)
3)new ol.geom.Point()
方法 | 功能 |
---|---|
applyTransform(transformFn) | 对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形,请首先clone() 它,然后在克隆上使用此函数 |
clone() | 把几何图形复制一份 |
getCoordinates() | 返回点的坐标 |
setCoordinates(coordinates, opt_layout) | 设置点的坐标 |
getFirstCoordinate() | 返回几何图形的第一个坐标 |
getLastCoordinate() | 返回几何图形的最后一个坐标 |
getLayout() | 返回几何图形的Layout |
getType() | 得到这个几何图形的类型 |
intersectsExtent(extent) | 测试几何形状和通过的范围是否相交 |
rotate(angle, anchor) | 围绕给定的坐标旋转几何图形。这将修改现有的几何坐标 |
scale(sx, opt_sy, opt_anchor) | 缩放几何图形(可选原点)。这将修改现有的几何坐标。sx:x方向上的缩放因子; sy:Y轴上的缩放因子; opt_anchor`:缩放原点(默认为几何范围的中心) |
translate(deltaX, deltaY) | 翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体,那么首先clone() 这个几何体 |
ol.geom.Polygon()
(4)多边形几何图形。
new ol.geom.Polygon({
coordinates:[],//定义多边形的线性环的数组
layout:,
ends:[],//末端(平面坐标内部使用)
})
方法 | 功能 |
---|---|
applyTransform(transformFn) | 对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形,请首先clone() 它,然后在克隆上使用此函数 |
appendLinearRing(linearRing) | 在多边形上追加线性环 |
clone() | 把几何图形复制一份 |
getCoordinates() | 返回点的坐标 |
setCoordinates(coordinates, opt_layout) | 设置点的坐标 |
getFirstCoordinate() | 返回几何图形的第一个坐标 |
getLastCoordinate() | 返回几何图形的最后一个坐标 |
getInteriorPoint() | 返回多边形的内部点 |
getLinearRing(index) | 返回多边形几何的第n个线性环。如果给定索引超出范围,则返回null。外部线性环在索引0处可用,而内部环在索引1及以上处可用 |
getLinearRings() | 返回多边形的线性环 |
getLinearRingCount() | 返回多边形的环数,这包括外部环和任何内部环 |
getLayout() | 返回几何图形的Layout |
getType() | 得到这个几何图形的类型 |
getArea() | 返回投影平面上多边形的面积 |
intersectsExtent(extent) | 测试几何形状和通过的范围是否相交 |
rotate(angle, anchor) | 围绕给定的坐标旋转几何图形。这将修改现有的几何坐标 |
scale(sx, opt_sy, opt_anchor) | 缩放几何图形(可选原点)。这将修改现有的几何坐标。sx:x方向上的缩放因子; sy:Y轴上的缩放因子; opt_anchor`:缩放原点(默认为几何范围的中心) |
translate(deltaX, deltaY) | 翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体,那么首先clone() 这个几何体 |
ol.layer.VectorTile()
(4)矢量平铺图层。
图层用于客户端呈现矢量平铺数据。
new ol.layer.Vector({//以下为图层的属性选项, 都可设置,所以皆有getter/setter
opacity:2,//透明度 区间范围为(0, 1) 默认为1
visible:true,//显示属性 布尔值 默认为true
extent:[],//图层渲染的边界范围。该层将不会在此范围之外呈现
zIndex:2,//图层渲染的索引层级。在渲染时,图层将被排序,首先是z-idnex,然后是位置,当为undefined时,对于添加到映射的layers集合中的层,zIndex为0,或者当使用该层的setMap()方法时,zIndex为无穷大
minResolution:3,//该层可见的最小分辨率(包括在内)
maxResolution:6,//该层可见的最大分辨率(包括在内)
renderOrder:,//呈现顺序。函数用于在呈现前对特性进行排序。默认情况下,特性是按照创建它们的顺序绘制的。使用null来避免排序,但是得到一个未定义的绘制顺序
renderBuffer:100,//默认为100 缓冲区
renderMode:'vector',//默认为'vector' 矢量图层的渲染模式
source:new ol.source.VectorSource(),//图层源
map: ,//把图层覆盖在地图上,地图不会在它的图层集合中管理这个图层,这个图层将被呈现在顶部,这对于临时层非常有用
declutter:false,//默认为false 整理图片和文字。清理应用于所有图像和文本样式,优先级由样式的z-index定义。z-index指数越低,优先级越高
style:new ol.style.Style(),//图层样式
updateWhileAnimating:false,//默认为false
updateWhileInteracting:false,//默认为false
preload:,//
renderOrder:,//
useInterimTilesOnError:true,//错误时使用临时贴片 默认true
})
view
3、视图设置视图view
由三种状态决定:center
中心、resolution
分辨率、rotation
旋转,每个状态都有相应的getter
和setter
。
可以在视图里定义地图中心点、层级、分辨率、旋转以及地图投影等。
视图对象受到约束,主要有分辨率约束、旋转约束、中心约束。
分辨率约束切换到特定分辨率时,特定分辨率主要由以下选项决定:resolutions
、maxResolution
、maxZoom
、zoomFactor
。如果已经设置resolutions
,其他选项就可忽略。
旋转约束会切换到特定的角度。它由以下选项决定:enableRotation
和constrainRotation
。在默认情况下,当接近水平线时,旋转值会突然变为零。
中心约束由范围选项决定。默认情况下,中心完全不受约束。
(1)视图选项
center
1)中心点视图的初始中心,中心的坐标系由投影projection
指定,如果未设置此参数,则不会获取层源,但是之后可以使用#setCenter
设置中心。
let center = ol.proj.fromLonLat([longitude, latitude]);//未限制地图范围时
let center = ol.proj.transform([minX, minY, maxX, maxY],'EPSG:4326', 'EPSG:3857');//限制地图显示范围时设置中心点 X代表经度, Y代表纬度
ol.proj.transform([], "EPSG:", "EPSG:")
是经纬度投影转换
- 获取中心:
map.getView().getCenter()
- 设置中心:
map.getView().setCenter(center)
projection
2)投影视图拥有projection
投影,投影决定了中心的坐标系,其单位决定了分辨率的单位(每个像素的投影单位)。默认投影为球面墨卡托(EPSG:3857
)。
- 获取投影:
map.getView().getProjection()
- 设置投影:
map.getView().setProjection()
resolution
3)分辨率视图的初始分辨率,单位是每像素的投影单位(例如米每像素)。
另一种方法是设置缩放zoom
。缩放可以设置:最大层级maxZoom
、最小层级minZoom
以及当前层级zoom
let view = new ol.View({
// center: center,
zoom: curZoom,
minZoom: minZoom,
maxZoom: maxZoom,
});
- 获取分辨率:
map.getView().getResolution()
- 获取给定范围(以映射单元为单位)和大小(以像素为单位)的分辨率:
map.getView().getResolutionForExtent(extent, opt_size)
; - 获取缩放级别的分辨率:
map.getView().getResolutionForZoom(zoom)
; - 获取视图最大值分辨率:
map.getView().getMaxResolution()
; - 获取视图最小值分辨率:
map.getView().getMinResolution()
; - 设置分辨率:
map.getView().setResolution(resolution)
rotation
4)旋转初始旋转角度为弧度(正顺时针旋转,0表示向北)。
- 获取旋转调用方法
map.getView().getRotation()
; - 设置旋转调用方法
map.getView().setRotation(rotation);
zoom
5)缩放仅在未定义分辨率时使用。
缩放级别用于计算视图的初始分辨率。初始分辨率是使用#constrainResolution
方法确定的。
- 获取缩放层级:
map.getView().getZoom()
; - 获取最大缩放层级:
map.getView().getMaxZoom()
; - 获取最小缩放层级:
map.getView().getMinZoom()
; - 获取缩放层级的分辨率:
map.getView().getZoomForResolution(resolution)
; - 设置缩放层级:
map.getView().setZoom(zoom)
; - 设置最大缩放层级:
map.getView().setMaxZoom(zoom)
; - 设置最小缩放层级:
map.getView().setMinZoom(zoom)
;
constrainRotation
6)旋转约束旋转约束。false
为未约束,true
为未约束但是接近于0。数字限制了旋转到该值的数量。
enableRotation
7)启用旋转如果为false
,则始终使用将旋转设置为零的旋转约束。如果启用为false
,则没有效果。
extent
8)约束范围中心点不能超出这个范围。
(2)视图方法
animate(var_args)
1)动画单个动画
动画视图。视图的中心、缩放(或分辨率)和旋转可以通过动画来实现视图状态之间的平滑转换。
默认情况下,动画持续时间为1秒,并且类型为in-and-out easing
。
通过设置持续时间duration
(以毫秒为单位)和缓动选项easing
(参见模块:ol/easing)来定制此行为。
easing
:
easeIn
:平缓加速easeOut
:平缓减速inAndOut
:平缓开始,先加速,再减速linear
:匀速upAndDown
:平缓开始,加速,最后再减速。这与模块的一般行为相同:ol/easing~inAndOut
,但是最终的减速被延迟了
多个动画
要将多个动画连接在一起,请使用多个动画对象调用该方法。
如果提供一个函数作为animate
方法的最后一个参数,它将在动画系列的末尾被调用。
如果动画系列独立完成,回调函数将被调用true
;如果动画系列被取消,回调函数将被调用false
。
取消动画
动画通过用户交互(例如拖动地图)或调用view.setCenter()
、view.setResolution()
或view.setRotation()
(或调用其中一个方法的另一个方法)来取消。
cancelAnimations()
2)取消动画取消任何正在进行的动画。
getAnimating()
(3)确定视图是否处于动画状态。返回布尔值。
calculateExtent(opt_size)
4)计算范围计算当前视图状态的范围和传递的大小。opt_size
指盒子像素尺寸,如未提供,将使用此视图的第一个映射的大小。
尺寸是盒子的像素尺寸,计算的范围应该与之匹配。
想要获取整个底图映射的范围,使用map.getSize()
centerOn(coordinate, size, position)
5)以坐标和视图位置为中心。
coordinate
:坐标点size
:盒子像素尺寸position
:视图的居中位置
interaction
4、交互动作通常只用于创建子类,而不在应用程序中实例化。
用于更改映射状态的用户操作。有些类似于控件,但不与DOM
元素关联。
虽然交互没有DOM
元素,但是它们中的一些会呈现向量,因此在屏幕上是可见的。
添加交互动作使用:map.addInteraction(interaction);
OpenLayers
中可实例化的子类及其功能如下:
可实例化子类 | 功能 |
---|---|
doubleclickzoom interaction | 双击放大交互功能 |
draganddrop | 以“拖文件到地图中”的交互添加图层 |
dragbox | 拉框,用于划定一个矩形范围,常用于放大地图 |
dragpan | 拖拽平移地图 |
dragrotateandzoom | 拖拽方式进行缩放和旋转地图 |
dragrotate | 拖拽方式旋转地图 |
dragzoom | 拖拽方式缩放地图 |
draw | 绘制地理要素功能 |
interaction defaults | 默认添加的交互功能 |
keyboardpan | 键盘方式平移地图 |
keyboardzoom | 键盘方式缩放地图 |
select | 选择要素功能 |
modify | 更改要素 |
mousewheelzoom | 鼠标滚轮缩放功能 |
pinchrotate | 手指旋转地图,针对触摸屏 |
pinchzoom | 手指进行缩放,针对触摸屏 |
pointer | 鼠标的用户自定义事件基类 |
snap | 鼠标捕捉,当鼠标距离某个要素一定距离之内,自动吸附到要素 |
ol.interaction.defaylts()
(1)默认交互功能主要是最为常用的功能,如缩放、平移和旋转地图等,具体功能有如下这些:
默认交互 | 功能 |
---|---|
ol.interaction.DragRotate | 鼠标拖拽旋转,一般配合一个键盘按键辅助 |
ol.interaction.DragZoom | 鼠标拖拽缩放,一般配合一个键盘按键辅助 |
ol.interaction.DoubleClickZoom | 鼠标或手指双击缩放地图 |
ol.interaction.PinchRotate | 两个手指旋转地图,针对触摸屏 |
ol.interaction.PinchZoom | 两个手指缩放地图,针对触摸屏 |
ol.interaction.DragPan | 鼠标或手指拖拽平移地图 |
ol.interaction.KeyboardZoom | 使用键盘 + 和 - 按键进行缩放 |
ol.interaction.KeyboardPan | 使用键盘方向键平移地图 |
ol.interaction.MouseWheelZoom | 鼠标滚轮缩放地图 |
(2)针对矢量图层元素的交互功能
ol.interaction.Select()
1)选择选择矢量元素的交互功能。
默认情况下,所选矢量元素的样式不相同,因此这种交互可以用于可视化高亮显示,以及为其他操作(如修改或输出)选择特性。
选定的矢量元素将被添加到内部非托管图层。
有三种方式控制矢量元素的选择:
- 使用由
condition
定义的浏览器事件和toggle
切换的add
/remove
以及multi
选项 - 一个
layer
过滤器 - 一个使用
filter
选项的进一步矢量元素过滤器
ol.interaction.Draw()
2)绘制用于绘制特征几何图形的交互功能。
绘制交互允许绘制几何地理要素,可选一个参数为对象,可包含参数如下:
features
:绘制的要素的目标集合;source
:绘制的要素的目标图层源;snapTolerance
:自动吸附完成点的像素距离,也就是说当鼠标位置距离闭合点小于该值设置的时候,会自动吸附到闭合点,默认值是12
;type
:绘制的地理要素类型,ol.geom.GeometryType
类型,包含Point
、LineString
、Polygon
、MultiPoint
、MultiLineString
或者MultiPolygon
;minPointsPerRing
:绘制一个多边形需要的点数最小值,数值类型,默认是3
;style
:要素素描的样式;geometryName
:绘制的地理要素的名称,string
类型
ol.interaction.Modify()
3)修改用于修改矢量元素几何图形的交互功能。
若想修改已添加到存在的矢量源中的矢量元素,需要使用modify
选项构建修改交互动作。
如若想修改集合中的矢量元素(比如用选择交互的集合),需要使用features
选项构建交互。该交互必须使用source
或者features
构建。
默认情况下,当按下alt
键时,交互允许删除顶点。想要使用不同的删除条件配置交互,请使用deleteCondition
选项。
Control
5、控件控件是一个可见的小部件,其DOM元素位于屏幕上的固定位置。它们可以包含用户输入(按钮),或者只是提供信息;位置是使用CSS确定的。这是一个虚基类,不负责实例化特定的控件。
默认情况下,这些元素被放置在具有CSS类名称ol-overlaycontainer-stopevent
的容器中,但是可以使用任何外部DOM元素。
let myControl = new ol.control.Control({//定义一个控件
element:myElement
})
//然后添加到地图上
map.addControl(myControl);
主要的属性选项有:
element
:DOM元素,元素是控件的容器元素。只有在开发自定义控件时才需要指定这一点render
:重新呈现控件时调用的函数。这在requestAnimationFrame
回调中调用target
:DOM元素,想要控件在映射的视图端口之外呈现,需要指定目标对象
其中包含的控件有:
控件 | 功能 |
---|---|
controldefaults | 地图默认包含的控件,包含缩放控件和旋转控件 |
fullscreencontrol | 全屏控件,用于全屏幕查看地图 |
mousepositioncontrol | 鼠标位置控件,显示鼠标所在地图位置的坐标,可以自定义投影 |
overviewmapcontrol | 地图全局视图控件 |
rotatecontrol | 地图旋转控件 |
scalelinecontrol | 比例尺控件 |
zoomcontrol | 缩放控件 |
zoomslidercontrol | 缩放刻度控件 |
zoomtoextentcontrol | 缩放到全局控件 |
Overlay
6、叠加层要显示在地图上方并附加到单个地图位置的元素。与控件不同的是,它们不在屏幕上的固定位置,而是绑定到地理坐标上,因此平移地图将移动 overlay
,而不是控件。
<div id="map">
<div id="popup">
</div>
</div>
let popup = new ol.Overlay({
element:document.getElementById('popup'),
...
});
popup.setPosition(coordinate);
map.addOverlay(popup);
Overlay选项
id
(1)设置 overlay
的 id
,字符串类型。
- 获取
id
:map.getOverlayById(id)
或者overlay.getId()
element
(2)overlay
元素,DOM
元素
- 获取:
overlay.getElement()
- 设置:
overlay.setElement(element)
offset
(3)偏移量(以像素为单位),用于定位 overlay
,数组类型,默认为[0, 0]:
- 数组第一个元素为水平偏移,正右负左;
- 数组第二个元素为垂直,正下负上;
- 获取偏移值:
overlay.getOffset()
- 设置偏移值:
overlay.setOffset(offset)
position
(4)地图投影中的位置。
- 获取:
overlay.getPosition()
- 设置:
overlay.setPosition(position)
,如果位置未定义undefined
,则覆盖被隐藏。
positioning
(5)定义 overlay
相对于其位置属性的实际位置,默认为top-left
,还有'bottom-left'
, 'bottom-center'
, 'bottom-right'
, 'center-left'
, 'center-center'
, 'center-right'
, 'top-left'
,'top-center'
, and 'top-right'
.
- 获取:
overlay.getPositioning()
- 设置:
overlay.setPositioning(positioning)
autoPan
(6)默认为false
,如果设置为true,则在调用setPosition
将平移映射,以便在当前视图中 overlay
完全可见。
autoPanAnimation
(7)动画选项用于平移 overlay
到视图中。此动画仅在启用autoPan
时使用。可以提供一个持续时间和缓动来定制动画。
stopEvent
(8)默认为true
,是否应该停止到map视图端口的事件传播。
- 如果为
true
,则将overlay
放置在与控件相同的容器中(CSS class nameol-overlaycontainer-stopevent
) - 如果为
false
,它用className
属性指定的CSS
类名放置在容器中。
className
(9)CSS class name
.
autoPanMargin
(10)地图自动平移时,地图边缘与 overlay
的留白(空隙),单位是像素,默认是 20像素
叠加层Overlay
- 要显示在地图上方并附加到单个地图位置的元素。与控件不同的是,他们不在屏幕上固定的位置,而是绑定在地理坐标上,因此平移或者拖动将移动Overlay,而不是控件
<div id="map">
<div id="popup">
</div>
</div>
let popup = new ol.Overlay({
element:document.getElementById('popup'),
...
});
popup.setPosition(coordinate);
map.addOverlay(popup);
- Overlay选项
- id:设置Overlay的Id 获取 id : map.getOverlayById(id)/Overlay.getId()
- Element : Overlay元素,DOM元素 获取和设置: Overlay.getElement()/setElement(element)
- offset 偏移量 : 偏移量(以像素为单位),用于定位 overlay ,数组类型,默认为[0, 0] 获取和设置:
overlay.getOffset()/overlay.setOffset(offset)
- position:地图投影中的位置
获取: Overlay.getPosition() 设置: Overlay.setPosition(position)
Projections
7、投影需要给所有坐标和范围提供视图投影系(默认是EPAG:3857
)。
转换投影系,使用ol.proj.transform()
和ol.proj.transformExtendt
进行转换
ol.proj
(1)、ol.proj.addCoordinateTransforms(source, destination, forward, inverse)
1)注册坐标转换函数来转换源投影和目标投影之间的坐标。正、反函数转换坐标对;此函数将这些转换为内部使用的处理区段和坐标数组的函数
source
:源投影destination
:目标投影forward
:接受ol
的正向变换函数(即从源投影到目标投影)。作为参数,并返回转换后的ol.Coordinate
inverse
:接受ol
的逆变换函数(即从目标投影到源投影)。作为参数,并返回转换后的ol.Coordinate
ol.proj.addEquivalentProjections(projections)
2)注册不改变坐标的转换函数。它们允许在具有相同含义的投影之间进行转换。
ol.proj.addProjection(projection)
3)将投影对象添加到受支持的投影列表中,这些投影可以通过它们的SRS
码进行查找。
ol.proj.equivalent(projection1, projection2)
4)检查两个投影是否相同,即一个投影中的每个坐标确实表示另一个投影中的相同地理点。
ol.proj.fromLonLat(coordinate, opt_projection)
5)将经纬度坐标转换为不同的投影
coordinate
:经纬度数组,经度在前,纬度在后projection
:目标投影。默认是Web Mercator
,即“EPSG: 3857”
ol.proj.get(projectionLike)
6)获取指定代码的投影对象。
ol.proj.getTransform(source, destination)
7)给定类似于投影的对象,搜索转换函数将坐标数组从源投影转换为目标投影。
ol.proj.setProj4(proj4)
8)proj4注册。如果没有显式注册,则假定proj4js将加载在全局名称空间中
ol.proj.setProj4(proj4);
ol.proj.toLonLat(coordinate, opt_projection)
9)将坐标转换为经度/纬度
coordinate
:投影坐标projection
:坐标的投影,默认是Web Mercator
,即“EPSG: 3857”
ol.proj.transform(coordinate, source, destination)
10)将坐标从源投影转换为目标投影,这将返回一个新的坐标(并且不修改原始坐标)。
coordinate
:坐标source
:源投影destination
:目标投影
ol.proj.transformExtent
11)将范围从源投影转换为目标投影,这将返回一个新范围(并且不修改原始范围)。
ol.proj.Units{string}
12)投影单位:'degrees'
, 'ft'
, 'm'
, 'pixels'
, 'tile-pixels'
or 'us-ft'