Cesium的基本配置示范和文档地址（基于Vite + Vue3 + Cesium 开发环境）（二）

不这是派大星

已于 2022-06-07 09:28:48 修改

阅读量786

点赞数 3

分类专栏： Vite + Vue3 + Cesium打造数字城市快速上手文章标签： vue 前端

于 2022-06-06 07:49:12 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67749488/article/details/125097134

版权

本文档介绍了如何在Vue3和Vite基础上配置Cesium，包括引入服务器图像和基本配置步骤。提供了Cesium的官方快速入门链接及Viewer配置文档，帮助开发者进行更深入的自定义设置。

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

第一步：引入服务器提供的图像

 // 引入服务器提供的图像
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });

第二步：基本配置

 //自定义的配置内容
  var viewer = new Cesium.Viewer('cesiumContainer', {
    //配置是否创建baseLayerPicker小部件
    baseLayerPicker:false,
    //配置图像的提供
    imageryProvider:custom,
    //配置Cesium的世界地形
    terrainProvider:Cesium.createWorldTerrain({
       //配置地形的3D效果
       requestWaterMask:true,
       requestVertexNormals:true
    })
  });

配置后的app.vue

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  //快速搭建环境时默认的配置
  // const viewer = new Cesium.Viewer('cesiumContainer')