OpenLayers - Overlay简介 （八）
Overlay是什么
让HTML元素显示在地图上某个位置。他和控件很像都是在地图上添加可见元素，不同的是，它不是根据屏幕位置固定的，而是与地理坐标相关联，因此平移地图将移动 Overlay。
常用的大致有三类，弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素，所以我们也可以使用css来修改去样式。
overlay 常用属性
id，覆盖物的唯一标识 ，便于getOverlayById方法取得相应的overlay。element，要添加到覆盖物元素。offset，偏移量，像素为单位。overlay相对于放置位置（position）的偏移量，默认值是[0, 0]，正值分别向右和向下偏移。position，在地图所在的坐标系框架下，overlay 放置的位置。positioning，overlay对于position的相对位置，可能的值是'bottom-left'，'bottom-center'，'bottom-right'，'center-left'，'center-center'，'center-right'，'top-left'，'top-center'，和'top-right'。stopEvent，是否应停止事件传播到地图视口。autoPanAnimation，用于将叠加层平移到视图中的动画选项。此动画仅在autoPan启用时使用。可以提供Aduration和easing来自定义动画。如果autoPan作为对象提供，则弃用并忽略。className，CSS 类名。
overlay 常用事件
change，当引用计数器增加时，触发；change:element，overlay对应的 element 变化时触发；change:map，overlay对应的 map 变化时触发；change:offset，overlay对应的 offset 变化时触发；change:position，overlay对应的 position 变化时触发；change:positioning，overlay对应的 positioning 变化时触发；propertychange，overlay对应的属性变化时触发；
绑定方式：
var overlay = new ol.Overlay({ // 创建 overlay});
// 事件
overlay.on("change:element", function(){ console.log("获取变化"); })
overlay 常用方法
getElement，获取传入的元素节点。getId，获取overlay的 id。getMap，获取与overlay关联的 map对象。getOffset，获取offset属性。getPosition，获取position属性。getPositioning，获取positioning属性。setElement, 设置元素节点。setMap，设置map对象。setOffset，设置offset。setPosition，设置position属性。setPositioning，设置positioning属性。
使用overlay
初始化地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style type="text/css">
.map {
height: 500px;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
<body>
<div id="map" class="map"></div>
</body>
<script>
var map = new ol.Map({
target: 'map'
})
// 图层
var layerTile = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
})
// 视图
var view = new ol.View({
center: ol.proj.fromLonLat([130.41, 28.82]),
zoom: 4
})
map.setView(view)
map.addLayer(layerTile)
</script>
</html>
添加元素
- 直接在
Overlay中添加一个元素节点，文本、动画都可以通过它添加到地图上。
...
.tag {
width: 30px;
height: 30px;
background-color: aquamarine;
border-radius: 100%;
}
...
<div id="tag" class="tag">div>
...
var tag = new ol.Overlay({
position: ol.proj.fromLonLat([120.41, 28.82]),
positioning: 'center-center',
element: document.getElementById('tag'),
stopEvent: false
})
map.addOverlay(tag)
...
添加事件
document.getElementById('tag').onclick = function () {
tag.setPosition(undefined)
return false
}
map.on('singleclick', function (evt) {
tag.setPosition(evt.coordinate) // 把 overlay 显示到指定的 x,y坐标
})
- 通过给元素添加监听事件，修改坐标位置，让元素离开地图。然后监听地图单击事件，修改元素坐标位置，实现在点击位置加载元素。
总结
覆盖物的使用方式非常简单，通过它我们可以实现很多功能。如在地图上添加云层移动的gif图片，实现动态效果等。不过它的缺点也比较明显，一个覆盖物最少需要一个元素，当数据量大时，元素节点过多会导致页面加载卡顿。大数据量的绘制图还是使用图层最好。