之前在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>
效果：
相关推荐
本示例“baiduMap_openlayer”是关于如何利用OpenLayers加载和展示百度地图与高德地图的教程。这个教程对开发者来说具有很高的参考价值，特别是那些想要在自己的Web应用中集成地图功能的人员。 首先，让我们深入...
"OpenLayers2多地图联动"这个主题涉及到如何在同一个应用中同步显示和操作多个地图源，实现地图之间的交互。 在OpenLayers2中，多地图联动的核心是通过事件监听和处理来同步各个地图层的行为。例如，当用户在一张...
《基于OpenLayer的军事动态标绘详解》 在信息技术飞速发展的今天，地图服务已经不再局限于传统的静态展示，而是向...随着OpenLayer的不断迭代更新，我们可以期待更多创新和改进，为军事领域带来更加智能化的决策支持。
4. **叠加显示**：叠加多个瓦片图层意味着在地图上同时显示来自不同数据源的图层。例如，你可以叠加基础地图瓦片、地形图瓦片、气象数据瓦片等，以实现丰富的地图应用。 下面是一个简单的OpenLayers叠加瓦片的示例...
openlayer4 加载arcgis rest 服务（遥感影像）。本文件适用于离线环境和有网络的在线环境。包括离线open layer，ol.css和ol.js文件和代码。代码很简单，老铁替换服务地址就可以使用代码。关键是质量保证，项目验证。...
标题中的“使用稻歌Google Map截获器和Openlayer制作内网地图”表明我们要讨论的是一个结合了两个特定工具——稻歌Google Map截获器和OpenLayer——来创建内部网络地图的方法。这个过程通常用于在无法直接访问公开...
标题 "pro4js和openlayer版本配置" 涉及的是两个主要的JavaScript库在项目中的集成和配置：Pro4JS和OpenLayers。Pro4JS通常用于地理信息系统（GIS）开发，提供了一些实用的地理处理功能，而OpenLayers则是一个流行的...
综上所述，"OpenLayer的地图程序"利用OpenLayer框架构建了一个专注于交通信息的Web地图应用，涵盖了地图加载、用户交互、数据可视化、投影转换等多个方面，展现了OpenLayer的强大功能和灵活性。开发者可以依据需求...
【标题】：“baiduMap_openlayer(openlayer加载百度地图例子)” 在GIS（地理信息系统）领域，集成不同的地图服务是常见的需求。本示例重点展示了如何利用OpenLayers库加载百度地图，让开发者能够在一个Web应用中...
OpenLayers 是一个开源的JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括天地图。在本教程中，我们将探讨如何使用OpenLayers接入天...记得参考提供的博客文章，了解更多细节和示例代码。
openlayer 加载geoserver地图测试页面
在这个"openlayer在线标绘，并实现增删改查"的主题中，我们将深入探讨如何利用OpenLayers加载离线地图，进行在线标绘，以及如何实现标绘要素的增删改查功能，同时还会涉及地图图层切换和定位功能。 1. **加载离线...
openlayer3源代码，自定义热力图
在这个“openlayer3实现的GIS简单示例”中，我们将探讨如何使用OpenLayer3来构建一个包含底图、点、线、面和圆五个图层的地图应用，以及如何添加点击事件来增强用户交互。 首先，基础的地图设置是关键。在OpenLayer...
OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。...
本教程将详细讲解如何利用OpenLayer 3加载谷歌地图的三种不同类型：地形图、影像图和交通图。 首先，我们需要在HTML文件中引入OpenLayer 3库。你可以通过CDN链接或者下载库文件后本地引用。引入后，我们创建一个...
- **创建基本地图**：以下是一个简单的示例，演示如何使用 OL3 创建一个地图并显示 OpenStreetMap 数据。 ```html <!doctype html> #map { height: 256px; width: 512px; } <title>OpenLayers3 ...
本项目“openlayer叠加山东省地图数据和样式”旨在利用OpenLayers的功能，将山东省的地图数据进行叠加展示，并对地图元素进行个性化样式设置。 首先，`index_v4.html`是项目的主入口文件，它包含了HTML结构以及引入...
4. **集成Highcharts**：在地图上添加Highcharts折线图，我们需要创建一个独立的Highcharts图表，并将其放置在一个定位在地图上的div中。首先，创建Highcharts配置对象，然后调用`Highcharts.chart()`函数： ```...
4. **创建图层**：加载数据源，例如WMS服务，确保图层支持所使用的坐标系。 ```javascript var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://your-wms-service-url', params: { '...