高德地图 map遮挡其他区域只显示某个城市，加区域边界

比眉伴天荒 2023-02-21 11:40 16阅读 0赞

效果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]

<template>
        <div class="hot_wrapper">
            <div class="map">
                <div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div>
            </div>
        </div>
    </template>
    
    <script>
    import AMap from "AMap";
    export default { 
        props:['typeMap','activedIndex'],
        data() { 
            return { 
                adCode: 330600, // 绍兴
                city: '绍兴市',
    
            }   
        },
        methods: { 
        initMap() { // 创建地图
                var that = this
                this.map = new AMap.Map('container', { 
                    zoom:11,
                    zooms: [10,17],
                    center:[120.535719,29.856348],
                    // center:[120.580444,29.859701],
                    resizeEnable: true,
                    showIndoorMap: false,
                    mapStyle:"amap://styles/0206dfbcbabc11e4971c1a2e6bcdda2e",
                    // mapStyle:"amap://styles/darkblue",
                    features:['point','road','bg'],//地图要素
                    viewMode:"2D",
                    pitch:45,
                    zoomEnable:true,
                    // dragEnable: false,
                })
                AMap.plugin('AMap.Geocoder', function() { 
                    that.geocoder = new AMap.Geocoder({ 
    
                    })
                })
            },
            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: 1,
                            fillColor: '#220986', // 遮罩背景色黑色
                            fillOpacity: 1
                        })
                        that.polygon.setPath(pathArray)
                        that.map.add(that.polygon)
                    })
                })
            },
        }
        mounted() { 
        	this.initMap()
        	this.init1(this.city)
        }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630112805352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz,size_16,color_FFFFFF,t_70