给一个在vue3项目中使用Vue-iClient-MapboxGL的时间轴组件的代码示例

以下是一个在 Vue 3 项目中使用 Vue-iClient-MapboxGL 和时间轴组件的代码示例：

<template>
  <div>
    <div ref="map" style="width: 100%; height: 400px;"></div>
    <div>
      <input type="range" v-model="currentTime" :min="minTime" :max="maxTime" @input="changeTime" />
      <span>{{ currentTime }}</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import iClientMapboxgl from '@supermap/vue-iclient-mapboxgl';

export default {
  name: 'MapComponent',
  components: {
    iClientMapboxgl,
  },
  setup() {
    const mapElement = ref(null);
    let map;
    const minTime = 0; // 最小时间
    const maxTime = 100; // 最大时间

    // 假设有一个时间轴的数据数组，用于存储每个时间点的数据
    const timelineData = reactive([
      { time: 0, data: 'data1' },
      { time: 25, data: 'data2' },
      { time: 50, data: 'data3' },
      { time: 75, data: 'data4' },
      { time: 100, data: 'data5' },
    ]);

    let currentTime = ref(minTime);

    onMounted(() => {
      map = new iClientMapboxgl.Map({
        target: mapElement.value,
        style: 'http://localhost:8080/styles/basic.json',
        center: [0, 0],
        zoom: 2,
      });
    });

    const changeTime = () => {
      // 根据当前时间加载对应的数据图层或更新图层的显示内容
      const selectedData = timelineData.find((item) => item.time === currentTime.value);
      if (selectedData) {
        // 示例代码：根据选定的时间加载数据图层或更新图层的显示内容
        // ...
      }
    };

    return {
      mapElement,
      minTime,
      maxTime,
      currentTime,
      changeTime,
    };
  },
};
</script>

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

在上述代码中，我们使用了 Vue 3 的 Composition API 编写了一个地图组件。在 `setup` 函数中，我们使用 `ref` 创建了一个 `mapElement` 引用，用于获取地图容器的 DOM 元素。

在 `onMounted` 钩子函数中，我们初始化了一个 `iClientMapboxgl.Map` 对象，并传入相应的配置参数。

在模板中，我们使用 `ref` 将地图容器的 DOM 元素与 `mapElement` 关联，并使用 `v-model` 绑定了一个 `currentTime` 值，以及一个 `<input>` 元素作为时间轴控制器。

在 `changeTime` 方法中，我们可以根据当前时间加载对应的数据图层或更新图层的显示内容。示例代码中，我们根据选定的时间点从 `timelineData` 数组中获取对应的数据，并根据需求进行相应操作。

请根据实际情况进行调整和扩展代码，以满足你的需求。希望对你有所帮助！如果还有其他问题，请继续提问。