当前位置：首页 > 科普资料 > 正文

OpenLayers 加载两个地图，openlayers教程详细

科普资料
2年前
56
更新：2022-08-12 14:31:36

OpenLayers 加载两个地图，openlayers教程详细

OpenLayers 教程

在某些情况下需要一个页面展示两个同步地图，openlayers 加载两个地图的原理是地图对象共享 view，实现起来也很简单。另外，两个地图的位置，通过 div 来固定即可。

Openlayers 加载两个同步地图

<html lang="en">  <head>    <meta charset="utf-8">    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->    <link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">    <style>       /* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */      .map1 {        height: 400px;        width: 49.9%;float:left;      }     .map2 {        height: 400px;        width: 49.9%;float:right;      }    </style>    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->    <script src="http://openlayers.vip/examples/resources/ol.js"></script>    <script src="./tiandituLayers.js"></script>    <title>OpenLayers example</title>  </head>  <body>    <h2>Double Map</h2>    <!--地图容器，需要指定 id -->    <div id="map1" class="map1"></div>    <div id="map2" class="map2"></div>    <script type="text/javascript">  // 公共视野  var viewCommon;    // 地图视野  viewCommon = new ol.View({          // 定位          center: ol.proj.fromLonLat([116, 36]),          // 缩放          zoom: 4        })      var map1 = new ol.Map({        // 地图容器        target: 'map1',        // 地图图层，比如底图、矢量图等        layers: [          getIMG_CLayer(),          getIBO_CLayer(),  getCIA_CLayer(),        ],        // 地图视野        view: viewCommon      });      var map2 = new ol.Map({        // 地图容器        target: 'map2',        // 地图图层，比如底图、矢量图等        layers: [          getIMG_CLayer(),          getIBO_CLayer(),  getCIA_CLayer(),        ],        // 地图视野        view: viewCommon      });var closeSync = function () {map2.setView(new ol.View({  // 定位  center: ol.proj.fromLonLat([116, 36]),  // 缩放  zoom: 4}))}    </script><button id="button" onclick="closeSync()">关闭同步</button>  </body></html>