hj-gis-sdk 1.0.0 → 1.0.2

package/hj-gis-sdk/addons/world.ts

@@ -0,0 +1,173 @@
+/**
+ * 世界模块，提供世界场景的核心类
+ * 用于管理场景中的所有对象、天气和RPC通信
+ */
+
+import UERPCNode, { AssetType } from './node/ue-node'
+import UERPC from '../core/ue-rpc'
+import { PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5'
+import { Transform } from './transform'
+import Tools from './tools'
+
+/**
+ * 世界类，整个场景的根容器
+ * 管理场景中的所有对象、天气系统和RPC通信
+ */
+class World {
+  /** 场景根节点 */
+  root: UERPCNode
+  /** RPC通信实例 */
+  private _rpc: UERPC
+  tools: {
+    ghost: InstanceType<typeof Tools.GhostTool>
+    weather: InstanceType<typeof Tools.WeatherTool>
+    matchView: InstanceType<typeof Tools.MatchViewTool>
+    pickCast: InstanceType<typeof Tools.PickCastTool>
+    scatter: InstanceType<typeof Tools.ScatterTool>
+    heatMap: InstanceType<typeof Tools.HeatMapTool>
+    fence: InstanceType<typeof Tools.FenceTool>
+    building: InstanceType<typeof Tools.BuildingTool>
+    measurement: InstanceType<typeof Tools.MeasurementTool>
+    daytime: InstanceType<typeof Tools.DaytimeTool>
+  }
+  /**
+   * 构造函数
+   * @param pixelStream PixelStream实例，用于与远程渲染引擎通信
+   */
+  constructor(pixelStream: PixelStreaming) {
+    this._rpc = new UERPC(pixelStream)
+    this.root = new UERPCNode(this._rpc)
+    this.root.world = this
+    this.tools = {
+      ghost: new Tools.GhostTool(this._rpc),
+      weather: new Tools.WeatherTool(this._rpc),
+      matchView: new Tools.MatchViewTool(this._rpc),
+      pickCast: new Tools.PickCastTool(this._rpc),
+      scatter: new Tools.ScatterTool(this._rpc),
+      heatMap: new Tools.HeatMapTool(this._rpc, this),
+      fence: new Tools.FenceTool(this._rpc),
+      building: new Tools.BuildingTool(this._rpc),
+      measurement: new Tools.MeasurementTool(this._rpc),
+      daytime: new Tools.DaytimeTool(this._rpc)
+    }
+  }
+
+  /**
+   * 获取RPC通信实例
+   */
+  get rpc() {
+    return this._rpc
+  }
+
+  /**
+   * 加载关卡
+   * @param params 加载关卡的参数
+   * @returns 加载成功后返回关卡节点
+   */
+  async loadLevelByName(assetPath: string) {
+    let response = await this._rpc.loadLevelByName(assetPath)
+    // let response = await this._rpc.callModule('Mesh', 'Spawn', {
+    //   AssetPath: assetPath,
+    //   Transform: Transform.default().toRPCJSON()
+    // })
+    let handle = response.Handle || 'map'
+    let node = new UERPCNode(this._rpc, handle, { assetType: AssetType.Map })
+    node.data = { assetType: AssetType.Map }
+    this.root.add(node)
+    return node
+  }
+
+  /**
+   * 生成含有骨骼动画的Mesh
+   */
+  async spawnSkeletalMesh(params: {
+    assetPath: string
+    transform?: Transform
+    tag?: string | undefined
+  }) {
+    let _transform = params.transform || Transform.default()
+    let response = await this._rpc.callModule('Mesh', 'Spawn', {
+      Type: 'SkeletalMesh',
+      AssetPath: params.assetPath,
+      Transform: _transform.toRPCJSON(),
+      Tag: params.tag
+    })
+    let handle = response.Handle
+    let node = new UERPCNode(
+      this._rpc,
+      handle,
+      {
+        assetType: AssetType.SkeletalMesh
+      },
+      _transform
+    )
+    this.root.add(node)
+    return node
+  }
+
+  /**
+   * 生成静态网格体演员
+   * @param params 生成静态网格体的参数
+   * @returns 生成成功后返回演员节点
+   */
+  async spawnStaticMeshActor(params: {
+    assetPath: string
+    transform?: Transform
+    tag?: string | undefined
+  }) {
+    let _transform = params.transform || Transform.default()
+    let response = await this._rpc.callModule('Mesh', 'Spawn', {
+      Type: 'StaticMesh',
+      AssetPath: params.assetPath,
+      Transform: _transform.toRPCJSON(),
+      Tag: params.tag
+    })
+    let handle = response.Handle
+    let node = new UERPCNode(
+      this._rpc,
+      handle,
+      {
+        assetType: AssetType.StaticMesh
+      },
+      _transform
+    )
+    this.root.add(node)
+    return node
+  }
+
+  /**
+   * 生成本地蓝图演员
+   * @param params 生成本地蓝图的参数
+   * @returns 生成成功后返回演员节点
+   */
+  async spawnLocalBlueprintActor(params: {
+    assetPath: string
+    transform?: Transform
+    tag?: string | undefined
+  }) {
+    let _transform = params.transform || Transform.default()
+    let response = await this._rpc.callModule('Mesh', 'Spawn', {
+      Type: 'Blueprint',
+      AssetPath: params.assetPath,
+      Transform: _transform.toRPCJSON(),
+      Tag: params.tag
+    })
+    // let response = await this._rpc.spawnLocalBlueprintActor({
+    //   AssetPath: params.assetPath,
+    //   Transform: _transform.toRPCJSON(),
+    //   Tag: params.tag
+    // })
+    let handle = response.Handle
+    let node = new UERPCNode(
+      this._rpc,
+      handle,
+      {
+        assetType: AssetType.Blueprint
+      },
+      _transform
+    )
+    this.root.add(node)
+    return node
+  }
+}
+export default World

package/hj-gis-sdk/core/ue-rpc.ts

@@ -0,0 +1,234 @@
+import {
+  Logger,
+  PixelStreaming
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5'
+
+export type RpcPayload = Record<string, any>
+
+/**
+ * UERPC wraps RPC-style interactions over Pixel Streaming's DataChannel.
+ * It mirrors the Web/script.js behavior: sends {Type:'RPC_CALL', Command, ReqId, ...payload}
+ * and expects UE to reply with {Type:'RPC_RESPONSE', ReqId, Status, Data|Message} via EmitJSEvent.
+ */
+export class UERPC {
+  private stream: PixelStreaming
+  private responseEventName: string
+  private pendingRequests: Map<
+    string,
+    { resolve: (data: any) => void; reject: (err: any) => void; timer: number }
+  >
+  timeoutMs: number
+  constructor(stream: PixelStreaming, responseEventName = 'handle_responses') {
+    this.stream = stream
+    this.responseEventName = responseEventName
+    this.pendingRequests = new Map()
+    this.timeoutMs = 30000
+    try {
+      this.stream.addResponseEventListener(
+        this.responseEventName,
+        this.handleResponse.bind(this)
+      )
+    } catch (e) {
+      // If the stream is not ready yet, user can call bind later.
+    }
+  }
+
+  getStream() {
+    return this.stream
+  }
+  /**
+   * Bind the response listener explicitly if constructor binding failed or the stream changed.
+   */
+  bind(stream: PixelStreaming, responseEventName = this.responseEventName) {
+    this.stream = stream
+    this.responseEventName = responseEventName
+    this.stream.addResponseEventListener(
+      this.responseEventName,
+      this.handleResponse.bind(this)
+    )
+  }
+
+  emitCommand(playload: { Command: string; [key: string]: any }) {
+    this.stream.emitCommand(playload)
+  }
+
+  /**
+   * Generic RPC call. Resolves when UE replies with matching ReqId.
+   */
+  call(
+    command: string,
+    payload: RpcPayload = {},
+    timeoutMs?: number
+  ): Promise<any> {
+    const reqId = this.generateUUID()
+    const message = {
+      Type: 'RPC_CALL',
+      Command: command,
+      ReqId: reqId,
+      ...payload
+    }
+
+    return new Promise((resolve, reject) => {
+      const timer = window.setTimeout(() => {
+        if (this.pendingRequests.has(reqId)) {
+          this.pendingRequests.delete(reqId)
+          reject(new Error(`UE RPC Timeout: ${command}`))
+        }
+      }, timeoutMs || this.timeoutMs)
+
+      this.pendingRequests.set(reqId, { resolve, reject, timer })
+
+      try {
+        this.stream.emitUIInteraction(message)
+      } catch (e) {
+        window.clearTimeout(timer)
+        this.pendingRequests.delete(reqId)
+        reject(e)
+      }
+    })
+  }
+
+  /**
+   * Handle UE responses. Accepts stringified or object payloads.
+   */
+  handleResponse(raw: any) {
+    let json = raw
+    try {
+      if (typeof raw === 'string') {
+        json = JSON.parse(raw)
+      }
+    } catch {
+      return
+    }
+
+    if (!json || json.Type !== 'RPC_RESPONSE') return
+    const reqId = json.ReqId
+    if (!reqId) return
+
+    const pending = this.pendingRequests.get(reqId)
+    if (!pending) return
+
+    window.clearTimeout(pending.timer)
+    this.pendingRequests.delete(reqId)
+
+    const status = json.Status
+    if (status === 'success') {
+      pending.resolve(json.Data)
+    } else {
+      const msg = json.Message || 'Unknown UE Error'
+      pending.reject(new Error(msg))
+    }
+  }
+
+  callModule(
+    moduleName: string,
+    actionName: string,
+    params: RpcPayload = {},
+    timeoutMs = 30000
+  ): Promise<any> {
+    const reqId = this.generateUUID()
+    const message = {
+      Type: 'RPC_CALL',
+      ReqId: reqId,
+      ModuleName: moduleName,
+      ActionName: actionName,
+      Params: params
+    }
+    Logger.Info(JSON.stringify(message))
+    return new Promise((resolve, reject) => {
+      const timer = window.setTimeout(() => {
+        if (this.pendingRequests.has(reqId)) {
+          this.pendingRequests.delete(reqId)
+          reject(new Error(`UE Call Timeout: ${moduleName}/${actionName}`))
+        }
+      }, timeoutMs || this.timeoutMs)
+
+      this.pendingRequests.set(reqId, { resolve, reject, timer })
+
+      try {
+        this.stream.emitUIInteraction(message)
+      } catch (e) {
+        window.clearTimeout(timer)
+        this.pendingRequests.delete(reqId)
+        reject(e)
+      }
+    })
+  }
+
+  // ---- Convenience helpers for Web-supported commands ----
+
+  // Level management
+  loadLevelByName(levelName: string) {
+    return this.call('LoadLevelByName', { LevelName: levelName })
+  }
+  unLoadMap(levelName: string) {
+    return this.call('UnLoadMap', { LevelName: levelName })
+  }
+
+  // Actor management
+  spawnStaticMeshActor(params: {
+    AssetPath: string
+    Transform?: any
+    Tag?: string
+  }) {
+    return this.call('SpawnStaticMeshActor', params)
+  }
+  // Blueprint management
+  spawnLocalBlueprintActor(params: {
+    AssetPath: string
+    Transform?: any
+    Tag?: string
+  }) {
+    return this.call('SpawnLocalBlueprintActor', params)
+  }
+  setActorTransformByHandle(handle: string, transform: any) {
+    return this.call('SetActorTransformByHandle', {
+      Handle: handle,
+      Transform: transform
+    })
+  }
+  destroyActorByHandle(handle: string) {
+    return this.call('DestroyActorByHandle', { Handle: handle })
+  }
+
+  // Picking
+  pickPointByScreen(
+    x: number,
+    y: number,
+    maxDistance = 10000000,
+    highlight = false
+  ) {
+    return this.call('PickPointByScreen', {
+      Screen: {
+        X: x,
+        Y: y
+      },
+      MaxDistance: maxDistance,
+      Highlight: highlight
+    })
+  }
+
+  // Camera lens and transform
+  getCameraTransform() {
+    return this.call('GetCameraTransform', {})
+  }
+  setCameraTransform(transform: any) {
+    return this.call('SetCameraTransform', { Transform: transform })
+  }
+  setCameraResetTransform(transform: any) {
+    return this.call('SetCameraResetTransform', { Transform: transform })
+  }
+  resetCameraToSavedTransform() {
+    return this.call('ResetCameraToSavedTransform', {})
+  }
+
+  private generateUUID(): string {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0
+      const v = c === 'x' ? r : (r & 0x3) | 0x8
+      return v.toString(16)
+    })
+  }
+}
+
+export default UERPC

package/hj-gis-sdk/index.ts

@@ -0,0 +1,26 @@
+import { UERPC } from './core/ue-rpc'
+import World from './addons/world'
+import { Transform } from './addons/transform'
+import { PerspectiveCamera } from './addons/camera'
+import UERPCNode from './addons/node/ue-node'
+import { Clock } from './addons/clock'
+import { WeatherType } from './addons/tools/weather'
+import { MeasurementType } from './addons/tools/measurement'
+import * as Animation from './addons/animation'
+const Core = {
+  UERPC
+}
+
+const Addons = {
+  World,
+  Transform,
+  PerspectiveCamera,
+  UERPCNode,
+  WeatherType,
+  MeasurementType,
+  Animation: {
+    ...Animation
+  }
+}
+
+export { Core, Addons }

package/hj-gis-sdk/utils.ts

@@ -0,0 +1,52 @@
+/**
+ * 防抖函数 - 延迟执行函数，直到停止调用一段时间后才执行
+ * @param func 要执行的函数
+ * @param wait 等待时间（毫秒）
+ * @param immediate 是否立即执行
+ * @returns 防抖处理后的函数
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number,
+  immediate: boolean = false
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null
+
+  return function (this: any, ...args: Parameters<T>) {
+    const context = this
+
+    const later = () => {
+      timeout = null
+      if (!immediate) func.apply(context, args)
+    }
+
+    const callNow = immediate && !timeout
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+
+    if (callNow) func.apply(context, args)
+  }
+}
+
+/**
+ * 节流函数 - 限制函数在一定时间内只能执行一次
+ * @param func 要执行的函数
+ * @param limit 时间限制（毫秒）
+ * @returns 节流处理后的函数
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean = false
+
+  return function (this: any, ...args: Parameters<T>) {
+    const context = this
+
+    if (!inThrottle) {
+      func.apply(context, args)
+      inThrottle = true
+      setTimeout(() => (inThrottle = false), limit)
+    }
+  }
+}

package/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GIS SDK 示例目录</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      h1 {
+        color: #333;
+      }
+      ul {
+        list-style-type: none;
+        padding: 0;
+      }
+      li {
+        margin: 10px 0;
+      }
+      a {
+        color: #0000ee;
+        text-decoration: underline;
+      }
+      a:hover {
+        color: #0000aa;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>GIS SDK 示例目录</h1>
+    <ul>
+      <li><a href="./example/index.html">基础示例</a></li>
+      <li><a href="./example/fence.html">围栏示例</a></li>
+      <li><a href="./example/heatmap.html">热力图示例</a></li>
+      <li><a href="./example/scatter.html">散点图示例</a></li>
+      <li><a href="./example/building.html">建筑示例</a></li>
+      <li><a href="./example/weather.html">天气与时间示例</a></li>
+      <li><a href="./example/measurement.html">测量示例</a></li>
+      <li><a href="./example/ghost.html">虚化示例</a></li>
+      <li><a href="./example/animation.html">动画示例</a></li>
+      <li><a href="./example/keyframe-animation.html">关键帧动画示例</a></li>
+    </ul>
+  </body>
+</html>