Vite Vue项目加载Cesium模块

最新推荐文章于 2024-08-21 08:54:20 发布

高堂明镜悲白发

最新推荐文章于 2024-08-21 08:54:20 发布

阅读量1.2k

点赞数

分类专栏： Vue与GIS 文章标签： vue gis 计算机视觉前端

本文链接：https://blog.csdn.net/ashtyukjhf/article/details/121456977

版权

Vue与GIS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>