Openlayer-问题总结（一）监听地图变化

问题场景：

当遇到页面宽度无法填满画布导致出现白边或者页面布局发生变化时地图无法动态适应时，可以通过监听地图变化，使用MutationObserver API来观察DOM节点的变动，当检测到地图相关属性变化时调用`updateSize()`方法，从而动态调整地图尺寸，解决问题。

解决方案：监听地图的变化
 

        /**
        监听地图变化
         */
        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)
        },