vue3使用keplergl

Kepler.gl 是一个强大的地理信息可视化工具，可以与 Vue3 集成使用。下面是使用 Kepler.gl 的基本步骤：

1. 安装 Kepler.gl 包：`npm install kepler.gl`

2. 在 Vue3 中引入 Kepler.gl：在 `main.js` 中添加以下代码：

   import KeplerGl from 'kepler.gl/vue'
   ...
   
   const app = createApp(App)
   ...
   app.use(KeplerGl)
   app.mount('#app')

3. 在 Vue3 中使用 Kepler.gl：在组件中添加以下代码：

   <template>
     <kepler-gl
       :id="mapId"
       :mapStyle="mapStyle"
       :width="width"
       :height="height"
       :visState="visState"
       :mapboxApiAccessToken="mapboxApiAccessToken"
     />
   </template>
   
   <script>
   export default {
     data() {
       return {
         mapId: 'map',
         mapStyle: 'mapbox://styles/mapbox/dark-v9',
         width: window.innerWidth,
         height: window.innerHeight,
         visState: { ... },
         mapboxApiAccessToken: 'your_mapbox_api_access_token'
       }
     }
   }
   </script>

在以上代码中，`visState` 是 Kepler.gl 的状态对象，其中包含了地图的各种设置和数据，可以通过修改 `visState` 来控制 Kepler.gl 的显示效果。

注意：在使用 Kepler.gl 时，需要先在 Mapbox 官网申请一个 API 访问令牌，将其替换到上面的 `mapboxApiAccessToken` 变量中。