让HTML元素显示在地图上某个位置。他和控件很像都是在地图上添加可见元素,不同的是,它不是根据屏幕位置固定的,而是与地理坐标相关联,因此平移地图将移动 Overlay。
常用的大致有三类,弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素,所以我们也可以使用css来修改去样式。
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 类名。
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("获取变化"); })
getElement,获取传入的元素节点。
getId,获取 overlay 的 id。
getMap,获取与 overlay 关联的 map对象。
getOffset,获取 offset 属性。
getPosition,获取 position 属性。
getPositioning,获取 positioning 属性。
setElement, 设置元素节点。
setMap,设置map对象。
setOffset,设置 offset。
setPosition,设置 position 属性。
setPositioning,设置 positioning 属性。
...
.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坐标
})