一、 cesium

参考 GIS李胜 vite+cesium框架搭建 10秒钟搭建 Vite + Cesium 开发环境 - 知乎 (zhihu.com) 1.基本步骤

npm i cesium
npm i vite-plugin-cesium -D

配置插件

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

如果是typescript环境的话、还需要安装对应的声明文件。 "无法找到模块“cesium/Build/Cesium”的声明文件。

npm i --save-dev @types/cesium

因为声明文件的问题、暂时搁置。

结合后续的参考、可以在这里进行处理

<template>
    <div class="bg-red-300">
      <div class="cesium-container" ref="mapRef" />
    </div>
  </template>
  <script lang="ts" setup>
import { ref, defineComponent, onMounted } from "vue";
import { Viewer } from "cesium";
const mapRef = ref<HTMLDivElement | null>(null);

    onMounted(() => {
     console.log(mapRef.value) // 输出：div.cesium-container
      mapRef.value && new Viewer(mapRef.value);
    });
;
</script>


<style lang="scss" scoped>

</style>

其中mapRef.vue是一个节点元素、第二个参数可以提供配置项、以对象的形式提供。

mapRef.value && new Viewer(mapRef.value, {
    animation: true, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图(imagery and terrain)。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true;如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });

暂时参考：10秒钟搭建 Vite + Cesium 开发环境 - 知乎 (zhihu.com) 直接使用命令简历一个基础的cesium项目：

npx create-cesium

输入项目名
选择对应的模板这里选择cesium-vue-ts,正好作为参考
依次输入以下命令：

cd cesium-project
npm install
npm run dev

其他一些配置

1.隐藏版权信息

<template>
    <div class="bg-red-300">
      <div class="cesium-container" ref="mapRef" />
    </div>
  </template>
  <script lang="ts" setup>
import { ref, defineComponent, onMounted } from "vue";
import { Viewer } from "cesium";
const mapRef = ref<HTMLDivElement | null>(null);

    onMounted(() => {
      console.log(mapRef.value)
      if( mapRef.value){
      const viewer =   new Viewer(mapRef.value, {
    animation: true, // 动画小组件
    baseLayerPicker: true, // 底图组件，选择三维数字地球的底图(imagery and terrain)。
    fullscreenButton: true, // 全屏组件
    vrButton: true, // VR模式
    geocoder: true, // 地理编码（搜索）组件
    homeButton: true, // 首页，点击之后将视图跳转到默认视角
    infoBox: true, // 信息框,在地图上点击一个点图标，弹出一个信息提示框，可以跟随图表一起移动
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: true, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true;如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 获取到对应的DOM节点、然后根据DOM的操作、来隐藏logo信息
 let copyrightDom = viewer.cesiumWidget.creditContainer as HTMLElement;
  copyrightDom.style.display = "none";
}

     
});
;
</script>


<style lang="scss" scoped>

</style>

cesium学习

一、 cesium

其他一些配置