衡阳商城网站制作中国大连网站

        使用Vite+Vue3.2+Cesium。Vite需要Node.js版本14.18+及以上版本。Vite命令创建的工程会自动生成vite.config.js文件，来配置一些相关的参数。

1、使用Vite创建vue3项目

#  npm

npm init vite@latest cesium-app -- --template vue

#  yarn 

yarn create vite cesium-app --template vue

#  pnpm 

pnpm create vite cesium-app -- --template vue

***注：设置项目名称为cesium-app

2、引入Cesium插件

#  npm

npm install cesium vite-plugin-cesium vite -D

#  yarn 

yarn add cesium vite-plugin-cesium vite -D

#  pnpm 

pnpm install cesium vite-plugin-cesium vite -D

3、创建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()]
});

4、页面中使用

<template><div><div class="full-container" :style="viewStyle" id="cesiumContainer" /><div id="loadingOverlay"><h1>Loading...</h1></div></div>
</template><script setup>
import { reactive, onMounted } from "vue";
import * as Cesium from "cesium";const props = defineProps({viewStyle: {},viewerProperty: {},dropBackground: {default: false,},
});onMounted(() => {const _this = this;const tianDiTuToken = "自己注册的天地图key";// 服务负载子域const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];// 创建图层const viewer = new Cesium.Viewer("cesiumContainer", {animation: false, //是否创建动画小器件，左下角仪表timeline: false, //是否显示时间轴geocoder: false, //是否显示geocoder小器件，右上角查询按钮baseLayerPicker: false, //是否显示图层选择器fullscreenButton: false, //是否显示全屏按钮homeButton: true, //是否显示Home按钮infoBox: false, //是否显示信息框sceneModePicker: false, //是否显示3D/2D选择器scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源selectionIndicator: false, //是否显示选取指示器组件navigationHelpButton: false, //是否显示右上角的帮助按钮baselLayerPicker: false, // 将图层选择的控件关掉，才能添加其他影像数据shadows: true, //是否显示背影imageryProvider: new Cesium.WebMapTileServiceImageryProvider({// 影像底图url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tianDiTuToken}`,layer: "tdtBasicLayer",style: "default",format: "image/jpeg",subdomains: subdomains,tileMatrixSetID: "GoogleMapsCompatible",maximumLevel: 18,}),});//   将图层挂载到window上window.cesiumViewer = viewer;viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({//影像注记url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${tianDiTuToken}`,subdomains: subdomains,layer: "tdtCiaLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",maximumLevel: 18,}));//优化项--关闭相关特效viewer.scene.debugShowFramesPerSecond = false; //显示fpsviewer.scene.moon.show = false; //月亮viewer.scene.fog.enabled = false; //雾viewer.scene.sun.show = false; //太阳viewer.scene.skyBox.show = false; //天空盒viewer.resolutionScale = 1.0; //画面细度，默认值为1.0//去除版权信息viewer._cesiumWidget._creditContainer.style.display = "none";// 将三维球定位到中国viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),orientation: {heading: Cesium.Math.toRadians(348.4202942851978),pitch: Cesium.Math.toRadians(-89.74026687972041),roll: Cesium.Math.toRadians(0),},complete: function callback() {// 定位完成之后的回调函数},});
});
</script><style lang="scss" scoped>
.fullSize,
.full-container {position: absolute;/*top: 0;*//*left: 0;*/border: none;height: 100%;width: 100%;margin: 0px;display: inherit;
}
.doubleViewer {width: 50%;
}#loadingOverlay {position: absolute;top: 0;left: 0;opacity: 0.9;width: 100%;height: 100%;display: none;
}#loadingOverlay h1 {text-align: center;position: relative;top: 50%;margin-top: -0.5em;
}#mousePositionId {position: absolute;right: 30px;bottom: 50px;z-index: 100;font-size: 20px;
}
.layer-picker-class {float: right;
}
</style>
<style>
html {overflow-x: hidden;overflow-y: hidden;
}
</style>