Openlayers6之地图覆盖物Overlay详解及使用，地图标注及弹窗查看详情（结合React）

demo案例：用户实现地图加载人员位置定位，并设置人员图片文字等标注，点击定位点查看人员详情。

主要通过ol/geom Point设置Style和ol/Overlay实现。主要实现步骤：

1. 实现图文标注的实质是添加点时设置Ponit的样式，图片标注就是在Style中添加Image，文字标注就是在Style中添加Text;
2. 实现详情弹窗实质就是是通过创建Overlay,并将其添加到地图上。在用户点击到对应的点位后，设置Overlay指定的DOM元素的内容，设置position显示Overlay。

overlay简述

什么是地图覆盖物Overlay？地图覆盖物主要是放置一些和地图位置相关的元素，常见的地图覆盖物有三种类型，如：popup 弹窗、label标注信息、text文本信息等，而这些覆盖物都是和html中的element等价的，通过Overlay的属性element和html元素绑定的同时设定坐标参数来达到将html元素放到地图上的位置，在平移缩放的时候html元素也会随着地图的移动而移动。Overlay的优势是可以自定义各种css样式，所以也有人使用Overlay来渲染定位

overlay API说明

Overlay初始化时可以接受很多配置参数，常用的属性有：

• id：为对应的Overlay设置一个id，便于使用ol.Map的getOverlayById方法获取相应的overlay。
• element：Overlay包含的DOM element，及指定Overlay使用的DOM元素。
• offset：偏移量，像素为单位，Overlay相对于放置位置position的偏移量，默认值是 [0, 0]，正值分别向右和向下偏移。
• position：在地图所在的坐标系框架下，Overlay放置的位置。
• positioning：根据position的位置来进行相对定位，可能的值包括bottom-left、bottom-center、bottom-right、center-left、center-center、center-right、top-left、top-center、top-right，默认是top-left，也就是element左上角与position重合。
• stopEvent：地图的事件传播是否停止，默认是 true，即阻止传播，可能不太好理解，举个例子，当鼠标滚轮在地图上滚动时，会触发地图缩放事件，如果在Overlay之上滚动滚轮，并不会触发缩放事件，如果想鼠标在Overlay 之上也支持缩放，那么将该属性设置为false即可。
• insertFirst：是否应该先添加到其所在的容器，当stopEvent设置为true时，Overlay和Openlayers的控件（controls）是放于一个容器的，此时将insertFirst设置为 true ，Overlay会首先添加到容器，这样，Overlay默认在控件的下一层（CSS z-index），所以，当stopEvent和insertFirst都采用默认值时，Overlay默认在控件的下一层。
• autoPan：当触发Overlay setPosition方法时触发，当Overlay超出地图边界时，地图自动移动，以保证 Overlay全部可见。
• autoPanAnimation：设置autoPan的效果动画。
• autoPanMargin：地图自动平移时，地图边缘与Overlay的留白（空隙），单位是像素，默认是 20像素。

overlay特有方法，主要有：

• getElement：取得包含overlay的DOM元素。隐藏Overlay时可使用Overlay.getElement.style.display = 'null'.
• getId：取得overlay的id。
• getMap：获取与overlay关联的map对象。
• getOffset：获取offset属性。
• getPosition：获取position属性.
• getPositioning：获取positioning属性。
• setElement：设置overlay的element。
• setMap：设置与overlay的map对象。彻底删除Overlay使用Overlay.setMap(null)。需要注意的是删除Overlay时，Overlay创建时指定的DOM元素也一并被删除。
• setOffset：设置offset。
• setPosition：设置position属性。但只是将指定的DOM元素放在地图指定的位置上，DOM元素的样式和内容需要我们自己实现。
• setPositioning：设置positioning属性。

Point图文标注实现

1. 添加点要素。

let personData = [
    {
        id: 1,
        name: '张三',
        position: [104.0641, 30.5973],
        color: 1,
        sex: 1
    }
];
// 根据positions创建一个新的数据源和要素数组，
let source = new VectorSource();
let feature = new Feature({
    geometry: new Point([104.0641, 30.5973])
});
source.addFeature(feature);
// 创建带有数据源的矢量图层
let layer = new VectorLayer({
    source: source,