如何在OpenLayers 4中启用概览图点击事件同步主地图？

没问题！要让你的OpenLayers 4概览图支持点击任意位置同步主地图居中，只需要给概览图的内部地图实例添加点击事件监听，获取点击坐标后更新主地图视图中心即可。以下是完整的修改代码：

// 创建概览图控件并保存引用
var overviewMapControl = new ol.control.OverviewMap();

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        overviewMapControl
    ]),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        center: [500000, 6000000],
        zoom: 7
    })
});

// 获取概览图对应的小地图实例
var overviewMap = overviewMapControl.getMap();

// 给概览图添加点击事件监听
overviewMap.on('click', function(evt) {
    // 获取点击位置的坐标（和主地图投影一致，直接使用）
    var clickCoord = evt.coordinate;
    // 将主地图视图居中到点击位置
    map.getView().setCenter(clickCoord);
});

关键步骤说明： #

• 单独保存概览图控件的引用：这样我们能方便地获取它内部的小地图对象，而不是直接在controls数组里匿名创建。
• 获取概览图的地图实例：通过overviewMapControl.getMap()可以拿到概览图对应的独立地图对象，它和主地图一样支持所有OpenLayers的事件和操作。
• 监听点击事件并更新主地图中心：在点击回调中，evt.coordinate直接返回点击点的坐标值（和主地图默认使用相同的EPSG:3857投影），调用map.getView().setCenter()就能让主地图立刻居中到该位置，同时概览图的视口框会自动同步跳转，完全不需要手动拖拽视口框。

这样修改后，你点击概览图的任何位置，主地图都会瞬间同步到对应区域，完美实现你想要的双视图同步效果。

内容的提问来源于stack exchange，提问作者DevWizard