OpenLayers地图容器大小变化后地图拉伸变形的解决方法

最新推荐文章于 2023-03-16 11:37:35 发布

HerryDong

最新推荐文章于 2023-03-16 11:37:35 发布

阅读量5.1k

点赞数 3

文章标签： openlayers

本文链接：https://blog.csdn.net/HerryDong/article/details/104971039

版权

今天踩了一天的坑，最后终于将问题解决。假设当前OpenLayers地图的容器div宽度和高度均为600px,其地图显示效果如下图所示：
在这里插入图片描述
现在动态改变地图容器div的大小，改为宽度600px，高度300px，可以发现地图发生拉伸变形。如下图所示：

解决方法如下：

map.updateSize();

全部代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="scripts/ol.css" rel="stylesheet" />
    <script src="scripts/ol.js"></script>
</head>
<body>
    <div id="map" style="width:600px;height:600px;"></div>
    <button onclick="changeSize()">修改大小</button>

    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 4
            })
        });

        // 更改地图容器大小
        function changeSize() {
            var div = document.getElementById('map');
            div.style.height = '300px';
            map.updateSize();
        }
    </script>
</body>
</html>

可以发现地图正常显示，没有发生拉伸形变，如下图所示：
在这里插入图片描述

HerryDong

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers地图容器大小变化后地图拉伸变形的解决方法

今天踩了一天的坑，最后终于将问题解决。假设当前OpenLayers地图的容器div长宽均为600px,其地图显示效果如下图所示：现在动态改变地图容器div的大小，改为长600px，宽300px，可以发现地图发生拉伸变形。如下图所示：解决方法如下：setTimeout(function () { map.updateSize();}, 100);全部代码如下所示：<!...
复制链接

扫一扫