设置地图可交互性
如果项目需求要求，在某些时候，鼠标滚动或拖动等动作禁止操作地图，可以通过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;
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);
复制代码
此时可通过按钮在两个地图容器间切换，效果如下
gyratesky
数据可视化
- 3.9w
-
Defineee
three.js
JavaScript
- 1641
-
gyratesky
JavaScript
- 25.2w
-
webxue
JavaScript
Vue.js
- 5.8w
-
嵌入式视觉
掘金·日新计划
ChatGPT
- 43.8w
-
摸鱼的春哥
JavaScript
Vue.js
- 4.1w
-
JavaScript
WebGL
three.js
- 1297
-
vaelcy
掘金·金石计划
数据可视化
- 4304
-
superZidan
JavaScript
TypeScript
Node.js
