openlayer4 多图联动

最新推荐文章于 2023-06-27 09:50:23 发布

jjxliu306

最新推荐文章于 2023-06-27 09:50:23 发布

阅读量306

点赞数 1

分类专栏： GIS 文章标签： openlayers 联动

GIS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

之前在ol2中多图联动需要监听地图move事件，在事件中对其他地图进行位置更新来达到多图联动的效果，在ol4中可以直接通过多个地图共享一个view来达到多图联动的效果。

直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多图联动</title>
    <link rel="stylesheet" href="ol.css" type="text/css"> 
    <style>
	body{
			 height: 100%;
				width: 100%;
			 position: absolute;
			 overflow: hidden;
	}

	.top{
		 height: 50%;
         width: 100%;
		 float:left;
	}

   .bottom{
		 height: 50%;
         width: 100%;
		 float:left;
	
	}

      .left_top {
        height: 100%;
        width: 50%;
		 float:left;
      }
	   .right_top {
        height: 100%;
        width: 50%;
		 float:left;
      }
	   .left_bottom {
        height: 100%;
        width: 50%;
		 float:left;
      }
	   .right_bottom {
        height: 100%;
        width: 50%;
		 float:left;
      }
    </style>
    <script src="ol.js" type="text/javascript"></script>  
   
  
</head>
<body> 

 
<div class="top">
	
    <div id="map1" class="left_top"> </div> 
	 <div id="map2" class="right_top"> </div> 

</div>

<div class="bottom">

	<div id="map3" class="left_bottom"> </div> 
	 <div id="map4" class="right_bottom"> </div> 
</div>
 

 
    <script>
		
		function createMap(_div , _view){ 
			var osm = new ol.layer.Tile({
	        	source: new ol.source.OSM()
	      	}); 
		    var map = new ol.Map({
		         target: _div,
		         layers:[osm],
		         view: _view 
		       });
			return map ;
		}
		 
		var view =	new ol.View({
	           center: [ 120, 30],
	           zoom: 10,
	           projection: 'EPSG:4326'
	         });
		
		var map1 = createMap('map1' , view);
		var map2 = createMap('map2' , view);
		var map3 = createMap('map3' , view);
		var map4 = createMap('map4' , view);
		
		
		 
	</script>
    
   
     </body>
</html>

效果：

jjxliu306

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
openlayer4 多图联动

之前在ol2中多图联动需要监听地图move事件，在事件中对其他地图进行位置更新来达到多图联动的效果，在ol4中可以直接通过多个地图共享一个view来达到多图联动的效果。直接上代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;多图联动&lt;/ti..
复制链接

扫一扫