使用echartgl构建3D中国地图
先上个最终效果图：
这周研究了 3D 地图，并在地图上添加柱状图，带有涟漪特效动画的散点图，过程比较波折，遇到不少坑，所以在此记录一下。
**坑一：**涟漪特效的水波纹是二维图表effectScatter，不能用在 echarts 中 geo3D 上，解决方法，把二维地图加上effectScatter，整体作为 geo3D 的背景纹理，贴在上面。
注意： 使用在colorMaterial 属性仅在 shading属性为’color’时有效。
geo3D: {
map: 'china',
shading: `color`,
colorMaterial: {
detailTexture: mapBg, // 纹理贴图
textureTiling: 1 // 默认为1，也就是拉伸填满。大于 1 的时候，数字表示纹理平铺重复的次数
},
}
注意： 使用平铺需要 detailTexture 的高宽是 2 的 n 次方。例如 512512，如果是 200200 的纹理无法使用平铺。
const canvas = document.createElement(`canvas`);
var mapBg = echarts.init(canvas, null, {
width: 1024,
height: 1024
});
const chartOption = LoadMapping(name, data);
mapBg.setOption(chartOption);
loadMapping 里是 geo 的地图配置。
这里有一个问题，尽管 mapBg 设置的 1024*1024，textureTiling选择的也是拉伸填满，依然没有铺满，研究了好久，发现 geo里也要设置宽度为 1024 才可以。
geo: {
map: 'china',
top: '0',
width: 1024,
}
坑二： 需求需要地图上的柱子是圆柱形，bar3D 默认长方体柱子，找了好久，没找到能做成圆柱体的方法，只能通过bevelSize， bevelSmoothness 这两个属性配合形成圆柱（不太标准的圆柱）
{
type: "bar3D",
coordinateSystem: 'geo3D',
barSize: 1.2,
bevelSize: 1,
bevelSmoothness: 10,
}
**坑三：**地图旋转一周就停了，通过设置 minBeta，maxBeta的值，设置 360 的多少倍就旋转多少圈。
minAlpha: -360000,
maxAlpha: 360000,
minBeta: -360000,
maxBeta: 360000,
**坑四：**下钻功能，click事件失效，网上搜到 getZr() 方法，但是只能获取到点击的x.y坐标，获取不到点击区域的名称，满足不了需求。
网上找到方法说换个版本：
https://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js
试了下，用这个版本再配合 click 点击事件，果然可以，但是地图颜色失效，变成了白色。
这应该是echarts-gl.min.js包的问题，目前没有找到解决方法，好在点击柱子可以触发click，暂时先这样，大神们如有解决办法可以给我留言。
myChart.on('click', function (param) {
console.log('下钻成功');
console.log(param);
});
上完整js代码：
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i][0].name];
if (geoCoord) {
res.push({
name: data[i][0].name,
value: geoCoord.concat(data[i][0].value)
});
}
}
console.log(res);
return res;
};
const chinaName = 'china';
const chinaData = convertData(chinaDatas);
const myChart = echarts.init(document.getElementById('main'));
LoadMap(chinaName, chinaData, myChart);
// 下钻
window.onload = function () {
myChart.on('click', function (param) {
console.log('下钻成功');
console.log(param);
// console.log(param.name);
});
}
// 配置二维地图贴图
function LoadMapping(name, data) {
var chartOption = {
geo: {
show: true,
map: name,
top: '0',
width: 1024,
label: {
position: 'top',
distance: 5,
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#09132c' // 0% 处的颜色
}, {
offset: 1,
color: '#274d68' // 100% 处的颜色
}],
},
},
},
emphasis: {
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 13,
backgroundColor: 'rgba(0,23,11,1)'
}
},
itemStyle: {
areaColor: '#f00', // 高亮时地图板块颜色改变
}
},
},
series: [
{
type: `effectScatter`,
coordinateSystem: `geo`,
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 5,
scale: 4,
brushType: 'fill'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'bottom',
offset: [15, 0],
color: '#fff',
show: true,
fontSize: 16
},
},
itemStyle: {
normal: {
color: '#1DE9B6',
// color: function (value) { //随机颜色
// return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
// },
shadowBlur: 10,
shadowColor: '#333'
}
},
symbolSize: 16,
data: data,
},
]
}
return chartOption;
}
function LoadMap(name, data, myChart) {
// 先渲染贴图
const canvas = document.createElement(`canvas`);
var mapBg = echarts.init(canvas, null, {
width: 1024,
height: 1024
});
const chartOption = LoadMapping(name, data);
mapBg.setOption(chartOption);
// 3D地图渲染
option = {
backgroundColor: 'rgb(0,0,0,0)',
visualMap: [{
type: 'continuous',
seriesIndex: 0,
text: ['bar3D'],
calculable: true,
min: 1000,
max: 5000,
inRange: {
color: ['#4ab2e5', '#5abead', '#f56321', '#f58f0e', '#d5b314', '#b9be23']
}
}],
geo3D: {
map: name,
roam: true,
shading: `color`,
width: 1024,
boxHeight: 20,
itemStyle: {
color: '#5a8dce',
opacity: 1,
borderWidth: 1,
borderColor: '#96ebf7'
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 13,
backgroundColor: 'rgba(0,23,11,1)'
}
},
itemStyle: {
areaColor: '#498fde', // 高亮时地图板块颜色改变
}
},
colorMaterial: {
detailTexture: mapBg, // 纹理贴图
textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
},
environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#176186' // 天空颜色
}, {
offset: 0.5, color: '#176186' // 地面颜色
}, {
offset: 1, color: '#07101b' // 地面颜色
}], false),
viewControl: {
projection: 'perspective',
autoRotate: true,//会有自动旋转查看动画出现,可查看每个维度信息
autoRotateDirection: 'ccw',//物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
autoRotateSpeed: 2,//物体自传的速度
autoRotateAfterStill: 1,//在鼠标间静止操作后恢复自动旋转的时间隔。在开启 autoRotate 后有效。
// distance:90,//默认视角距离主体的距离(常用)
// alpha:90,//视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
beta: 90,//视角绕 y 轴，即左右旋转的角度。
// center:[]//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
// zlevel://组件所在的层。
minAlpha: -360000,
maxAlpha: 360000,
minBeta: -360000,
maxBeta: 360000,
animation: true,
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
animationEasingUpdate: 'cubicInOut'
},
light: {
main: {
intensity: 1,
},
ambient: {
intensity: 1,
quality: 'high'
},
ambientCubemap: {
exposure: 1.0,
diffuseIntensity: 2,
specularIntensity: 2
}
}
},
series: [
{
type: "bar3D",
coordinateSystem: 'geo3D',
barSize: 1.2,
bevelSize: 1,
bevelSmoothness: 10,
minHeight: 1,
// shading: 'color',
// shading: 'lambert',
shading: "realistic",
silent: false,//图形是否不响应和触发鼠标事件
opacity: 0.6,
itemStyle: {
opacity: 0.6,
},
label: {
show: false,
formatter: function (data) {
var res = '订单量：' + data.name + " " + data.value[2]
return res
},
},
data: data,
},
],
}
myChart.setOption(option, true);
}