Vue3+Cesium创建Web地图应用

1. 创建vue3工程
2. 安装Cesium & 调整目录结构
3. 代码
4. 启动

参考

CesiumJS Quickstart – Cesium

创建vue3工程

npm init vue@3
yarn

安装Cesium & 调整目录结构

yarn add cesium

将node_modules/cesium/Cesium文件夹拷贝到public目录下

在根目录下的index.html文件中添加标签<script>，写入：

window.CESIUM_BASE_URL = '/Cesium';

告诉cesium资源文件的访问前缀

代码

在.vue文件中，写入以下代码：

<template>
    <div id="tesla-factory-page"></div>
</template>

<script lang="ts">
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import { onMounted } from 'vue';
</script>

<script setup lang="ts">
Cesium.Ion.defaultAccessToken = '<your token>';

onMounted(() => {
    // 创建视窗
    const viewer = new Cesium.Viewer('tesla-factory-page', {
        terrainProvider: Cesium.createWorldTerrain()
    });
    // 添加OSM建筑信息（全球三维建筑数据）
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());

    // 设置相机位置（经纬高+朝向+俯仰）
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(114, 30, 400),
        orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-90.0),
        }
    });
})
</script>


<style lang="less">
#tesla-factory-page {
    width: 100%;
    height: 100vh;
}
</style>

启动

yarn dev