OL2中重置地图DIV大小后地图的联动
2015-10-29 20:07
471 查看
概述:
在最近的工作中遇到了这样一个问题:地图全屏后在地图上绘制,发现鼠标的位置和绘制点的位置发生了偏移,因此,花了半天的时间去解决这个BUG,所以在此标记一下。
解决办法:
解决后发现其实很简单,就是将地图重新渲染一下即可,即:map.render(mapDiv)。
测试示例:
在最近的工作中遇到了这样一个问题:地图全屏后在地图上绘制,发现鼠标的位置和绘制点的位置发生了偏移,因此,花了半天的时间去解决这个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>展示效果:
相关文章推荐
- 如何在AS3中引用swf中的元件、图片等资源以及布局信息
- 二叉树的遍历--递归和非递归
- POJ 2247 小DP?
- C#.NET 中visual studio生成的.pdb/ .vshost.exe/ .vshost.exe.manifest文件是什么
- Android设备信息、感应器检测
- 第九周项目2-对称矩阵压缩存储的实现与应用(2)
- 经典算法题每日演练——第三题 猴子吃桃
- 径向基函数(RBF)神经网络
- 十月份英语学习——出现了一个小插曲
- multithreading--守护(后台)线程的作用,及其与前台线程的关系
- 分享到微信的消息跳转到第三方APP
- 第九周--项目3稀疏矩阵的三元组表示的实现及应用(1)
- 查找后台的几种方法
- SSH面试集锦——不看后悔哦!
- 图像处理基础知识(一)
- C#入门--索引器
- [Object C]_[初级]_[两个数组共有元素的提取,删除,数组的合并]
- Spring学习3--基于注解的组件扫描
- Introduction
- Python总结