SuperMap iPortal实现场景图表联动

前言

SuperMap iPortal(下文简称iPortal)地图大屏中场景组件没有设置交互事件的接口，那边我想要实现场景与其他组件的联动要怎么做呢？下文以场景图表联动为例,告诉你应该怎么做.

一、新建大屏并在场景中添加场景和图表组件.

这一步比较简单,在左侧的组件栏中拉出对应的组件,拖拽到合适的位置即可.这里就不过多解释,直接贴结果图:

二、给需要设置交互的图表添加数据并设置样式

1. 选中图表，并在右侧属性栏中添加数据(需要注意的是这个地方添加的数据需要和与之交互的模型属性数据一致.)
   
2. 在数据一栏设置显示的字段并在图表内容中给图表设置图表样式，结果如下图:
   

三、低代码编辑器添加依赖和相关代码

1. 低代码编辑器中添加jquery的js库.
   
2. 在JavaScript中添加对应的业务代码.
   
   具体代码如下:

let resultData // 用于接受sql返回的结果数组
// 设置图表的高亮颜色
var option = $Chart_18.getOption();
option.series[0].itemStyle.emphasis.color = "#EA7568"
$Chart_18.setOption(option)
// 得到选中的图表的id高亮对象
$Chart_18.on('click', (e) => {
    let sqlStr = `size =  ${e.value}`
    doSqlQuery(sqlStr)
});

// 得到选中对象id并高亮图表
$WebScene_1.viewer.selectedEntityChanged.addEventListener(function (e) {
    let sqlStr = `SMID =  ${e.id}`
    doSqlQuery(sqlStr)
})
// 做sql查询得到相应的值对象
function doSqlQuery(sqlStr) {

    var sqlParameter = {
        "datasetNames": ["DataSource:NewTabular"],
        getFeatureMode: "SQL",
        queryParameter: {
            attributeFilter: sqlStr
        }
    };
    var url = "http://172.16.15.203:8090/iserver/services/data-sceneAndCharts/rest/data/featureResults.rjson?returnContent=true";
    var queryData = JSON.stringify(sqlParameter);

    $.ajax({
        type: "post",
        url: url,
        data: queryData,
        success: function (result) {
            resultData = JSON.parse(result);
            console.log(resultData.features[0]);
            onQueryComplete(resultData.features[0])
        },
        error: function (msg) {
            console.log(msg);
        },
    })
}

function onQueryComplete(features) { // sql 查询成功回调
    // features.fieldValues 结果的值数组 例如：  ["8", "8", "保护区8", "107"]
    // 获得id将场景中的对应模型高亮
    let layer = $WebScene_1.viewer.scene.layers.find("GreenArea@OlympicGreenSpaceForFan")
    // 234,117,104
    layer.selectedColor = new Cesium.Color(234 / 255, 117 / 255, 104 / 255, 1)
    layer.setSelection([features.fieldValues[0]])

    // 选中并高亮对应的图表项
    // 获取对应的dataIndax
    let dataIndex
    for (let i in $Chart_18._chartsMap) {
        dataIndex = $Chart_18._chartsMap[i]._data._idList.indexOf(features.fieldValues[2])
    }
    console.log("dataIndex", dataIndex);
    // 取消其他项的高亮
    for (let i = 0; i <= 18; i++) {
        $Chart_18.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: i,
        });
    }
    // 高亮当前选中项
    $Chart_18.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: dataIndex,
    });
}

点击快速运行保存之后即可完成场景图表联动的功能.效果如下:

场景图表联动