如何实现在模型中添加图表功能以及如何实现与构件的联动

实现步骤

第一步 添加光源

加载完模型后向场内添加聚光灯。

/**
* @description 创建聚光灯
* @param {array} spotLightList 聚光灯所在构件
* @param {number} color 聚光灯颜色
* @return undefined
*/
function createSpotLight(spotLightList, color) {
    spotLightList.forEach((item) => {
        const componentInfo = viewer3D
            .getViewerImpl()
            .modelManager.getComponent(item)[0]; // 获取 BOS3D 中存储的构件的信息
        if (!componentInfo) return; // 若构件信息不存在，则退出

        const spotTarget = new THREE.Object3D(); //  创建一个three对象，用作光源的target
        const targetPosition = [
            componentInfo.matrix.elements[12],
            componentInfo.matrix.elements[13],
            componentInfo.matrix.elements[14] - 3000,
        ]; // 通过灯的位置手动设置 target 物体的位置
        spotTarget.position.set(
            targetPosition[0],
            targetPosition[1],
            targetPosition[2]
        ); // 将这个target物体的位置设置为该灯的位置的下方
        scene.add(spotTarget);
        const targetConfig = { target: spotTarget }; // 设置spotlight的聚光灯的焦点

        const spotLightObj = new THREE.SpotLight(color, 1); // 创建一个 Object3D，将位置设置在次筒灯的下面4000的位置，作为此 spotLightObj 的 target
        Object.assign(spotLightObj, targetConfig, spotLightConfig); // 拷贝聚光灯的基础配置信息
        componentInfo.mesh.add(spotLightObj); // 将此聚光灯添加到该筒灯的场景下
    });
}

第二步 添加统计图表

加载完模型后向场内添加统计图表。

// 创建图表。基于准备好的dom，初始化echarts实例。详细使用方式请查看 echarts.js 官网
function createReports() {
    const report1 = echarts.init(document.getElementById("report-1"));
    report1.setOption(option1); // 新建人数占比图表
    const report2 = echarts.init(document.getElementById("report-2"));
    report2.setOption(option2); // 新建发电趋势图表
    const report3 = echarts.init(document.getElementById("report-3"));
    report3.setOption(option3); // 新建用电比例图表
    const report4 = echarts.init(document.getElementById("report-4"));
    report4.setOption(option4); // 新建异常分析图表
}

第三步 添加Dom标签

加载完模型后向场内添加Dom标签。

/**
* @description 在指定位置创建 DOM 标签
* @paran {object} config 标签的配置信息
* @return undefined
*/
function createMark(config = {}) {
    const domElement = document.createElement("div");
    domElement.id = config.idName;
    domElement.classList.add("btn-switch");
    domElement.textContent = "点此打开";
    const domMarkOptions = Object.assign(
        {
            id: "123",
            color: [255, 255, 255],
            colorLine: [137, 247, 245],
            domElement: domElement,
        },
        {
            id: config.id,
            title: config.title,
            startPosition: config.startPosition,
            endPosition: config.endPosition,
        }
    );
    mark.addDomMark(domMarkOptions, () => {});