【vue3.2+cesium】加载三维天地图

        使用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文章来源地址https://www.toymoban.com/news/detail-677491.html

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; //显示fps
  viewer.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>

到了这里，关于【vue3.2+cesium】加载三维天地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！