vue3+vite安装cesium

少年包青菜

已于 2023-02-12 17:35:29 修改

阅读量239

点赞数

文章标签： javascript 前端开发语言

于 2023-02-12 17:33:41 首次发布

本文链接：https://blog.csdn.net/m0_50884068/article/details/128997333

版权

// 下载依赖
npm install cesium
npm install vite-plugin-cesium

// vite.config.ts文件
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, // va模式
    geocoder : true, //是否显示地名查找控件
    homeButton:false, // 首页按钮
    infoBox: true, // 禁用沙箱，解决控制台报错
    sceneModePicker:false, // 2D3D模式切换
    scene3DOnly:true, // 3D场景
    selectionIndicator:false, // 选取指示器
    timeline:false, // 时间轴
    navigationHelpButton:false, // 帮助提示
    navigationInstructionsInitiallyVisible:false, // 导航说明
    terrainProvider:new Cesium.CesiumTerrainProvider({ // 加载3D地形
      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'
  // 填写自己的token
  Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDc2ZWU0My1jNWIxLTRmNmYtODVkMy0zNTM3Y2IyN2FmNzgiLCJpZCI6MTI0MDY3LCJpYXQiOjE2NzU5NTEzMTh9.LsGrhc9u96nmoWBVuu_Sk1FO4b8iE9rxYXx4AAWuB30'
// 激活基于太阳位置的光照,false明true暗
  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);// 点击事件


  //通过id进行加载 此处New York City 3D Buildings 为 75343
  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>