OpenLayers6之地图覆盖物Overlay详解

什么是地图覆盖物Overlay？

地图覆盖物指的是放置在地图表面的图形元素，例如标注、弹框、图标等。OpenLayers6中的Overlay类可以用来创建和管理地图覆盖物。

创建Overlay

要创建一个Overlay，必须先定义它的位置、大小以及所包含的图形元素。下面是一个简单的示例：

// 定义标注的坐标
var markerCoords = [112, 30];

// 创建标注元素
var marker = new ol.Overlay({
    position: markerCoords, // 标注位置
    element: document.getElementById('marker'), // 标注元素
});

// 将标注元素添加到地图
map.addOverlay(marker);

在上面的示例中，我们先定义了一个标注的坐标，然后创建了一个Overlay并指定了其位置和所包含的图形元素。最后，我们将Overlay对象添加到地图上。

Overlay的事件

Overlay对象还可以响应常用的鼠标和触摸事件。例如，可以在Overlay上添加click事件的监听器来响应用户单击操作：

var marker = new ol.Overlay({
    position: markerCoords,
    element: document.getElementById('marker'),
});
marker.on('click', function() {
    alert('You clicked the marker!');
});

在上面的示例中，当用户单击标注时，会弹出一个提示框。

Overlay的方法

Overlay对象还提供了一些有用的方法。例如，我们可以使用setPosition()方法来动态更改Overlay的位置：

var marker = new ol.Overlay({
    position: markerCoords,
    element: document.getElementById('marker'),
});
marker.setPosition([113, 31]); // 将标注位置改为[113, 31]

另外，我们还可以使用setMap(null)方法将Overlay从地图上移除：

map.removeOverlay(marker); // 将标注Overlay从地图上移除

示例1：在地图上添加弹窗

下面是一个示例，演示如何在地图上添加弹窗：

// 创建弹窗元素
var popup = document.createElement('div');
popup.id = 'popup';
var closer = document.createElement('a');
closer.id = 'popup-closer';
closer.href = '#';
closer.classList.add('ol-popup-closer');
popup.appendChild(closer);
var content = document.createElement('div');
content.classList.add('ol-popup-content');
popup.appendChild(content);

// 创建Overlay
var overlay = new ol.Overlay({
    element: popup,
    positioning: 'bottom-center',
});

// 添加点击地图的监听器
map.on('singleclick', function(e) {
    var coordinate = e.coordinate;
    content.innerHTML = '<p>You clicked here:</p><code>' + coordinate + '</code>';
    overlay.setPosition(coordinate);
});

// 添加关闭弹窗的监听器
closer.onclick = function() {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
};

// 添加Overlay到地图上
map.addOverlay(overlay);

在上面的示例中，我们先创建了一个包含关闭按钮和弹窗内容的div元素。然后，我们创建了一个新的Overlay对象，并指定了其所包含的div元素和相对于点位的位置。接着，我们在地图上添加了一个单击监听器，当用户单击地图上的某个位置时，会在弹窗中显示相应的坐标。最后，我们将Overlay添加到地图上。

示例2：在地图上添加标绘

下面是一个示例，演示如何在地图上添加标绘：

// 创建标绘元素
var drawElement = document.createElement('div');
drawElement.id = 'draw';
var drawButton = document.createElement('button');
drawButton.innerHTML = 'Draw line';
var endDrawButton = document.createElement('button');
endDrawButton.innerHTML = 'End drawing';
drawElement.appendChild(drawButton);
drawElement.appendChild(endDrawButton);

// 创建Overlay
var overlay = new ol.Overlay({
    element: drawElement,
    positioning: 'center-center',
    stopEvent: false,
});

// 添加点击标绘按钮的监听器
drawButton.onclick = function() {
    drawButton.disabled = true;
    map.addOverlay(overlay);
};

// 添加点击结束标绘按钮的监听器
endDrawButton.onclick = function() {
    var features = drawLayer.getSource().getFeatures();
    for (var i = 0; i < features.length; i++) {
        var coords = features[i].getGeometry().getCoordinates();
        console.log(coords);
    }
    map.removeOverlay(overlay);
    drawButton.disabled = false;
};

// 添加Overlay到地图上
map.addOverlay(overlay);

在上面的示例中，我们先创建了一个包含开始标绘和结束标绘按钮的div元素。然后，我们创建了一个新的Overlay对象，并指定了其所包含的div元素和相对于点位的位置，并将stopEvent设置为false以确保鼠标事件可以传递到地图上。接着，我们在开始标绘按钮上添加了一个单击监听器，用来激活Overlay。最后，我们将Overlay添加到地图上。当用户点击结束标绘按钮时，我们可以获取标绘的坐标，并将Overlay从地图上移除。