openlayer4 多图联动
程序员文章站
2022-03-01 17:09:56
...
之前在ol2中多图联动需要监听地图move事件，在事件中对其他地图进行位置更新来达到多图联动的效果，在ol4中可以直接通过多个地图共享一个view来达到多图联动的效果。
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多图联动</title>
<link rel="stylesheet" href="ol.css" type="text/css">
<style>
body{
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
.top{
height: 50%;
width: 100%;
float:left;
}
.bottom{
height: 50%;
width: 100%;
float:left;
}
.left_top {
height: 100%;
width: 50%;
float:left;
}
.right_top {
height: 100%;
width: 50%;
float:left;
}
.left_bottom {
height: 100%;
width: 50%;
float:left;
}
.right_bottom {
height: 100%;
width: 50%;
float:left;
}
</style>
<script src="ol.js" type="text/javascript"></script>
</head>
<body>
<div class="top">
<div id="map1" class="left_top"> </div>
<div id="map2" class="right_top"> </div>
</div>
<div class="bottom">
<div id="map3" class="left_bottom"> </div>
<div id="map4" class="right_bottom"> </div>
</div>
<script>
function createMap(_div , _view){
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: _div,
layers:[osm],
view: _view
});
return map ;
}
var view = new ol.View({
center: [ 120, 30],
zoom: 10,
projection: 'EPSG:4326'
});
var map1 = createMap('map1' , view);
var map2 = createMap('map2' , view);
var map3 = createMap('map3' , view);
var map4 = createMap('map4' , view);
</script>
</body>
</html>
效果：