地图实际使用中经常会出现多地图对比的情况，多图联动需求明确，通过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
相关推荐
openlayers 调用百度地图
使用openlayers加载离线地图实例，可通过mui打包成app。简单，易上手
openlayers 加载天地图示例
该脚本能够实现openlayers-Cesium二三维联动效果的功能
openlayers3以上版本，地图中选择要素后自定义右键功能
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.csdn.net/Gary_888/article/details/89914290
webgis开发，文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码，很全很实用。
NULL 博文链接：https://ruanqiangbeyond201208043532.iteye.com/blog/2119768
可直接运行，简易的openlayers发布离线瓦片数据的DEMO，压缩包中包含了一部分地区的街道地图瓦片数据。
openlayers 4.2 加载百度地图（在线 离线） 高德地图（在线 离线）
1) 部署到tomcat6的webapps下面。 2) 将world.mbtiles放到D:/gisdata/mbtiles/目录下。 3) 在浏览器输入:(世界地图,图层0-7) http://localhost:8080/MbTileService/local_tiles.html
使用openlayers5加载天地图影像，可以供参考使用，希望可以改进代码，重新使用。
基于openlayers 3开发代码，配合太乐地图下载离线地图使用
此代码采用开源的openlayers5,显示天地图的注记图层，天地图路网图层，欢迎下载使用。
openlayers加载静态图片作为底图，操作图片流畅，可控显示范围和等级
简易的openlayers发布离线瓦片数据的DEMO，压缩包中包含了一部分地区的街道地图瓦片数据。
此代码为结合openlayers5和谷歌在线地图，可供初学者参考。谷歌影像图需要更改url即可。
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
接天地图影像、地形等基础地理信息服务；各类数据的服务器地址，瓦片下载url拼接方法等等