openlayers如何使用（六）监听地图变化

最新推荐文章于 2024-03-02 16:51:33 发布

可乐加冰^

最新推荐文章于 2024-03-02 16:51:33 发布

阅读量961

点赞数

分类专栏： openlayers 文章标签： javascript 前端 vue

本文链接：https://blog.youkuaiyun.com/m0_54399030/article/details/127357244

版权

openlayers 专栏收录该内容

6 篇文章

订阅专栏

这篇博客分享了在地图初始化时遇到页面宽度无法填满画布导致出现白边的解决方案。通过监听地图变化，使用MutationObserver API来观察DOM节点的变动，当检测到地图相关属性变化时调用`updateSize()`方法，从而动态调整地图尺寸，消除白边。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到一个情况，在地图初始化时，页面宽度占不满画布，留下了一个白边
请添加图片描述
解决办法：添加方法监听地图的变化

        /**
        监听地图变化
         */
        observer() {
            var that = this;
            // 选择需要观察变动的节点
            const targetNode = document.getElementById('map')
            // 观察器的配置（需要观察什么变动）
            const config = { attributes: true, childList: true, subtree: true }
            // 当观察到变动时执行的回调函数
            const callback = function (mutationsList) {
                // Use traditional 'for loops' for IE 11
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        // console.log('A child node has been added or removed.')
                    } else if (mutation.type === 'attributes') {
                        that.map.updateSize()
                        // console.log('The ' + mutation.attributeName + ' attribute was modified.')
                    }
                }
            }
            // 创建一个观察器实例并传入回调函数
            const observer = new MutationObserver(callback)
            // 以上述配置开始观察目标节点
            observer.observe(targetNode, config)
        },