這個是安徽的效果圖，鼠標移到紅色標註或者對應的市區位置都會顯示對應的數值。
先直接上代碼：
import anhuiMapJson from './anhui.json'
getCoords: function(city) {
var res = [];
if (city != null) {
for (var c in this.cityMap.features) {
if (this.cityMap.features[c].properties.name == city) {
res = this.cityMap.features[c].properties.cp;
break;
}
}
return res;
} else {
return res;
}
},
convertData: function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = this.getCoords(data[i].name);
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
},
loadMapAH() {
var data = [];
this.getPost("xxxx/xxxxx", this.queryParams).then(
response => {
var result = response.data;
if (result.returnCode == "0") {
data = result.data.list;
var max = 480, min = 9; // todo
var maxSize4Pin = 100, minSize4Pin = 20;
this.e3.registerMap('anhui', anhuiMapJson);
let main1 = this.e3.init(document.getElementById("main1"));
let option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
if (typeof (params.value)[2] == "undefined") {
if(isNaN(parseInt(params.value))){
return params.name + ' : ' + '-';
}else {
return params.name + ' : ' + params.value;
}
} else {
return params.name + ' : ' + params.value[2];
}
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默認爲數值文本
calculable: true,
seriesIndex: [1],
inRange: {
}
},
geo: {
show: true,
map: 'anhui',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
left:'45%', //調整地圖初始化位置
roam: true,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
type: 'map',
map: 'anhui',
geoIndex: 0,
aspectScale: 0.75, //長寬比
showLegendSymbol: false, // 存在legend時顯示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '點',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a*min;
b = maxSize4Pin - a*max;
return a*val[2]+b;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#F62157', //標誌顏色
}
},
zlevel: 6,
data: this.convertData(data)
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: this.convertData(data.sort(function(a, b) {
return b.value - a.value;
})),
symbolSize: function(val) {
return val[2] / 5;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};
setTimeout(() => {
main1.setOption(option);
main1.resize();
}, 10);
}
});
import 導入的是安徽對應的json地圖文件，然後getCoords方法是自己寫的，根據後端請求的數據去跟json文件中的市名字比對，返回對應的地理座標系。
需要後端返回的數據格式爲
data = [
{name: '海門', value: 9},
{name: '鄂爾多斯', value: 12},
{name: '招遠', value: 12}]
注意：後端返回的數據一定要跟地圖名稱的對應，如果返回其他省份地市的名字數據會有可能導致數據顯示異常。