vue 高德地图 海量的文字标签

  async created () {
    // 已载入高德地图API,则直接初始化地图
    await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}&plugin=AMap.DistrictSearch`);
    await remoteLoad(`https://webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/`);
    await remoteLoad('http://webapi.amap.com/ui/1.1/main.js');
  },
   initLabel () {
	let map = new AMap.Map('container', {
        zoom: 4.5,
        center: [109.610747, 35.15261],
        showIndoorMap: false,
        showLabel: false,
        mapStyle: 'amap://styles/fresh',
    });

    let markers = [];
    let layer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1000,
        collision: false,
        allowCollision: false,
    });
    layer.add(markers);
    // 图层添加到地图
    map.add(layer);

    let provinces = yiqingChinaData.provinces || [];
    let cityNames = [];
    let specialCity = ['北京', '上海', '天津', '重庆'];
    let colorLegend = {
      10: '#f9c02f',
      100: '#f5a54f',
      500: '#f18334',
      1000: '#cc5f42',
      5000: '#a94d36',
      100000: '#792a17',
    };

    // 初始化 labelMarker
    for (let provice of provinces) {
        let cities = provice.cities || [];

        if(specialCity.indexOf(provice.name) !== -1){
            let totalNumber = 0;
             for(const city of cities){
                 totalNumber += city.confirmedNum;
             }
             cities = [{
                 name: provice.name,
                 confirmedNum: totalNumber,
             }];
        }
        for(var city of cities){
            cityNames.push(city.name);
            let curCityData = findInCities(city.name);
            let number = city.confirmedNum;
            if(curCityData && number){
                let color = getColorByNumber(number);
                textStyle.backgroundColor = color;
                let marker = new AMap.LabelMarker({
                    name: city.name,
                    position: [curCityData.x, curCityData.y],
                    zIndex: number,
                    text: {
                        content: city.name + ': ' + city.confirmedNum,
                        direction: 'center',
                        style: textStyle,
                    }
                });
                markers.push(marker);
            }
        }
    }
    layer.add(markers);
   },
   findInCities(name){
        for(const city of citiesData){
            if(name === city.name){
                return city;
            }
        }
    },
    getColorByNumber(number){
        let color;
        for(let key in colorLegend){
            if(colorLegend.hasOwnProperty(key)){
                if(number < parseInt(key)){
                    color = colorLegend[key];
                    break;
                }
            }
        }

        return color;
    }

如果需要动态刷新label的时候发现label重叠可以使用
this.map.remove(this.layer);清除图层然后重新创建新图层

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值