Openlayers：并排共享视图…….如何正确解除绑定？
我使用了openlayers.org中共享视图示例的调整版本： 之后我如何正确地解除这些“新”平等观点的绑定？ （答案可能很简单，但现在让我头疼）Openlayers：并排共享视图…….如何正确解除绑定？,openlayers,openlayers-5,Openlayers,Openlayers 5,我使用了openlayers.org中共享视图示例的调整版本： 之后我如何正确地解除这些“新”平等观点的绑定？ （答案可能很简单，但现在让我头疼） 注：我使用全局变量（例如window['map2']），因为我需要能够绑定和解除绑定多个地图。我认为您不需要监听更改，如果地图共享一个视图，它们会自动同步 将一张地图的视图设置为另一张地图的视图将开始同步。给其中一张地图一个新视图（最初基于它共享的视图状态）将破坏同步 <!doctype html> <html lang="en"&
注：我使用全局变量（例如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>
html，body，.map{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.map1{
宽度：50%；
身高：40%；
}
.map2{
宽度：50%；
身高：40%；
}
OpenLayers示例
var layer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var map1=新ol.Map({
目标：“map1”，
图层：[图层]，
视图：新ol.view({
中间：[0,0]，
缩放：1
})
});
var map2=新ol.Map({
目标：“map2”，
图层：[图层]，
视图：新ol.view({
中间：[0,0]，
缩放：1
})
});
函数sync1（）{
setView（map1.getView（））；
}
函数sync2（）{
setView（map2.getView（））；
}
函数unsync（）{
map2.setView（新ol.View({
投影：map2.getView（）.getProjection（），
中心：map2.getView（）.getCenter（），
分辨率：map2.getView（）.getResolution（），
旋转：map2.getView（）.getRotation（），
maxZoom:map2.getView（）.getMaxZoom（），
minZoom:map2.getView（）.getMinZoom（）
}));
}
<!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>
html，body，.map{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.map1{
宽度：50%；
身高：40%；
}
.map2{
宽度：50%；
身高：40%；
}
OpenLayers示例
var layer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var map1=新ol.Map({
目标：“map1”，
图层：[图层]，
视图：新ol.view({
中间：[0,0]，
缩放：1
})
});
var map2=新ol.Map({
目标：“map2”，
图层：[图层]，
视图：新ol.view({
中间：[0,0]，
缩放：1
})
});
函数sync1（）{
setView（map1.getView（））；
}
函数sync2（）{
setView（map2.getView（））；
}
函数unsync（）{
map2.setView（新ol.View({
投影：map2.getView（）.getProjection（），
中心：map2.getView（）.getCenter（），
分辨率：map2.getView（）.getResolution（），
旋转：map2.getView（）.getRotation（），
maxZoom:map2.getView（）.getMaxZoom（），
minZoom:map2.getView（）.getMinZoom（）
}));
}