想要实现3D地图省市区下钻，地图区域用不同颜色区分数值大小，当hover区域时，当前区域变高，点击下钻
js核心代码
data() {
return {
cityData,
mapData,
cityList: [], //地图数据
mapName: "浙江省", //默认显示地图
perMap: [], // 上级地图数组
myChart: null,
chart: null,
option: null,
}
},
created() {
this.registMap();
this.cityList = this.cityData[this.mapName];
},
mounted() {
this.init1();
},
methods:{
registMap() {
// 注册省、市地图
for (const key in this.mapData) {
this.$echarts.registerMap(key, this.mapData[key].data);
}
},
setOption1() {
// 地图option配置
const option = {
visualMap: { // 视觉映射 根据地图数据大小显示不同颜色
type: 'continuous',
show: false,
min: 1,
max: 100,
left:'right',
inRange: {
color: ['#3ae582', '#00ad46', '#008d38']
},
},
series: [
{
type: "map3D",
map: this.mapName, // registerMap 注册的地图名称
label: { // 标签的相关设置
show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
textStyle: { // 标签的字体样式
color: '#FFFFFF', // 地图初始化区域字体颜色
fontSize: 14, // 字体大小
opacity: 1, // 字体透明度
backgroundColor: 'transparent' // 字体背景色
},
},
itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: '#01183E', // 地图板块的颜色
borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
borderColor: '#333333' // 图形描边的颜色
},
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1, //光照强度
shadow: false, //是否显示阴影
alpha: 45,
beta: 180
},
ambient: {
intensity: 0.3
}
},
viewControl: {
distance: 93, // 根据视觉距离远近调整显示地图大小
alpha: 50,
beta: 10,
},
data: this.cityList.map((e,i) => ({
name: e.name, // 地名
value: Math.round(Math.random()*100), // 随机数值
height: 3,
emphasis: { //当鼠标放上去 区域是否显示名称
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14,
}
},
itemStyle: {
color: 'red', //当鼠标放上去 区域的颜色
}
},
}))
}
],
};
return option;
},
init1() {
this.perMap = [];
if (!this.myChart) {
this.chart = document.getElementById("map");
this.myChart = this.$echarts.init(this.chart);
}
this.option = this.setOption1();
this.myChart.setOption(this.option, true);
this.myChart.on('mouseover', e=>{
this.option.series[0].data.map((k,i)=>{
if(i==e.dataIndex){
k.height = 8 //当鼠标放上去 区域变高
k.emphasis.itemStyle.color = e.color //当鼠标放上去 区域颜色赋值
}else{
k.height = 3
}
})
this.myChart.setOption(this.option, true);
});
this.myChart.off("click");
this.myChart.on("click", (param) => {
const inside = this.chart.firstElementChild.style.cursor;
if (param.name && inside == "pointer") {
// 当点击事件是发生在地图区域板块上触发
if (this.mapData[param.name]) {
this.perMap.unshift(this.mapName); // 记录上级地图的名称 每次从数组头部放入，取时拿第1个值
this.mapName = param.name; // 改变地图名称
this.cityList = this.cityData[param.name];
// 点击下转市级地图发现边框还是上个地图的区域样式，与新的地图区域不对照，此方法就是清除上个地图的边框样式
this.myChart.clear()
this.option = this.setOption1(); // 重新配置option
this.option && this.myChart.setOption(this.option, true);
}
}
});
},
backMap() {
// 返回上级地图
if (this.perMap.length > 0) {
this.mapName = this.perMap[0];
this.cityList = this.cityData[this.perMap[0]];
// 改变地图清楚上个地图的样式
this.myChart.clear()
this.option = this.setOption1();
this.option && this.myChart.setOption(this.option, true);
this.perMap.splice(0, 1); // 返回上级后，改变记录数组
}
},
}mapData和cityData是另外引入const.js文件
// 地图json文件和地图名对应关系
const MAPJSON = {
zhejiang: require('@/assets/json/mapJson/zhejiang.json'),
hangzhou: require('@/assets/json/mapJson/hangzhou.json'),
quzhou: require('@/assets/json/mapJson/quzhou.json'),
wenzhou: require('@/assets/json/mapJson/wenzhou.json'),
huzhou: require('@/assets/json/mapJson/huzhou.json'),
zhoushan: require('@/assets/json/mapJson/zhoushan.json'),
lishui: require('@/assets/json/mapJson/lishui.json'),
ningbo: require('@/assets/json/mapJson/ningbo.json'),
jinhua: require('@/assets/json/mapJson/jinhua.json'),
jiaxing: require('@/assets/json/mapJson/jiaxing.json'),
shaoxing: require('@/assets/json/mapJson/shaoxing.json'),
taizhou: require('@/assets/json/mapJson/taizhou.json'),
};
// center是map地图中心点使用的，map3D没用到，不需要删除
export const mapData = {
浙江省: {
data: MAPJSON.zhejiang,
center: [120.4, 28.95],
},
杭州市: {
data: MAPJSON.hangzhou,
center: [119.5, 29.8],
},
湖州市: {
data: MAPJSON.huzhou,
center: [119.9, 30.8],
},
衢州市: {
data: MAPJSON.quzhou,
center: [118.7, 28.8],
},
台州市: {
data: MAPJSON.taizhou,
center: [121.1, 28.6],
},
温州市: {
data: MAPJSON.wenzhou,
center: [120.5, 27.75],
},
丽水市: {
data: MAPJSON.lishui,
center: [119.5, 28.1],
},
嘉兴市: {
data: MAPJSON.jiaxing,
center: [120.8, 30.65],
},
绍兴市: {
data: MAPJSON.shaoxing,
center: [120.6, 29.65],
},
金华市: {
data: MAPJSON.jinhua,
center: [120, 29],
},
宁波市: {
data: MAPJSON.ningbo,
center: [121.5, 29.6],
},
舟山市: {
data: MAPJSON.zhoushan,
center: [122.3, 30.2],
},
海曙区: {
data: MAPJSON.haishu,
center: [121.352816, 29.82502],
},
萧山区: {
data: MAPJSON.xiaoshan,
center: [120.37069, 30.032932],
},
};
// cp是map地图的区域地名或者要用图片显示数据用的，map3D没用到，不需要删除
// 定义这个数据的目的：后端有时返回的地名数据不全或者多余，echarts对应不上会出错，这里提前定义，还有就是可能会有地图上用图片打点，cp的位置有需要自行更改
export const cityData = {
浙江省: [
{
name: '杭州市',
value: 868444,
cp: [119.476498, 29.698918],
},
{
name: '宁波市',
value: 550421,
cp: [121.559174, 29.4330178],
},
{
name: '温州市',
value: 416298,
cp: [120.463912, 27.594726],
},
{
name: '嘉兴市',
value: 233992,
cp: [120.783487, 30.450063],
},
{
name: '湖州市',
value: 151055,
cp: [119.873663, 30.653058],
},
{
name: '绍兴市',
value: 250108,
cp: [120.640933, 29.632893],
},
{
name: '金华市',
value: 489277,
cp: [119.957007, 28.955117],
},
{
name: '衢州市',
value: 71027,
cp: [118.679569, 28.632446],
},
{
name: '舟山市',
value: 60861,
cp: [122.146805, 29.996563],
},
{
name: '台州市',
value: 270814,
cp: [121.136679, 28.657098],
},
{
name: '丽水市',
value: 77080,
cp: [119.457145, 27.997644],
},
],
杭州市: [
{
name: '上城区',
value: 106031,
cp: [120.219168, 30.278987],
},
{
name: '拱墅区',
value: 109578,
cp: [120.160939, 30.308885],
},
{
name: '西湖区',
value: 98591,
cp: [120.08362, 30.160766],
},
{
name: '滨江区',
value: 72769,
cp: [120.185306, 30.173046],
},
{
name: '萧山区',
value: 121882,
cp: [120.37069, 30.172932],
},
{
name: '余杭区',
value: 84208,
cp: [119.914653, 30.32723],
},
{
name: '富阳区',
value: 44683,
cp: [119.939599, 29.895217],
},
{
name: '临安区',
value: 29740,
cp: [119.343995, 30.161854],
},
{
name: '钱塘区',
value: 57911,
cp: [120.605025, 30.275277],
},
{
name: '临平区',
value: 62818,
cp: [120.246279, 30.420149],
},
{
name: '桐庐县',
value: 24393,
cp: [119.503936, 29.820649],
},
{
name: '淳安县',
value: 14784,
cp: [118.989354, 29.508818],
},
{
name: '建德市',
value: 19554,
cp: [119.472981, 29.55107],
},
],
湖州市: [
{ name: '长兴县', value: 32592, cp: [119.850122, 31.00475] },
{ name: '安吉县', value: 24011, cp: [119.577134, 30.620443] },
{ name: '德清县', value: 21346, cp: [120.04379, 30.52168] },
{ name: '吴兴区', value: 34202, cp: [120.044809, 30.803331] },
{ name: '南浔区', value: 20150, cp: [120.305467, 30.727909] },
],
衢州市: [
{ name: '开化县', value: 6719, cp: [118.325465, 29.184574] },
{ name: '常山县', value: 8113, cp: [118.540673, 28.887778] },
{ name: '柯城区', value: 14385, cp: [118.787605, 28.925265] },
{ name: '衢江区', value: 8883, cp: [118.961964, 28.994576] },
{ name: '龙游县', value: 10487, cp: [119.191513, 28.99101] },
{ name: '江山市', value: 12232, cp: [118.600328, 28.575594] },
],
台州市: [
{ name: '天台县', value: 27248, cp: [120.977207, 29.145258] },
{ name: '三门县', value: 13958, cp: [121.510948, 28.991446] },
{ name: '临海市', value: 37254, cp: [121.128824, 28.797925] },
{ name: '仙居县', value: 13456, cp: [120.634355, 28.69327] },
{ name: '黄岩区', value: 27836, cp: [121.081113, 28.590872] },
{ name: '椒江区', value: 38804, cp: [121.452074, 28.650696] },
{ name: '路桥区', value: 27283, cp: [121.461896, 28.520446] },
{ name: '温岭市', value: 49401, cp: [121.427094, 28.34848] },
{ name: '玉环市', value: 30930, cp: [121.237196, 28.099948] },
],
温州市: [
{ name: '永嘉县', value: 32340, cp: [120.662187, 28.330665] },
{ name: '乐清市', value: 74810, cp: [121.018675, 28.24076] },
{ name: '鹿城区', value: 50168, cp: [120.509924, 28.092487] },
{ name: '瓯海区', value: 37087, cp: [120.551173, 27.946589] },
{ name: '龙湾区', value: 25955, cp: [120.819332, 27.842665] },
{ name: '瑞安市', value: 53922, cp: [120.364981, 27.822065] },
{ name: '洞头区', value: 6657, cp: [121.033762, 27.852626] },
{ name: '文成县', value: 6391, cp: [120.022316, 27.707567] },
{ name: '平阳县', value: 36787, cp: [120.281109, 27.593599] },
{ name: '龙港市', value: 22286, cp: [120.578115, 27.522706] },
{ name: '苍南县', value: 38622, cp: [120.447536, 27.345126] },
{ name: '泰顺县', value: 8109, cp: [119.877783, 27.421151] },
],
丽水市: [
{ name: '遂昌县', value: 0, cp: [119.083049, 28.419107] },
{ name: '松阳县', value: 0, cp: [119.434983, 28.325328] },
{ name: '莲都区', value: 0, cp: [119.842776, 28.390721] },
{ name: '缙云县', value: 0, cp: [120.184965, 28.559237] },
{ name: '青田县', value: 0, cp: [120.139789, 28.103157] },
{ name: '云和县', value: 0, cp: [119.536122, 28.105598] },
{ name: '龙泉市', value: 0, cp: [119.075649, 28.005449] },
{ name: '庆元县', value: 0, cp: [119.150358, 27.523654] },
{ name: '景宁畲族自治县', value: 0, cp: [119.513501, 27.751149] },
],
嘉兴市: [
{ name: '嘉善县', value: 26043, cp: [120.902273, 30.8996] },
{ name: '秀洲区', value: 23204, cp: [120.666302, 30.788878] },
{ name: '南湖区', value: 38970, cp: [120.842186, 30.661139] },
{ name: '平湖市', value: 25333, cp: [121.103105, 30.655649] },
{ name: '海盐县', value: 17764, cp: [120.929474, 30.474419] },
{ name: '海宁市', value: 37758, cp: [120.623163, 30.425385] },
{ name: '桐乡市', value: 41943, cp: [120.483773, 30.565992] },
],
绍兴市: [
{ name: '越城区', value: 47180, cp: [120.657675, 29.999655] },
{ name: '柯桥区', value: 68282, cp: [120.446075, 29.998038] },
{ name: '上虞区', value: 35993, cp: [120.899502, 29.865067] },
{ name: '诸暨市', value: 58069, cp: [120.294991, 29.693817] },
{ name: '新昌县', value: 15246, cp: [120.969347, 29.388152] },
{ name: '嵊州市', value: 23302, cp: [120.756711, 29.555431] },
],
金华市: [
{ name: '浦江县', value: 23280, cp: [120.003937, 29.220086] },
{ name: '兰溪市', value: 16195, cp: [119.526736, 29.228165] },
{ name: '义乌市', value: 256228, cp: [119.901011, 29.500614] },
{ name: '东阳市', value: 39877, cp: [120.375678, 29.132405] },
{ name: '金东区', value: 28294, cp: [119.799596, 29.149391] },
{ name: '永康市', value: 56543, cp: [120.102417, 28.834317] },
{ name: '婺城区', value: 19446, cp: [119.509748, 28.897012] },
{ name: '武义县', value: 17299, cp: [119.714529, 28.668287] },
{ name: '馨安县', value: 8568, cp: [120.559672, 28.957893] },
],
宁波市: [
{ name: '镇海区', value: 27355, cp: [121.648133, 29.962989] },
{ name: '慈溪市', value: 69493, cp: [121.314502, 30.160119] },
{ name: '江北区', value: 43403, cp: [121.468701, 29.950487] },
{ name: '余姚市', value: 53416, cp: [121.225653, 29.904547] },
{ name: '海曙区', value: 71426, cp: [121.352816, 29.76502] },
{ name: '北仓区', value: 80158, cp: [121.888548, 29.792707] },
{ name: '奉化区', value: 26373, cp: [121.387745, 29.59639] },
{ name: '鄞州区', value: 97561, cp: [121.673169, 29.649186] },
{ name: '宁海县', value: 29020, cp: [121.475296, 29.285485] },
{ name: '象山县', value: 24987, cp: [121.804541, 29.364526] },
],
舟山市: [
{ name: '定海区', value: 42854, cp: [122.109143, 30.02103] },
{ name: '普陀区', value: 8702, cp: [122.137196, 29.696713] },
{ name: '岱山县', value: 4468, cp: [122.172128, 30.262402] },
{ name: '嵊泗县', value: 2796, cp: [122.506275, 30.619827] },
],
海曙区: [
{ name: '白云街道', value: 0, cp: [121.5122, 29.8722] },
{ name: '洞桥镇', value: 0, cp: [121.3967, 29.7717] },
{ name: '段塘街道', value: 0, cp: [121.5138, 29.8475] },
{ name: '高桥镇', value: 0, cp: [121.4386, 29.9142] },
{ name: '古林镇', value: 0, cp: [121.4123, 29.8235] },
{ name: '鼓楼街道', value: 0, cp: [121.5407, 29.8799] },
{ name: '横街镇', value: 0, cp: [121.3272, 29.8663] },
{ name: '江厦街道', value: 0, cp: [121.5481, 29.8688] },
{ name: '集士港镇', value: 0, cp: [121.4039, 29.8917] },
{ name: '龙观乡', value: 0, cp: [121.2561, 29.7662] },
{ name: '南门街道', value: 0, cp: [121.5306, 29.8622] },
{ name: '石碶街道', value: 0, cp: [121.469, 29.8115] },
{ name: '望春街道', value: 0, cp: [121.5098, 29.8953] },
{ name: '西门街道', value: 0, cp: [121.5278, 29.8852] },
{ name: '鄞江镇', value: 0, cp: [121.3426, 29.776] },
{ name: '月湖街道', value: 0, cp: [121.538, 29.8708] },
{ name: '章水镇', value: 0, cp: [121.2135, 29.8135] },
],
萧山区: [
{ name: '北干街道', value: 0, cp: [120.2522, 30.1855] },
{ name: '城厢街道', value: 0, cp: [120.2438, 30.1644] },
{ name: '戴村镇', value: 0, cp: [120.1523, 30.004] },
{ name: '党湾镇', value: 0, cp: [120.531, 30.2276] },
{ name: '瓜沥镇', value: 0, cp: [120.4112, 30.1934] },
{ name: '河上镇', value: 0, cp: [120.1719, 29.9537] },
{ name: '红山农场', value: 0, cp: [120.3819, 30.2371] },
{ name: '进化镇', value: 0, cp: [120.3006, 30.0022] },
{ name: '萧山经济技术开发区', value: 0, cp: [120.2593, 30.202] },
{ name: '靖江街道', value: 0, cp: [120.4644, 30.2349] },
{ name: '萧山空港经济区', value: 0, cp: [120.4189, 30.2379] },
{ name: '临浦镇', value: 0, cp: [120.2351, 30.0471] },
{ name: '楼塔镇', value: 0, cp: [120.1135, 29.8984] },
{ name: '南阳街道', value: 0, cp: [120.4112, 30.2659] },
{ name: '宁围镇', value: 0, cp: [120.2519, 30.2313] },
{ name: '浦阳镇', value: 0, cp: [120.2399, 29.9683] },
{ name: '萧山商业城', value: 0, cp: [120.2863, 30.1704] },
{ name: '蜀山街道', value: 0, cp: [120.2347, 30.1145] },
{ name: '所前镇', value: 0, cp: [120.2876, 30.0839] },
{ name: '闻堰镇', value: 0, cp: [120.1856, 30.1273] },
{ name: '新街镇', value: 0, cp: [120.3128, 30.1994] },
{ name: '新塘街道', value: 0, cp: [120.2993, 30.1517] },
{ name: '衙前镇', value: 0, cp: [120.3664, 30.1629] },
{ name: '义桥镇', value: 0, cp: [120.1667, 30.0626] },
{ name: '益农镇', value: 0, cp: [120.5715, 30.1778] },
],
};
html
<div id="map" />
<div v-show="perMap.length > 0" @click="backMap" class="back">返回上级</div>我的地图是浙江省数据，省市json文件可以在下面链接自行下载
DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。
http://datav.aliyun.com/portal/school/atlas/area_selector
我是根据这个例子写的3d地图-可点击 - category-work,geo3D,series-map3D,title标题,tooltip提示框,visualMap视觉映射 - makeapie echarts图表可视化案例
