效果图

image.png
template
<div id="container"></div>
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)
})
})
},
网友评论