在一个echart组件中生成两个及以上地球:
globe:[{
globeRadius:180
},
{
globeRadius:250
}],
在globe中使用数组,将每个地球的属性分别设置。
效果一:地球套地球
代码如上。
效果二:地球外环绕卫星
将外面的地区设置为不可见,然后使用lines图表,将折现设置成多点连接的曲线,其上设置symbol形状为卫星即可。
var option={
globe:[
{
show:true,
globeRadius:180,
baseTexture:" ``` ",
environement:" ```"
},
{
show:false,
globeRadius:240,
baseTexture:" ``` ",
environement:" ```"
}
],
}
卫星的轨迹实际上是贴在外面地球上的圆环,但是由于外面地球不可见,只有其上的图形可见,所以造成卫星圆环环绕地球的效果。
series:{
type:"lines",
polyline: true,
data: linesData
//省略其他属性
}
lines的数据linesData使得曲线围绕地球旋转,就是这里的satelliteLines
var satelliteLines = [];
function getSatellite() {
var start = 0;
var gap = 2;
var arrays = [];
arrays.push([start, 0]);
for (var i = 1; i <= (180 - start) / gap; i++) {
arrays.push([start - i * gap, 0]);
}
for (var i = (180 - start) / gap - 1; i >= 0; i--) {
arrays.push([start + i * gap, 0]);
}
return arrays;
}
satelliteLines.push(getSatellite());
效果三:地球上覆盖区域或平面地图
如我在上上篇中所说,这里不做赘述了。
因为可以将平面贴在三维地球上,使得许多平面独有的效果可以在地球上也出现,方便了许多特效的制作。
网友评论