万物可视之智能可视化管理平台

　     IT可视化运维管理平台

　　Tarsier是优锘科技推出的一款可视化+大数据的IT运维管理产品，针对当前业务环境和技术环境下企业IT运维面临的结构复杂、数据碎片、变化常态、机制板结等问题，Tarsier提供以可视化、场景化为核心理念的系列产品助力企业解决问题

　　ThingJS-人人都能用的3D平台

　　ThingJS是优锘科技开发的一套面向物联网应用的在线3D可视化应用开发及运营PaaS平台，以“ThingJS云视PaaS服务”形式面向广大物联网企业提供全生命周期在线3D可视化服务

2D/3D界面

ThingJS 是一个先进的 PaaS 开发平台，开发者可以方便、安全地基于云端的各种工具组件随时随地进行开发。

ThingJS 界面概述

为了便于开发者在ThingJS下进行界面开发，ThingJS 提供的界面体系结构目录如下：

上述ThingJS界面体系中，进行3D场景可视化的区域，我们定义为3D容器，如下图所示：

在3D“容器”内

提供了3D和2D的界面展示能力，如下图所示：

3D 界面

• Marker：可以将图标、Canvas绘制的图片，展现在3D场景中或绑定在3D物体上。
• WebView：可以将页面嵌入到3D场景中。

2D 界面

• 原生界面：用户可以使用js代码编写原生的界面，将dom元素插入到相应的节点中。
• 快捷界面库：内置各种组件模块，供用户进行拼接组装使用。
• UIAnchor：可以将普通的2D界面“挂接”到某个3D物体对象上，使之随物体移动。

在3D“容器”外

提供通栏组件（如上通栏、侧通栏）。如果用户想基于 ThingJS 做一套独立的应用系统，可使用通栏组件作为系统级别的菜单。

3D 界面

ThingJS 主要提供 `Marker` 物体和 `WebView` 物体以支持 3D 空间界面。

Marker 物体

Marker 物体可以添加一个图片放置到你希望的位置，也可以将这个图片作为孩子添加到对象身上，随着对象一同移动。

例子 1：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"> app<span style="color:#273d56">.</span><span style="color:#4264fb">create</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
    type<span style="color:#273d56">:</span> <span style="color:#ce2c69">"Marker"</span><span style="color:#273d56">,</span>
    offset<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">0</span><span style="color:#273d56">,</span> <span style="color:#7753eb">2</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    size<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">4</span><span style="color:#273d56">,</span> <span style="color:#7753eb">4</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    url<span style="color:#273d56">:</span> <span style="color:#ce2c69">"https://thingjs.com/static/images/warning1.png"</span><span style="color:#273d56">,</span>
    parent<span style="color:#273d56">:</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">query</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"car01"</span><span style="color:#273d56">)</span><span style="color:#273d56">[</span><span style="color:#7753eb">0</span><span style="color:#273d56">]</span>
<span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 

 

参数：

• type ： 通知系统创建 Marker 物体；
• offset ： 设置自身坐标系下偏移量为[0, 2, 0]；
• size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
• url ： 图片的 url；
• parent ：指定 Marker 的父物体；

运行结果见下图。Marker 默认是受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。

例子 2：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript">app<span style="color:#273d56">.</span><span style="color:#4264fb">create</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
    type<span style="color:#273d56">:</span> <span style="color:#ce2c69">"Marker"</span><span style="color:#273d56">,</span>
    offset<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">0</span><span style="color:#273d56">,</span> <span style="color:#7753eb">8</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    size<span style="color:#273d56">:</span> <span style="color:#7753eb">2</span><span style="color:#273d56">,</span>
    keepSize<span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span>
    url<span style="color:#273d56">:</span> <span style="color:#ce2c69">"https://thingjs.com/static/images/reminder.png"</span><span style="color:#273d56">,</span>
    parent<span style="color:#273d56">:</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">query</span><span style="color:#273d56">(</span><span style="color:#ce2c69">".Building"</span><span style="color:#273d56">)</span><span style="color:#273d56">[</span><span style="color:#7753eb">1</span><span style="color:#273d56">]</span>
<span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 

 

参数：

• keepSize： 控制是否受距离远近影响，呈现近大远小的 3D 效果。如果设置 true，表示保持大小，不随距离近大远小，此时 size 的单位是屏幕的像素点；
• offset ： 设置自身坐标系下偏移量为[0, 2, 0]；
• size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
• url ： 图片的 url；
• parent ：指定 Marker 的父物体；

运行结果见下图：

我们还可以使用 h5 的 canvas 手动创建动态图。

例子 3：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#314ccd">function</span> <span style="color:#4264fb">createTextCanvas</span><span style="color:#273d56">(</span>text<span style="color:#273d56">,</span> canvas<span style="color:#273d56">)</span> <span style="color:#273d56">{</span>
    <span style="color:#314ccd">if</span> <span style="color:#273d56">(</span><span style="color:#273d56">!</span>canvas<span style="color:#273d56">)</span> <span style="color:#273d56">{</span>
        canvas <span style="color:#273d56">=</span> document<span style="color:#273d56">.</span><span style="color:#4264fb">createElement</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"canvas"</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
        canvas<span style="color:#273d56">.</span>width <span style="color:#273d56">=</span> <span style="color:#7753eb">64</span><span style="color:#273d56">;</span>
        canvas<span style="color:#273d56">.</span>height <span style="color:#273d56">=</span> <span style="color:#7753eb">64</span><span style="color:#273d56">;</span>
    <span style="color:#273d56">}</span>

    <span style="color:#314ccd">const</span> ctx <span style="color:#273d56">=</span> canvas<span style="color:#273d56">.</span><span style="color:#4264fb">getContext</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"2d"</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span>fillStyle <span style="color:#273d56">=</span> <span style="color:#ce2c69">"rgb(32, 32, 256)"</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">beginPath</span><span style="color:#273d56">(</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">arc</span><span style="color:#273d56">(</span><span style="color:#7753eb">32</span><span style="color:#273d56">,</span> <span style="color:#7753eb">32</span><span sty