OpenLayers官方示例详解十三之叠置层（Overlay）
目录
目录
一、示例简介
这个示例展示了如何使用叠置层（ol.Overlay）。
这个示例借助了第三方库jQuery和Bootstrap。
二、代码详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Overlay</title>
<link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
<script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#marker {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
}
#vienna {
text-decoration: none;
color: white;
font-size: 11pt;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
.popover-content {
min-width: 180px;
}
</style>
</head>
<body>
<div id="map"></div>
<div >
<!-- 关于维也纳信息的点击标签 -->
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
<div id="marker" title="Marker"></div>
<!-- 弹窗 -->
<div id="popup" title="Welcome to OpenLayers"></div>
</div>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers: [
layer
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var pos = ol.proj.fromLonLat([16.3725, 48.208889]);
// 用于充当维也纳标记的叠置层
var marker = new ol.Overlay({
element: document.getElementById('marker'),
position: pos,
positioning: 'center-center',
// 是否要阻止事件冒泡到地图视口(map viewport)。
// 如果设置为ture，那么叠置层被放在装载控件的那个div容器中（该div容器css类名为ol-overlaycontainer-stopevent）
// 如果设置为false，那么叠置层被放在css类名为ol-overlaycontainer的div容器下，由className属性（默认为'ol-overlay-container ol-selectable'）指定类名的div容器中
stopEvent: false
});
map.addOverlay(marker); // 将叠置层添加到地图
// 用于充当维也纳标签的叠置层
var vienna = new ol.Overlay({
element: document.getElementById('vienna'),
position: pos
});
map.addOverlay(vienna);
// 用户点击地图就会弹出来的弹窗
var popup = new ol.Overlay({
element: document.getElementById('popup')
});
map.addOverlay(popup);
// 为地图绑定click事件，使用户点击地图就能在对应处弹窗
map.on('click', function(evt){
var element = popup.getElement(); // 获取充当弹窗的DOM元素
var coordinate = evt.coordinate; // 获取鼠标点击处的坐标
// 将地理坐标格式化为半球、度、分和秒的形式
var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));
$(element).popover('destroy');
popup.setPosition(coordinate); // 将弹窗位置设置为鼠标点击处
$(element).popover({
placement: 'top',
animation: false,
html: true,
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>'
});
$(element).popover('show');
});
</script>
</body>
</html>
这里要特别说明一下OpenLayers中关于DOM元素的组织关系：
当调用ol.Map()这个构造函数时，OpenLayers地图引擎会在内部创建一个视口容器（viewport container，一个css类名为ol-viewport的div DOM元素）并将其放置在target属性映射的地图容器元素中。
而在视口容器中将会包含三个子元素：
- canvas元素 —— 用于渲染地图
- css类名为ol-overlaycontainer-stopevent的div元素 —— 用于承载控件（control）和stopEvent属性设置为true的叠置层（overlay)，此处的DOM元素事件不冒泡
- css类名为ol-overlaycontainer —— 用于承载stopEvent属性设置为false的叠置层，此处的DOM元素事件会冒泡
所以上面示例中用于充当叠置层的html元素都会被移到用于承载叠置层的div元素中。
所以OpenLayers的DOM元素组织结构为：
转载自：https://blog.csdn.net/qq_35732147/article/details/85113263
