krapano中polygon添加后不显示？

Question

在使用 krpano 添加 polygon 时，常出现多边形添加后不显示的问题。可能原因包括：未正确设置 `polygon` 的 `fillcolor` 或 `fillalpha` 导致视觉上不可见；未将 polygon 添加到正确的场景（scene）或 layer 中；坐标点 `point` 定义格式错误或数量不足（至少需3个点）；未启用 `distorted="true"` 或未正确关联 `ath/avt` 坐标导致位置偏移。此外，若使用了 `mapskin` 插件但未加载完成即添加 polygon，也会因容器未就绪而失效。检查控制台是否有 XML 解析错误，确保代码结构符合 krpano 语法规范。

Answer 1

一、krpano中Polygon不显示的常见现象与初步排查

在使用krpano添加polygon时，开发者常遇到多边形无法正常渲染的问题。最直观的表现是：XML配置已写入，但界面无任何视觉反馈。此时应首先检查以下基础要素：

• fillcolor 是否设置为合法颜色值（如 0xFF0000）；
• fillalpha 是否大于0（若为0则完全透明）；
• 是否至少定义了3个point节点以构成闭合区域；
• XML语法是否正确，有无拼写错误或标签未闭合。

例如，以下是一个典型错误示例：

<polygon name="area1" fillcolor="0xFFFFFF" fillalpha="0" />

尽管颜色存在，但由于fillalpha="0"，导致多边形不可见。

二、层级结构与容器绑定问题分析

krpano中的polygon必须被正确挂载到有效的容器中，否则将不会渲染。常见的容器包括：

容器类型	说明	适用场景
scene	主全景图层，支持ath/avt坐标	空间定位多边形
layer	UI层，基于像素坐标	地图覆盖、UI标注
mapskin插件内部	依赖插件初始化完成	二维平面地图叠加

若将polygon添加至尚未加载完成的mapskin容器中，会因DOM未就绪而导致失效。推荐通过事件监听确保插件ready后再执行添加逻辑：

if(mapskin.loaded,
        mapsync.addpolygon(...);
    );

三、坐标系统与投影模式详解

当使用全景空间坐标（ath/avt）时，必须启用distorted="true"才能使polygon随球面变形正确贴合。否则，多边形可能出现在错误位置甚至不可见。

以下是正确配置示例：

<polygon 
    name="zone_A" 
    distorted="true" 
    fillcolor="0x00FF00" 
    fillalpha="0.5">
    <point ath="45" avt="10"/>
    <point ath="60" avt="15"/>
    <point ath="50" avt="25"/>
</polygon>

其中每个point需提供有效的ath（水平角）和avt（垂直角），单位为度。

四、动态加载时机与异步控制流程

在集成第三方插件如mapskin时，需特别注意资源加载的异步性。以下为推荐的流程控制方案：

graph TD
            A[初始化krpano] --> B{mapskin是否已加载?}
            B -- 是 --> C[直接添加polygon]
            B -- 否 --> D[注册onloaded事件]
            D --> E[触发addpolygon操作]
            C --> F[完成渲染]
            E --> F

可通过JavaScript桥接调用判断状态：

krpano.call("if(mapskin.loaded, add_polygon(); );");

五、深度调试策略与工具建议

对于复杂项目，建议采用分层验证法：

1. 使用krpano调试器查看XML解析结果；
2. 在浏览器控制台输出get(polygon[name])确认对象是否存在；
3. 临时设置strokecolor="0xFF0000"和strokewidth="3"增强可见性；
4. 逐项关闭visible属性测试其他参数影响；
5. 利用trace()输出关键变量值；
6. 模拟最小可复现案例排除干扰因素；
7. 检查父级style是否覆盖了填充属性；
8. 确认zorder未被更高层级元素遮挡；
9. 验证mask或clipping是否截断绘制区域；
10. 审查是否有CSS样式影响canvas渲染层。

高级技巧：结合Chrome DevTools的Performance面板追踪XML注入时间点与渲染帧间隔。