npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

hj-gis-sdk

v1.0.8

Published

A TypeScript GIS SDK for third-party use

Readme

GIS SDK 文档

1. 简介

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

1.1 主要特性

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

2. 安装

2.1 依赖项

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

2.2 安装 SDK

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

2.3 引入 SDK

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

3. 核心概念

3.1 UERPCNode

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

3.2 World

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

3.3 Camera

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

3.4 Transform

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

3.5 UERPC

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

4. 快速开始

4.1 初始化应用

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))

4.2 基本使用流程

  1. 创建 HTML 容器
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GIS SDK - 示例</title>
    <style>
      .ue-wrap {
        position: fixed;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body style="margin: 0">
    <div class="ue-wrap">
      <div id="ue"></div>
    </div>

    <!-- 引入SDK -->
    <script type="module">
      // 导入初始化代码
      import './src/common.js'
    </script>
  </body>
</html>
  1. 使用模块化功能
// 导入需要的模块
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 参考。

5.1 核心类

5.1.1 World 类

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

属性

  • root:场景根节点,类型为 UERPCNode
  • rpc:RPC 通信实例,类型为 UERPC
  • tools:工具集合,包含各种场景工具
    • ghost:视觉虚化工具
    • weather:天气系统工具
    • matchView:视图匹配工具
    • pickCast:屏幕拾取工具
    • scatter:散点图工具
    • heatMap:热力图工具
    • fence:电子围栏工具
    • 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 格式

5.2 工具类

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 }> }):创建散点

5.2.5 HeatMapTool 类

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

方法

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

5.2.6 FenceTool 类

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

方法

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

5.2.7 BuildingTool 类

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

方法

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

5.2.8 MeasurementTool 类

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

方法

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

5.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. 详细使用示例

6.1 地图管理

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

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

// 销毁地图
map.remove()

6.2 静态网格体管理

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

// 生成静态网格体
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)

6.3 蓝图对象管理

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

// 生成本地蓝图对象
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 }
  }
})

6.4 相机控制

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

// 设置相机位置
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()

6.5 屏幕拾取

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

// 设置屏幕拾取回调(鼠标悬停)
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 在线地址

6.6 视觉虚化

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

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

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

6.6 在线地址

6.7 建筑分解

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

// 加载建筑蓝图
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 在线地址

6.8 动画系统

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

// 加载骨骼网格体
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 帧动画在线地址

6.9 热力图

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

// 创建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 在线地址

6.10 电子围栏

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

// 创建电子围栏
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 在线地址

6.11 天气系统

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

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

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

6.11 在线地址

6.12 散点图

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

// 创建散点
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 在线地址

6.13 测量工具

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

// 开始路径测量
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 部分):

7.1 初始化应用

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<typeof World> | undefined = undefined
let camera: InstanceType<typeof PerspectiveCamera> | undefined = undefined
let blueprint: InstanceType<typeof UERPCNode> | undefined = undefined
let staticmesh: InstanceType<typeof UERPCNode> | undefined = undefined
let map: InstanceType<typeof UERPCNode> | 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)
}

7.2 地图加载与销毁

// 加载地图
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()
}

7.3 蓝图对象加载与销毁

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

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

7.4 静态网格体加载与销毁

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

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

7.5 相机参数控制

// 设置相机位置
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
  }
}

7.6 静态网格体参数控制

// 设置静态网格体位置
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
  }
}

7.7 屏幕拾取功能

let hoverHandle: any

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

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

7.8 应用初始化

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

8. 常见问题

8.1 连接失败

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

8.2 对象不显示

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

8.3 动画不播放

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

8.4 建筑分解失败

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

8.5 热力图显示异常

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

9. 底层 API 参考

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

9.1 UERPC 文档链接

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

UERPC 前端 API 使用指南

9.2 关于封装说明

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

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

9.3 封装与原生 API 的关系

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

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

10. 更新日志

1.0.0

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

1.0.1

  • 已知 Bugfix
  • README 文档更新

1.0.3

  • 新增例子