需求：大屏显示3D全国地图，点击地图上标记连接到指定页面，网上资源多数不是Vue版本的，实现的方式也是由html页面修改为Vue版本
效果展示：
由于图片涉嫌违规，给大家一个自己脑补的空间~
环境要求： 使用npm安装echarts和eacharts-gl依赖
代码： 在mounted中执行
let chart = null;
// 图表配置
let options = {};
// 地图贴图图片
let bg = '';
// 视图容器
const chartEle = document.getElementById('map');
document.getElementById('map').style.width = "100%";
document.getElementById('map').style.height = "772px";
// geo3d + map3d公用图表配置
const setting = {
top: '0%',
right: '0%',
bottom: '10%',
distance: 90,
alpha: 50,
beta: 5,
regionHeight: 6,
}
// 地图上显示的数据
const mapData = {
geoCoordMap: {
广东省: [113.429919, 23.334643, 50],
云南省: [101.485106, 25.008643, 50],
辽宁省: [122.604994, 41.299712, 50],
},
projectData: [
{ name: '广东省', value: (Math.random() * 300).toFixed(2), projectName: 'OA系统' },
{ name: '云南省', value: (Math.random() * 300).toFixed(2), projectName: '项目管理系统' },
{ name: '辽宁省', value: (Math.random() * 300).toFixed(2), projectName: '人工智能园区' },
],
}
// 适配不同尺寸浏览器，避免地图上的字号过小或过大
function getSize(res) {
const docEl = document.documentElement;
const clientWidth = window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;
if (!clientWidth) return;
const fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
// 转化已有数据到地图上显示的配置数据
function convertData(data) {
const res = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < data.length; i++) {
const geoCoord = mapData.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
projectName: data[i].projectName,
label: {
show: false,
position: 'top',
distance: -5,
formatter(param) {
return `{sty1|${param.data.projectName}}`;
},
rich: {
sty1: {
padding: getSize(0.07),
backgroundColor: 'rgba(7, 28, 38, 0.7)',
borderWidth: 1,
borderColor: '#FF771A',
borderRadius: 2,
fontSize: getSize(0.14),
},
},
textStyle: {
color: '#ffffff',
},
},
// emphasis: {
// label: {
// show: true,
// position: 'top',
// distance: 0,
// formatter(param) {
// return `{sty1|${param.data.projectName}}`;
// },
// rich: {
// sty1: {
// padding: 7,
// backgroundColor: 'rgba(7, 28, 38, 0.7)',
// borderWidth: 1,
// borderColor: '#FF771A',
// borderRadius: 2,
// fontSize: getSize(0.14),
// },
// },
// textStyle: {
// color: '#ffffff',
// },
// },
// },
});
}
}
return res;
}
// 获取图表配置
function getOptions() {
const options = {
tooltip: {
show: false,
trigger: 'item',
},
textStyle: {
color: '#ffffff', // 高亮时标签颜色变为 白色
fontSize: 6, // 高亮时标签字体 变大
},
// 地图主要配置
geo3D: {
show: true,
map: 'map',
boxHeight: 10,
top: setting.top,
right: setting.right,
left: '0%',
bottom: setting.bottom,
regionHeight: setting.regionHeight, // 三维高度
shading: 'realistic',
realisticMaterial: {
detailTexture: bg, // 纹理贴图
textureTiling: 3, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
},
label: { // 标签的相关设置
show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
distance: 20,
formatter(param) {
const city = (param.name).substr(0, 2);
return `{sty1|${city}}`;
},
rich: {
sty1: {
color: '#ffffff',
fontSize: getSize(0.14),
align: 'center',
},
},
textStyle: { // 标签的字体样式
color: '#ffffff', // 地图初始化区域字体颜色
opacity: 1, // 字体透明度
},
},
itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: '#FE9D0B', // 地图板块的颜色
// color: '#00F6FF',
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: '#A74A11', // 图形描边的颜色。[ default: #333 ]
},
emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
label: { // label高亮时的配置
show: true,
textStyle: {
color: '#fff', // 高亮时标签颜色变为 白色
fontSize: getSize(0.15), // 高亮时标签字体 变大
},
},
},
light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。
// 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
color: '#ffeeee', // 主光源的颜色。[ default: #fff ]
intensity: 1.1, // 主光源的强度。[ default: 1 ]
shadow: true, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: { // 全局的环境光设置。
color: '#fff', // 环境光的颜色。[ default: #fff ]
intensity: 0.1, // 环境光的强度。[ default: 0.2 ]
},
},
viewControl: {
projection: 'perspective',
distance: setting.distance,
beta: setting.beta,
alpha: setting.alpha,
},
},
series: [
// 叠加地图上需要显示的数据，插牌
{
type: 'scatter3D',
name: 'scatter3D',
coordinateSystem: 'geo3D',
//symbol: '需要自己的svg',
symbolSize: [28, 28],
itemStyle: {
color: '#ff1a2d',
opacity: 1,
},
data: convertData(mapData.projectData),
},
// 使用和geo3d的配置数据，叠加一层暗沉的厚度
{
name: 'map3D', // series名称
type: 'map3D', // series图表类型
map: 'map',
top: setting.top,
right: setting.right,
left: '0%',
bottom: setting.bottom,
regionHeight: setting.regionHeight - 0.2, // 三维高度
label: { // 标签的相关设置
show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
},
itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: '#95830A', // 地图板块的颜色
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以清晰的区分每个区域
borderColor: '#000', // 图形描边的颜色。[ default: #333 ]
},
emphasis: { // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
label: { // label高亮时的配置
show: false,
},
},
viewControl: {
projection: 'perspective',
distance: setting.distance,
beta: setting.beta,
alpha: setting.alpha,
},
},
],
};
return options;
}
// 初始化图标
function init() {
const that = this;
if (chart) {
chart.clear();
}
// 加载贴图材质图片
const img = document.createElement('img');
img.src = '1111.jpg';//自己的贴图
bg = img;
// 初始化
chart = echarts.init(chartEle);
chart.showLoading({
maskColor: 'rgba(0, 0, 0, 0.2)',
});
// 获取地图数据
utils.getRequest('/3dchina2.json').then(json => {
echarts.registerMap('map', json);
chart.hideLoading();
options = getOptions();
chart.setOption(options);
});
}
// 执行
init();
window.onresize = () => {
return (() => {
// myChart_huan.resize();
myChart_bing.resize();
myChart_zhu.resize();
myChart_bend.resize();
if(document.getElementById('map') != null)
{
document.getElementById('map').style.width = "100%";
document.getElementById('map').style.height = "772px";
}
setTimeout(function () {
chart.resize();
init();
},100);
})()
}参考：echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图_我小哥在学习的博客-CSDN博客_echartsgl 交互式3d地图
