阅读更多

0顶
0踩

开源软件

原创新闻 openlayer4 多图联动

2018-06-04 09:01 by 见习记者 jjxliu306 评论(0) 有9834人浏览

 之前在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>

 

 效果:

 

 

 

 

 

0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 漂亮遮罩层css+div

    漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...

  • 利用CSS+DIV进行网页布局

    此外,合理的功能布局、图像搭配可以增强网页视觉表现力,给用户带来强烈的视觉感受,DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素,同时还可以精准定位网页中的位置,不但降低了网页维护的难度,...

  • CSS+DIV三种布局方式

    在学习了盒模型、块级元素和行内元素得到概念后,我们来说一下CSS的一个比较重要的用途:布局。以前我们学过表格可以起到布局页面的作用,比如布局表单,但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的...

  • CSS+DIV进行的页面布局

    CSS+DIV进行的页面布局布局概述网页布局三级目录一级目录一级目录一级目录一级目录一级目录一级目录一级目录 布局概述 DIV+CSS布局:网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。 网页布局 ...

  • CSS+DIV详解

    层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于...

  • 用css+div实现网页的简单布局(一)

    这周进行了为期大约两天的h5前端开发的实训,因为有事请了一天的假,所以还是要继续学习巩固一下基础方面的知识。...Div+css 是一种目前比较流行的网页布局技术 Div 来存放需要显示的数据(文字,图表…) , css 就是...

  • CSS+div网站模板

    打包了十几套简洁美观的Css+div的网站模板,css表、图片和html分开,方便使用,希望你找到自己喜欢的模板。

  • 国外经典HTML+CSS+DIV+JS网站模版

    精选国外二十多个经典web前端模版,利用HTML+DIV+CSS+JS技术实现常用的各种网页效果(如漂亮的导航条等),并且CSS代码,JS代码以及图片切片均为单独的文件夹,一目了然,适合网站设计学习!

  • css + div 常用的3种横向排列自动换行

    小菜鸟在摸鱼

  • DIV+CSS布局

    DIV+CSS布局

  • 四个完整的DIV+CSS网页案例,有详细解说

    四个完整的DIV+CSS网页案例,有详细解说,教你如何一步步完成页面制作。

  • html div将页面划分,css+div网页布局

    div+css排版是最新的网页排版理念,完全有别旧的排版方式(比如说table排版)。首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容。div+css这种排版十分简单,而且相对容易...

  • CSS+div教程,CSS+div教程

    CSS+div教程CSS+div教程CSS+div教程CSS+div教程CSS+div教程

  • css+div实现简单布局

    1、技术目标:开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局2、什么是W3C标准?W3C:World Wide Web Consortium,万维网联盟W3C的职能:负责制定和维护Web行业标准W3C标准包括一系列的标准:HTML内容...

  • div+css网页设计例子

    如果设置了,会跟在上一个元素后面,这个时候如果不希望继续跟在上一个元素后面,可以用 clear:上一个元素的浮动方式 这样 ⭐详细可以参考这篇博客 经验分享:CSS浮动(float,clear)通俗讲解 ...

  • HTML CSS + DIV实现整体布局

    开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2、什么是W3C标准?  W3C:World Wide Web Consortium,万维网联盟  W3C的职能:负责制定和维护Web行业标准  W3C标准包括一系列的标准: HTML内容...

  • (前端)HTML之CSS(div+css布局)

    现在为三个div增加一个上级div,并且设置上级div的相对定位为relative,上外边距设置50px,左边距设置为60px,修改后的页面代码如下所示。 &lt; html&gt; &lt; head&gt; 绝对定位&lt; /title&gt; &lt; style type="text/css"&gt; .div1{ ...

  • HTML+CSS+JS网页设计

    HTML页面主要由:登录、注册跳转页面,轮播图,家乡简介,热门景点,特色美食等...通过Div+CSS、鼠标滑过特效、获取当前时间,跳转页面、基本所需的知识点全覆盖。提示:以下是本篇文章正文内容,下面案例可供参考。

  • DIV+CSS网页布局(新手必备)

    文章目录一:网页布局的目的二:如何布局(1):确定“版心”(2):分析模块三:页面元素的定位机制(1)流式布局(2)浮动-float(3)绝对定位(position:absolute)(4)相对定位(position:relative)四:布局中的常用...

Global site tag (gtag.js) - Google Analytics