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>
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姠惢荇者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值