Hello大家好,今天带来的是vite版本的cesium的安装教程,借助一个国人大佬写的插件vite-plugin-cesium,安装非常简单快捷,一起来看看吧!
1.安装vite插件
官网:https://github.com/nshen/vite-plugin-cesium
npm i cesium vite-plugin-cesium vite -D
2.引入插件
import cesium from 'vite-plugin-cesium';
export default defineConfig({
plugins: [vue(),cesium()]
})
3.使用cesium
这里写的是vue3的代码:
<template>
<div id="cesiumContainer" class="h-full"></div>
</template>
<script lang="ts" setup>
import {
onMounted, ref } from 'vue';
import * as Cesium from 'cesium';
let viewer;
onMounted(() => {
viewer = new Cesium.Viewer('cesiumContainer');
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
pixelSize: 10,
color: Cesium.Color.BLUE,
},
});
});
</script>
<style>
#cesiumContainer {
height: 600px;
width: 100%;
}
</style>
4.viewer的极简配置
这个配置基本上只有一个球,其他都隐藏了。
viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, //是否创建动画小器件,左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件,右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
navigationInstructionsInitiallyVisible: false,
showRenderLoopErrors: false, //是否显示渲染错误
//设置背景透明
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true,
},
},
});
viewer._cesiumWidget._creditContainer.style.display = 'none'; //隐藏图标
viewer._container.style.cursor = 'default';