supermap/vue-iclient-mapboxgl 是否支持vue3

目前 SuperMap Vue-iClient-MapboxGL 还不支持 Vue3，它是基于 Vue2 开发的。不过，SuperMap 公司一直在积极开发和维护其产品和组件库，未来可能会推出适配 Vue3 的版本。如果您需要在 Vue3 中使用 Mapbox GL，可以考虑使用其他第三方 Vue 插件库，如 vue-mapbox 或 vue3-mapbox-gl 等。

相关问题

supermap/vue-iclient-mapboxgl

SuperMap Vue-iClient-MapboxGL 是一个基于 Mapbox GL 的 Vue 组件库，提供了丰富的地图展示和数据可视化功能。它可以帮助开发者快速搭建 Mapbox GL 地图应用，支持多种地图样式和数据源，包括矢量和栅格数据等。此外，它还集成了 SuperMap iServer 的数据服务，可以实现丰富的数据查询、分析、处理和可视化功能。

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 和样式地址。

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