Openlayers 教程 - 创建加载两个地图并同步操作

非科班Java出身GISer

已于 2024-05-06 09:51:14 修改

阅读量1.7k

点赞数

分类专栏： Openlayers 学习教程文章标签：地图同步 openlayer加载两个地图 openlayers初始化 openlayers创建地图 ol 创建多个地图 ol 创建两个地图 openlayers地图同步

于 2022-02-28 11:57:52 首次发布

本文链接：https://blog.csdn.net/linzi19900517/article/details/123178975

版权

Openlayers 学习教程专栏收录该内容

8 篇文章 279 订阅

订阅专栏

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>