下載cesium-vite 插件 最新版本

npm i cesium vite-plugin-cesium vite -D    //最新版 109版本
npm i cesium@1.99 vite-plugin-cesium    //指定版本
# yarn add cesium vite-plugin-cesium vite -D
# yarn add cesium@1.99 vite-plugin-cesium 

卸載命令

npm uninstall cesium vite-plugin-cesium 
# yarn remove cesium vite-plugin-cesium 

使用 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
import cesium from 'vite-plugin-cesium'; //引入插件

import path from 'path'

export default defineConfig({
  resolve:{
      alias:{ //別名
        "~" : path.resolve(__dirname,"src") //用特殊符號指定路勁 src目錄下    
      }
  },
  server:{
    host:'127.0.0.1',
    port:8081,
   // https:false, //最新版沒有配置 SSL證書 無法啟動
    https: {
      key: './127.0.0.1-key.pem', // 密鑰文件路徑
      cert: './127.0.0.1.crt' // 證書文件路徑
    },
    open:true,//是否自動啟動到瀏覽器當中
    proxy:{
      '/api': {
        target: 'https://maic.casetekcorp.com:7003',  
        // 這里新增一個配置
        //secure: false,  //最新版本的 Vite 中，server 配置中沒有 secure 選項。
        // 新增結(jié)束
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  },
  plugins: [
    vue(),
    WindiCSS(),
    cesium()
  ]
})

組件使用 加載高德地圖 高德地圖的加載方便很多，并不需要申請key，可以直接加載到我們的Cesium中。

<template>
        <div  id="cesiumContainer"  style=" width:100%;height: 80vh;" />
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
   //key 替換成自己的密鑰
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZjQ1NjY0Ni02Y2VhLTQ1MDgtODFkOS0wNDY4YThlNTc0NjIiLCJpZCI6ODI0MzAsImlhdCI6MTY5MzU1MTcwN30.MZrWEhQD1n6MuEmvPIa89hbjBRzgp2kLDDbtH1KnSmU';
   
    var viewer = new Cesium.Viewer('cesiumContainer', {
                
                terrain: Cesium.Terrain.fromWorldTerrain({
                  requestWaterMask: true,
                  requestVertexNormals: true,
                }),
                animation: false,  //動畫控制不顯示
                timeline: false,    //時間線不顯示
                fullscreenButton: false, //全屏按鈕不顯示
                infoBox: false,
                geocoder:false, //右上角 搜索
                homeButton:false, //右上角 Home
                sceneModePicker:false, //右上角 2D/3D切換
                baseLayerPicker:false,  //右上角 地形
                navigationHelpButton:false, //右上角 Help
        
        });  
        
        
        //高德地圖的加載方便很多，并不需要申請key，可以直接加載到我們的Cesium中。
        viewer._cesiumWidget._creditContainer.style.display = "none";
        //1.Cesium加載高德矢量地圖
        var layer = new Cesium.UrlTemplateImageryProvider({
            url: "https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            minimumLevel: 4,
            maximumLevel: 18
        })
        viewer.imageryLayers.addImageryProvider(layer);
        
        //2.Cesium加載高德影像
        var imgLayer = new Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            minimumLevel: 3,
            maximumLevel: 18
        })
        viewer.imageryLayers.addImageryProvider(imgLayer);
        
        //3.Cesium加載注記要素
        var annLayer = new Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
            minimumLevel: 3,
            maximumLevel: 18
        })
        viewer.imageryLayers.addImageryProvider(annLayer);

    // 隱藏logo
    viewer.cesiumWidget.creditContainer.style.display = "none";
})
</script>

加載ArcGISMap地圖

<template>
        <div  id="cesiumContainer"  style=" width:100%;height: 80vh;" />
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(async() => {
   //key 替換成自己的密鑰
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZjQ1NjY0Ni02Y2VhLTQ1MDgtODFkOS0wNDY4YThlNTc0NjIiLCJpZCI6ODI0MzAsImlhdCI6MTY5MzU1MTcwN30.MZrWEhQD1n6MuEmvPIa89hbjBRzgp2kLDDbtH1KnSmU';
   
    var viewer = new Cesium.Viewer('cesiumContainer', {
                
                terrain: Cesium.Terrain.fromWorldTerrain({
                  requestWaterMask: true,
                  requestVertexNormals: true,
                }),
                animation: false,  //動畫控制不顯示
                timeline: false,    //時間線不顯示
                fullscreenButton: false, //全屏按鈕不顯示
                infoBox: false,
                geocoder:false, //右上角 搜索
                homeButton:false, //右上角 Home
                sceneModePicker:false, //右上角 2D/3D切換
                baseLayerPicker:false,  //右上角 地形
                navigationHelpButton:false, //右上角 Help
        
        });  
        const imageLayers = viewer.imageryLayers 
 
        imageLayers.remove(imageLayers.get(0)) //清楚Cesium默認加載的影像地圖數(shù)據(jù)(默認是加載的bing地圖)

            const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl(   
                'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
            )
            imageLayers.addImageryProvider(esri) 


    // 隱藏logo
    viewer.cesiumWidget.creditContainer.style.display = "none";
})
</script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-631733.html

到了這里，關(guān)于Cesium引入vite + vue3的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！