
GIS宇宙
V1
2022/12/04阅读:34主题:重影
cesium安装教程
安装教程
新建一个index.html,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// 首先得去网站申请一个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),
}
});
</script>
</div>
</body>
</html>
然后你就可以在浏览器打开网页,欣赏你的cesuim之旅了:

Vue使用
官网提供了npm包,但是直接在项目里使用会获取不到一些资源,如果你是用脚手架来创建的项目,需要用到插件来引入比较方便,或者自己配置webpack,本文先讲前种方式(vite和vue-cli),后者后续webpack熟悉了再试试。
vite项目引入
1、 首先安装依赖插件
npm install @vitejs/plugin-vue -D
2、接着配置vite项目配置文件:vite.config.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:
<script setup lang="ts">
import { Viewer } from 'cesium';
import {onMounted} from 'vue'
// import './css/main.css';
onMounted(()=>{
const viewer = new Viewer('cesiumContainer');
})
</script>
<template>
<div id="cesiumContainer">
</div>
</template>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#cesiumContainer {
width: 100%;
height: 100vh;
background-color: black;
}
</style>
vue-cli项目引入
可以参考https://github.com/isboyjc/vue-cli-plugin-cesium的插件的文档,比较麻烦,vite相比webpack也更快,可以优先考虑用vite 创建你的项目吧。
作者介绍

GIS宇宙
V1