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,  //点击要素之后显示的信息,默认truebaseLayerPicker: 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>

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

MongoDB最简单的入门教程之一环境搭建
MongoDB是近年来非常流行的一个介于关系数据库和非关系数据库之间的解决方案,特别广泛地应用于国内很多互联网公司,是非关系数据库当中功能最丰富,最像关系数据库的. MongoDB支持的数据结构非常松 ...
python从入门到精通图片_Python从入门到精通之环境搭建教程图解
本章内容: 一.下载python安装包二.选择适合自己系统的文件,进行下载 Windows环境安装(Windows 10) 三.Python解释器的安装双击python-3.7.4-amd64.e ...
深度学习小白入门教程-基础环境篇
深度学习小白入门教程-基础环境篇如有图片显示失败,请回小主主页查看~ Anaconda 安装包下载方式一:官网(科学上网比较慢,不推荐) 安装包下载方式二:清华镜像(推荐) 具体安装步骤(跟着箭头来 ...
Jetson Xavier NX学习笔记（三）系统烧录+开机教程+YOLOv7环境搭建+错误总结（详细版）
Jetson Xavier NX 系统烧录+开机教程+YOLOv7环境搭建+错误总结(详细版) 文章目录 Jetson Xavier NX 系统烧录+开机教程+YOLOv7环境搭建+错误总结(详细版) ...
EXTJS入门教程及其框架搭建
EXTJS是一个兼容AJAX的前台WEB UI的框架,在普通的HTML文件的 BODY 元素中无须写任何HTML代码,就能产生相应的表格等元素. 原创不易,转载请注明出处:EXTJS入门教程及其框架搭 ...
Vue集成Cesium之二 —— 相机（Camera）
上一篇文章初步写了一下 vue 集成 cesium 方法和注意的地方. 最近因为项目中用到的地图资源并不是拿来就能用,需要调整显示的角度.缩放等设置.所以把 cesium 所有的相机(也就是视角)设置 ...
大数据入门学习之环境搭建
一:环境搭建:VM.CentOS7安装及网络配置大数据入门首先需要搭建环境,接下来的三篇文章均是环境搭建部分的内容. 首先我们要安装虚拟机及linux系统一.安装虚拟机VM 官网下载VM虚拟机:这 ...
【php基础入门】PHP环境搭建与初识php代码书写及演示PHP和JS中遍历数组的区别、引入外部文件等知识点学习笔记
php是什么? PHP是PHP:HypertextPreprocessor(超文本预处理器)的首字母缩写,是一种跨平台的.开源的.免费的脚本语言,其语法吸收了C语言.Java 和 Perl 的特点,利 ...
安装目录opencv for android 教程（环境搭建篇）
这几周朋友几篇文章介绍了改安装目录的文章. 关联文章的地址最近android开发异常炽热,随着手机性能越来越高,图像处程序也越来越重要, 由于opencv for android 网上教程大多为英文 ...

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

1、概述

2、实现步骤

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

最新文章

热门文章