【WebGIS bug】WARNING: Too many active WebGL contexts. Oldest context will be lost.

多次使用多屏对比功能给页面添加图形，然后报错WARNING: Too many active WebGL contexts. Oldest context will be lost.

<template>
    <div class="grid-container" v-show="this.$store.getters._getDefaultDpdbVisible">
        <div id="dpdb_id1" class="item1"></div>
        <div id="dpdb_id2" class="item2"></div>
        <div id="dpdb_id3" class="item3"></div>
        <div id="dpdb_id4" class="item4"></div>
    </div>
</template>

<script>
import MapView from '@arcgis/core/views/MapView';
export default {
    data() {
        return {
            aa: '',
            // views: [], //多屏对比的views
            dpdbViews: [],
        };
    },
    watch: {
        '$store.getters._getDefaultDpdbVisible'(newVal, oldVal) {
            console.log('如果v-show为真，就初始化地图');
            console.log('新值: ' + newVal + '  ' + '旧值： ' + oldVal);

            this.initView();
            if (oldVal) {
                console.log('aa');
            }
        },
    },

    mounted() {
        // this.initView();
    },
    methods: {
        //如果v-show为真，就初始化地图
        async initView() {
            //清除之前的view
            this.dpdbViews = [];
            // console.log(dpdbViews);
            const yuanshiView = this.$store.getters._getDefaultMapView;
            //定义四个新的view
            // const dpdbViews = this.dpdbViews;
            //根据需要来创建多个视图并绑定地图容器div的id
            for (let i = 1; i < 5; i++) {
                const dpdbView = new MapView({
                    map: yuanshiView.map,
                    zoom: yuanshiView.zoom,
                    extent: yuanshiView.extent,
                    container: 'dpdb_id' + i, //指定容器
                });
                dpdbView.ui.components = [];
                this.dpdbViews.push(dpdbView);
            }
            // console.log(dpdbViews);
            // 多屏联动
            this.dpdbViews.forEach((view) => {
                console.log(view);
                var fullExtent = null;
                console.log(this);
                view.on('mouse-wheel', (e) => {
                    console.log(this);
                    //延迟获取范围的函数
                    // window.setTimeout(function () {
                    //     //获取操作图层的范围
                    //     console.log(this);

                    //     fullExtent = view.extent;
                    //     //遍历所有视图来设置这个范围
                    //     dpdbViews.forEach(function (nview) {
                    //         nview.extent = fullExtent;
                    //     });
                    // }, 10);
                    fullExtent = view.extent;
                    //遍历所有视图来设置这个范围
                    this.dpdbViews.forEach((nview) => {
                        nview.extent = fullExtent;
                        console.log(this);
                    });
                });
                //设置鼠标拖拽事件
                view.on('drag', (e) => {
                    //获取操作图层的范围
                    fullExtent = view.extent;
                    //遍历所有视图来设置这个范围
                    this.dpdbViews.forEach(function (nview) {
                        nview.extent = fullExtent;
                    });
                });
            });
        },
    },
};
</script>

<style>
.grid-container {
    position: absolute;
    display: grid;
    height: 100%;
    width: 100%;
    background-color: aqua;
    grid-template-columns: auto auto;
    grid-gap: 5px;
    background-color: rgb(3 8 41);
    padding: 0px;
}
.grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 0 0;
    font-size: 30px;
}
</style>