如何实现在模型中添加图表功能以及如何实现与构件的联动
原创发布时间:2020-10-21
实现步骤
第一步 添加光源
加载完模型后向场内添加聚光灯。
/**
* @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, () => {});
评论区