1 创建项目
选择一个文件夹,打开PowerShell,输入
yarn create vite
根据提示选择项目名称和使用语言(这里选用Vue + ts)。
进入刚刚创建的文件夹,重新打开PowerShell,输入:
yarn add cesium
待命令执行完成之后,输入
yarn run dev
即可预览项目。
2 配置Cesium
Vite项目配置Cesium支持非常简单,只需要在index.html
中引入Cesium的样式表和脚本即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
</body>
</html>
3 创建组件
新建文件./src/components/CesiumMap.vue
,简单的组件格式如下:
<template>
<div class="container">
<h1>Cesium Map</h1>
<div id="cesiumContainer"></div>
</div>
</template>
<script lang="ts">
import * as Cesium from 'cesium';
export default {
name: "CesiumMap",
mounted() {
// Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// Fly the camera to San Francisco at the given longitude, latitude, and height.
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>
<style scoped>
.container {
width: 100%;
height: 100vh;
}
#cesiumContainer {
width: 100%;
height: 100vh;
}
</style>
4 使用组件
Vite项目对组件的使用方式也大大简化,只需要在脚本区引入组件,然后在模板区使用即可。
下面是App.vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import CesiumMap from "./components/CesiumMap.vue";
</script>
<template>
<CesiumMap></CesiumMap>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>