v3 + vite + cesium 框架搭建

最新推荐文章于 2024-08-23 08:47:47 发布

熬夜小宝贝

最新推荐文章于 2024-08-23 08:47:47 发布

阅读量221

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CycleByle/article/details/128255180

版权

1安装cesium

npm i cesium

npm i vite-plugin-cesium -D

2.vite.config.js里配置插件

// 引入插件
import cesium from 'vite-plugin-cesium';                    
export default () => {
  return {
    plugins: [
      vue(),
      cesium(),
    ],        
  },
};

3.初始化

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { Viewer } from "cesium";

const cexiumSetObj = {
  geocoder: false,// 搜索按钮，查找后之后会将镜头对准找到的位置
  homeButton: false,// home按钮，视角返回初始位置
  animation: false,//动画控件
  timeline: false,//时间线控件
  sceneModePicker: false, //视角模式，3D,2D， 哥伦布视图
  baseLayerPicker: false, //图层选择器，选择要显示的地图服务和地形服务
  navigationHelpButton: false, //帮助按钮
  fullscreenButton: false, //全屏按钮
  vrButton: false,  //  VR按钮
}

onMounted(() => {
  const viewer = new Viewer("cesiumContainer", cexiumSetObj);
  //显示帧率
  viewer.scene.debugShowFramesPerSecond = true;
  // 去除版权logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
})
</script>


<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>