SE SDK

基于 Cesium 的三维地图 SDK，专为输变电工程等行业应用设计。

✨ 特性

• 🗺️ 地图管理 - 简化的地图初始化和配置
• 📊 图层系统 - 支持瓦片图层、矢量图层、3D Tiles 模型
• 🎨 绘制工具 - 点、线、面、矩形、圆形绘制
• 📏 测量工具 - 距离测量、面积测量
• 🔧 图层管理 - 统一的图层管理接口
• 📦 TypeScript - 完整的类型支持
• 🚀 轻量级 - 基于 Cesium 1.123

📦 安装

npm install SE-sdk

或使用 yarn：

yarn add SE-sdk

🚀 快速开始

1. 创建地图

import { SEMap } from 'seSEdk'

const map = new SEMap({
  containerId: 'mapContainer',
  homeView: {
    lng: 105,
    lat: 35,
    alt: 4000000
  }
})

2. 添加瓦片图层（天地图）

import { TileLayer } from 'SE-sdk'

const tileLayer = new TileLayer({
  name: '天地图矢量底图',
  url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=YOUR_TOKEN',
  subdomains: ['0', '1', '2', '3', '4']
})

tileLayer.addTo(map)

3. 加载 3D Tiles 模型

import { Tiles3DLayer } from 'SE-sdk'

const tiles3DLayer = new Tiles3DLayer({
  name: '建筑模型',
  url: 'https://example.com/tileset.json',
  maximumScreenSpaceError: 1,
  flyTo: true,
  position: { alt: 15 }
})

await tiles3DLayer.addTo(map)

4. 添加矢量数据

import { VectorLayer } from 'SE-sdk'

const vectorLayer = new VectorLayer({
  name: '输电线路',
  data: geoJsonData,
  color: '#ff0000',
  lineWidth: 3
})

vectorLayer.addTo(map)

🛠️ 核心功能

图层管理

// 使用内置的图层管理器
const layerManager = map.layerManager

// 添加图层到管理器
layerManager.addLayer(tileLayer)

// 根据 ID 获取图层
const layer = layerManager.getLayerById('layer_id')

// 显示/隐藏图层
layerManager.setLayerVisible('layer_id', false)

// 获取所有图层
const allLayers = layerManager.getAllLayers()

// 清除所有图层
layerManager.clearAll()

测量工具

// 距离测量
map.measure.measureDistance((distance) => {
  console.log(`距离: ${distance} 米`)
})

// 面积测量
map.measure.measureArea((area) => {
  console.log(`面积: ${area} 平方米`)
})

// 清除测量结果
map.measure.clear()

绘制工具

// 绘制点
map.drawer.startDraw({
  type: 'point',
  color: '#ff0000',
  callback: (entity) => {
    console.log('绘制完成', entity)
  }
})

// 绘制线
map.drawer.startDraw({
  type: 'polyline',
  color: '#00ff00',
  lineWidth: 3
})

// 绘制多边形
map.drawer.startDraw({
  type: 'polygon',
  color: '#0000ff',
  fillColor: '#0000ff'
})

// 绘制矩形
map.drawer.startDraw({
  type: 'rectangle',
  color: '#ffff00',
  fillColor: '#ffff00'
})

// 绘制圆
map.drawer.startDraw({
  type: 'circle',
  color: '#ff00ff',
  fillColor: '#ff00ff'
})

相机控制

// 飞行到指定位置
map.flyTo({ lng: 116.4, lat: 39.9, alt: 10000 }, 3)

// 设置视角
map.setView({
  lng: 116.4,
  lat: 39.9,
  alt: 10000,
  heading: 0,
  pitch: -90,
  roll: 0
})

// 获取当前相机位置
const position = map.getCameraPosition()
console.log(position) // { lng, lat, alt, heading, pitch, roll }

截图

const imageData = map.screenshot()
// imageData 是 base64 格式的 PNG 图片

📚 API 文档

SEMap

地图核心类

构造参数：

• containerId: string - 容器 DOM 元素 ID
• accessToken?: string - Cesium Ion 访问令牌
• homeView?: { lng, lat, alt } - 初始视角

方法：

• flyTo(position, duration?) - 飞行到指定位置
• setView(position) - 设置相机视角
• getCameraPosition() - 获取当前相机位置
• screenshot() - 截图
• destroy() - 销毁地图

属性：

• viewer: Cesium.Viewer - Cesium 原生实例
• layerManager: LayerManager - 图层管理器
• measure: Measure - 测量工具
• drawer: Drawer - 绘制工具

TileLayer

瓦片图层类

构造参数：

• name: string - 图层名称
• url: string - 瓦片地址模板
• subdomains?: string[] - 子域名
• minimumLevel?: number - 最小缩放级别
• maximumLevel?: number - 最大缩放级别
• show?: boolean - 是否显示

Tiles3DLayer

3D Tiles 模型图层

构造参数：

• name: string - 图层名称
• url: string - 3D Tiles 地址
• maximumScreenSpaceError?: number - 最大屏幕空间误差（默认 1）
• position?: { alt: number } - 高度偏移
• flyTo?: boolean - 是否自动飞行到模型（默认 true）
• show?: boolean - 是否显示

方法：

• setStyle(style) - 设置模型样式

VectorLayer

矢量图层类

构造参数：

• name: string - 图层名称
• data: any - GeoJSON 数据
• color?: string - 颜色（默认 '#ff0000'）
• lineWidth?: number - 线宽（默认 3）
• pointSize?: number - 点大小（默认 10）
• show?: boolean - 是否显示

🏗️ 开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建 SDK
npm run build

# 预览
npm run preview

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系

如有问题，请提交 Issue。