GIS SDK 文档

1. 简介

GIS SDK 是一个基于 Unreal Engine Pixel Streaming 技术的地理信息系统开发工具包，提供了与 Unreal Engine 进行 RPC 通信的能力，支持加载地图、生成静态网格体、操作相机、创建热力图、电子围栏等丰富功能。

$3

- Unreal Engine 通信：基于 Pixel Streaming DataChannel 的 RPC 通信机制
- 地图管理：加载、卸载地图和关卡
- 对象管理：生成、销毁静态网格体和蓝图对象
- 相机控制：管理相机位置、旋转和变换
- 屏幕拾取：支持屏幕坐标到 3D 世界坐标的转换
- 建筑分解：支持建筑整体或分层展开、折叠动画
- 动画系统：支持骨骼动画播放、关键帧动画控制
- 热力图：基于灰度图或点集生成热力图
- 电子围栏：创建和管理多边形电子围栏
- 天气系统：控制场景天气效果
- 散点图：创建和管理散点标记
- 测量工具：支持距离、面积、高度测量

2. 安装

$3

- Node.js 18.14.0+ 或 20.0.0+ 或 22.0.0+ 或 24.0.0+
- @epicgames-ps/lib-pixelstreamingfrontend-ue5.5

$3

``bash
npm install @epicgames-ps/lib-pixelstreamingfrontend-ue5.5 @epicgames-ps/lib-pixelstreamingcommon-ue5.5 hj-gis-sdk
`

$3

`javascript
import { Core, Addons } from 'hj-gis-sdk'
`

3. 核心概念

$3

UERPCNode 类代表场景中的一个对象节点，如地图、静态网格体或蓝图对象。它提供了对象的基本操作，如添加、移除和变换设置。每个 UERPCNode 实例都有一个唯一的句柄(Handle)，用于与 Unreal Engine 进行通信。

$3

World 类代表整个场景世界，是场景中所有对象的根容器。它管理场景中的地图、静态网格体、蓝图对象等，并提供了丰富的工具类访问接口，如建筑分解、热力图、电子围栏等。

$3

Camera 类代表场景中的相机，用于控制视角和观察场景。它支持位置、旋转、缩放和相机参数(如 FOV、焦距)的设置和获取。SDK 提供了 PerspectiveCamera 等不同类型的相机实现。

$3

Transform 类代表对象的变换信息，包括位置(Location)、旋转(Rotation)和缩放(Scale)。每个属性都包含 X、Y、Z 三个分量，用于精确控制对象的空间状态。

$3

UERPC 是 SDK 的核心通信类，负责与 Unreal Engine 进行 RPC 通信。它封装了 Pixel Streaming 的 DataChannel，提供了发送命令和接收响应的机制。所有与 Unreal Engine 的交互都通过 UERPC 类进行。

4. 快速开始

$3

`javascript
import {
PixelStreaming,
Config,
Flags
} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5'
import { Addons } from 'hj-gis-sdk'
import { Logger, LogLevel } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5'

// 初始化日志
Logger.InitLogging(LogLevel.Info, false)

const { World, PerspectiveCamera } = Addons

async function initializeApp() {
// 创建 PixelStreaming 实例
const url = ws://your-server-url:9001/player
const config = new Config({
initialSettings: {
ss: url,
StreamerId: '',
AutoPlayVideo: true,
StartVideoMuted: true,
[Flags.HoveringMouseMode]: true, // 启用悬停鼠标模式
[Flags.TouchInput]: true, // 启用触摸输入
[Flags.FakeMouseWithTouches]: true // 使用触摸模拟鼠标
}
})

// 创建 PixelStreaming 实例并设置视频元素容器
const stream = new PixelStreaming(config, {
videoElementParent: document.querySelector('#ue')
})

// 连接到 Pixel Streaming 服务
stream.connect()

// 等待流播放事件
let { resolve, promise } = Promise.withResolvers()
stream.addEventListener('playStream', () => resolve(null))
await promise

// 创建 World 和 Camera 实例
const world = new World(stream)

// 匹配视图
world.tools.matchView.excute()

// 创建相机实例
const camera = new PerspectiveCamera(world.rpc)

// 设置相机初始位置
camera.transform.position.set(0, 0, 2)

return { world, camera }
}

// 初始化应用
initializeApp()
.then(({ world, camera }) => {
console.log('应用初始化完成')
// 在这里可以使用 world 和 camera 对象
})
.catch((err) => console.error('应用初始化失败:', err))
`

$3

1. 创建 HTML 容器

`html













`

2. 使用模块化功能

`javascript
// 导入需要的模块
import { Addons } from 'hj-gis-sdk'
import { initializeApp } from './common'

const { World, PerspectiveCamera } = Addons

// 初始化应用
const { world, camera } = await initializeApp(
'ws://your-server-url:9001/player',
document.querySelector('#ue')
)

// 加载地图
const map = await world.loadLevelByName('plgz')

// 创建热力图
const heatmap = await world.tools.heatMap.create({
url: 'http://example.com/heatmap.png',
X: 0,
Y: 0,
Z: 0,
ScaleX: 100,
ScaleY: 100,
ScaleZ: 100
})
`

在线地址

Vue3在线示例集合

5. 类参考

本节详细描述了 hj-gis-sdk/addons 目录中的主要类及其属性和方法，为开发者提供完整的 API 参考。

$3

#### 5.1.1 World 类

描述：世界类，整个场景的根容器，管理场景中的所有对象、天气系统和 RPC 通信。

属性：

- root：场景根节点，类型为 UERPCNode
- rpc：RPC 通信实例，类型为 UERPC
- tools：工具集合，包含各种场景工具
- ghost：视觉虚化工具
- weather：天气系统工具
- matchView：视图匹配工具
- pickCast：屏幕拾取工具
- scatter：散点图工具
- heatMap：热力图工具
- fence：电子围栏工具
- line：线条工具
- polygon：多边形工具
- building：建筑分解工具
- measurement：测量工具
- daytime：时间控制工具

方法：

- constructor(pixelStream: PixelStreaming)：构造函数，创建世界实例
- loadLevelByName(assetPath: string)：加载指定名称的关卡
- spawnSkeletalMesh(params: { assetPath: string, transform?: Transform, tag?: string })：生成含有骨骼动画的网格体
- spawnStaticMeshActor(params: { assetPath: string, transform?: Transform, tag?: string })：生成静态网格体演员
- spawnLocalBlueprintActor(params: { assetPath: string, transform?: Transform, tag?: string })：生成本地蓝图演员

#### 5.1.2 UERPCNode 类

描述：UE RPC 节点类，用于与 Unreal Engine 通信，支持变换同步、远程更新和子节点管理。

属性：

- key：节点唯一标识符，类型为 string
- data：节点数据，包含资源类型信息
- transform：节点变换信息，类型为 Transform
- world：所属世界实例，类型为 World
- tag：节点标签，类型为 string

方法：

- constructor(rpc: UERPC, key?: string, data?: Data, transform?: Transform, tag?: string)：构造函数，创建节点实例
- add(child: UERPCNode)：添加子节点
- detach()：脱离父节点
- remove()：移除节点
- removeChild(child: Node)：移除子节点

#### 5.1.3 PerspectiveCamera 类

描述：透视相机类，用于表示 3D 场景中的透视相机，实现了透视相机的属性和变换管理。

属性：

- world：所属世界实例，类型为 World
- transform：相机变换，包含位置、旋转和缩放信息

方法：

- constructor(rpc: UERPC)：构造函数，创建透视相机实例
- forceSyncRemoteToLocal()：同步远程相机参数到本地

#### 5.1.4 Transform 类

File: transform.ts

描述：变换类，继承自 OTransform，用于表示对象的位置、旋转和缩放信息。

属性：

- position：位置向量，类型为 Vector3
- rotation：旋转欧拉角，类型为 Euler
- scale：缩放向量，类型为 Vector3

方法：

- constructor(position: Vector3, rotation: Euler, scale: Vector3)：构造函数，创建变换实例
- static default(): Transform：创建默认的变换对象
- static fromRPCObject(obj: RPCTransform): Transform：从 RPC 对象创建变换实例
- toRPCJSON()：将变换转换为 RPC JSON 格式

$3

#### 5.2.1 GhostTool 类

描述：视觉虚化工具，用于将场景中的对象设置为半透明状态。

方法：

- ghost(node: UERPCNode)：将对象设置为虚化状态

#### 5.2.2 WeatherTool 类

描述：天气系统工具，用于控制场景中的天气效果。

方法：

- setWeather(params: { Preset: string })：设置天气类型
- setDayTime(params: { value: number })：设置时间

#### 5.2.3 PickCastTool 类

描述：屏幕拾取工具，用于将屏幕坐标转换为 3D 世界坐标。

方法：

- hover(callback: (data: any) => void)：设置屏幕拾取回调
- pick(callback: (data: any) => void)：设置点击屏幕拾取回调

#### 5.2.4 ScatterTool 类

描述：散点图工具，用于在场景中创建和管理标记点。

方法：

- create(params: { pointParams: Array<{ location: { X: number, Y: number, Z: number }, textContent: string, tag: string } | { GeoCoordinates: { Longitude: number, Latitude: number, Altitude: number }, TextContent: string, Tag: string }> })：创建散点，支持世界坐标和经纬度坐标

#### 5.2.5 HeatMapTool 类

描述：热力图工具，用于基于数据创建可视化的热力分布效果。

方法：

- create(params: { url: string, transform?: Transform })：从灰度图创建热力图

#### 5.2.6 LineTool 类

描述：线条工具，用于在场景中创建和管理线条。

方法：

- create(params: { pointArray: Array<{ X: number, Y: number, Z: number } | { Longitude: number, Latitude: number, Altitude: number }>, Tag?: string, CoordType?: string, Width?: number, Radius?: number, MaterialPath?: string, Color?: { R: number, G: number, B: number, A: number }, Speed?: number, Tilling?: number, SampleDistance?: number, SplinePointType?: string })：创建线条，支持世界坐标和经纬度坐标

#### 5.2.7 FenceTool 类

描述：电子围栏工具，用于创建和管理多边形的虚拟围栏。

方法：

- create(params: { vectorArray: Array<{ X: number, Y: number, Z: number }>, height: number, color: { R: number, G: number, B: number, A: number } })：创建电子围栏

#### 5.2.8 PolygonTool 类

描述：多边形工具，用于在场景中创建和管理多边形。

方法：

- create(params: { Vertices: Array<{ X: number, Y: number, Z: number } | { Longitude: number, Latitude: number, Altitude: number }>, Tag?: string, CoordType?: string, bCollision?: boolean, MaterialPath?: string })：创建多边形，支持世界坐标和经纬度坐标
- update(params: { Tag: string, Vertices: Array<{ X: number, Y: number, Z: number } | { Longitude: number, Latitude: number, Altitude: number }>, CoordType?: string, bCollision?: boolean, MaterialPath?: string })：更新多边形

#### 5.2.9 BuildingTool 类

描述：建筑分解工具，用于将建筑模型按照楼层或部分进行展开和折叠。

方法：

- expand(buildingId: string, params: { spacing: number, duration: number })：展开建筑

#### 5.2.10 MeasurementTool 类

描述：测量工具，用于测量场景中的距离、面积和高度。

方法：

- draw(type: MeasurementType)：开始测量
- clean()：取消测量

$3

#### 5.3.1 AnimationMixer 类

描述：动画混合器，用于管理动画片段和动画动作。

方法：

- clipAction(clip: AnimateClip, target: UERPCNode)：创建动画动作

#### 5.3.2 PresetAnimateClip 类

描述：预设动画片段，用于表示预先定义的动画资源。

#### 5.3.3 KeyFrameAnimateClip 类

描述：关键帧动画片段，用于基于关键帧创建动画。

#### 5.3.4 AnimationAction 类

描述：动画动作，用于控制动画的播放、暂停和参数设置。

属性：

- type：动画类型，如 'loop'（循环播放）
- rate：播放速度
- duration：动画时长

方法：

- play()：播放动画
- pause()：暂停动画

6. 详细使用示例

$3

地图管理功能用于加载、卸载和管理场景中的地图 , 地图位置不可变更。

`javascript
// 加载地图
const map = await world.loadLevelByName('plgz')

// 销毁地图
map.remove()
`

$3

静态网格体是场景中最基本的可见对象，可以是模型、建筑等。

`javascript
// 生成静态网格体
const staticMesh = await world.spawnStaticMeshActor({
assetPath: '/Game/Mesh/test/63',
transform: new Transform({
position: { x: 100, y: 100, z: 100 },
rotation: { pitch: 0, yaw: 0, roll: 0 },
scale: { x: 1, y: 1, z: 1 }
})
})

// 修改静态网格体位置
staticMesh.transform.position.x = 200

// 修改静态网格体旋转
staticMesh.transform.rotation.yaw = 45

// 修改静态网格体缩放
staticMesh.transform.scale.set(2, 2, 2)

// 销毁静态网格体
staticMesh.remove()

// 通过对象直接设置变换
staticMesh.transform.position.set(300, 300, 300)
staticMesh.transform.rotation.set(0, 90, 0)
staticMesh.transform.scale.set(1.5, 1.5, 1.5)
`

$3

蓝图对象是基于 Unreal Engine 蓝图创建的复杂对象，可以包含多个组件和自定义逻辑。

`javascript
// 生成本地蓝图对象
const blueprint = await world.spawnLocalBlueprintActor({
assetPath: '/Game/levels/smith/SHQPXJ_Blueprint'
})

// 设置蓝图对象位置
blueprint.transform.position.set(300, 400, 500)

// 销毁蓝图对象
blueprint.remove()

// 生成带初始变换的蓝图对象
const blueprintWithTransform = await world.spawnLocalBlueprintActor({
assetPath: '/Game/Blueprints/BP_TestActor',
transform: {
Location: { X: 0, Y: 0, Z: 200 },
Rotation: { Pitch: 0, Yaw: 90, Roll: 0 },
Scale: { X: 1, Y: 1, Z: 1 }
}
})
`

$3

相机控制用于调整场景的观察视角，可以设置位置、旋转和相机参数。

`javascript
// 设置相机位置
camera.transform.position.set(1000, 2000, 3000)

// 设置相机旋转
camera.transform.rotation.set(-12.26, 126.94, 0)

// 设置相机缩放
camera.transform.scale.set(1, 1, 1)

// 强制同步远程相机参数到本地
await camera.forceSyncRemoteToLocal()

// 保存相机复位位姿
await camera.setResetTransform({
Location: { X: 0, Y: 0, Z: 500 },
Rotation: { Pitch: -20, Yaw: 0, Roll: 0 }
})

// 复位相机到保存的位姿
await camera.resetToSavedTransform()
`

$3

屏幕拾取功能用于将屏幕坐标转换为 3D 世界坐标，并获取该位置的对象信息。

`javascript
// 设置屏幕拾取回调（鼠标悬停）
const hoverHandle = world.tools.pickCast.hover((data) => {
console.log('拾取到的对象:', data)
console.log('世界坐标:', data.World)
console.log('地理坐标:', data.Geo)
})

// 取消屏幕拾取
hoverHandle()

// 设置点击屏幕拾取回调
const pickHandle = world.tools.pickCast.pick((data) => {
console.log('点击拾取到的对象:', data)
console.log('点击位置世界坐标:', data.World)
console.log('点击位置地理坐标:', data.Geo)
})

// 取消点击屏幕拾取
pickHandle()

// 世界坐标可以通过屏幕拾取回调获取
`

6.1-6.5 在线地址

$3

视觉虚化功能用于将场景中的对象设置为半透明状态，便于查看复杂场景。

`javascript
// 将对象设置为虚化状态
let ghostHandle = await world.tools.ghost.ghost(staticMesh)

// 恢复对象正常显示
if (ghostHandle) {
ghostHandle.restore()
}
`

6.6 在线地址

$3

建筑分解功能用于将建筑模型按照楼层或部分进行展开和折叠，便于查看内部结构。

`javascript
// 加载建筑蓝图
const building = await world.spawnLocalBlueprintActor({
assetPath: '/Game/Mesh/Lou/Lou.Lou'
})

// 展开建筑
const expandHandler = await world.tools.building.expand(building.key!, {
spacing: 50, // 展开间距
duration: 2.0 // 动画时长
})

// 展开特定楼层
await expandHandler.expandFloor({
floorIndex: 2, // 楼层索引
direction: { X: -1, Y: 0, Z: 0 }, // 展开方向
distance: 100, // 展开距离
duration: 1.5 // 动画时长
})
`

6.7 在线地址

$3

动画系统支持骨骼动画播放和基于关键帧的动画控制。

`javascript
// 加载骨骼网格体
const skeletalMesh = await world.spawnSkeletalMesh({
assetPath: '/Game/Mesh/Human/Jog_In_Circle.Jog_In_Circle'
})

// 创建动画混合器
const animationMixer = new Animation.AnimationMixer(world.rpc)

// 创建动画片段
const animateClip = new Animation.PresetAnimateClip(
'/Game/Mesh/Human/Jog_In_Circle_Anim.Jog_In_Circle_Anim'
)

// 创建动画动作
const animateAction = animationMixer.clipAction(animateClip, skeletalMesh)

// 设置动画参数
animateAction.type = 'loop' // 循环播放
animateAction.rate = 1.0 // 播放速度

// 播放动画
animateAction.play()

// 暂停动画
animateAction.pause()

// 创建关键帧动画
const keyframeClip = new Animation.KeyFrameAnimateClip({
startTransform: Transform.default(),
endTransform: Transform.fromRPCObject({
Location: {
X: 100,
Y: 100,
Z: 0
},
Rotation: {
Pitch: 0,
Yaw: 180,
Roll: 0
}
})
})

// 创建关键帧动画动作
const keyframeAction = animationMixer.clipAction(keyframeClip, skeletalMesh)
keyframeAction.duration = 3.0 // 动画时长

// 播放关键帧动画
keyframeAction.play()
`

6.8 骨骼动画在线地址
6.8 帧动画在线地址

$3

热力图功能用于基于数据创建可视化的热力分布效果。

`javascript
// 创建Transform对象
const transform = Transform.default()
transform.scale.scale(100) // 设置缩放

// 从灰度图创建热力图
const heatmapFromImage = await world.tools.heatMap.create({
url: 'http://example.com/heatmap.png',
transform: transform
})

// 销毁热力图
heatmapFromImage.remove()
`

6.9 在线地址

$3

电子围栏功能用于创建和管理多边形的虚拟围栏。

`javascript
// 创建电子围栏
const fence = await world.tools.fence.create({
vectorArray: [
{ X: 0, Y: 0, Z: 0 },
{ X: 1000, Y: 0, Z: 0 },
{ X: 1000, Y: 1000, Z: 0 },
{ X: 0, Y: 1000, Z: 0 }
],
height: 10, // 围栏高度
color: { R: 0, G: 0, B: 255, A: 255 } // 围栏颜色
})

// 删除围栏
await fence.remove()
`

6.10 在线地址

$3

散点图功能支持使用经纬度坐标创建标记点。

`javascript
// 创建经纬度散点图
const scatter = await world.tools.scatter.create({
pointParams: [
{
GeoCoordinates: {
Longitude: 121.301927,
Latitude: 31.1896,
Altitude: 0
},
TextContent: 'POI Geo',
Tag: 'Geo'
}
]
})

// 删除散点图
await scatter.removeAll()
`

$3

线条功能用于在场景中创建和管理线条，支持经纬度坐标。

`javascript
// 创建线条
const line = await world.tools.line.create({
Tag: 'Line_Geo',
CoordType: 'WGS84',
MaterialPath: '/Game/Materials/GIS/graph/style1_Inst1.style1_Inst1',
Width: 5,
Speed: -1.0,
Tilling: 0.1,
pointArray: [
{
Longitude: 121.301927,
Latitude: 31.1895,
Altitude: 10
},
{
Longitude: 121.301928,
Latitude: 31.1895,
Altitude: 10
},
{
Longitude: 121.301929,
Latitude: 31.1895,
Altitude: 10
},
{
Longitude: 121.30193,
Latitude: 31.1895,
Altitude: 10
}
],
Color: { R: 0, G: 0, B: 255, A: 255 }
})

// 删除线条
await line.remove()
`

在线链接

$3

多边形功能用于在场景中创建和管理多边形，支持经纬度坐标。

`javascript
// 创建多边形
const polygon = await world.tools.polygon.create({
Tag: 'Poly_A',
CoordType: 'WGS84',
MaterialPath: '/Game/Materials/GIS/graph/style2.style2',
Vertices: [
{
Longitude: 121.302027,
Latitude: 31.1895,
Altitude: 10
},
{
Longitude: 121.302027,
Latitude: 31.1896,
Altitude: 10
},
{
Longitude: 121.301927,
Latitude: 31.1896,
Altitude: 10
},
{
Longitude: 121.301927,
Latitude: 31.1895,
Altitude: 10
}
]
})

// 删除多边形
await polygon.remove()
`

在线链接

$3

天气系统用于控制场景中的天气效果，如晴天、雨天、雪天等。

`javascript
// 设置天气类型
await world.tools.weather.setWeather({
Preset: 'Rain' // 可选：'Sunny', 'Rain', 'Snow', 'Foggy'
})

// 设置时间
await world.tools.weather.setDayTime({
value: 1430 // 时间格式：HHMM，1430表示14:30
})
`

6.14 在线地址

$3

散点图功能用于在场景中创建和管理标记点。

`javascript
// 创建散点
const scatter = await world.tools.scatter.create({
pointParams: [
{
location: { X: 0, Y: 0, Z: 10 },
textContent: '标记点1',
tag: 'Demo'
},
{
location: { X: 100, Y: 100, Z: 10 },
textContent: '标记点2',
tag: 'Demo'
}
]
})

// 删除所有散点
await scatter.removeAll()
`

6.12 在线地址

$3

测量工具用于测量场景中的距离、面积和高度。

`javascript
// 开始路径测量
await world.tools.measurement.draw(MeasurementType.Path)

// 开始面积测量
await world.tools.measurement.draw(MeasurementType.Area)

// 开始高度测量
await world.tools.measurement.draw(MeasurementType.Height)

// 取消测量
await world.tools.measurement.clean()
`

6.13 在线地址

7. 核心功能实现代码

以下是从 GUI 示例中提取的核心功能实现代码（不包含 GUI 部分）：

$3

`javascript
import { PixelStreaming, Config, Logger, LogLevel, Flags } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5'
import { Addons } from 'hj-gis-sdk'

const { World, PerspectiveCamera, UERPCNode } = Addons

Logger.InitLogging(LogLevel.Info, false)
const AppElement = document.querySelector('#ue')! as HTMLElement

let world: InstanceType | undefined = undefined
let camera: InstanceType | undefined = undefined
let blueprint: InstanceType | undefined = undefined
let staticmesh: InstanceType | undefined = undefined
let map: InstanceType | undefined = undefined

/**
* 初始化应用
*/
async function initializeApp() {
// const url = ws://120.27.198.158:9001/player
const url = wss://kdyjs-proxy.metamaker.cn/proxy_gis_sdk
const config = new Config({
initialSettings: {
ss: url,
StreamerId: '',
AutoPlayVideo: true,
StartVideoMuted: true,
[Flags.HoveringMouseMode]: true,
[Flags.TouchInput]: true,
[Flags.FakeMouseWithTouches]: true
}
})
const stream = new PixelStreaming(config, {
videoElementParent: AppElement
})
stream.connect()
let { resolve, promise } = Promise.withResolvers()
stream.addEventListener('playStream', () => {
console.log('PlayStreamEvent')
resolve(null)
})
await promise
world = new World(stream)
world.tools.matchView.excute()
camera = new PerspectiveCamera(world.rpc)
camera.transform.position.set(0, 0, 2)
}
`

$3

`javascript
// 加载地图
async function loadMap(selectedMap: string) {
map = await world!.loadLevelByName(selectedMap)

// 设置相机视角
camera!.transform.rotation.pitch = -12.259792797845645
camera!.transform.rotation.yaw = 126.9423080594274
camera!.transform.rotation.roll = 0.00003001662846458654
camera!.transform.position.set(
-234809.24784008358,
-74593.71088085348,
13755.085257765979
)
}

// 销毁地图
function destroyMap() {
map!.remove()
}
`

$3

`javascript
// 加载蓝图对象
async function loadBlueprint(assetPath: string) {
blueprint = await world!.spawnLocalBlueprintActor({
assetPath: assetPath
})
}

// 销毁蓝图对象
function destroyBlueprint() {
blueprint!.remove()
}
`

$3

`javascript
// 加载静态网格体
async function loadStaticMesh(assetPath: string) {
staticmesh = await world!.spawnStaticMeshActor({
assetPath: assetPath
})
}

// 销毁静态网格体
function destroyStaticMesh() {
staticmesh!.remove()
}
`

$3

`javascript
// 设置相机位置
function setCameraPosition(x: number, y: number, z: number) {
if (camera) {
camera.transform.position.x = x
camera.transform.position.y = y
camera.transform.position.z = z
}
}

// 设置相机旋转
function setCameraRotation(pitch: number, yaw: number, roll: number) {
if (camera) {
camera.transform.rotation.pitch = pitch
camera.transform.rotation.yaw = yaw
camera.transform.rotation.roll = roll
}
}
`

$3

`javascript
// 设置静态网格体位置
function setStaticMeshPosition(x: number, y: number, z: number) {
if (staticmesh) {
staticmesh.transform.position.x = x
staticmesh.transform.position.y = y
staticmesh.transform.position.z = z
}
}

// 设置静态网格体旋转
function setStaticMeshRotation(pitch: number, yaw: number, roll: number) {
if (staticmesh) {
staticmesh.transform.rotation.pitch = pitch
staticmesh.transform.rotation.yaw = yaw
staticmesh.transform.rotation.roll = roll
}
}

// 设置静态网格体缩放
function setStaticMeshScale(x: number, y: number, z: number) {
if (staticmesh) {
staticmesh.transform.scale.x = x
staticmesh.transform.scale.y = y
staticmesh.transform.scale.z = z
}
}
`

$3

`javascript
let hoverHandle: any

// 开始屏幕拾取
function startHover() {
console.log(pick)
hoverHandle = world!.tools.pickCast.hover((data) => {
console.log(hover data, data)
})
}

// 结束屏幕拾取
function stopHover() {
if (hoverHandle) {
hoverHandle()
}
}
`

$3

`javascript
// 判断 window 是否初始化完成
if (document.readyState === 'loading') {
// 文档正在加载，等待DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', initializeApp)
} else {
// 文档已经加载完成，直接初始化应用
initializeApp()
}
`

8. 常见问题

$3

- 确保 Pixel Streaming 服务器正在运行
- 检查 URL 是否正确，格式应为 ws://your-server-url
- 确保服务器端口未被防火墙阻止
- 检查网络连接是否正常

$3

- 确保对象的资源路径正确
- 检查对象的位置是否在相机的可见范围内
- 确保对象的缩放比例合适，避免过大或过小
- 检查对象的材质和渲染设置是否正确

$3

- 确保骨骼动画资源路径正确
- 检查动画名称是否与 Unreal Engine 中的动画名称一致
- 确保动画组件已正确配置在蓝图中
- 检查是否有其他动画正在播放并冲突

$3

- 确保建筑蓝图支持分解功能
- 检查 BuildingID 是否正确
- 确保建筑模型的楼层数据已正确配置
- 检查展开参数是否在合理范围内

$3

- 确保灰度图 URL 可访问且格式正确
- 检查 MeshSize 和 MeshSegment 参数设置是否合理
- 调整 Opacity 和 EmissiveStrength 参数以获得更好的视觉效果
- 确保热力图的位置和缩放设置正确

9. 底层 API 参考

本 GIS SDK 是对底层 UERPC 功能的封装，旨在为开发者提供更便捷、更友好的调用接口。

$3

如果您需要了解更多底层功能或希望构建更灵活的架构，可以参考完整的 UERPC 文档：

UERPC 前端 API 使用指南

$3

GIS SDK 的所有接口调用均基于 UERPC 文档中提供的功能进行封装。这些封装旨在简化开发流程，提供更直观的 API 设计和更强大的类型支持。

如果您对当前架构不满意，或需要实现更复杂的功能，可以直接基于README_UERPC.md`文档中提供的 UERPC 核心功能进行自定义封装，以满足您的特定需求。

$3

- 便捷性：GIS SDK 将复杂的 UERPC 调用封装为简单的对象方法
- 类型安全：提供完整的 TypeScript 类型定义，减少开发错误
- 架构优化：采用面向对象的设计，使代码更易于维护和扩展
- 灵活性：保留了 UERPC 的核心功能，同时提供了更高级的抽象

无论您选择使用 GIS SDK 的封装接口还是直接使用 UERPC 原生 API，都可以实现与 Unreal Engine 的高效通信和交互。

10. 更新日志

$3

- 初始版本发布
- 支持地图管理
- 支持静态网格体和蓝图对象管理
- 支持相机控制
- 支持屏幕拾取
- 新增天气系统
- 新增散点图功能
- 新增测量工具
- 新增视觉虚化功能
- 新增建筑分解功能
- 新增动画系统（骨骼动画和关键帧动画）
- 新增热力图功能
- 新增电子围栏功能

$3

- 已知 Bugfix
- README 文档更新

$3

- 新增例子