vue3单页面使用cesium

Vue3的单页面应用可以使用Cesium地图库来实现地图功能。以下是实现步骤：

安装Cesium

在Vue3项目中，使用npm或yarn安装cesium库：

npm install cesium --save

或者

yarn add cesium

创建地图组件

在Vue3项目的src/components目录下，创建Map.vue组件，并在组件中引入Cesium库：

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
// 引入cesium库
import Cesium from "cesium/Cesium";

export default {
  mounted() {
    // 创建cesium地球
    const viewer = new Cesium.Viewer("cesiumContainer");
  },
};
</script>

在mounted生命周期钩子中，创建Cesium地球，并将其挂载到id为“cesiumContainer”的div元素中。

在路由中使用地图组件

在Vue3项目的src/router/index.js文件中，引入Map.vue组件，并在路由中使用该组件：

import { createRouter, createWebHistory } from "vue-router";
import Map from "@/components/Map.vue";

const routes = [
  {
    path: "/map",
    name: "Map",
    component: Map,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在路由中定义/map路径，将其对应到Map.vue组件。

在App.vue中添加路由链接

在Vue3项目的src/App.vue文件中，添加一个路由链接，用于跳转到地图页面：

<template>
  <div id="app">
    <router-link to="/map">地图</router-link>
    <router-view></router-view>
  </div>
</template>

运行项目

在命令行中运行Vue3项目：

npm run serve

或者

yarn serve

访问http://localhost:8080/，点击“地图”链接，跳转到地图页面，即可看到Cesium地图。