如何使用echarts制作动态3D地图

动态3D中国地图：

如图

如何使echarts制作动态3D中国地图 - 图1

一、数据准备

二、插入自定义图表并拖入对应数据如图所示

如何使echarts制作动态3D中国地图 - 图2

如何使echarts制作动态3D中国地图 - 图3

三、写入参数

代码：

var barDataSet = dataSet.map(function (dataItem) {
return [dataItem[0],dataItem[1],dataItem[2]];
}); //声明数据
console.log(dataSet)
var maxValue = Math.max(…barDataSet.map(d => d[2]));
fetch(‘https://ydcdn.nosdn.127.net/echarts/assets/map/json/china.json').then(j => j.json()).then(json => {
echarts.registerMap(‘china’,json);// 引用中国地图json
myChart.setOption({
tooltip: {
show: true,
formatter:(params)=>{
let data =”地理坐标:[“ + params.value[0]+”,”+params.value[1] +”]“+”
“+”值:”+ params.value[2];
return data;
}

}//显示标签，标签显示内容,
geo3D: {
map: ‘china’,
itemStyle: {
color:’#034778’,// 地图配色
opacity: 1,// 图形的不透明度
Width: 0.4,// 地图边宽度
Color: ‘#0cd8fd’// 地图边配色
},
emphasis: { //鼠标 hover 高亮时图形和标签的样式。
areaColor: ‘#2B91B7’ //鼠标 hover 高亮时图形和标签的颜色。
},
light: { //光照阴影
main: {
color: ‘#fff’, //光照颜色
intensity: 1.2, //光照强度
shadowQuality: ‘high’, //阴影亮度
shadow: true, //是否显示阴影
alpha:55,//光照角度
beta:10//光源方向
},
ambient: {
intensity: 0.3//环境光的强度
}//全局的环境光设置
}
},
series:
{
type: “bar3D”, //柱状图
coordinateSystem: ‘geo3D’,
barSize: 2, //柱子粗细
shading: ‘lambert’,//三维图形的着色效果
bevelSmoothness:10,//柱子倒角的光滑/圆润度，数值越大越光滑/圆润
opacity: 1,
bevelSize:0.5,//柱子的倒角尺寸。支持设置为从 0 到 1 的值。默认为 0，即没有倒角。
itemStyle: {
color: ‘#0087f4’//柱状图颜色
},//三维图形的视觉属性，包括颜色，透明度，描边等
data:barDataSet,//引用数据’barDataSet’
}
});
});

3D飞线地球

如图：

如何使echarts制作动态3D中国地图 - 图4

数据准备

插入自定义图表并拖入对应数据如图所示

如何使echarts制作动态3D中国地图 - 图5

如何使echarts制作动态3D中国地图 - 图6

三、写入参数

代码：

var effDataSet = dataSet.map((data) => {
return [data[2], data[3]]
}); //圆点数据声明
console.log(effDataSet)
var linDataSet = dataSet.map((data) => {
return
{
coords:
[
[data[0], data[1]],
[data[2], data[3]]
]};
}); //飞线声明数据
Promise.all([
‘https://nos.netease.com/youdata-netease/public-1592808978441169810.jpg‘,
‘https://nos.netease.com/youdata-netease/public-1592791847069051344.jpg‘
].map((src) => new Promise((resolve) => {
let image = new window.parent.Image();
image.onload = () => resolve(image);
image.src = src;
image.crossOrigin = ‘anonymous’;
})
)).then((textures) => {
let canvas = window.parent.document.createElement(‘canvas’);
let mapChart = echarts.init(canvas, null, {
: 4096,
: 2048
});//引用上传的图片
fetch(‘https://ydcdn.nosdn.127.net/echarts/assets/map/json/china.json').then(e => e.json()).then((chinaJson) => {
echarts.registerMap(‘china’, chinaJson);//引用中国地图json文件
mapChart.setOption(
{
geo: {
map: ‘china’,
label: {
fontSize: 12 //文字大小
},//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称
itemStyle: {
areaColor: ‘transparent’,//地图区域的颜色
Color: ‘#00FFFF’,//地图边框颜色
Width: 2//地图边框线宽
},//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称
regions: [
{
name: ‘南海诸岛’,
itemStyle: {
areaColor: ‘transparent’,//地图区域的颜色
Color: ‘#00FFFF’,//地图边框颜色
Width: 2//地图边框线宽
}//该区域的多边形样式设置
}
],//在地图中对特定的区域配置样式
top: 0,//组件离容器上侧的距离
left: 0,//组件离容器左侧的距离
right: 0,//组件离容器右侧的距离
bottom: 0,//组件离容器下侧的距离
boundingCoords: [
[-180, 90],
[180, -90]
]//定义定位的左上角以及右下角分别所对应的经纬度
},//绘制中国地图
series: [{
type: ‘effectScatter’,
coordinateSystem: ‘geo’,
data:effDataSet,//调用圆点数据
showEffectOn: ‘render’,//绘制完成后显示特效
rippleEffect: {
brushType: ‘stroke’//波纹的绘制方式
},//涟漪特效相关配置
symbolSize: 20,//圆点尺寸
itemStyle: {
color: ‘#0087f4’,//圆点颜色
shadowBlur: 10,//阴影尺寸
shadowColor: ‘#333’//阴影颜色
},//图形样式。
}]//绘制圆点
});
});
myChart.setOption({
globe: {
environment: ‘none’,//地球背景
globeRadius: 50,//地球的半径
baseTexture: textures[0],//地球的纹理，引用第一张图
Texture: textures[0],//地球的高度纹理，引用第一张图
displacementScale: 0.04,//地球顶点位移的大小
realisticMaterial: {
roughness: 0.9//材质的粗糙度
},//真实感材质相关的配置项
viewControl:{
autoRotate: true,//是否开启视角绕物体的自动旋转查看不开启为false
autoRotateSpeed:10 //物体自转的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
},
shading: ‘realistic’,//图形的着色效果
postEffect: {
enable: true//开启后处理特效
},
light: {
main: {
intensity: 5,//主光源的强度
shadow: true//主光源是否投射阴影
}
},//光照设置
layers: [{
type: ‘blend’,
blendTo: ‘emission’,
texture: textures[1] //引用第二章图
}, {
type: ‘blend’,
blendTo: ‘emission’,
texture: mapChart//引用上面的圆点中国地图
}]//地球表面层的配置
},//3D地球绘制
series: {
type: ‘lines3D’,//3D飞线
coordinateSystem: ‘globe’,//使用三维地理坐标系
data: linDataSet,//引用飞线数据
effect: {
show: true,//显示飞线
period: 5,//飞线速度
trailLength: 0.3,//尾迹的长度
trailWidth: 3,//尾迹的宽度
trailOpacity: 1,//尾迹的不透明度
trailColor: ‘#0087f4’//尾迹的颜色
},//飞线的尾迹特效
lineStyle: {
: 1,//线条的宽度
color: ‘#0087f4’,//线条的颜色
opacity: 0//线条的不透明度
},
}
});
});