2021-11-03

初识cesium

提示：这里可以添加本文要记录的大概内容：

例如：Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue2.0+cesiumde 搭建

二、使用步骤

1.搭建脚手架并且引入cesium，至于如何搭建脚手架并且创建项目就不赘述了。

代码如下（示例）：

npm i cesium --save

2.在vue.config.js中做一个cesium的设置。

代码如下（示例）：

const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
//上面的是引入webpack的路径

function resolve(dir){
    return path.join(__dirname, dir)
}

module.exports = {
    publicPath: process.env.NODE_ENV === "Production" ? '/earth/' : './',
    assetsDir : 'static',
    lintOnSave: false,
    filenameHashing:false,
    productionSourceMap:false,
    chainWebpack:(config)=>{
        config.plugin('define').tap(args =>{
            args[0].CESIUM_BASE_URL=JSON.stringify(process.env.NODE_ENV === 'production' ? 'earth/static' : 'static')
            return args
        })
        config.resolve.alias
        .set('@', resolve('src'))
    },
    devServer:{
        overlay:{
            warnings:false,
            errors:false
        }
    },
    configureWebpack:{//这里是对cesium的路径设置
        plugins:[new CopyPlugin([
            {from:'node_modules/cesium/Build/Cesium/Assets', to: 'static/Assets'},
            {from:'node_modules/cesiun/Build/Cesium/Widgets', to: 'static/Widgets'},
            {from:'node_modules/cesium/Build/Cesium/Workers', to:'static/Workers'},
            {from:'src/assets', to:'saaets'}
        ])]
    }
}

3.在vue的页面中进行引用

在vue的helloworld的组件中进行引用，在此之前需要将页面进行清空或者直接删除重建一个新的自命名的页面，但是对应的路由也需要修改。在template中自定义一个div并且给它一个ID，ID的名字可以自定义，自定义及引入js文件和css文件代码如下：

	<template>
  		<div id="cesiumContainer"></div>
	</template>

<script>
import * as Cesium from 'cesium'//我这里是全部引入也可以使用解构进行按需引入，由于我也是第一次使用所以就全部引入
import 'cesium/Source/Widgets/widgets.css'
//这是cesium的css文件必须引入
</script>

4、页面的渲染

在第三步的页面中写入以下代码：

	mounted(){
	//这里的cesiumContainer就是在第三步中的自定义的id，cesium类似于echarts必须要有一个容器来作为载体进行展示，{}中的都是viewer自带的一些API用来控制初始化完成的开关按钮的展示。
    var viewer = new Cesium.Viewer('cesiumContainer',{ 
      projectionPicker: true, // 投影图选择按钮
      homeButton: true, // 主视图按钮
      animation: true, // 动画控制开关
      baseLayerPicker: true, // 基础地图选择按钮
      fullscreenButton: true, // 全屏按钮
      vrButton: true, // vr按钮
      timeline: true, // 时间轴
      infoBox: true , // 地图提示信息
      sceneModePicker: true, // 视图选择方式
      selectionIndicator: true,
      navigationHelpButton: true, // 帮助按钮
      geocoder: true ,// 搜索框
      // CreditsDisplay: false, //商标版权的展示

    })
  }

---

总结

在此记录本菜鸡第一天初识cesium,第四步中的api就可以控制图片底部的时间轴以及右上角的按钮的显示和隐藏，以及完成以上步骤的启动项目后的效果如下：