接上篇，已经搭建好前端代码框架，本文开始进行前端代码的开发
准备工作
地球采用球体+蒙皮的方式实现，贴图来自echarts： https://www.echartsjs.com/examples/data-gl/asset/world.topo.bathy.200401.jpg，下载贴图jpg文件,存放至image文件夹，命名为world.jpg
1 html模板 index.html
在public文件夹中创建index.html,修改文件内容为
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>新冠疫情感染数</title> 7 <style> 8 *{ 9 padding:0; 10 margin:0 11 } 12 .container { 13 overflow: hidden; 14 position: fixed; 15 top: 0; 16 left: 0; 17 right:0; 18 bottom: 0; 19 display: flex; 20 flex-direction: row; 21 margin: 0 auto; 22 } 23 </style> 24 <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script> 25 </head> 26 <body> 27 <div class="container"></div> 28 </body> 29 <script> 30 // 调用组件 31 VDEarth.init({container:document.querySelector('.container')}); 32 </script> 33 </html>