vite+vue3 使用Vue-iClient-MapboxGL的sm-time-line组件的代码示例，包括main.js设置

以下是一个使用 Vite + Vue 3 的示例代码，演示了如何在项目中使用 Vue-iClient-MapboxGL 的 sm-time-line 组件：

首先，确保已经安装了相关依赖包。在项目根目录下执行以下命令：

npm install @supermap/vue-iclient-mapboxgl

然后，可以按照下面的示例代码来编写你的 `main.js` 文件和组件文件。

main.js:

import { createApp } from 'vue';
import App from './App.vue';
import iClientMapboxgl from '@supermap/vue-iclient-mapboxgl';

const app = createApp(App);

// 注册Vue-iClient-MapboxGL组件
app.use(iClientMapboxgl);

app.mount('#app');

App.vue:

<template>
  <div>
    <i-client-mapboxgl ref="map" :accessToken="accessToken" :styleUrl="styleUrl" :center="center" :zoom="zoom">
      <sm-time-line :data="timelineData" @change="changeTime"></sm-time-line>
    </i-client-mapboxgl>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      accessToken: 'your_access_token',
      styleUrl: 'http://localhost:8080/styles/basic.json',
      center: [0, 0],
      zoom: 2,
      timelineData: [
        { time: 0, data: 'data1' },
        { time: 25, data: 'data2' },
        { time: 50, data: 'data3' },
        { time: 75, data: 'data4' },
        { time: 100, data: 'data5' },
      ],
    };
  },
  methods: {
    changeTime(time) {
      // 根据时间点执行相应操作
      console.log('Selected time:', time);
      // 示例代码：根据选定的时间加载数据图层或更新图层的显示内容
      // ...
    },
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 400px;
}
</style>

在上述代码中，我们首先在 `main.js` 文件中注册了 `Vue-iClient-MapboxGL` 组件，然后在 `App.vue` 组件中使用了 `i-client-mapboxgl` 组件作为容器来展示地图，并在其中嵌套了 `sm-time-line` 组件作为时间轴。

在 `App.vue` 的 `data` 中，我们定义了一些地图相关的配置参数和时间轴的数据数组 `timelineData`。在 `changeTime` 方法中，可以根据选定的时间点执行相应的操作。

请注意替换 `accessToken` 和 `styleUrl` 的值为你自己的 Access Token 和样式地址。

这是一个简单的示例，你可以根据自己的需求进行相应的调整和扩展。希望对你有所帮助！如果还有其他问题，请继续提问。