---
title: 内容叠加层
date: 2020-12-25
author: ac
tags:
- Overlay
- Openlayers
categories:
- GIS
---
## Overlay
`ol.Overlay`是一个用于在地图上展示信息的一个小部件（Widget），作为内容叠加层添加到`map`中，可以出现在地图上的任何位置。部件需要一个HTML模版，来展示需要显示的内容，`Overlay`部件控制出现的位置，像气泡一样，锚指向设置的位置上。
### 构造参数Option
```javascript
var popup = new ol.Overlay({
//设置该叠加层的标识，方便在map中获取该图层（map.getOverlayById）
id:'bubble',
//HTMLElement元素，也是叠加层内容（内容模版）
element: document.getElementById('popup'),
//设置偏移量[x,y]，像素为单位
// offset:[200,200],
//该叠加层的锚点 ，值为Coordinate
position:ol.proj.fromLonLat([113.958334, 22.535640]),
//设置锚点相对于叠加层内容的位置'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'.
positioning:"center-center",
//是否应该停止在viewport中的事件传播。默认true，图层会在ol-overlaycontainer-stopevent里面；false则会在ol-overlaycontainer中
stopEvent:true,
//是否替换第一个overlay容器
insertFirst:false,
autoPan: true,//当气泡显示在窗口边缘，存在气泡显示不完全时，view视图将移动到显示整个气泡的视图
autoPanAnimation: {
duration: 250
},
// className:"customClass"//添加自定义样式
});
```
**应用**
### 场景一
已知特定的点位，对其进行注记或说明。
```html
OpenLayers example
Overlay 地图注记
```
### 场景二
点击矢量要素，展示要素信息。获取要素信息的方法可以使用`map`中的`getFeaturesAtPixel()`方法获取`layers`集合中的矢量图层在该像素点处的要素集合，也可以使用矢量数据源`ol.source.Vector`中的`getFeaturesAtCoordinate`方法获取要素信息。当然也可以使用`select`控件选择要素。
```html
OpenLayers example
Openlayers 内容叠加层
```