ThingJS在线3D开发之关于物体对象监控
<h3 style="box-sizing: inherit; margin-right: 0px; margin-bottom: 12px; margin-left: 0px; padding: 40px 0px 0px; border: 0px; font-size: 24px; vertical-align: baseline; line-height: 36px; cursor: pointer; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">物体面板显示监控</h3><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 12px; padding: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">在 3D 的某些应用需求中，当选中某个物体时，需要展示该物体的详细信息，我们可以创建一个物体面板，来展示这些数据。</p><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 12px; padding: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">有如下几步即可实现让物体面板显示监控：</p><ol style="box-sizing: inherit; margin-right: 0px; margin-bottom: 12px; margin-left: 24px; padding: 0px; border: 0px; font-size: 15px; vertical-align: baseline; list-style-position: initial; list-style-image: initial; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;"><li style="box-sizing: inherit; margin: 0px 0px 6px; padding: 0px; border: 0px; vertical-align: baseline;">query 获取物体对象集合；</li><li style="box-sizing: inherit; margin: 0px 0px 6px; padding: 0px; border: 0px; vertical-align: baseline;">对物体集合注册单击事件；</li><li style="box-sizing: inherit; margin: 0px 0px 6px; padding: 0px; border: 0px; vertical-align: baseline;">点击选中的物体 加入Selection中；</li><li style="box-sizing: inherit; margin: 0px 0px 6px; padding: 0px; border: 0px; vertical-align: baseline;">通过Select DeSelect事件 对物体做相应的操作；</li><li style="box-sizing: inherit; margin: 0px 0px 6px; padding: 0px; border: 0px; vertical-align: baseline;">如果是接口数据 可通过Ajax或WebSocket进行请求、对接；</li><li style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">创建物体面板 双向绑定数据；</li></ol><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 12px; padding: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">示例效果如下图所示：</p><div class="block mx-auto pb60pt36" style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding-right: 0px; padding-left: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif; padding-top: 18px !important; padding-bottom: 18px !important;"><img src="https://www.thingjs.com/guide/cn/tutorial_Introduce/images/tabimg.png" alt="" width="100%" style="box-sizing: inherit; padding: 0px; margin: 0px; border-width: 0px; border-style: initial; border-color: initial; vertical-align: top; box-shadow: rgb(204, 204, 204) 0px 0px 20px 0px;"/></div><h3 style="box-sizing: inherit; margin-right: 0px; margin-bottom: 12px; margin-left: 0px; padding: 40px 0px 0px; border: 0px; font-size: 24px; vertical-align: baseline; line-height: 36px; cursor: pointer; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">批量显示监控面板</h3><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 12px; padding: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">在某些 3D 可视化应用场景中，需要显示一批物体的某些重要指标，如何实现多个对象批量显示这些数据呢？</p><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 12px; padding: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">我们通过 UIAnchor ，将相应的数据展示面板作为孩子连接到每个对象上即可。</p><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 12px; padding: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif;">示例效果如下图所示：</p><div class="block mx-auto pb60pt36" style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding-right: 0px; padding-left: 0px; border: 0px; font-size: 15px; vertical-align: baseline; color: rgb(31, 51, 73); font-family: "Open Sans", sans-serif; padding-top: 18px !important; padding-bottom: 18px !important;"><img src="https://www.thingjs.com/guide/cn/tutorial_Introduce/images/piliang.png" alt="" width="100%" style="box-sizing: inherit; padding: 0px; margin: 0px; border-width: 0px; border-style: initial; border-color: initial; vertical-align: top; box-shadow: rgb(204, 204, 204) 0px 0px 20px 0px;"/></div><p>ThingJS-面向物联网的3D可视化开发平台<a href="https://www.thingjs.com/" target="_blank" title="" _href="https://www.thingjs.com/"><strong><span style="color:#e36c09">https://www.thingjs.com/</span></strong></a></p>
页:
[1]