krpano Radar插件使用指南

 🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《Krpano中文文档》

​ 

目录

✨ 正文：

语法

插件属性

雷达 Aligment / Pano 航向

开源插件

✨ 结语

---

 

✨ 正文：

• 雷达插件显示当前的视锥/区域。
• 它可以用在地板地图图像上，显示当前的观看方向和视野。使用parent属性在地图图像上对齐。通过在父元素上使用maskchildren="true"，可以只在父元素上绘制雷达锥。
• 全景观察方向可以通过鼠标拖动雷达锥来改变(但可以通过添加enabled="false"来禁用)。
• 它的位置和大小可以通过标准插件属性来调整。

语法

使用的例子:

<plugin name="radar"
        url="radar.js"
        parent="map"
        align="lefttop"
        edge="center"
        x="100" y="50"
        scale="5.0"
        heading="0.0"
        headingoffset="90.0"
        fillcolor="0xFFFFFF"
        fillalpha="0.5"
        linewidth="0.0"
        linecolor="0xFFFFFF"
        linealpha="0.3"
        invert="false"
        />

动态设置标题和x/y位置:

set(plugin[radar].x, 203);
set(plugin[radar].y, 555);
set(plugin[radar].heading, 91.8);

插件属性

• heading
  • 当前全景的航向以度为单位，需要将全景方向与地图上的雷达对齐，默认=0。
• headingoffset
  • 标题值的偏移量。
  • headingoffset的默认值是90，这意味着heading=0默认指向右/东。使用headingoffset=0让heading=0指向上/北。
• fillcolor
  • 填充颜色，默认值=0xFFFFFF。
• fillalpha
  • 填充颜色的alpha值，默认值=0.5。
• linecolor
  • 雷达锥周围边线的线色，默认值=0xFFFFFF。
• linewidth
  • 雷达锥周围边界线的宽度，默认值=0。
• linealpha
  • 雷达锥周围边线的alpha值，默认值=0.3。
• invert
  • 倒转雷达锥。圆锥体不会填充视野，它会填充其他区域。可能的设置:true或false, default=false。

雷达 Aligment / Pano 航向

标题定义了全景图的方向。它必须为每个pano定义，以使雷达正确地对准地图。

开源插件

HTML5雷达插件的Javascript源代码在这里免费提供，作为学习如何使用的例子 krpano Plugin Interface.
文件:

• radar_source.js (view) - download

 

✨ 结语

        

​