OpenLayers的Overlay：弹窗

点击某个元素，弹出弹窗。该弹窗就是Overlay。

定义一个Overlay，首先要定义一个元素作为弹窗的主体：

<div id="myPopup">弹窗层
	<div>
		内容自定义
		<button id="closeOverlay">关闭</button>
	</div>
</div>

弹窗的内容可以自定义。

然后将其初始化并添加给ol.Map对象：

var overlay = new ol.Overlay({
	element: 'myPopup'
	autoPan: true,
	autoPanMargin: 20,
	positioning: 'center-center'
});
map.addOverlay(overlay);

这样，该Overlay就会默认隐藏。而对一个Overlay对象，其隐藏/显示是由其position控制的。当其具有一个确切的position时，该Overlay会显示；当其position属性为undefined时，该Overlay会隐藏。

当点击一个元素时，在其点击的回调中获取该元素的坐标coordinate，然后将坐标赋给Overlay来显示：

overlay.setPosition(coordinate);

可以在自定义的弹窗元素中添加一个关闭按钮，为其添加点击回调：

overlay.setPosition(undefined);

这样，当点击弹窗的关闭按钮时，弹窗就会关闭。

转载自：https://blog.csdn.net/fyyyr/article/details/82959400