5-设置地图可交互性和切换地图容器

本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡

设置地图可交互性

如果项目需求要求，在某些时候，鼠标滚动或拖动等动作禁止操作地图，可以通过ol.interaction.defaults的onFocusOnly参数来设置只有当地图获取焦点时才能操作。

• 创建地图容器和一个输入框，并设置地图容器的tabindex属性值为2，即当tab键按下时，地图才会获得焦点

<div tabindex="2" id="map" class="map"></div>
<input id="ipt" value="这是一个输入框" />

• 设置输入框的位置

#ipt {
    position: absolute;
    z-index: 2;
    top: 27px;
    left: 60px;
}

• js逻辑

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    }),
    //设置onFocusOnly参数为true，即当地图获取焦点时才可交互
    interactions: ol.interaction.defaults({
        onFocusOnly: true
    })
});

在浏览器运行后，发现鼠标滚轮并不能控制地图放缩，这是因为此时的焦点并不在地图上。当按下tab键或单击地图后，地图获得焦点，才可以交互。

切换地图容器

另外，ol允许改变地图所在容器，通过map.getTarget()和map.setTarget()方法实现。

• 引入ol文件

• 创建两个地图容器map1和map2，和一个切换按钮。

<div id="map1" style="height: 300px;width: 100%;border: 1px solid black;"></div>
<div id="map2" style="height: 300px;width: 100%;border: 1px solid blue;"></div>
<button id="switch">切换</button>

• js 逻辑

var map = new ol.Map({
    target: "map1",
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

//对按钮添加点击事件，在两个地图容器间切换
document.getElementById('switch').onclick = function() {
    var target = map.getTarget() === 'map1' ? 'map2' : 'map1';
    map.setTarget(target);
};

此时可通过按钮在两个地图容器间切换，效果如下