vue 高德地图多边形

您所在的位置:网站首页 vue地区选择 vue 高德地图多边形

vue 高德地图多边形

2023-03-28 19:22| 来源: 网络整理| 查看: 265

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)

})

})

},



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3