百度地图绘画行政区域

因为有个需求是要用在线地图只展示市的行政区域，还有ui设计的样式，所以只能自己绘画了。
效果图：

上代码

<baidu-map ref="baiduMap" class="map" :center="mapCon.center" :zoom="mapCon.zoom" @ready="handler" @touchend="mapTouchend">
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            </baidu-map>

data(){
	return{
		mapCon:{
                center:{lng:"113.62",lat:"24.84"},
                zoom:9
            },
        areaGroup:[
                {
                    name:"武江区",
                    color:"#E9F3FF"
                },
                {
                    name:"曲江区",
                    color:"#C1E0FF"
                },
                {
                    name:"浈江区",
                    color:"#87CEFF"
                },
                {
                    name:"始兴县",
                    color:"#4AA4FF"
                },
                {
                    name:"翁源县",
                    color:"#1B83EC"
                },
                {
                    name:"仁化县",
                    color:"#E9F3FF"
                }
            ],
	}
},


methods:{
handler({
            BMap,
            map
        }) {
            this.womap = map;
            this.myBMap = BMap;
            map.enableScrollWheelZoom(true)
            map.centerAndZoom('韶关市', 9)
            this.getRegionalStatistics()
            this.setMapStyle();
        },
        // 绘制行政区域
        getBoundary(item){
            let BMap = this.myBMap, map = this.womap,that = this;
            var bdary = new BMap.Boundary();
            bdary.get(item.name, function (rs) {  
                // 绘制行政区域
                var ply = new BMap.Polygon(rs.boundaries[0], {
                    strokeWeight: 1,
                    strokeColor: "#666",
                    fillColor: item.color,//显示的地图区域颜色设置
                    fillOpacity: 1,
                });
                map.addOverlay(ply);

                //添加名称标签层
                var centerlabel = new BMap.Label(item.name, { offset: new BMap.Size(0, 0) });
                centerlabel.setPosition(ply.getBounds().getCenter());
                centerlabel.setStyle({
                    color : "#333333",
                    fontFamily:"微软雅黑",
                    backgroundColor:"transparent",
                    border:"none"
                });
                map.addOverlay(centerlabel);
                
                
            })
        },
        // 设置地图样式
        setMapStyle(){
            this.womap.setMapStyle({
                styleJson:[
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "color": "#ffffff",
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "road",
                        "elementType": "all",
                        "stylers": {
                            "color": "#ffffff",
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "background",
                        "elementType": "all",
                        "stylers": {
                            "color": "#ffffff"
                        }
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "all",
                        "stylers": {
                            "color": "#ffffff",
                            "visibility": "off"
                        }
                    }
                ]
            });
        },
        //地图触摸事件（移动端没有click事件）
        async mapTouchend(e){
            let BMap = this.myBMap, map = this.womap,that = this;
            var geoc = new BMap.Geocoder();  
            var pt = e.point;
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                
                that.areaName = addComp.district
                that.areaData.forEach(item=>{
                    if(item.district === addComp.district){
                        that.isShowDetail = true;
                        let legend = item.series.map(leg=>{
                            return leg.name
                        })
                        that.yesterdayValue = item.yesterdayValue
                        that.waterRate = parseFloat(item.yesterdayLoadRate)*100;
                        
                        that.$set(that.districtOpt.xAxis, 'data', item.xData)
                        that.$set(that.districtOpt.legend,'data',legend)
                        that.$set(that.districtOpt,'series' , item.series)
                        that.$set(that.districtOpt,'yAxis' , item.yAxis)
                    }
                })
            }); 
        },
        async getRegionalStatistics(){
            const data = await this.$axios({
                url: "/getProvice",
                method: 'get',
                params: {
                    name:"韶关市"
                }
            });
            this.areaData = data.data.data;
            this.areaGroup = [];
            data.data.data.forEach(item=>{
                let obj = {};
                obj.name = item.district;
                if(item.yesterdayLoadRate >= 1){
                    obj.color = "#1B83EC"
                }else if(item.yesterdayLoadRate >= 0.7 && item.yesterdayLoadRate<1){
                    obj.color = "#4AA4FF"
                }else if(item.yesterdayLoadRate >= 0.4 && item.yesterdayLoadRate<0.7){
                    obj.color = "#87CEFF"
                }else if(item.yesterdayLoadRate >= 0 && item.yesterdayLoadRate<0.4){
                    obj.color = "#C1E0FF"
                }else{
                    obj.color = "#E9F3FF"
                }
                this.areaGroup.push(obj)
            })
            this.areaGroup.forEach(item=>{
                this.getBoundary(item)
            })
        },
   }