Openlayers2多地图联动
程序员文章站
2022-03-15 10:25:21
...
地图实际使用中经常会出现多地图对比的情况，多图联动需求明确，通过openlayers中的map.center 控制多个地图直接联动，主要代码为：
当存在两个地图的时候 _maps = [map1 , map2] ;
_maps[0].events.register("move", _maps[0], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
if(_maps[1])
_maps[1].setCenter(c1,z1);
_test_move = true;
}
});
if(_maps[1])
_maps[1].events.register("move", _maps[1], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
_maps[0].setCenter(c1,z1);
_test_move = true;
}
});
测试页面为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test markers </title>
<script src="OpenLayers.js"></script>
<script src="TdtSwitcher.js"></script>
<style>
html,body{
height:100%;
}
.div_class{
height: 100%;
width:50%;
float:left;
position: relative;
}
</style>
<script type="text/javascript">
function init() {
var map1 = new OpenLayers.Map("map1", {
controls : [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition() ],
projection : new OpenLayers.Projection('EPSG:900913'),
displayProjection : new OpenLayers.Projection('EPSG:4326'),
//units : 'm',
numZoomLevels : 20,
//maxResolution : 156543.0339,
maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34)
} ) ;
var map2 = new OpenLayers.Map("map2",{
controls : [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition() ],
projection : new OpenLayers.Projection('EPSG:900913'),
displayProjection : new OpenLayers.Projection('EPSG:4326'),
//units : 'm',
numZoomLevels : 20,
//maxResolution : 156543.0339,
maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34)
} ) ;
//添加选择背景地图的control
map1.addControl(new OpenLayers.Control.TdtSwitcher());
map2.addControl(new OpenLayers.Control.TdtSwitcher());
togeterMove([map1 , map2]);
var lon = 120;
var lat = 30;
var point = new OpenLayers.LonLat(lon, lat);
point.transform(map1.displayProjection,
map1.projection);
map1 .setCenter(point, 12);
}
_test_move = true ;
function togeterMove(_maps) {
if(_maps.length == 2) {
_maps[0].events.register("move", _maps[0], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
if(_maps[1])
_maps[1].setCenter(c1,z1);
_test_move = true;
}
});
if(_maps[1])
_maps[1].events.register("move", _maps[1], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
_maps[0].setCenter(c1,z1);
_test_move = true;
}
});
}
}
</script>
</head>
<body onload="init()" >
<div id="div1" class="div_class" >
<div id="map1" style="height:100%;width:100%"> </div>
</div>
<div id="div1" class="div_class" >
<div id="map2" style="height:100%;width:100%"> </div>
</div>
</body>
</html>
实际效果为：
附件中有demo
