高德地图API之内存泄漏

<template>
    <div class="mapContainer" id="mapContainer"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    props:{
        viewmode:{
            type:String,
            default:"2D",
        },
        pitch:{  // 倾斜角
            type:Number,
            default:0
        }
    },
    setup(props){
        const store=useStore();
        let mainmap=null; // 主地图
        let mainloca=null; // 主loca
        window.forceWebGL = true; // 强制启动WebGL
        // window.forceWebGLBaseRender = true; // 开启GL
        window._AMapSecurityConfig = { // 加载密钥
            serviceHost:'xxx'
        }

        // 区域掩膜
        function  areaMask(){
            var provinces = [
                '520000',//贵州
                '540000',//西藏
                '530000',//云南 
                '500000',//重庆
                '360000',//江西
                '340000',//安徽
                '510000',//四川
                '350000',//福建
                '430000',//湖南
                '420000', //湖北
                '410000',//河南
                '330000',//浙江
                '640000',//宁夏
                '650000',//新疆
                '440000',//广东
                '370000',//山东
                '450000',//广西
                '630000',//青海
                '320000',//江苏
                '140000',//山西
                '460000',// 海南
                '310000',//上海
                '110000', // 北京
                '130000', // 河北
                '230000', // 黑龙江
                '220000',// 吉林
                '210000', //辽宁
                '150000',//内蒙古
                '120000',// 天津
                '620000',// 甘肃
                '610000',// 甘肃
                '710000', //台湾
                '810000', //香港
                '820000' //澳门
            ]
            // 显示行政区
            var disLayer=new AMap.DistrictLayer.Province({
                zIndex: 9,
                adcode: provinces,
                depth: 2,
                styles: {
                    'fill': function (properties) {
                        // properties为可用于做样式映射的字段，包含
                        // NAME_CHN:中文名称
                        // adcode_pro
                        // adcode_cit
                        // adcode
                        var adcode = properties.adcode;
                        let color="rgba(0,0,0,0.7)";
                        if (adcode=='330110') {
                            color="";
                        }

                        return color;
                    },
                    'province-stroke': 'cornflowerblue',
                    'city-stroke': 'white', // 中国地级市边界
                    'county-stroke': function(properties){
                        var adcode = properties.adcode;
                        let color="";
                        if (adcode=='330110') {
                            color='rgba(255,255,255,1)';
                        }
                        return color;
                    }, // 中国区县边界
                    'stroke-width':function(properties){
                        var adcode = properties.adcode;
                        let width=0;
                        if (adcode=='330110') {
                            width=2;
                        }

                        return width;
                    },
                }
            });

            // 添加到地图上
            mainmap.addLayer(disLayer);
        }
        // 加载图层
        function addLayer(){
            // 创建 Loca 实例
            let loca = mainloca;

            let geojson={ 
                "type": "FeatureCollection", 
                "features": [
                    {
                        "type": "Feature",
                        "id": 65,
                        "properties": {
                            "X": 120.18798209978567,
                            "Y": 30.48288207977986,
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                            120.192597,
                            30.480531
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "id": 66,
                        "properties": {
                            "X": 120.19579890040778,
                            "Y": 30.482233229669298,
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                            120.200392,
                            30.479869
                            ]
                        }
                    }
                ]
            }
            // 创建数据源
            let dataSource = new Loca.GeoJSONSource({
                data: geojson,
            });

            // 加载点图层、创建圆点图层
            let pointLayer = new Loca.PointLayer({
                zIndex: 10,
                opacity: 1,
                visible: true,
                blend: 'lighter',
                zooms: [2, 16],
            });
            // 图层添加数据
            pointLayer.setSource(dataSource);

            // 添加地图
            loca.add(pointLayer);
        }

        // 使用API加载高德地图
        AMapLoader.load({
            "key": "xxx",              // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": ['Map3D','AMap.DistrictSearch','AMap.DistrictLayer'],  // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 缺省 1.1
                "plugins":[],       // 需要加载的 AMapUI ui插件
            },
            "Loca":{                // 是否加载 Loca， 缺省不加载
                "version": '2.0'  // Loca 版本，缺省 1.3.2
            },
        }).then((AMap)=>{
            // 加载地图
            mainmap = new AMap.Map('mapContainer', {
                mapStyle: 'amap://styles/8da0701c78123ad8ccfa967bf22a9397', //设置地图的显示样式
                viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
                zoom:11, //初始化地图层级
                center: [119.978873,30.273852], //初始化地图中心点
                pitch:60,
                showBuildingBlock:true, // 显示3D楼宇
                skyColor:'', // 天空颜色
            });

            mainloca=new Loca.Container({
                map:mainmap
            });

            // 增加区域
            areaMask();
            // 执行图层加载
            addLayer(); 
            
        }).catch(e => {
            console.log(e);
        });
    }
}
</script>

<style lang="scss">
.mapContainer{
    height: 100%;
    width: 100%;
    border-radius: 4px;
    
    .mapboxgl-ctrl-logo{
        display:none!important;   
    }

    .amap-logo,.amap-copyright{
        display: none!important;
    }

    /** 图标 */
    .amap-marker:first-child .amap-icon img {
        width: 25px;
        height: 34px;
    }

}
</style>