地图实际使用中经常会出现多地图对比的情况，多图联动需求明确，通过openlayers中的map.center 控制多个地图直接联动，主要代码为：
当存在两个地图的时候 _maps = [map1 , map2] ;
_maps[0].events.register("move", _maps[0], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
if(_maps[1])
_maps[1].setCenter(c1,z1);
_test_move = true;
}
});
if(_maps[1])
_maps[1].events.register("move", _maps[1], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
_maps[0].setCenter(c1,z1);
_test_move = true;
}
});
测试页面为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test markers </title>
<script src="OpenLayers.js"></script>
<script src="TdtSwitcher.js"></script>
<style>
html,body{
height:100%;
}
.div_class{
height: 100%;
width:50%;
float:left;
position: relative;
}
</style>
<script type="text/javascript">
function init() {
var map1 = new OpenLayers.Map("map1", {
controls : [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition() ],
projection : new OpenLayers.Projection('EPSG:900913'),
displayProjection : new OpenLayers.Projection('EPSG:4326'),
//units : 'm',
numZoomLevels : 20,
//maxResolution : 156543.0339,
maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34)
} ) ;
var map2 = new OpenLayers.Map("map2",{
controls : [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition() ],
projection : new OpenLayers.Projection('EPSG:900913'),
displayProjection : new OpenLayers.Projection('EPSG:4326'),
//units : 'm',
numZoomLevels : 20,
//maxResolution : 156543.0339,
maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34)
} ) ;
//添加选择背景地图的control
map1.addControl(new OpenLayers.Control.TdtSwitcher());
map2.addControl(new OpenLayers.Control.TdtSwitcher());
togeterMove([map1 , map2]);
var lon = 120;
var lat = 30;
var point = new OpenLayers.LonLat(lon, lat);
point.transform(map1.displayProjection,
map1.projection);
map1 .setCenter(point, 12);
}
_test_move = true ;
function togeterMove(_maps) {
if(_maps.length == 2) {
_maps[0].events.register("move", _maps[0], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
if(_maps[1])
_maps[1].setCenter(c1,z1);
_test_move = true;
}
});
if(_maps[1])
_maps[1].events.register("move", _maps[1], function() {
if(_test_move) {
var c1 = this.getCenter();
var z1 = this.getZoom();
_test_move = false;
_maps[0].setCenter(c1,z1);
_test_move = true;
}
});
}
}
</script>
</head>
<body onload="init()" >
<div id="div1" class="div_class" >
<div id="map1" style="height:100%;width:100%"> </div>
</div>
<div id="div1" class="div_class" >
<div id="map2" style="height:100%;width:100%"> </div>
</div>
</body>
</html>
实际效果为：
附件中有demo
相关推荐
**OpenLayers地图联动详解** OpenLayers是一个开源的JavaScript库，专门用于在Web浏览器中创建交互式的二维和三维地图。它支持多种数据源，包括WMS、WFS、TMS等，以及各种流行的地理空间格式，如GeoJSON和KML。在...
该脚本能够实现openlayers-Cesium二三维联动效果的功能
2. 三维地图：通过WebGL技术，实现3D地图联动，提供更立体的视觉体验。 3. 移动端适配：考虑到移动设备的特性，优化地图联动的交互和性能。 总的来说，地图多省份联动技术是现代GIS和Web应用中的一个重要组成部分，...
2. **添加图层到地图**：将创建的图层添加到OpenLayers地图实例中。每个图层都有一个唯一的标识符，便于管理和操作。 3. **创建图层开关控件**：通过`new ol.control.Layers()`来创建图层开关控件实例。 4. **添加...
- **ol-echarts插件**：通过这个插件，可以在OpenLayers地图上直接绘制ECharts图表，简化集成过程。 - **数据同步**：确保OpenLayers地图上的位置信息与ECharts图表中的数据对应，可以基于相同的数据源。 - **...
地图联动是指在多个地图视图之间建立关联，当在一个视图中进行操作（如缩放、平移、选择某一区域等）时，其他视图会自动同步更新，以展示不同视角或数据层之间的关系。这种技术广泛应用于地理数据分析、城市规划、...
- 结合OpenLayers，Vue可以实现动态加载地图，响应用户操作，以及实时更新地图信息。 5. **整合应用流程**： - 首先，开发者会在PostGIS中存储地理空间数据，然后通过GeoServer将其发布为WMS或WFS服务。 - 接着...
OpenLayers 3 示例集锦，点index.htm可直接运行，基于openlayers API ，完成导航控件、地图操作、鹰眼、动画效果、多源数据叠加、图形绘制、聚合标注、投影转换、视图联动、热点图、统计图、标绘、定位导航等功能。...
6. **地图插件**：为了让用户直观看到所选区域，可能还会使用到地图插件，如Leaflet、OpenLayers等。这些插件能将地理信息数据渲染成交互式地图，同时支持点击事件，进一步提升用户体验。 7. **JSON数据格式**：...
通过以上步骤，我们可以实现在OpenLayers地图上展示ECharts图表的功能。这不仅可以让用户更直观地理解地理分布数据，还可以利用ECharts的交互性，增强用户对数据的探索体验。在实际应用中，可以根据具体需求进行更...
标题中的“pc-湖南地图大屏展示html5框架，省市县联动”暗示了这是一个使用HTML5技术构建的、专为PC端设计的地图展示项目，它具备省级、市级和县级的地理信息联动功能。这种框架通常用于大数据可视化、地理信息系统...
全球城市联动及国内城市联动是一种常见于地理信息系统（GIS）和在线应用中的功能，它旨在提供用户友好的界面，帮助用户在多个层级上选择和筛选世界各地的城市。这种功能通常通过插件实现，如标签所示，这可能是一个...
在本项目中，jQuery被用来增强DOM操作，提高用户交互性，例如标记的添加、删除，以及与其他功能的联动。 **功能实现**： 1. **测量距离**：用户可以在地图上绘制线段，系统会自动计算并显示线段的长度。 2. **测量...
在本项目中，"MapDataApi" 是一个基于Angular 8和.NET Core Web API构建的应用程序，它结合了OpenLayers地图库和Chart.js图表库，为用户提供了一个交互式的平台，可以展示不同国家的数据指标并以图表的形式进行可视...
- 地图展示：GeoJSON数据可以用于创建交互式地图，显示不同区域的边界，实现省市区县的多级联动效果。 - 数据分析：通过解析和处理GeoJSON数据，可以进行地理空间分析，如计算两点之间的距离、面积统计、人口密度...
9. **扩展与集成**：GeoServer具有丰富的扩展性，可以与其他GIS工具如QGIS、ArcGIS等集成，也可以与其他Web应用程序如OpenLayers、Leaflet等进行联动。 10. **故障排查与日志分析**：当遇到问题时，学会查看和分析...
5. 波形图绘制及联动模型：波形图是通过将原始波形数据的里程和峰值信息转化为地图上的投影坐标，并利用OpenLayers技术在浏览器上绘制出来。该模型可以实现波形图的联动，以便于对数据进行更加直观的比较和分析。 6...
可以借助开源GIS库如OpenLayers或Leaflet，结合在线地图服务如Google Maps或高德地图API，实现地图的显示和公交线路的绘制。同时，GIS也可以帮助计算两个站点之间的最短路径，提供最佳乘车方案。 用户界面设计应...