Renderer SDK

Admin Renderer

使用 SeatmapAdminRenderer SDK 构建内部场地管理工具，通过区域选择模式、拖动框选和辅助键管理选择集合。获取完整区域选择回调及座位数量，展开单个区域的平面视图，按网格选择座位块，并配置或禁用键盘快捷键，让管理人员在后台界面中高效检查和操作场地布局。

初始化 SDK

安装并初始化 Seatmap.pro Booking Renderer SDK，在售票页面创建具有明确尺寸的容器，使用组织公共 API 密钥加载活动，并将选座和取消选座回调连接到购物车及后端。参考 npm、yarn、pnpm 和 TypeScript 示例，验证价格分配与跨域配置，处理容器不可见或座位未显示等问题。

区域点击行为

了解 Seatmap.pro Booking Renderer 在总览时如何处理区域点击：触发 onSectionClick 回调，而不自动缩放或平移。查看此行为与 interactionZoomStrategy 的关系，在放大后恢复正常区域缩放，或在回调中主动调用 zoomToSection，控制提示和缩放流程。

区域状态与样式

在 Seatmap.pro Booking Renderer 中控制区域轮廓的高亮、选中、不可用和过滤状态，通过 svgSectionStyles 配置颜色、描边、透明度与光标。使用 API 禁用、启用和筛选区域，监听状态变化，按轮廓来源覆盖样式，并参考旧方法迁移、状态组合和动画显示设置，构建一致的区域交互。

受限 GPU 模式

为 GPU 内存受限的设备配置 Seatmap Renderer，了解自动性能分级如何根据像素密度、触控指针及纹理上传测试选择渲染策略。比较高性能与受限模式的画布上限、细节切片和预览背景行为，设置 gpuTier 覆盖自动判断，并通过调试日志和真实设备验证有切片及仅预览的座位图。

预订组件品牌标识

了解 Seatmap.pro 预订组件如何根据公共密钥所属组织的套餐显示品牌徽标或暂停遮罩，配置徽标位置以配合小地图，并自定义暂停提示文字。查看 WebGL 与 Canvas2D 的一致行为、组织解析失败时的处理方式，以及授权自托管部署通过环境变量或 Helm 配置关闭品牌标识的方法。

自定义座位状态（Renderer SDK）

使用 setSeatsState 和 theme.seatStyles 为 Seatmap.pro 座位添加自定义视觉状态，组合票价颜色、图标、座位编号和动画。了解状态分配、样式类型、DOM 覆盖层与交互阻止规则，参考完整示例，并掌握加载时机、清除方式、详细区域视图限制及大量可见状态座位的性能影响。

座位状态与保留类型

了解 Seatmap.pro 的双层座位状态模型，区分控制可用性和并发的生命周期状态，以及描述业务原因的 holdType。配置组织或租户保留类型，查看默认值、释放策略和继承规则，使用 Booking API 锁定与释放座位，并结合审计记录和 Renderer 自定义样式展示业务状态，注意自动到期释放的当前限制。