所有文档

          物可视 IOTVIZ

          嵌入可视交互实践

          image

          通过本示例,用户可以了解到如何把物可视的仪表盘嵌入到自己的工程中,并与工程中的交互控件进行数据交互。

          本示例以一个“设备地图”组件为例,通过查询一系列TSDB数据来作为“设备地图”的轨迹数据,并通过一个select JS 控件和一个datetimpicker JS控件来实现“设备地图”中的车辆选择和查询时间选择,具体的操作步骤如下:

          1.首先 拖拽一个"设备地图"组件到中间的画布上。

          image

          2.准备数据。

          (1) 进入数据表页面。选择上图 红框1中的『数据表』Tab进入到数据表创建页面。

          图片

          (2) 新建数据表。

          第一步:命名数据表,选择数据类型。此处我们选择一个“时序数据库”数据,点击下一步。

          image

          第二步:在数据表配置界面选择合适的度量metric,域field,标签tag。

          image

          本例中的度量是一系列时序轨迹数据,度量是 telemetric, 域是经度longitude和维度latitude, 标签是 entity。

          image

          这样我们就得到一张有多条轨迹的位置地图。

          image

          3.嵌入仪表盘。

          在JS 工程中集成物可视SDK, 详情集成文档参考链接

          <script type="text/javascript" src="https://iot-dv.cdn.bcebos.com/prod/sdk/bdiotvizplayer.min.js"></script>
          
          componentDidMount() {
              const that = this;
              const bdIotVizPlayer = window.BDIotVizPlayer;
              bdIotVizPlayer({
                  containerElement: this.$viz,
                  dashboardId: '5b4c304357369f****028eff',
                  fillMode: 'cover', // <-- Possible value: 'none', 'contain', 'cover'
                  token: {
                      type: 'embedded',
                      value: '6941cb46595f8db8b****1cb7407ab9b' // <-- Access Token for current dashboard
                  },
                  onload: (api) => {
                      this.api = api;
                      api.getDashboardConfig().then(function (config) {
                          console.log(config.dataTables); // <--- Current Dashboard Config
                          let tableConfig = config.dataTables[5];
                       });
                      // refer to API doc for complete API description
                  }
              });
          }
          
          this.$viz = dom}>

          console.log(config.dataTables)的输出结果中找到相应查询的ID。

          image

          4.组件添加和交互

          • 第一步:在JS代码中添加交互组件。(组件中的RangePicker组件用的是 antd 中的RangePicker组件)

            <rangepicker id="rp" onchange="{this.changeTime}" defaultvalue="{[moment('2018/08/15'," dateformat),="" moment('2018="" 08="" 016',="" dateformat)]}="" format="{dateFormat}">

          • 第二步:为交互组件配置交互刷新代码。

            changeCar = (event) => { const newConfig = { "filters": { "tags": [{ "tag": "entity", "in": [event.target.value] }] } } this.api.updateDataTableConfig('23ab69a6-20ef-4e47-****-6b7526032b65', newConfig); }

            changeTime = ([from, until]) => { const newConfig = { "filters": { "start": from.valueOf(), "end": until.valueOf() }, "trigger":{ "rangeRule":"none", "type":"once" } } this.api.updateDataTableConfig('23ab69a6-20ef-4e47-****-6b7526032b65', newConfig) }

          5.完成后效果如下

          image

          image

          上一篇
          仪表指针实践
          下一篇
          数据处理实践