JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17
  • Score
    100M100P100Q78849F
  • License MIT

AirCity 云渲染 API 封装库 - 简化三维场景开发

Package Exports

  • stxcloudutil

Readme

STX Helper

AirCity 云渲染 API 封装库 - 简化三维场景开发

特性

  • 🎯 简化 API - 只需 id 即可创建 marker，内置默认参数
  • 🔗 链式调用 - 流畅的 API 设计，支持链式操作
  • 📦 实例管理 - 自动追踪所有创建的实体，方便批量操作
  • 🎣 API 劫持 - 原生 API 调用也会被自动管理
  • 📘 TypeScript - 完整的类型定义支持
  • 🌳 Tree-shaking - 模块化设计，支持按需导入
  • 🚫 零依赖 - 不依赖第三方库，兼容性好

安装

npm install stxhelper

快速开始

ESM 模块

import { createCloudAPI } from 'stxhelper';

const cloud = createCloudAPI(__g);

// 创建一个 marker
cloud.marker
  .create('marker-1')
  .setText('我的标记')
  .setCoordinate([100, 200, 50])
  .setFontColor('RGB(255,0,0)')
  .show();

// 创建多边形
cloud.polygon
  .create('area-1')
  .setCoordinates([
    [100, 100, 0],
    [200, 100, 0],
    [200, 200, 0],
    [100, 200, 0],
  ])
  .setColor('RGBA(255,0,0,0.5)')
  .setHeight(100);

CommonJS

const { createCloudAPI } = require('stxhelper');

const cloud = createCloudAPI(__g);
// ... 使用方式相同

核心概念

1. 管理器模式

每个实体类型都有一个对应的管理器：

  • cloud.marker - Marker 管理器
  • cloud.polygon - 多边形管理器
  • cloud.polyline - 折线管理器
  • cloud.polygon3d - 3D 多边形管理器
  • cloud.beam - 光流管理器
  • cloud.radiationPoint - 辐射圈管理器

2. 实例化操作

创建实体后会返回实例，支持链式调用：

const marker = cloud.marker.create('id');

marker
  .setText('文本')
  .setCoordinate([x, y, z])
  .setColor('RGB(255,0,0)')
  .show()
  .focus(500, 2); // 相机聚焦

3. 原生 API 劫持

默认情况下，原生 API 调用也会被自动管理：

// 创建 CloudAPI 时默认开启劫持
const cloud = createCloudAPI(__g);

// 直接调用原生 API
__g.marker.add({ id: 'native', coordinate: [100, 100, 10] });

// 也能通过管理器获取
const marker = cloud.marker.get('native');

支持的实体类型

Marker（标记点）

cloud.marker.create('m1', {
  text: '标记文本',
  coordinate: [100, 200, 50],
  imagePath: '/icon.png',
});

Polygon（多边形）

cloud.polygon.create('p1', {
  coordinates: [[0,0,0], [100,0,0], [100,100,0], [0,100,0]],
  color: 'RGBA(255,0,0,0.5)',
  style: 3, // 渐变
});

Polyline（折线）

cloud.polyline.create('l1', {
  coordinates: [[0,0,0], [100,100,10], [200,200,20]],
  style: 2, // 流动线
  color: 'RGB(0,255,255)',
});

Polygon3D（3D 区域）

cloud.polygon3d.create('b1', {
  coordinates: [[0,0,0], [100,0,0], [100,100,0], [0,100,0]],
  height: 100,
  style: 9, // 单色
});

Beam（光流）

cloud.beam.create('b1', {
  coordinates: [[0,0,10], [100,100,20]],
  color: 'RGB(255,255,0)',
  velocity: 1.5,
});

RadiationPoint（辐射圈）

cloud.radiationPoint.create('r1', {
  coordinate: [100, 200, 0],
  radius: 200,
  color: 'RGB(255,0,0)',
});

API 参考

管理器通用方法

方法 说明
create(id, config?) 创建实体
get(id) 获取实体实例
has(id) 检查是否存在
delete(id) 删除实体
clear() 清空所有实体
getAllIds() 获取所有 ID
getAll() 获取所有实例
getByGroupId(groupId) 按分组获取

实例通用方法

方法 说明
setGroupId(id) 设置分组
setUserData(data) 设置用户数据
show() 显示
hide() 隐藏
focus(...) 相机聚焦
update() 更新参数
delete() 删除
getConfig() 获取配置

兼容性

  • Node.js >= 14.0.0
  • TypeScript >= 5.0.0
  • 浏览器支持 ES2020+

许可证

MIT License

作者

王杰