高德地图 map遮挡其他区域只显示某个城市，加区域边界
<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('', function() {
that.geocoder = new AMap.Geocoder({
})
})
},
init1 (city) {//区域遮盖
var that =this
if( that.polygon ) {
that.map.remove(that.polygon)
}
AMap.plugin('', 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>