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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GISShiXiSheng/article/details/49495997

概述:

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




展开阅读全文

没有更多推荐了,返回首页