npm install cesium
npm install vite-plugin-cesium
import cesium from 'vite-plugin-cesium';
plugins:[
cesium()
]
<template>
<div id="cesium3"></div>
</template>
<script setup>
import * as Cesium from 'cesium'
import {onMounted} from "vue";
onMounted(()=>{
init()
})
const init =()=>{
window.viewer=new Cesium.Viewer('cesium3',{
animation:false,
baseLayerPicker:false,
fullscreenButton:false,
vrButton:false,
geocoder : true,
homeButton:false,
infoBox: true,
sceneModePicker:false,
scene3DOnly:true,
selectionIndicator:false,
timeline:false,
navigationHelpButton:false,
navigationInstructionsInitiallyVisible:false,
terrainProvider:new Cesium.CesiumTerrainProvider({
url:Cesium.IonResource.fromAssetId(1),
requestVertexNormals:true,
requestWaterMask:true
}),
skyBox:new Cesium.SkyBox({
mapProjection:new Cesium.WebMercatorProjection(),
}),
})
window.viewer.scene.postProcessStages.fxaa.enabled = false;
window.viewer._cesiumWidget._creditContainer.style.display='none'
Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDc2ZWU0My1jNWIxLTRmNmYtODVkMy0zNTM3Y2IyN2FmNzgiLCJpZCI6MTI0MDY3LCJpYXQiOjE2NzU5NTEzMTh9.LsGrhc9u96nmoWBVuu_Sk1FO4b8iE9rxYXx4AAWuB30'
window.viewer.scene.globe.enableLighting = false;
let handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
handler.setInputAction(function(event){
console.log('shift + 左键单击', event.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
let city= new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(96188)});
window.viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(121.49272854520109, 31.24444484775727, 600.5782714174909),
new Cesium.HeadingPitchRange(Cesium.Math.toRadians(6.2831853071795845), Cesium.Math.toRadians(-0.13274323360597196), 5000))
city.style = new Cesium.Cesium3DTileStyle({
color: 'color("#808080",0.8)',
show: true
})
window.viewer.scene.primitives.add(city);
</script>
<style scoped>
</style>