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);清除图层然后重新创建新图层