我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛
(图1)
(图2)
写这个案例的灵感来自于百度地图的地球地图(图2),后来搜了一下使用WebGL开发的,比较难。不过 既然都是可视化,我想到了ECharts这个插件,直接去官网搜了一下。果然在3D地球中找到了moon这个插件。废话不多说直接开搞!
项目框架方面用的vue,脚手架装完项目后。直接安装echarts插件
这里需要注意的是echarts与echarts-gl是分开的两个插件,需要分别安装,官方也有说明
安装echarts:npm install echarts --save
安装echarts-gl: npm install echarts-gl
准备工作完成开始撸代码:
//moon.vue
<template>
<div class="moon">
<span>月球</span>
<div class="mychart" ref="mychart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import url from '../assets/bg3.jpeg'
export default {
data() {
return {
ROOT_PATH: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples',
imgurl: url,
angle: 0, //自转角度默认为0,每s转10°
}
},
methods: {
initMoon() {
let myChart = echarts.init(this.$refs.mychart)
let option = {
globe: {
baseTexture: this.ROOT_PATH + '/data-gl/asset/moon-base.jpg',
heightTexture: this.ROOT_PATH + '/data-gl/asset/moon-bump.jpg',
displacementScale: 0.05,
displacementQuality: 'medium',
environment: this.imgurl,
shading: 'realistic',
realisticMaterial: {
roughness: 0.8,
metalness: 0
},
postEffect: {
enable: true,
SSAO: {
enable: true,
radius: 2,
intensity: 1,
quality: 'high'
}
},
temporalSuperSampling: {
enable: true
},
light: {
ambient: {
intensity: 0
},
main: {
intensity: 2,
shadow: true
},
ambientCubemap: {
texture: this.ROOT_PATH + '/data-gl/asset/pisa.hdr',
exposure: 0,
diffuseIntensity: 0.02
}
},
viewControl: {
autoRotate: true,
distance: 1000,
// 只能纵向旋转
// rotateSensitivity: [0, 1]
}
},
series: []
}
myChart.setOption(option)
},
},
mounted() {
this.initMoon()
}
}
</script>
<style lang="less" scoped>
.moon {
display: flex;
flex-direction: column;
align-items: center;
.mychart {
margin-top: 30px;
width: 400px;
height: 400px
}
}
</style>
vue的代码结构就不解释了,so easy 对于echarts这个插件简单说明一下。
容器
我们使用echarts实现数据可视化实际上最后生成的都是一张Canvas,所以在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器(mychart这个400*400的div),容器准备好通过 echarts.init 方法初始化一个 echarts 实例
option配置项
echarts的配置项有很多,我们可以根据绘制不同的图配置不同的option。一般情况下echarts中的示例都会有对应的option,我们直接cv大法用就ok。对于上面这个月球的例子有几个option需要说明一下
- autoRotate -- 是否开启视角绕物体的自动旋转查看,它的值是布尔值,只有为ture才会有自动旋转效果
- distance -- 默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离。以上是官方的解释,说白了这个属性就是定义初始化视角距离的(因为我这个echarts的容器是400*400的,初始化的这个月球是很大的几乎占满了整个容器,后面的乐高宇航员就被遮挡住了)
- environment -- 环境贴图。支持纯色、渐变色、全景贴图的 url。就是这个星空背景图,官网上肯定没有这个乐高宇航员是我p上去的哈哈哈
- baseTexture -- 地球或者月球表面的纹理,这里我直接用的官网的图片,点这里可直接预览该图片
setOption
准备好容器和配置项后,通过 setOption 方法生成图表
到这里,一个简单的月球自转效果就搞定了。提前祝大家中秋快乐!