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 = codeif (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

直接用这个网站的接口就不用分两种情况了，数据就是海南省缩略的。