openlayers - Openlayers:并排共享视图........如何正确解除绑定?
问题描述
我使用了来自 openlayers.org 的共享视图示例的调整版本:https ://openlayers.org/en/latest/examples/side-by-side.html
var layer = new TileLayer({
source: new OSM()
});
window['view1'] = new ol.View({
center: [0, 0],
zoom: 1
});
window['view2'] = new ol.View({
center: [0, 0],
zoom: 1
});
window['map1'] = new ol.Map ({
target: 'map1',
layers: [layer],
view: window['view1']
});
window['map2'] = new ol.Map({
target: 'map2',
layers: [layer],
view: window['view2']
});
window['map1'].addEventListener('change:resolution', function
(evt) {
window['view1'] = window['view2'];
window['map1'].setView(window['view1']);
}, false);
window['map2'].addEventListener('change:resolution', function
(evt) {
window['view2'] = window['view1'];
window['map2'].setView(window['view2']);
}, false);
之后如何正确解除这些“新”平等观点?(可能答案很简单,但现在让我很头疼)
PS:我使用全局变量(例如window['map2']),因为我需要能够绑定和取消绑定多个地图。
解决方案
我认为您不需要监听更改,如果地图共享视图,它们会自动同步。
将一张地图的视图设置为另一张地图的视图将开始同步。为其中一张地图提供一个新视图(最初基于它共享的视图状态)将中断同步。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.map1 {
width: 50%;
height: 40%;
}
.map2 {
width: 50%;
height: 40%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map1" class="map1"></div>
<input type="submit" onclick="sync1()" value="Sync with 1">
<input type="submit" onclick="unsync()" value="Unsync">
<input type="submit" onclick="sync2()" value="Sync with 2">
<div id="map2" class="map2"></div>
<script type="text/javascript">
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map1 = new ol.Map({
target: 'map1',
layers: [layer],
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
var map2 = new ol.Map({
target: 'map2',
layers: [layer],
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
function sync1() {
map2.setView(map1.getView());
}
function sync2() {
map1.setView(map2.getView());
}
function unsync() {
map2.setView(new ol.View({
projection: map2.getView().getProjection(),
center: map2.getView().getCenter(),
resolution: map2.getView().getResolution(),
rotation: map2.getView().getRotation(),
maxZoom: map2.getView().getMaxZoom(),
minZoom: map2.getView().getMinZoom()
}));
}
</script>
</body>
</html>
推荐阅读
- node.js - 在更新操作上使用聚合管道时,MongoDB“'$' 本身不是有效的 FieldPath”
- javascript - 单击父元素内的按钮的Node.js Puppeteer问题
- visual-studio - Visual Studio 2019 Publish 删除文件夹的写权限
- python - 我的 django 视图总是抛出“意外的关键字参数错误
- excel - 将列从一个工作簿复制到另一个
- excel - 在符合模式的文件夹中打开文件的最新版本
- javascript - 我无法在 React.js 中访问“this.props.match.params.id”
- javascript - React 有太多的重新渲染问题
- excel - 如何在 excel 中实现这种自定义数字格式?
- javascript - Discord.js 机器人命令