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

最新推荐文章于 2024-01-14 09:25:26 发布

牛老师讲GIS

最新推荐文章于 2024-01-14 09:25:26 发布

阅读量2.5k

点赞数

分类专栏： GIS加油站文章标签： openlayers 全屏

本文链接：https://blog.csdn.net/GISShiXiSheng/article/details/49495997

版权

GIS加油站专栏收录该内容

321 篇文章 245 订阅

订阅专栏

概述：

在最近的工作中遇到了这样一个问题：地图全屏后在地图上绘制，发现鼠标的位置和绘制点的位置发生了偏移，因此，花了半天的时间去解决这个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>

展示效果：