hj-gis-sdk 1.0.0 → 1.0.2

package/package.json

@@ -1,12 +1,24 @@
 {
   "name": "hj-gis-sdk",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/sdk.js",
   "module": "dist/sdk.esm.js",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/hj-gis-sdk/index.d.ts",
   "files": [
     "dist",
-    "types"
+    "dev-dist",
+    "src",
+    "hj-gis-sdk",
+    "types",
+    "rollup.config.js",
+    "rollup.config.dev.js",
+    "package.json",
+    "tsconfig.json",
+    "package-lock.json",
+    "yarn.lock",
+    "README.md",
+    "README_UERPC.md",
+    "index.html"
   ],
   "scripts": {
     "build": "npm run clean && rollup -c",
@@ -21,7 +33,8 @@
   "keywords": [
     "gis",
     "typescript",
-    "sdk"
+    "sdk",
+    "hj-gis-sdk"
   ],
   "author": "",
   "license": "MIT",

package/rollup.config.dev.js

@@ -0,0 +1,107 @@
+import { defineConfig } from 'rollup'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import alias from '@rollup/plugin-alias'
+import serve from 'rollup-plugin-serve'
+import livereload from 'rollup-plugin-livereload'
+import { mkdirSync, rmSync } from 'fs'
+
+// 自定义清理插件，确保在每次构建前完全清理输出目录
+const clearDevDist = {
+  name: 'clear-dev-dist',
+  buildStart() {
+    console.log('清理旧的dev-dist目录...')
+    // 清理旧的dev-dist目录
+    rmSync('dev-dist', { recursive: true, force: true })
+    // 确保输出目录存在
+    mkdirSync('dev-dist', { recursive: true })
+    mkdirSync('dev-dist/types', { recursive: true })
+    console.log('dev-dist目录清理完成')
+  }
+}
+
+export default defineConfig({
+  // 输入配置 - 包含lib和src
+  input: {
+    index: 'hj-gis-sdk/index.ts',
+    src: 'src/index.ts',
+    fence: 'src/fence.ts',
+    heatmap: 'src/heatmap.ts',
+    scatter: 'src/scatter.ts',
+    building: 'src/building.ts',
+    weather: 'src/weather.ts',
+    measurement: 'src/measurement.ts',
+    ghost: 'src/ghost.ts',
+    animation: 'src/animation.ts',
+    keyframe: 'src/keyframe.ts'
+  },
+  // Watch配置 - 监视lib和src目录下的所有文件
+  watch: {
+    include: ['hj-gis-sdk/**/*.ts', 'src/**/*.ts'],
+    exclude: ['node_modules/**', 'dev-dist/**']
+  },
+  // 开发模式下启用更详细的错误信息
+  onwarn: (warning, warn) => {
+    // 忽略特定警告
+    if (warning.code === 'CIRCULAR_DEPENDENCY') return
+    warn(warning)
+  },
+  output: [
+    // CommonJS 格式
+    {
+      dir: 'dev-dist',
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named',
+      entryFileNames: '[name].js',
+      chunkFileNames: '[name].js' // 确保chunk文件名也不包含哈希值
+    },
+    // ES Module 格式
+    {
+      dir: 'dev-dist',
+      format: 'esm',
+      sourcemap: true,
+      entryFileNames: '[name].esm.js',
+      chunkFileNames: '[name].esm.js' // 确保chunk文件名也不包含哈希值
+    }
+  ],
+  plugins: [
+    // 清理输出目录插件
+    clearDevDist,
+    // 别名配置
+    alias({
+      entries: [{ find: 'hj-gis-sdk', replacement: './hj-gis-sdk/index.ts' }]
+    }),
+    // Node.js模块解析
+    nodeResolve({
+      extensions: ['.ts', '.js'],
+      preferBuiltins: false
+    }),
+    // CommonJS转换
+    commonjs(),
+    // TypeScript编译
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      declarationDir: 'dev-dist/types',
+      sourceMap: true,
+      inlineSources: true,
+      removeComments: false
+    }),
+    // 开发服务器配置
+    serve({
+      contentBase: '.',
+      port: 3000,
+      open: true,
+      verbose: true
+    }),
+    // 热重载配置 - 监视lib、src和dist目录
+    livereload({
+      watch: ['hj-gis-sdk', 'src', 'dev-dist'],
+      delay: 300
+    })
+  ],
+  external: []
+})
+

package/rollup.config.js

@@ -0,0 +1,52 @@
+import { defineConfig } from 'rollup'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import terser from '@rollup/plugin-terser'
+import { mkdirSync } from 'fs'
+
+// 确保输出目录存在
+mkdirSync('dist', { recursive: true })
+mkdirSync('dist/types', { recursive: true })
+
+export default defineConfig({
+  input: 'hj-gis-sdk/index.ts',
+  output: [
+    // CommonJS 格式
+    {
+      file: 'dist/sdk.js',
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named'
+    },
+    // ES Module 格式
+    {
+      file: 'dist/sdk.esm.js',
+      format: 'esm',
+      sourcemap: true
+    },
+    // UMD 格式 (适用于浏览器直接使用)
+    {
+      file: 'dist/sdk.umd.js',
+      format: 'umd',
+      name: 'HJGISSDK',
+      sourcemap: true,
+      exports: 'named',
+      plugins: [terser()]
+    }
+  ],
+  plugins: [
+    nodeResolve({
+      extensions: ['.ts', '.js']
+    }),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      declarationDir: 'dist/types',
+      sourceMap: true,
+      inlineSources: true
+    })
+  ],
+  external: ['@epicgames-ps/lib-pixelstreamingfrontend-ue5.5']
+})

package/src/animation.ts

@@ -0,0 +1,175 @@
+import { Addons } from 'hj-gis-sdk'
+
+/// 动画效果示例
+
+import { PerspectiveCamera } from 'hj-gis-sdk/addons/camera'
+import { initializeApp } from './common'
+
+import GUI from 'lil-gui'
+import { Logger, LogLevel } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5'
+
+Logger.InitLogging(LogLevel.Info, false)
+const { UERPCNode, Animation } = Addons
+
+let world: InstanceType<typeof Addons.World>
+let camera: InstanceType<typeof PerspectiveCamera>
+
+let skeletalNode: InstanceType<typeof UERPCNode> | null = null
+let animationMixer: InstanceType<typeof Animation.AnimationMixer> | null = null
+
+async function _initializeApp() {
+  // const url = `ws://120.27.198.158:9001/player`
+  const url = `wss://kdyjs-proxy.metamaker.cn/proxy_gis_sdk`
+  const AppElement = document.querySelector('#ue')! as HTMLElement
+  let result = await initializeApp(url, AppElement)
+  world = result.world
+  camera = result.camera
+  animationMixer = new Animation.AnimationMixer(world.rpc)
+
+  // 可以在此处加载动画相关的蓝图对象
+  skeletalNode = await world.spawnSkeletalMesh({
+    assetPath: '/Game/Mesh/Human/Jog_In_Circle.Jog_In_Circle'
+  })
+
+  // 模型太大， 调整到适合的大小
+  skeletalNode.transform.scale.set(0.3, 0.3, 0.3)
+
+  camera.transform.position.x = -180
+  camera.transform.position.z = 5
+}
+
+// 判断 window 是否初始化完成
+if (document.readyState === 'loading') {
+  // 文档正在加载，等待DOMContentLoaded事件
+  document.addEventListener('DOMContentLoaded', _initializeApp)
+} else {
+  // 文档已经加载完成，直接初始化应用
+  _initializeApp()
+}
+
+// 动画控制配置
+const animationConfig = {
+  speed: 1.0,
+  loop: true,
+  playing: false
+}
+
+// 动画列表（示例）
+const animationList = {
+  跑步动画: '/Game/Mesh/Human/Jog_In_Circle_Anim.Jog_In_Circle_Anim'
+}
+
+const selectedAnimation = {
+  current: ''
+}
+
+// 创建GUI控制面板
+const gui = new GUI()
+
+let animateAction: InstanceType<typeof Animation.AnimationAction> | undefined
+let animateClip: InstanceType<typeof Animation.PresetAnimateClip>
+// 添加动画选择下拉菜单
+const animationFolder = gui.addFolder('动画控制')
+animationFolder
+  .add(selectedAnimation, 'current', animationList)
+  .name('选择动画')
+  .onChange(async (value: string) => {
+    animateClip = new Animation.PresetAnimateClip(value)
+
+    animateAction = animationMixer!.clipAction(animateClip, skeletalNode!)
+  })
+
+// 添加动画播放控制
+// 保存按钮引用
+let playButton: any, pauseButton: any
+
+const animationControls = {
+  play: async () => {
+    if (!animateAction) {
+      return
+    }
+    if (animationConfig.loop) {
+      animateAction.type = 'loop'
+    } else {
+      animateAction.type = 'once'
+    }
+    animateAction.rate = animationConfig.speed
+    animateAction.play()
+    animationConfig.playing = true
+    // 更新按钮状态
+    updateButtonStates()
+  },
+  pause: async () => {
+    if (!animateAction) {
+      alert('动画未准备好')
+      return
+    }
+    animateAction.pause()
+    animationConfig.playing = false
+    // 更新按钮状态
+    updateButtonStates()
+  },
+  stop: async () => {
+    if (!animateAction) {
+      alert('动画未准备好')
+      return
+    }
+    // animateAction.stop()
+    animationConfig.playing = false
+    // 更新按钮状态
+    updateButtonStates()
+  }
+}
+
+// 创建按钮并保存引用
+playButton = animationFolder
+  .add(animationControls, 'play')
+  .name('播放')
+  .disable(animationConfig.playing)
+
+pauseButton = animationFolder
+  .add(animationControls, 'pause')
+  .name('暂停')
+  .enable(animationConfig.playing)
+
+// 添加停止按钮
+const stopButton = animationFolder
+  .add(animationControls, 'stop')
+  .name('停止')
+
+// 更新按钮状态的函数
+function updateButtonStates() {
+  if (playButton) {
+    if (animationConfig.playing) {
+      playButton.disable()
+      pauseButton.enable()
+    } else {
+      playButton.enable()
+      pauseButton.disable()
+    }
+  }
+}
+
+// 添加动画参数控制
+animationFolder
+  .add(animationConfig, 'speed', 0.1, 3.0, 0.1)
+  .name('动画速度')
+  .onChange(async (value: number) => {
+    console.log('设置动画速度:', value)
+    // await world.tools.animation.setSpeed(value)
+    // animateAction?.rate = value
+    if (!animateAction) {
+      alert('请先选择动画')
+      return
+    }
+  })
+
+animationFolder
+  .add(animationConfig, 'loop')
+  .name('循环播放')
+  .onChange(async (value: boolean) => {
+    console.log('设置循环播放:', value)
+  })
+
+// 打开默认的文件夹
+animationFolder.open()

package/src/building.ts

@@ -0,0 +1,114 @@
+import { Addons } from 'hj-gis-sdk'
+
+/// 建筑示例
+
+import { PerspectiveCamera } from 'hj-gis-sdk/addons/camera'
+import { initializeApp } from './common'
+
+import GUI from 'lil-gui'
+import { Logger, LogLevel } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5'
+
+Logger.InitLogging(LogLevel.Info, false)
+const { UERPCNode } = Addons
+
+let world: InstanceType<typeof Addons.World>
+let camera: InstanceType<typeof PerspectiveCamera>
+
+let bluePrintNode: InstanceType<typeof UERPCNode>
+
+async function _initializeApp() {
+  // const url = `ws://120.27.198.158:9001/player`
+  const url = `wss://kdyjs-proxy.metamaker.cn/proxy_gis_sdk`
+  const AppElement = document.querySelector('#ue')! as HTMLElement
+  let result = await initializeApp(url, AppElement)
+  world = result.world
+  camera = result.camera
+
+  // 设置相机位置
+  camera!.transform.position.z = 10
+  camera!.transform.position.x = -80
+  camera!.transform.position.y = 0
+
+  // 确保加载了正确的蓝图对象
+  let louNode = await world.spawnLocalBlueprintActor({
+    assetPath: '/Game/Mesh/Lou/Lou.Lou'
+  })
+  bluePrintNode = louNode
+}
+
+// 判断 window 是否初始化完成
+if (document.readyState === 'loading') {
+  // 文档正在加载，等待DOMContentLoaded事件
+  document.addEventListener('DOMContentLoaded', _initializeApp)
+} else {
+  // 文档已经加载完成，直接初始化应用
+  _initializeApp()
+}
+
+// 建筑处理器类型
+let handler: Awaited<ReturnType<typeof world.tools.building.expand>>
+const gui = new GUI()
+
+// 生成建筑按钮
+gui
+  .add(
+    {
+      async building() {
+        // z
+
+        handler = await world.tools.building.expand(bluePrintNode.key!, {
+          spacing: 5,
+          duration: 1
+        })
+      }
+    },
+    'building'
+  )
+  .name('查看建筑物')
+
+gui
+  .add(
+    {
+      async expandFloor() {
+        if (!handler) {
+          alert('请先查看建筑物')
+          return
+        }
+
+        let _dir = camera.transform.position
+          .clone()
+          .subtract(bluePrintNode.transform.position)
+          .normalize()
+
+        let distance = bluePrintNode.transform.position.distanceTo(
+          camera.transform.position
+        )
+
+        // 向相机的镜头靠近
+        handler.expandFloor({
+          floorIndex: 2,
+          direction: {
+            X: _dir.x,
+            Y: _dir.y,
+            Z: _dir.z
+          },
+          distance: distance / 3,
+          // expandHeight: 0,
+          duration: 1.2
+        })
+      }
+    },
+    'expandFloor'
+  )
+  .name('展开楼层')
+
+gui
+  .add(
+    {
+      collapse: () => {
+        handler.collapse()
+      }
+    },
+    'collapse'
+  )
+  .name('折叠建筑')

package/src/common.ts

@@ -0,0 +1,47 @@
+import {
+  Config,
+  Flags,
+  NumericParameters,
+  PixelStreaming
+} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.5'
+import { Addons } from 'hj-gis-sdk'
+const { World, PerspectiveCamera } = Addons
+export async function initializeApp(url: string, parentElement: HTMLElement) {
+  const config = new Config({
+    initialSettings: {
+      ss: url,
+      StreamerId: '',
+      AutoPlayVideo: true,
+      StartVideoMuted: true,
+      [Flags.HoveringMouseMode]: true,
+      [Flags.TouchInput]: true,
+      [Flags.FakeMouseWithTouches]: true
+
+      /// 这是一些处理网络质量的参数 降低视频质量以减少网络带宽消耗带来的卡顿问题
+      // [NumericParameters.WebRTCFPS]: 30, // 限制帧率为30fps
+      // [NumericParameters.WebRTCMinBitrate]: 500, // 设置最小比特率为500kbps
+      // [NumericParameters.WebRTCMaxBitrate]: 1000, // 设置最大比特率为2000kbps
+      // [NumericParameters.MinQuality]: 0.3, // 设置最小质量为0.3
+      // [NumericParameters.MaxQuality]: 0.6 // 设置最大质量为0.8
+    }
+  })
+  const stream = new PixelStreaming(config, {
+    videoElementParent: parentElement
+  })
+  stream.connect()
+  let { resolve, promise } = Promise.withResolvers()
+  stream.addEventListener('playStream', () => {
+    console.log('PlayStreamEvent')
+    resolve(null)
+  })
+  await promise
+  let world = new World(stream)
+  world.tools.matchView.excute()
+  let camera = new PerspectiveCamera(world.rpc)
+  camera.transform.position.set(0, 0, 0)
+
+  return {
+    world,
+    camera
+  }
+}

package/src/fence.ts

@@ -0,0 +1,131 @@
+/// 电子围栏
+
+import { PerspectiveCamera } from 'hj-gis-sdk/addons/camera'
+import { initializeApp } from './common'
+import { Addons } from 'hj-gis-sdk'
+import GUI from 'lil-gui'
+import { Logger, LogLevel } from '@epicgames-ps/lib-pixelstreamingcommon-ue5.5'
+const { World } = Addons
+
+Logger.InitLogging(LogLevel.Info, false)
+let world: InstanceType<typeof World>
+let camera: InstanceType<typeof PerspectiveCamera>
+async function _initializeApp() {
+  // const url = `ws://120.27.198.158:9001/player`
+  const url = `wss://kdyjs-proxy.metamaker.cn/proxy_gis_sdk`
+  const AppElement = document.querySelector('#ue')! as HTMLElement
+  let result = await initializeApp(url, AppElement)
+  world = result.world
+  camera = result.camera
+
+  // 加载地图 并 调整 camera 的站位
+  await world!.loadLevelByName('plgz')
+
+  camera!.transform.rotation.pitch = -24.621778868125325
+  camera!.transform.rotation.yaw = -105.8061416023954
+  camera!.transform.rotation.roll = -0.000008784850083129122
+  camera!.transform.position.set(
+    -237278.78546608693,
+    -3452.7198396154936,
+    18918.349286794506
+  )
+}
+
+// 判断 window 是否初始化完成
+if (document.readyState === 'loading') {
+  // 文档正在加载，等待DOMContentLoaded事件
+  document.addEventListener('DOMContentLoaded', _initializeApp)
+} else {
+  // 文档已经加载完成，直接初始化应用
+  _initializeApp()
+}
+
+let handler: Awaited<ReturnType<typeof world.tools.fence.create>> | undefined
+const gui = new GUI()
+
+async function createFence() {
+  if (pickPoint.length < 4) {
+    Logger.Error(`请先点选电子围栏坐标 必须大于 4 个点'`)
+    alert('请先点选电子围栏坐标 必须大于 4 个点')
+    return
+  }
+  if (handler) {
+    await handler.remove()
+    handler = undefined
+  }
+
+  handler = await world.tools.fence.create({
+    vectorArray: pickPoint,
+    height: fenceConfig.height,
+    color: fenceConfig.color
+  })
+}
+
+// GUI 配置参数
+const fenceConfig = {
+  height: 2000, // 默认高度
+  color: {
+    R: 0,
+    G: 0,
+    B: 255,
+    A: 255
+  }
+}
+
+// 默认的数据
+let pickPoint = [
+  { X: -246221.0796922246, Y: -32072.524457131625, Z: 1745.0013945392457 },
+  { X: -243099.5648544035, Y: -21702.59371692306, Z: 1744.9990816078753 },
+  { X: -239620.4587922823, Y: -23366.489133662646, Z: 1745.0001235060408 },
+  { X: -241704.08632315777, Y: -33198.77387552471, Z: 1745.000323218097 }
+]
+
+// 添加高度控制
+gui.add(fenceConfig, 'height', 0, 50000, 1).name('围栏高度')
+
+// 添加颜色控制
+const colorFolder = gui.addFolder('围栏颜色')
+colorFolder.add(fenceConfig.color, 'R', 0, 255, 1).name('红色')
+colorFolder.add(fenceConfig.color, 'G', 0, 255, 1).name('绿色')
+colorFolder.add(fenceConfig.color, 'B', 0, 255, 1).name('蓝色')
+colorFolder.add(fenceConfig.color, 'A', 0, 255, 1).name('透明度')
+colorFolder.open()
+
+gui
+  .add(
+    {
+      // 通过点选坐标，自定义生成围栏
+      pick: async () => {
+        pickPoint.length = 0
+        world.tools.pickCast.pick(
+          (data) => {
+            pickPoint.push(data.World)
+          },
+          1_000_000,
+          true
+        )
+      }
+    },
+    'pick'
+  )
+  .name('点选电子围栏坐标')
+
+gui
+  .add(
+    {
+      fence: createFence
+    },
+    'fence'
+  )
+  .name('生成电子围栏')
+
+gui
+  .add(
+    {
+      destroy() {
+        handler && handler.remove()
+      }
+    },
+    'destroy'
+  )
+  .name('销毁电子围栏')