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

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

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

2.准备数据。

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

(2) 新建数据表。

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

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

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

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

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。

4.组件添加和交互

• 第一步：在JS代码中添加交互组件。（组件中的RangePicker组件用的是 antd 中的RangePicker组件）

  Car Name:
  scooter tesla icecream-truck
  

  <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.完成后效果如下