Kyd3D SDK

Kyd3D SDK是一个基于Cesium的地理信息系统扩展库，提供了丰富的3D地图可视化功能和交互能力。

目录结构

kyd3d/
├── kyd3d-cesium/    # Cesium资源文件
├── kyd3d.css        # 样式文件
├── kyd3d.es.js      # ES模块格式
├── kyd3d.js         # UMD格式（浏览器直接引入）
└── types/           # TypeScript类型定义

安装和使用

方法一：通过 NPM 安装本地包

1. 准备kyd3d.tgz包

   确保您已经获取了kyd3d.tgz包文件，可以将其复制到您的项目根目录或其他位置。

2. 安装本地包

   在您的项目根目录执行以下命令：

      
   # 方式1：指定完整路径
   npm install /path/to/kyd3d.tgz
   例：npm install D:/job/gisSdk/SDK/kyd3d.tgz

3. 在代码中导入使用

   // ES模块导入
   import * as kyd3d from 'kyd3d';
   import 'kyd3d/kyd3d.css';
      
   // 初始化地图
   const map = new kyd3d.Map('mapContainer', {
     // 配置选项
   });
   
   在vite.config中配置如下
   import { kyd3dVitePlugin } from 'kyd3d/vite-plugin'; 
   
   export default {
    plugins: [
      kyd3dVitePlugin({
        // 配置选项
      }),
    ],
   };
   

方法二：通过 CDN 或本地文件直接引入

1. 在HTML中引入脚本和样式

   <!-- 引入样式文件 -->
   <link rel="stylesheet" href="path/to/kyd3d.css">
   <!-- 引入Cesium -->
   <script src="path/to/Cesium.js"></script>
   <!-- 引入Kyd3D SDK -->
   <script src="path/to/kyd3d.js"></script>

2. 确保Cesium资源可访问

   当使用直接引入方式时，SDK会自动查找kyd3d/kyd3d-cesium/Build/Cesium/路径下的资源文件。请确保：

   • 将kyd3d目录完整复制到您的项目中
   • 或者确保服务器可以正确响应这些资源请求

环境变量配置

手动设置CESIUM_BASE_URL

如果需要自定义Cesium资源路径，可以在引入SDK之前手动设置：

// 在HTML中设置
<script>
  window.CESIUM_BASE_URL = '/your/custom/path/to/Cesium/';
</script>

// 或者在JavaScript中设置
window.CESIUM_BASE_URL = '/your/custom/path/to/Cesium/';

示例代码

创建基本地图

// NPM方式
import * as kyd3d from 'kyd3d';
import 'kyd3d/kyd3d.css';

// 初始化地图
const map = new kyd3d.Map('mapContainer', {
  // 地图配置选项
  zoom: 3,
  center: [116, 39],
  // 其他配置...
});

// 添加图层
const layer = new kyd3d.Layer({
  // 图层配置
});
map.addLayer(layer);

// 销毁地图
// map.destroy();

原生js
let map;
let kyd3d = window.kyd3d
map = new kyd3d.Map('mapContainer')

常见问题

1. Cesium资源加载失败

• 检查控制台输出，确认CESIUM_BASE_URL设置是否正确
• 确保Cesium资源文件存在于指定路径
• 检查服务器配置，确保静态资源可以正确访问

2. 如何在不同框架中使用

Vue项目

// 在组件中使用
import { onMounted, onUnmounted } from 'vue';
import * as kyd3d from 'kyd3d';
import 'kyd3d/kyd3d.css';

export default {
  name: 'MapComponent',
  setup() {
    let map = null;
    
    onMounted(() => {
      map = new kyd3d.Map('mapContainer');
    });
    
    onUnmounted(() => {
      if (map) {
        map.destroy();
      }
    });
    
    return {};
  }
};

React项目

import { useEffect, useRef } from 'react';
import * as kyd3d from 'kyd3d';
import 'kyd3d/kyd3d.css';

function MapComponent() {
  const mapRef = useRef(null);
  
  useEffect(() => {
    let map = new kyd3d.Map(mapRef.current);
    
    return () => {
      map.destroy();
    };
  }, []);
  
  return <div ref={mapRef} style={{ width: '100%', height: '400px' }}></div>;
}

开发和构建

安装依赖

npm install

构建SDK

# 清理并构建
npm run build:clean

# 打包为tgz文件
npm run pack

构建后的文件将在kyd3d目录下，tgz包将生成在项目根目录。