openlayers实现多图显示

概述:

本文讲述在openlayers中如何实现多图联动。

思路:

1、判断鼠标在哪个地图上;

2、添加该地图的地图移动事件;

3、设置另外一个地图的bound为该地图的。

代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
    <style>
        html, body, table{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
        }
        #map1,#map2{
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="http://localhost/olapi/OpenLayers.js"></script>
    <script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
    <script src="http://localhost/jquery/jquery-1.8.3.js"></script>
    <script>
        var map1,map2;
        $(window).load(function() {
            var bounds = new OpenLayers.Bounds(
                    73.45100463562233, 18.16324718764174,
                    134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map1 = new OpenLayers.Map('map1', options);
            map2 = new OpenLayers.Map('map2', options);

            map1.addLayer(getWms("china"));
            map1.addControl(new OpenLayers.Control.Zoom());
            map1.addControl(new OpenLayers.Control.Navigation());
            map1.zoomToExtent(bounds);

            map2.addLayer(getWms("province"));
            map2.addControl(new OpenLayers.Control.Zoom());
            map2.addControl(new OpenLayers.Control.Navigation());
            map2.zoomToExtent(bounds)

            $("table").on("mousemove", function(e){
                var _x = e.clientX;
                var _tabWidth = $("table").width();
                if(_x>0 && _x<_tabWidth/2){
                    map1.events.register("move",map1,function(){
                        map2.zoomToExtent(map1.getExtent());
                    });
                }
                else{
                    map2.events.register("move",map2,function(){
                        map1.zoomToExtent(map2.getExtent());
                    });
                }
            })
        });

        function getWms(layer){
            return new OpenLayers.Layer.WMS(
                    "Geoserver layers - Tiled",
                    "http://localhost:8081/geoserver/lzugis/wms",
                    {
                        "LAYERS": layer,
                        "STYLES": '',
                        format: 'image/png'
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: true,
                        yx : {'EPSG:4326' : true}
                    }
            );
        }
    </script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
        <td style="width: 50%; height: 100%; border-right: 1px solid #000;">
            <div id="map1"></div>
        </td>
        <td style="width: 50%; height: 100%; border-right: 1px solid #000;">
            <div id="map2"></div>
        </td>
    </tr>
</table>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾老师の博客

网络数据帧与 MTU

26140
来自专栏ChaMd5安全团队

N1CTF2018 APFS&Lipstick题解

APFS题目描述 Apple released the brand new APFS on WWDC 2017 with a bunch of new feat...

377100
来自专栏iOSDevLog

用Kotlin破解Android版微信小游戏-跳一跳成果跳一跳思路源码使用方法参考来源Android 插件 免PC

40760
来自专栏杨建荣的学习笔记

GoldenGate数据迁移的问题总结(二)(r10笔记第85天)

昨天使用GoldenGate同步数据,数据量玩得有些大了。最后发现很多小问题变得更加严峻,比如空间问题。 而且由于没有更多的经验,导致这个问题被我引入了另外一个...

35290
来自专栏SAP最佳业务实践

SAP最佳业务实践:FI–资产会计(162)-15在建工程-F-54清算预付款

4.6.5 F-54清算预付款 既可以手动清算预付款,也可以由付款程序来清算。您可以随时进行手动清算。不需要任何特殊方法。 当您输入发票时,系统会发出有未清预付...

35480
来自专栏转载gongluck的CSDN博客

波形音频(WAVE)底层接口的学习与使用

在WINDOWS下,音频函数有多种类型,如MCI、多媒体OLE控制、高级音频等,使用方法都比较简单。 但如果想编写一个功能较强大的音频处理程序,那...

1.3K50
来自专栏Android群英传

Badge分析&如何逼死处女座

17730
来自专栏杨建荣的学习笔记

dg的奇怪问题终结和分区问题答疑 (r7笔记第77天)

今天来说几个问题,一个是对昨天《让我焦灼的四个问题》的升华,不能起博眼球的题目,技术分析给大家兜底了,你们看看有没有类似的问题。 还有几个小问题说说今天的感受和...

35950
来自专栏醉梦轩

解决Android模拟器中修改IMSI后无法上网问题

45630
来自专栏Android先生

RxJava2 实战知识梳理(2) - 计算一段时间内数据的平均值

今天,我们继续跟着 RxJava-Android-Samples 的脚步,一起看一下RxJava2在实战当中的应用,在这个项目中,第二个的例子的描述如下...

11340

扫码关注云+社区

领取腾讯云代金券