echarts实现地图下钻并解决海南群岛显示缩略图
一、准备工作
1、echarts版本： ^5.5.1
2、去掉海南数据的json文件
二、获取删除过后的json文件
1、DataV.GeoAtlas地理小工具系列 (aliyun.com)
在网站输入这个复制的，新建一个json文件粘贴进去。
接下来需要删除两个地方，不要删错！！！！！
1、
全局搜索海南，只保留圈出来的第一个数组（海南），其余全部删除（群岛数据）。
2、
从这里折叠起来，全部删除。
得到的json文件就是不显示群岛的json文件，如果需要显示群岛就不用删除！
注意：如果删错可能导致地图缩小到很小，不知道什么原因，我出现过这种问题，一定不要删除错误！！！
<template>
<i-icon name="fanhui" class="goback-icon" @click.native="goBack"></i-icon>
<div ref="mapChartRef" style="height: 100%; width: 100%"></div>
</template>
<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import geoJson from './china.json'
import { ElMessage } from "element-plus";
const mapChartRef = ref();
const initChinaMap = ref();
const initAdCode = ref(100000); // 默认中国地图的编码
const currentMapName = ref("china");; // 默认地图的名称
const mapList = ref([]); // 当前展示的省市区所有数据
const historyInfo = ref([]); // 记录历史点击的省市区，用于返回查询
var dataNum = [];
const balloonColor = (num) => {
if (num > 30) {
return '#c45656'
}
return '#ffcc00'
}
// 获取地图数据
const getMapData = async (code) => {
initAdCode.value = code
if (code !== 100000) {
const data = await axios
.get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`)
.then((res) => {
mapList.value = [];
if (res.status === 200) {
// 获取当前选中的省市区的所有名称和编码
res.data.features.forEach((item) => {
mapList.value.push(item.properties);
});
renderChart(currentMapName.value, res.data);
}
})
.catch(() => { });
return data;
} else {
geoJson.features.forEach((item) => {
mapList.value.push(item.properties);
var name = item.properties.name,
cp = item.properties.center;
if (cp) {
dataNum.push({
name: name,
value: cp.concat(Math.round(Math.random() * 100))
})
}
});
renderChart('china', geoJson);
}
};
const seriesMap = (mapName) => {
const commonSeries = {
type: "map",
map: mapName, // 地图名称
data: [],
zoom: "1.2", // 当前视角的缩放比例
label: {
show: true,
formatter: '{b}',
color: "#fff",
},
emphasis: { //高亮
show: true,
label: {
show: true,
formatter: '{b}',
color: "#000",
}
},
itemStyle: {
areaColor: '#213dc8',
borderColor: '#6a98ff',
borderWidth: 1,
},
}
let series = []
if (initAdCode.value === 100000) {
series = [{
name: '黄色热气球',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50, 50],
label: {
show: true,
color: '#000',
fontSize: 9,
formatter(value) {
return value.data.value[2]
}
},
itemStyle: {
color: (e) => {
return balloonColor(e.data.value[2])
}, // 标志颜色'#ffcc00'
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
zlevel: 1,
data: dataNum
}]
}
return [commonSeries, ...series]
}
// 渲染地图
const renderChart = (mapName, mapData) => {
// 注册: registerMap('地图名称', 地图数据）, 地图名称须和option里面的map一致
echarts.registerMap(mapName, mapData);
// 地图配置项
const option = {
geo: {
// nameMap: {
// China: '中国',
// },
map: mapName,
label: {
emphasis: {
show: false,
},
},
zoom: 1.2,
itemStyle: {
normal: {
borderColor: 'rgba(255,209,163, .5)', //区域边框颜色
areaColor: 'rgba(73,86,166,.1)', //区域颜色
borderWidth: 0.5, //区域边框宽度
shadowBlur: 5,
shadowColor: 'rgba(107,91,237,.7)',
},
emphasis: {
borderColor: '#FFD1A3',
areaColor: 'rgba(102,105,240,.3)',
borderWidth: 1,
shadowBlur: 5,
shadowColor: 'rgba(135,138,255,.5)',
},
},
},
// 提示浮窗样式
series: seriesMap(mapName),
selectedMode: "single", //选择模式，单选，只能选中一个地市
select: {//这个就是鼠标点击后，地图想要展示的配置
disabled: true,//可以被选中
itemStyle: {
color: '#fff',
borderColor: '#FFD1A3',
areaColor: 'rgba(102,105,240,.2)',
borderWidth: 1,
shadowBlur: 5,
shadowColor: 'rgba(135,138,255,.5)',
}
}
};
// 渲染
initChinaMap.value.setOption(option, true);
// 防止多次触发click事件，重要！！！
initChinaMap.value.off("click");
// 下钻
initChinaMap.value.on("click", (params) => {
const activeItem = mapList.value.find((item) => item.name == params.name);
// 判断有子级的时候才可以下钻
if (activeItem && activeItem.adcode && activeItem.childrenNum) {
historyInfo.value.push(activeItem);
currentMapName.value = params.name;
getMapData(activeItem.adcode);
} else {
ElMessage.warning('暂无下级！')
}
});
};
onMounted(() => {
initChinaMap.value = echarts.init(mapChartRef.value);
getMapData(initAdCode.value);
});
// 返回上一级
const goBack = () => {
const lastItem = historyInfo.value.pop();
if (lastItem && lastItem.parent && lastItem.parent.adcode) {
getMapData(lastItem.parent.adcode);
}
};
</script>
<style scoped>
.goback-icon {
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
cursor: pointer;
}
</style>代码贴出来了，自己看吧！我的思路是把全国地图和下钻的serios分开了，因为其他省的不需要热气球显示数字。
还有一个需要注意的点是如果设置地图div盒子为500*500你会发现没有铺满容器，但是大屏还是铺满容器好看，所以我设置了zoom:1.2，但是只设置serios里面的zoom:1.2会导致分层，就是这样
很明显吧，导致这个的原因是里面的geo没有放大就导致外面一层放大里面还是原样，所以
geo也需要给1.2
这样就可以得到铺满屏幕的地图了！！！
下钻也很成功。
！！！！注意：如果地图请求接口报错403
可以在index.html加
<meta name=”referrer” content=”no-referrer”>
记得重启！！！
其实还有一种办法。
首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com
直接用这个网站的接口就不用分两种情况了，数据就是海南省缩略的。