第一章：搭建开发环境
现有环境配置
vue2.6版本
vue/cli 4.5.14版本
node 14.16 版本
安装cesium.js
yarn add cesium
搭建三维场景的html界面
<template>
<div class="container" id="cesiumContainer"></div>
</template>
构建vue界面时引入cesium
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
引入基本三维地球球体
mounted() {
this.init();
},
// 组件方法
methods: {
init() {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZDUyZDY3Ny0wYzA3LTQ5YjYtYmI3ZC02MjA0OTc1N2Q5NTciLCJpZCI6Nzk4ODgsImlhdCI6MTY0MjQ3MjUxOX0.gXGwm6DPITjRkzjdikD5dm4gPR1ZUKEP19hZewsDj54";
// 使用“cesiumContainer”ID 在 HTML 元素中初始化 Cesium 查看器。
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain()
});
}
}
这时开始运行yarn serve
出现第一个报错
DeveloperError: Unable to determine Cesium base URL automatically, try defining a global variable called CESIUM_BASE_URL. Error
报错原因：
Cesium无法自动确定执行的基本地址URL，需要自己定义一个名为 CESIUM_BASE_URL 的全局变量，即Cesium的渲染地址
解决方案：
方案一、在index.html文件中加入
<script> window.CESIUM_BASE_URL = 'https://localhost:5000/'; </script>
方案二、在vue.config.js中加入
const Path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
})
],
},
出现第二个问题
相关依赖未加载进来
解决方案
需要安装相关依赖
yarn add copy-webpack-plugin@6 --save-dev
因为我们webpack用的4.0版本所以使用copy-webpack-plugin6.0版本，否则会出现版本不兼容。
不兼容报错情况如下
TypeError: compilation.getCache is not a function
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: Path.resolve('./node_modules/cesium/Source/Workers'), to: 'Workers' },
{ from: Path.resolve('./node_modules/cesium/Source/Assets'), to: 'Assets' },
{ from: Path.resolve('./node_modules/cesium/Source/Widgets'), to: 'Widgets' },
{ from: Path.resolve('./node_modules/cesium/Source/ThirdParty/Workers'), to: 'WoThirdParty/Workersrkers' },
]
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
})
],
},
解决了这些问题基本上就构建一个简单三维地图
源码
<!--
* @Author: 何元鹏
* @Date: 2022-02-16 11:29:42
* @LastEditors: 何元鹏
* @LastEditTime: 2022-02-17 15:46:14
-->
<template>
<div class="container" id="cesiumContainer"></div>
</template>
<script>
window.CESIUM_BASE_URL = "/";
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
export default {
// 组件名称
name: "CesiumDemo",
// 组件状态值
data() {
return {};
},
// 计算属性
computed: {},
// 侦听器
watch: {},
created() {},
mounted() {
// this.initViewer();
this.init();
},
// 组件方法
methods: {
// 地图实例
init() {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZDUyZDY3Ny0wYzA3LTQ5YjYtYmI3ZC02MjA0OTc1N2Q5NTciLCJpZCI6Nzk4ODgsImlhdCI6MTY0MjQ3MjUxOX0.gXGwm6DPITjRkzjdikD5dm4gPR1ZUKEP19hZewsDj54";
// 实例化地图
/*
用于构建应用程序的基本小部件。它将所有标准的 Cesium 小部件组合到一个可重用的包中。小部件总是可以通过使用 mixins 来扩展，它添加了对各种应用程序有用的功能。
*/
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
vrButton: false, // 如果设置为false，将不会创建VR应用场景
geocoder: true, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
homeButton: true, // 如果设置为false，将不会创建右上角主页(房子)按钮。
infoBox: false, // 是否显示点击要素之后显示的信息,cesium中的沙盒开关
sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
selectionIndicator: true, // 获取当选定实体更改时引发的事件。
navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
navigationInstructionsInitiallyVisible: true, // 如果帮助说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
timeline: false, // 如果设置为false，则不会创建正下方时间轴小部件。
scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
animation: false, // 如果设置为false，将不会创建左下角动画小部件。
shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
// ps. Viewer＃clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟，就把shouldAnimate设为false
sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源吧
fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处，虽然我关闭了全屏按钮，但是键盘按F11 浏览器也还是会进入全屏
// 配置地图源
imageryProvider: new Cesium.createWorldImagery({
url:
"https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
})
});
}
}
};
</script>
<style scoped lang="scss">
.container {
position: relative;
width: 100%;
height: 100%;
}
</style>
遇到的问题：沙盒infobox报错
cesium Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
因为infoBox是Ifram框架，H5的新安全机制不允许在其中执行脚本，如果在里面写了类似于点击事件的脚本，则会提示如下错误：Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
二、解决方法有两个：
1.禁用infobox，自己设计信息面板。
2.设置沙箱的权限
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
