前言
在做BIM项目的时候，客户提了个为BIM标签添加引线的需求，开始只想着自定义，发现实现起来都差点意思，鼠标控制旋转的时候总有瑕疵，接着翻看BIMFACE官方文档，终有收获。
实现效果如图
image.png
官方示例代码如下
<!DOCTYPE html>
<html lang="en">
<!-- 自定义标签提供了强大的自定义能力，用户可自行构造标签，并将图表等内容放入其中 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义引线标签</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.main {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
#domId {
flex: 1;
}
.leadTips {
display: flex;
justify-content: start;
width: auto;
transform: translateY(-40px)
}
.leadTips img {
display: inline-block;
width: 49px;
height: 40px
}
.leadText {
display: block;
background: #4a90e2;
color: #fff;
padding: 10px
}
</style>
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>
<script src="https://static.bimface.com/attach/24802b119f1c4740b120ad598ffcfd7e_ichart.1.2.js"></script>
<script src="https://static.bimface.com/attach/b83e2d8a649b4155a121be7bafe41018_ichart.js"></script>
</head>
<body>
<div class='main'>
<!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
<div id="domId"></div>
</div>
<script type="text/javascript">
let viewToken = '5f8a839785e54088aaf178b038c01a13';
// 声明Viewer及App
let viewer3D;
let app;
// 配置JSSDK加载项
window.onload = function () {
let loaderConfig = new BimfaceSDKLoaderConfig();
loaderConfig.viewToken = viewToken;
BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
}
// 加载成功回调函数
function successCallback(viewMetaData) {
let dom4Show = document.getElementById('domId');
// 设置WebApplication3D的配置项
let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
webAppConfig.domElement = dom4Show;
// 创建WebApplication3D，用以显示模型
app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
app.addView(viewToken);
viewer3D = app.getViewer();
// 增加加载完成监听事件
viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
// 渲染场景
viewer3D.render();
//自适应屏幕大小
window.onresize = function () {
viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
}
//引线标签的顶点
let position = new Object();
position = { "x": 33894.07796927153, "y": 41552.17955049469, "z": -2279.999944983153 };
// 初始化DrawableContainer
let drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
drawableConfig.viewer = viewer3D;
let drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
// 创建自定义元素，可以是一个dom element，也可以是个字符串
let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
let content = document.createElement('div');
content.innerHTML = '<div class="leadTips"><div style="width:49px;height:35px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div><div class="leadText" id="canvasDiv"></div></div>'
config.content = content;
config.viewer = viewer3D;
config.worldPosition = position;
//生成customItem实例
let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
// 添加自定义标签
drawableContainer.addItem(customItem);
//用icharts画出图标
drawchart();
//设置背景颜色
viewer3D.setBackgroundColor(new Glodon.Web.Graphics.Color(105, 105, 105, 1));
});
}
// 加载失败回调函数
function failureCallback(error) {
console.log(error);
}
</script>
</body>
</html>
官网资料： BIMFACE引线标签
点赞加关注，永远不迷路
网友评论