cesium安装教程

## 安装教程新建一个index.html，代码如下 ```html

// 首先得去网站申请一个token，如果你要用cesium 自带的影像和OSM模型的话: https://cesium.com/ion/tokens. // 用自己的token 替代`your_access_token` . Cesium.Ion.defaultAccessToken = 'your_access_token'; // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器，这里不传ID传DO . const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // 加载OSM建筑，也就是一些城市的白膜建筑，只有形状没有纹理的模型. const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); // 所有的视图都在viewer中，后期的教程也基本围绕viewer展开，这里我们调用相机的fltTo函数，输入经纬度和高度，俯仰角等，需要注意的是 // 经纬度需要我们转换成cesium的Cartesian3，同理heading，pitch也需要从角度转成弧度，否则你会看到奇奇怪怪的视角. viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400), orientation : { heading : Cesium.Math.toRadians(0.0), pitch : Cesium.Math.toRadians(-15.0), } }); ``` 然后你就可以在浏览器打开网页，欣赏你的cesuim之旅了： ![](https://upload-images.jianshu.io/upload_images/20236212-23e3dfadde0e63c0.png) ## Vue使用官网提供了npm包，但是直接在项目里使用会获取不到一些资源，如果你是用脚手架来创建的项目，需要用到插件来引入比较方便，或者自己配置webpack，本文先讲前种方式（vite和vue-cli），后者后续webpack熟悉了再试试。 ### vite项目引入 1、首先安装依赖插件 `npm install @vitejs/plugin-vue -D` 2、接着配置vite项目配置文件：vite.config.js ```js import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import cesium from 'vite-plugin-cesium'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), vueJsx(),cesium()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, }) ``` 3、新建地图 App.vue: ```vue import { Viewer } from 'cesium'; import {onMounted} from 'vue' // import './css/main.css'; onMounted(()=>{ const viewer = new Viewer('cesiumContainer'); })

html, body { padding: 0; margin: 0; height: 100%; width: 100%; } #cesiumContainer { width: 100%; height: 100vh; background-color: black; } ``` ### vue-cli项目引入可以参考https://github.com/isboyjc/vue-cli-plugin-cesium的插件的文档，比较麻烦，vite相比webpack也更快，可以优先考虑用vite 创建你的项目吧。本文由[mdnice](https://mdnice.com/?platform=6)多平台发布

cesium安装教程

推荐阅读更多精彩内容