Cesium引入vite + vue3

时光浅止

已于 2023-09-11 13:59:41 修改

阅读量701

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2023-08-05 14:58:56 首次发布

本文链接：https://blog.csdn.net/weixin_45086164/article/details/132119856

本文介绍了如何在Vue项目中使用cesium-vite插件，包括安装、配置Vite服务器，以及如何加载高德地图和ArcGISMap地图。详细讲解了如何在`vite.config.js`中集成Cesium并管理地图加载设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载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 选项。
        // 新增结束
        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默认加载的影像地图数据(默认是加载的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>