高德地图只显示部分地区遮罩其他地区(vue)

效果图

image.png

template

js

mounted() {
        this.$nextTick(()=>{
            this.initmap();
            this.init1("新疆");
        });
  },
 initmap() {
                //创建地图
                this.map = new AMap.Map("container", {
                    center: [84.8779575700,45.5667333600], //设置中心点
                    // pitch: 60,
                    // rotation: -35,
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    features: ["bg", "road", "point"], //隐藏默认楼块
                    mapStyle: "amap://styles/macaron", //设置地图的显示样式
                    // layers: [new AMap.TileLayer.Satellite()], //地图图层（卫星图层）    new AMap.TileLayer()
                    zoom: 12 //地图显示的缩放级别
                });
            },
  init1 (city) {//区域遮盖
                var that =this
                if( that.polygon ) {
                    that.map.remove(that.polygon)
                }
                AMap.plugin('AMap.DistrictSearch', function () {
                    new AMap.DistrictSearch({
                        extensions: 'all',
                        subdistrict: 0
                    }).search(city, function(status, result) {// 外多边形坐标数组和内多边形坐标数组
                        var outer = [
                            new AMap.LngLat(-360, 90, true),
                            new AMap.LngLat(-360, -90, true),
                            new AMap.LngLat(360, -90, true),
                            new AMap.LngLat(360, 90, true)
                        ]
                        var holes = result.districtList[0].boundaries
                        var pathArray = [outer]
                        pathArray.push.apply(pathArray, holes)
                        that.polygon = new AMap.Polygon({
                            pathL: pathArray,
                            strokeColor: 'red',//城市边界颜色
                            strokeWeight: 3,
                            fillColor: '#5149ce', // 遮罩背景色黑色
                            fillOpacity: 1
                        })
                        that.polygon.setPath(pathArray)
                        that.map.add(that.polygon)
                    })
                })
            },