插件安装
本插件为TVT.js平台深度定制开发的源码包，如需在其他平台集成使用，建议进行适配性调整以实现最佳兼容效果。
1、点击右侧插件包下载，得到： 'geoKit.zip' , 并放在 `icegl-three-vue-tres/pluginMaker/install/`
2、请使用命令终端，自行定位到您电脑的目录
cd /icegl-three-vue-tres/
3、输入命里，安装插件
yarn plugin.marker install geoKit
4、启动预览模式即可：
yarn pre.dev
插件介绍
预览地址：https://oss.icegl.cn/p/geoKit
提供基础的 Three.js 地理空间渲染能力：通过插件内封装的组件通常配合使用，形成完整的地理空间 3D 应用
### 该库依赖包
- @takram/three-geospatial
- 3d-tiles-renderer
```bash
yarn add @takram/three-geospatial 3d-tiles-renderer
# or
pnpm i @takram/three-geospatial 3d-tiles-renderer
```
## 组件说明
### 🌍 GeoCanvas
**三维地理画布容器组件**
- **核心功能**：提供基础的 Three.js 地理空间渲染画布
- **主要特性**：
- 集成 TresCanvas 作为 3D 渲染容器
- 内置地理坐标系统支持
- 自动处理相机和场景配置
- 支持自定义画布参数（抗锯齿、透明度、像素比等）
- 提供 CSS2D 渲染器支持
### 🎮 GeoControls
**地理空间相机控制组件**
- **核心功能**：管理 3D 地理场景中的相机位置和视角控制
- **主要特性**：
- 响应式地理位置绑定（经度、纬度、距离、航向、俯仰角）
- 实时同步相机位置与地理坐标
- 支持平滑的视角过渡动画
- 自动处理地球坐标系与 3D 空间坐标的转换
- 双向数据绑定，支持程序化控制和用户交互
### 🗺️ XYZTiles
**栅格瓦片地图组件**
- **核心功能**：渲染标准 XYZ 格式的栅格瓦片地图
- **主要特性**：
- 支持任意 XYZ 瓦片服务（如 OpenStreetMap、Google Maps 等）
- 智能瓦片缓存管理（LRU 缓存）
- 自适应分辨率调整
- 内置淡入淡出动画效果
- 可配置的性能参数（缓存大小、解析队列、错误容差等）
### 🏗️ Tileset
**3D 瓦片模型组件**
- **核心功能**：加载和渲染 3D Tiles 格式的三维模型数据
- **主要特性**：
- 支持标准 3D Tiles 规范
- 智能 LOD（细节层次）管理
- 内置瓦片显示/隐藏动画效果
- 支持大规模 3D 场景渲染
- 可配置的调试模式
### 🔧 组件协作关系
这四个组件通常配合使用，形成完整的地理空间 3D 应用：
- `GeoCanvas` 作为根容器
- `GeoControls` 提供交互控制
- `XYZTiles` 提供底图支撑
- `Tileset` 加载具体的 3D 模型数据
所有组件都基于 `@takram/three-geospatial` 和 `3d-tiles-renderer`
库构建，确保了地理坐标系统的一致性和高性能的 3D 渲染能力。
## 使用
基本用法如下：
```vue
<template>
<GeoCanvas v-model:position="position">
<GeoControls v-model:position="position" />
<XYZTiles url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Tileset url="/plugins/geoKit/TilesetWithDiscreteLOD/tileset.json" />
<Tileset url="/plugins/geoKit/tiles/tileset.json" />
</GeoCanvas>
</template>
<script setup lang="ts">
import { GeoCanvas, GeoControls, XYZTiles, Tileset } from '..'
import { ref } from 'vue'
import { GeoPositionConfig } from '../config/type'
const position = ref<GeoPositionConfig>({
heading: 90,
pitch: -51,
distance: 200,
longitude: 118.778677,
latitude: 32.043848,
})
</script>
<style scoped></style>
```
