基础

在Vue3 + Vite中使用

安装

npm i cesium 
npm i vite-plugin-cesium

配置vite.config.js

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

文件内引用

vue

<template>
  <div class="about" ref="cesiumRef"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import { onMounted, ref } from 'vue'
// 官网注册获取的使用token
const token = 'lZTIyYTU1Yi1mNjBkLTQ5MDEtOWN...'
Cesium.Ion.defaultAccessToken = token
onMounted(() => {
  initMap()
})
const initMap = () => {
    //options 自定义配置
  const viewer = new Cesium.Viewer(cesiumRef.value, {...options})
}

options参数:

参数	含义
animation	是否显示动画控件
baseLayerPicker	是否显示图层选择控件
geocoder	是否显示地名查找控件
timeline	是否显示时间线控件
sceneModePicker	是否显示投影方式控件
navigationHelpButton	是否显示帮助信息控件
fullscreenButton	是否显示全屏按钮
infoBox	是否显示点击要素之后显示的信息
homeButton	是否显示Home按钮
imageryProvider	自定义图层

基础 ​

在Vue3 + Vite中使用 ​

基础

在Vue3 + Vite中使用