今天在仿写天地图的工具的时候的看见多时时相工具，说白了也就是两个地图设置相同的View这在Openlayer中很好的实现，只要声明两个map的容器，使用相同的视图即可先看看，天地图的效果：
一、全部源码
由于太简单了就不分析了就是加载个地图和卫星图，使用相同的视图即可
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿天地图多时相</title>
<link href="Script/ol.css" rel="stylesheet" />
<script src="Script/ol.js"></script>
<style>
#map1
{
height: 100%;
965px;
position:absolute;
display:inline;
}
#map2
{
height: 100%;
965px;
position:absolute;
right:0px;
display:inline;
}
</style>
</head>
<body>
<div id="map1"></div>
<div id="map2"></div>
<script>
var view=new ol.View({
center: ol.proj.transform([113.42, 34.44], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
});
var tileLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
})
});
var satelliteLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
})
});
var map = new ol.Map({
layers: [
tileLayer
],
view:view,
target: 'map1'
});
var map = new ol.Map({
layers: [
satelliteLayer
],
view: view,
target: 'map2'
});
</script>
</body>
</html>
二、仿的图
三、总结
缺点就是没有同步鼠标的移动，arcgis api 3.x做多时相比较麻烦，在4.x版本开始视图和map分离，做法和Openlayer3相同，在这里提一下，在ol2有专门加载谷歌地图的类，在ol3中同归于xyz下，不搞特殊，xyz这个类可以加载很多在线的瓦片地图。