cesium加载天地图

WebVue/TaiHufenglang/src/assets/css/index.css

@@ -54,7 +54,7 @@
   height: 80px;
   position: absolute;
   top: 35px;
-  left: 1180px;
+  right: 250px;
 }
 
 .nav-btn-left {

WebVue/TaiHufenglang/src/components/Cesium.vue

@@ -0,0 +1,48 @@
+
+<template>  <div id="cesiumContainer"></div></template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as Cesium from 'cesium';
+import "cesium/Build/Cesium/Widgets/widgets.css";
+
+
+const TDTTK = "d9e7aa2ad204aba6aeedea6f5ab48ed9";
+
+onMounted(() => {
+  const viewer = new Cesium.Viewer('cesiumContainer');
+  // 天地图影像
+  const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
+    url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
+    layer: "tdt",
+    style: "default",
+    format: "image/jpeg",
+    tileMatrixSetID: "w",
+    maximumLevel: 18,
+    show: false,
+  });
+  viewer.imageryLayers.addImageryProvider(tdtLayer);
+  // 天地图注记
+  const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
+    url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
+    layer: "tdtAnno",
+    style: "default",
+    format: "image/jpeg",
+    tileMatrixSetID: "w",
+    maximumLevel: 18,
+    show: false,
+  });
+
+      // 设置初始镜头位置（北京）
+      viewer.camera.setView({
+      destination: Cesium.Cartesian3.fromDegrees(116.3, 39.9, 100000),
+      orientation: {
+        heading: Cesium.Math.toRadians(0),
+        pitch: Cesium.Math.toRadians(-45),
+      },
+    });
+
+  viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);
+}) 
+
+</script>

WebVue/TaiHufenglang/src/components/MapContainer.vue

@@ -8,80 +8,30 @@
       <Rightmoudle />
     </div>
   </div>
-
-  <!-- 地图容器 -->
-  <div id="map-container" class="map-container"></div>
-
-
+  <Cesium />  
 </template>
 
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import AMapLoader from '@amap/amap-jsapi-loader'
+
 import Header from './header.vue'
 import Gradientoverlay from './gradient-overlay.vue'
 import Leftmoudle from './leftmodul.vue'
 import Rightmoudle from './rightmodul.vue'
 import Middlemoudle from './middlemodul.vue'
+import Cesium from './Cesium.vue'
 
 
-
-// 地图实例
-const map = ref(null)
-
-// 地图配置
-const mapConfig = {
-  viewMode: '3D',
-  zoom: 13,
-  center: [120.21937542, 31.568152],
-  pitch: 45,
-  features: ['bg', 'road', 'building'],
-  buildingAnimation: true,
-  showLabel: false
-}
-
-// 初始化地图
-const initMap = async () => {
-  try {
-    window._AMapSecurityConfig = {
-      securityJsCode: 'b87476c68ed625e2d337f160d0ba6122'
-    }
-
-    const AMap = await AMapLoader.load({
-      key: '694aba7c51008bf8c08afc94aa566fc1',
-      version: '2.0',
-      plugins: ['AMap.Scale', 'AMap.ToolBar']
-    })
-
-    map.value = new AMap.Map('map-container', {
-      ...mapConfig,
-      layers: [
-        new AMap.TileLayer.Satellite(),
-        new AMap.TileLayer.RoadNet()
-      ]
-    })
-
-    // 添加控件
-    map.value.addControl(new AMap.Scale())
-    map.value.addControl(new AMap.ToolBar())
-  } catch (error) {
-    console.error('地图初始化失败:', error)
-    alert('高德地图加载失败，请检查控制台错误')
-  }
-}
-
-// 生命周期
-onMounted(() => initMap())
-onUnmounted(() => map.value?.destroy())
 </script>
 
 <style scoped>
-/* 基础样式重置 */
-:root {
-  --primary-color: #154fb3;
-  --panel-bg: rgba(255, 255, 255, 0.95);
-  --border-radius: 12px;
-  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+/* 主内容区域布局 */
+.main {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  gap: 20px;
+  padding: 20px;
+  height: calc(100vh - 80px); /* 根据实际头部高度调整 */
 }
 </style>

WebVue/TaiHufenglang/src/components/leftmodul.vue

@@ -5,7 +5,7 @@ import Chart2 from './charts/chart2.vue'
 </script>
 
 <template>
-    <div class="modul-box" style="flex: 0 1 25%;">
+    <div class="modul-box" style="flex: 0 1 20%;">
         <Chart1 />
         <Chart2 />        
     </div>

WebVue/TaiHufenglang/src/components/middlemodul.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-    <div class="overlay-layer" style="flex: 0 1 50%;">
+    <div class="overlay-layer" style="flex: 0 1 60%;">
 
     </div>
 </template>

WebVue/TaiHufenglang/src/components/rightmodul.vue

@@ -5,7 +5,7 @@ import Chart5 from './charts/chart5.vue'
 </script>
 
 <template>
-    <div class="modul-box" style="flex: 0 1 25%;">
+    <div class="modul-box" style="flex: 0 1 20%;">
         <Chart3 />
         <Chart4 />
         <Chart5 />

WebVue/TaiHufenglang/src/main.js

@@ -2,6 +2,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import '@/assets/css/index.css'
+import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer } from 'cesium';
+
+Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODIwOGQ2Ny1hMTFhLTQ4OGQtODJhZi0wNmMzZGNhNjU5OWMiLCJpZCI6NTkzMTMsImlhdCI6MTYyMzk4ODQ4NX0.40CU0i0LswshdxVXAXEJgfEDJN3EK_jPbo_S8lece9E';
 
 
 createApp(App).mount('#app')

WebVue/TaiHufenglang/vite.config.js

@@ -3,13 +3,14 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import cesium from 'vite-plugin-cesium'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
-    // Cesium()
+    cesium()
   ],
   resolve: {
     alias: {