云层会遮挡地球表面图层导致国家无法用鼠标选取,如何才能在保留云层的情况下选中国家?
配置项如下
var baseTexture = "/asset/get/s/data-1524241630540-ryDJS5P2f.jpg";
var clouds = "/asset/get/s/data-1524241644720-H1rlB5Pnz.png";
var heightTexture = "/asset/get/s/data-1524241653833-S1CgS5vnM.jpg";
//创建canvas贴图
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
width: 2048,
height: 1024
});
mapChart.setOption({
geo: {
type: 'map',
map: 'world',
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
],
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#121212'
},
emphasis: {
areaColor: 'yellow'
}
},
selectedMode: 'single'
}
});
var option = {
backgroundColor: '#000',
globe: {
//基本贴图
baseTexture: baseTexture,
//高度纹理贴图
heightTexture: heightTexture,
//地球顶点位移的大小
displacementScale: 0.5,
//地球顶点位移的质量
displacementQuality: 'high',
//使用渐变色作为环境色
environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00aaff' // 天空颜色
}, {
offset: 0.7,
color: '#998866' // 地面颜色
}, {
offset: 1,
color: '#998866' // 地面颜色
}], false),
//地球中三维图形的着色效果
shading: 'lambert', //color,lambert,realistic
light: {
ambient: {
intensity: 0.6
},
main: {
intensity: 1.0
}
},
layers: [
//echarts 4 中type不能为blend,是bug
{
type: 'blend',
texture: mapChart,
shading: 'lambert',
},
//上面的层会挡住下面的层导致无法选中
{
type: 'overlay',
texture: clouds,
shading: 'lambert',
distance: 5
},
],
},
series: [
]
}