OL2中的多地图联动展示

概述:

在前面有篇文章提到了OL3中的多地图联动展示,在本节中讲述在OL2中实现多地图的联动展示。

效果:

实现思路:

在Ol2中,实现多地图的联动展示也是比较简单的。查看OL2中map的api,可知只要添加map的move事件即可。

实现代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>china EPSG:4326 image/png</title>     <link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/>     <style type="text/css">         body { font-family: sans-serif; font-weight: bold; font-size: .8em; }         body { border: 0px; margin: 0px; padding: 0px;overflow: hidden; }         .map { width: 50%; height: 100%; border: 0px; padding: 0px; float: left;}     </style>     <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>     <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>     <script type="text/javascript">         function init(){             var width = $(window).width();             $(".map").css("width",(width-1)/2+"px");             var bounds = new OpenLayers.Bounds(                     87.57582859314434, 19.969920291221204,                     126.56713756740385, 45.693810203800794             );             var options = {                 controls: [],                 maxExtent: bounds,                 maxResolution: 0.1523098006807012,                 projection: "EPSG:4326",                 units: 'degrees'             };             var map1 = new OpenLayers.Map('map1', options);             var map2 = new OpenLayers.Map('map2', options);              var layer1 = new OpenLayers.Layer.WMS(                     "province", "http://localhost:8088/geoserver/lzugis/wms",                     {                         "LAYERS": 'capital',                         "STYLES": '',                         format: 'image/png'                     },                     {                         buffer: 0,                         displayOutsideMaxExtent: true,                         isBaseLayer: true,                         yx : {'EPSG:4326' : true}                     }             );             var layer2 = new OpenLayers.Layer.WMS(                     "province", "http://localhost:8088/geoserver/lzugis/wms",                     {                         "LAYERS": 'province',                         "STYLES": '',                         format: 'image/png'                     },                     {                         buffer: 0,                         displayOutsideMaxExtent: true,                         isBaseLayer: true,                         yx : {'EPSG:4326' : true}                     }             );             map1.addLayer(layer1);             map2.addLayer(layer2);             map1.addControl(new OpenLayers.Control.Zoom());             map1.addControl(new OpenLayers.Control.Navigation());             map2.addControl(new OpenLayers.Control.Zoom());             map2.addControl(new OpenLayers.Control.Navigation());             map1.zoomToExtent(bounds);             map2.zoomToExtent(bounds);              map1.events.register("move",map1,function(){                 var extent = map1.getExtent();                 map2.zoomToExtent(extent);             });             map2.events.register("move",map2,function(){                 var extent = map2.getExtent();                 map1.zoomToExtent(extent);             });         }     </script> </head> <body onLoad="init()"> <div id="map1" class="map" style="border-right: 1px solid #000"></div> <div id="map2" class="map"></div> </body> </html>

作者:GISShiXiSheng 发表于2015/9/30 20:49:53 原文链接

阅读:51 评论:0 查看评论

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章