vue集成cesium入门教程（1）环境搭建、初始化三维地球

1、概述

  这篇内容是《vue集成cesium入门教程》的第一篇，我将记录在vue中集成cesium并实现页面的初始化（显示三维地图页面）等学习内容。效果如下：

2、实现步骤

  首先是安装需要cesium相关组件，我在项目里使用的是"cesium": “^1.64.0”、“cesium-navigation-es6”: “^1.1.6”。

  然后，需要配置vue.config.js文件（vue-cli 3.x 已经没有了webpack.config.js文件，取而代之的是创建一个vue.config.js文件，需要手动创建）。

const path = require('path');
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    
    
	configureWebpack: {
    
    
		plugins: [
			new webpack.DefinePlugin({
    
    
			  'CESIUM_BASE_URL': JSON.stringify('')
			}),
			new CopyWebpackPlugin([ {
    
     from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
			new CopyWebpackPlugin([ {
    
     from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
			new CopyWebpackPlugin([ {
    
     from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]), 
		]
	}
};

  最后，创建cesium页面，

<template>
	<div class="map">
		<div id="cContainer" ref="cesiumMap">
			
		</div>
	</div>
</template>

<script>
import 'cesium/Source/Widgets/widgets.css';
let Cesium = require('cesium/Source/Cesium');
import CesiumNavigation from 'cesium-navigation-es6'; // 添加指南针插件
require('../../assets/libs/cesium/cesiumGeometry');

export default {
      
      
	data () {
      
      
		return {
      
      
			viewer: '',
		}
	},
	mounted () {
      
      
		this.initViewer();
	},
	methods: {
      
      
		/**
		 * 初始化cesium地图
		 */
		initViewer () {
      
      
			// 初始化Viewer之前，将token加入，可避免报错{"code":"InvalidCredentials","message":"Invalid access token"}
			Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZDliYjU2OS03YTA0LTQ4NjUtYWE4Zi1iZTMzOTEzOGI5NmIiLCJpZCI6MTg0MzQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzM4MDA2MzR9.TiRGDlgKIT4SB2apFIwEAWyqp5Ad_qSqh3zrpE0l8h4'
			this.viewer = new Cesium.Viewer('cContainer',{
      
      
			  // animation: false, //关闭动画
			  // timeline: false, //关闭时间线
			  navigationHelpButton: false,  //关闭显示默认的相机控制提示
			  fullscreenButton: false, //关闭全屏按钮
			  geocoder: false, //关闭geocoder小部件
			  selectionIndicator: false,
			  infoBox: false,  //点击要素之后显示的信息,默认true
			  baseLayerPicker: false, //是否显示图层选择控件
			  sceneModePicker: false, //是否显示投影方式控件
			  homeButton: false,  //是否显示默认定位点的控件
			  shouldAnimate : true, 
			  showRenderLoopErrors: false
			});
			this.viewer._cesiumWidget._creditContainer.style.display = 'none';  // 默认去除版权信息
			// 隐藏动画和时间线控件
			this.viewer.animation.container.style.visibility = "hidden"
			this.viewer.timeline.container.style.visibility = "hidden"
			
			// 添加指南针
			var options = {
      
      
			  defaultResetView: Cesium.Rectangle.fromDegrees(90, 5, 130, 60), // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
			  enableCompass: true, // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
			  enableZoomControls: true, // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
			  enableDistanceLegend: false, // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
			  enableCompassOuterRing: true // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
			}
			CesiumNavigation(this.viewer, options)
		}
	}
}
</script>

<style>
</style>