OpenLayer仿天地图多时相

今天在仿写天地图的工具的时候的看见多时时相工具，说白了也就是两个地图设置相同的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%;
            width: 965px;
            position:absolute;
            display:inline;
        }

        #map2
        {
            height: 100%;
            width: 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这个类可以加载很多在线的瓦片地图。

OpenLayer仿天地图多时相

猜你喜欢