<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图下钻</title>
<style>
body {
margin: 0 auto;
}
#main {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="main"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<script>
let publicUrl = 'https://geo.datav.aliyun.com/areas_v2/bound/';
async function initChart() {
let chart = echarts.init(document.getElementById('main'));
let alladcode = await getGeoJson('all.json')
let chinaGeoJson = await getGeoJson('100000_full.json')
initEcharts(chinaGeoJson, '中国', chart, alladcode)
}
initChart();
// 每个地区的数据
let mapData = [{
name: "河南省",
value: 1000
},
{
name: "山东省",
value: 500
},
{
name: "安徽省",
value: 700
},
{
name: "山西省",
value: 200
},
{
name: "湖南省",
value: 600
},
{
name: "四川省",
value: 1600
}
]
//echarts绘图
function initEcharts(geoJson, name, chart, alladcode) {
//获取当前显示地图下方地市的坐标点数据； 用于气泡显示
let geoCoordMap = {};
// 获取地区详细信息
let mapFeatures = geoJson.features;
// 遍历获取每个地区的经纬度
mapFeatures.forEach(function (v, i) {
// 获取当前地区名
let name = v.properties.name;
if (name) {
// 获取当前地区的经纬度
geoCoordMap[name] = v.properties.center;
}
});
//将data数据进入方法，取需要的参数； 用于气泡显示
let convertData = function (data) {
var res = [];
data.forEach(item => {
// 获取当前省份的经纬度坐标
let geoCoord = geoCoordMap[item.name];
if (geoCoord) {
res.push({
// name 表示地区名称
name: item.name,
// value数据格式为：[113.665412, 34.757975, '200']
value: geoCoord.concat(item.value)
});
}
})
return res;
};
echarts.registerMap(name, geoJson);
var option = {
title: {
text: name,
left: 'center',
},
//鼠标经过展示数据方法
tooltip: {
triggerOn: "mousemove",
formatter: function (params) {
if (isNaN(params.value)) {
params.value = 0
}
if (params.seriesName === '散点') {
params.value = params.data.value[2]
}
var html = '<span>' + params.name + '：</span><br/>'
html += '<span>值：' + params.value + '</span><br/>'
return html
},
backgroundColor: 'rgba(29, 38, 71)',
// 额外附加的阴影
extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8)',
},
geo: {
show: true,
top: '15%',
map: name,
label: {
normal: {
show: false
},
emphasis: {
show: false,
color: "#fff",
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#116bda',
borderColor: '#fff',
},
emphasis: {
areaColor: '#113cda',
}
}
},
//进行气泡标点
series: [{
type: 'map',
map: mapData,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: true,
data: mapData
},
{
name: '散点', // 自定义名称
type: 'effectScatter', // scatter effectScatter
coordinateSystem: 'geo', // 设置坐标系类型
data: convertData(mapData), // 设置散点位置和数据
symbolSize: function (val) { // 设置散点大小
return 15
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true, // 是否显示鼠标悬浮动画
label: {
// 静态显示时的样式
normal: {
show: true, // 显示地区名称
formatter: function (data) { // 显示模板
return data.value[2]
},
position: 'bottom', // 显示位置
},
// 鼠标悬浮上去的样式
emphasis: {
show: true, // 显示地区名称
color: "red",
},
},
itemStyle: {
normal: {
color: function (res) {
let value = res.value[2]
//根据value值对标点进行不同颜色显示
if (value < 500) {
return '#ff3859'
} else if (value < 1000) {
return '#4ed7fa'
} else if (value < 1500) {
return '#fac531'
} else {
return '#01ff5b'
}
},
shadowBlur: 10,
},
// 鼠标悬浮上去的样式
emphasis: {
color: "red",
},
},
zlevel: 3
}
]
};
chart.setOption(option);
// 解绑click事件
chart.off("click");
//给地图添加监听事件
chart.on('click', async params => {
// 获取当前点击的地图code
let clickRegion = alladcode.find(areaJson => areaJson.name === params.name);
// 获取要获取地图的json名称
let regionJsonName = clickRegion.adcode + '_full.json'
// 获取点击的区域名称
let cityName = params.name
// 判断当前点击的地图等级,如果是区级，则再次点击时重新回到全国的数据
if (clickRegion.level === 'district') {
regionJsonName = '100000_full.json'
cityName = '中国'
}
// 根据地图code获取
getGeoJson(regionJsonName).then((result) => {
initEcharts(result, cityName, chart, alladcode)
})
})
}
//获取地图json数据
async function getGeoJson(jsonName) {
return await $.get(publicUrl + jsonName)
}
</script>
</body>
</html>
版权声明：本文为SongZhengxing_原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。