您的位置：首页 > 其它

OL2中重置地图DIV大小后地图的联动

2015-10-29 20:07 267 查看

概述：
在最近的工作中遇到了这样一个问题：地图全屏后在地图上绘制，发现鼠标的位置和绘制点的位置发生了偏移，因此，花了半天的时间去解决这个BUG，所以在此标记一下。

解决办法：
解决后发现其实很简单，就是将地图重新渲染一下即可，即：map.render(mapDiv)。

测试示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
<style>
html, body{
padding:0;
margin:0;
height:100%;
width:100%;
overflow: hidden;
font-size: 12px;
}
#map1{
width: 500px;
height: 500px;
float: left;
overflow: hidden;
border: 1px solid #f0e68c;
}
</style>
<script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
<script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
<script>
var map1;
$(function(){
var bounds = new OpenLayers.Bounds(
73.45100463562233, 18.16324718764174,
134.97679764650596, 53.531943152223576
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.2403351289487642,
projection: "EPSG:4326",
units: 'degrees'
};
map1 = new OpenLayers.Map('map1', options);
var wms = new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
"http://localhost:8088/geoserver/lzugis/wms",
{
"LAYERS": "province",
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map1.addLayer(wms);
map1.addControl(new OpenLayers.Control.Zoom());
map1.addControl(new OpenLayers.Control.Navigation());
map1.zoomToExtent(bounds);

$("#fullScreen").on("click",function(){
$("#map1").css("width","100%").css("height","100%");
map1.render("map1");
})
});
</script>
</head>
<body>
<div id="map1"></div>
<div style="position: absolute;top: 15px;right: 15px; z-index: 999;border: 1px solid #ccc; background: #fff;">
<button id="fullScreen">全屏显示</button>
</div>
</body>
</html>展示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航