在vite创建的vue3项目中加载Cesium世界街道地图的底图

1. 使用vite创建vue3项目

   npm create vite@latest
   

   cd到创建的项目文件夹中

   npm install
   

   安装Cesium

   npm i cesium vite-plugin-cesium vite -D
   

2. 配置

   1. 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()],
      });
      

   2. style.css(可选)：修改#app样式

      #app {
      		  max-width: 100%;
      		  margin: 0 auto;
      		  padding: 2rem;
      		  text-align: center;
      		}
      

3. 代码

   1. App.vue

      <template>
        <div id="cesiumContainer"></div>
      </template>
      
      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(async () => {
        // 相当于密钥，申请使用下边链接中的数据时需要用到，
        // 需要你自己注册Cesium账号，https://ion.cesium.com/，获取自己的token数据
        Cesium.Ion.defaultAccessToken = '你的token'
        // 需要你自己注册账号，https://developers.arcgis.com/，获取自己的token数据
        Cesium.ArcGisMapService.defaultAccessToken = '你的token'
      
      
        let viewer = new Cesium.Viewer('cesiumContainer', {
          // 防止报错
          infoBox: false,
          // 去掉右上角的一个小选项卡
          baseLayerPicker: false,
          // 加载世界街道地图的底图
          baseLayer: Cesium.ImageryLayer.fromProviderAsync(
            Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")
          ),
          // 三维立体效果、水波纹
          terrainProvider: await Cesium.createWorldTerrainAsync({
            requestVertexNormals: true,
            requestWaterMask: true
          })
        })
      
      
        viewer.camera.setView({
          // 初始的相机的定位 定在纽约
          destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
          // 方向 俯仰
          orientation: {
            heading: 0.6,
            pitch: -0.66
          }
        })
      
      })
      </script>
      
      <style>
      html,
      body,
      #app,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      </style>
      
      

   2. 解读

      1. token：需要自己注册Cesium和ArcGIS获取，以便使用地图数据信息

           Cesium.Ion.defaultAccessToken = '你的token'
           Cesium.ArcGisMapService.defaultAccessToken = '你的token'
         

      2. 加载世界街道地图的底图：可以在API文档中搜索不熟悉api的使用方法

         // 加载世界街道地图的底图
             baseLayer: Cesium.ImageryLayer.fromProviderAsync(
               Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")
             ),
         

      3. 三维立体效果、水波纹

         // 三维立体效果、水波纹
             terrainProvider: await Cesium.createWorldTerrainAsync({
               requestVertexNormals: true,
               requestWaterMask: true
             })
         

      4. 初始位置的定位

           viewer.camera.setView({
             // 初始的相机的定位 定在纽约
             destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
             // 方向 俯仰
             orientation: {
               heading: 0.6,
               pitch: -0.66
             }
           })
         

      5. 样式的简易设置;

         <style>
         html,
         body,
         #app,
         #cesiumContainer {
           width: 100%;
           height: 100%;
           margin: 0;
           padding: 0;
           overflow: hidden;
         }
         </style>
         

4. 效果：