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

效果展示
高德地图 map遮挡其他区域只显示某个城市,加区域边界_第1张图片

<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>

你可能感兴趣的:(javascript,vue.js)