cesium(一)vite环境搭建

八青妹
951 阅读3分钟

1. 前言

Cesium是一款开源的基于JavaScript的3D地图框架，用于创建虚拟场景的3D地理信息平台，目标是用于创建以基于Web的地图动态数据可视化。也就是如果开发人员想要快速创建复杂的地理信息可视化项目，那么Cesium是首选。基于vitejs+cesium，八青妹学习下cesium如何使用，记录下学习步骤，如果有坑，先踩为敬。

2.项目创建

2.1 创建vite项目

yarn create vite cesiumapp --template vue
cd cesiumapp
yarn add

2.2 安装 vite-plugin-cesium插件

yarn add cesium vite-plugin-cesium vite -D
# npm i cesium vite-plugin-cesium vite -D

该插件的地址： vite-plugin-cesium

2.3 修改vite.config.js配置

在项目配置中引入cesium插件，vite.config.js的页面修改如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [vue(),cesium()]
});

2.4 修改App.vue

在App.vue页面中，放置一个id为cesiumContainer的div容器。

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
onMounted(() => {
    const viewer =new Cesium.Viewer("cesiumContainer")
})
</script>
<style>
#app {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  text-align: center;
}

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

2.5 运行项目

以上的步骤做完，美美的运行yarn dev，期待出现蓝色星球，但是运行后发现页面不能正常展示，样式紊乱图片丢失，报错了。 image.png 不应该啊不应该！于是换个姿势，使用npm install再次将依赖安装一遍，成功了。

image.png

嗯啊，好看！

3.viewer查看器

基本用法

官方API文档传送门，现在我们理解下const viewer =new Cesium.Viewer("cesiumContainer") 这个代码的含义。

new Cesium.Viewer(container, options)

这段用于构建应用程序的基础部件。它将所有标准的Cesium组件组合成一个可重复使用的软件包。 container是要在页面展示cesium的容器，必须为页面中存在的id,options为可添加初始化选项的对象。我们案例中没有添加options的额外描述，即使用的默认的参数设置。接下来，看看页面展示中对应的入口选项是什么参数来控制的。

默认展示的组件入口图标

图标控件名称option
image.png场景模式选择器sceneModePicker
image.png帮助按钮navigationHelpButton
image.png时间轴timeline
image.png全屏按钮fullscreenButton
image.png主页，点击之后将视图跳转到默认视角homeButton
image.png底图切换控件baseLayerPicker
image.png一种地理位置搜索工具（搜索框），用于显示相机访问的地理位置geocoder

这些默认值都为true，默认展示。要想让其不展示，将对应的值改为false。

  let viewer = new Cesium.Viewer("cesiumContainer", {
    sceneModePicker: false, // 隐藏场景模式选择器
    navigationHelpButton: false, // 隐藏帮助按钮
    timeline: false, // 隐藏时间轴
    fullscreenButton: false, // 隐藏全屏按钮
    homeButton: false, // 隐藏主页按钮
    baseLayerPicker: false, // 隐藏底图切换控件
    geocoder: false, // 隐藏地理编码器（搜索栏）
  });

默认支持鼠标（电脑）和手指（移动设备）交互，控制相机漫游数字地球方式：

  1. 按住鼠标左键拖拽：让相机在数字地球平面平移。
  2. 按住鼠标右键拖拽：缩放相机。
  3. 鼠标滚轮滑动：缩放相机。
  4. 按住鼠标中键拖拽：在当前地球的屏幕中间点，旋转相机。

如果控制台出现如下报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set. 那么需要设置infoBox为false。这个错误提示是沙箱iframe不允许使用js，这里禁用禁用infobox信息面板。

  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
  });

4. 总结

本文中介绍了如何使用vitejs+cesium搭建基础框架,和搭建成功后访问的主页面基本组成。通过以上步骤，可以快速搭建一个基于 Vite 的 Cesium 开发环境，并开始创建地理可视化应用。

avatar
文章
阅读
粉丝