利用cesium+vue3实现俩种的标记点和标签显示完整的代码以及步骤

在Cesium（一款强大的三维地球引擎库）和Vue3（一个流行的前端框架）结合的情况下，实现两个不同的标记点和标签显示需要经历以下几个步骤：

1. **安装依赖**:
首先确保已安装Node.js环境，并使用`npm`或`yarn`管理依赖。安装`@cesium/cesium`, `vue`, 和 `vue-router`等必要的包：

   npm install cesium @vue/cli @vue/router --save

2. **创建项目并初始化Vue**:
使用Vue CLI创建一个新的Vue应用：

   vue create cesium-markers-app
   cd cesium-markers-app

3. **配置Cesium组件**:
在`src/components/Cesium.vue`中引入Cesium库并配置基本渲染环境：

   <template>
     <div ref="cesiumContainer" style="width: 100%; height: 100%"></div>
   </script>

   <script>
   import Cesium from 'cesium';

   export default {
     setup() {
       const viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
         terrainProvider: Cesium.createWorldTerrain(),
         imageryProvider: Cesium.CesiumTerrainProvider,
         skyBox: true,
       });
       return { viewer };
     },
   };
   </script>

4. **创建不同的标记点和标签**:
- 对于第一个标记点和标签，可以在`src/components/MarkerOne.vue`中添加对应的Cesium对象：

   <script>
   export default {
     data() {
       return {
         markerOnePosition: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), // 示例位置
         labelOne: new Cesium.Label({
           text: 'Marker One',
           position: this.markerOnePosition,
         }),
       };
     },
     mounted() {
       viewer.entities.add(this.labelOne);
     },
     beforeDestroy() {
       viewer.entities.remove(this.labelOne);
     },
   };
   </script>

类似地，对于第二个标记点和标签，创建`MarkerTwo.vue`。

5. **路由设置**:
在`src/router/index.js`中配置两个路由，分别对应不同的标记点组件：

   import { createRouter, createWebHistory } from 'vue-router';
   import MarkerOne from '@/components/MarkerOne.vue';
   import MarkerTwo from '@/components/MarkerTwo.vue';

   const routes = [
     { path: '/marker-one', component: MarkerOne },
     { path: '/marker-two', component: MarkerTwo },
   ];

   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes,
   });

   export default router;

6. **导航到标记点页面**:
在`App.vue`中使用`router-view`展示不同的标记点视图：

   <template>
     <div id="app">
       <router-view></router-view>
     </div>
   </script>

现在你可以通过点击浏览器中的链接，在不同的URL路径下看到不同的标记点和标签显示。比如访问`/marker-one` 和 `/marker-two`。