preview.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="renderer" content="webkit">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <meta name="viewport"
  8. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  9. <meta name="mobile-web-app-capable" content="yes">
  10. <meta name="mobile-web-app-status-bar-style" content="black">
  11. <title id="title">BIM模型</title>
  12. <link rel="stylesheet" href="preview.css" />
  13. <!-- 引用BIMFACE的JavaScript显示组件库 -->
  14. <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"
  15. charset="utf-8">
  16. </script>
  17. </head>
  18. <body>
  19. <!-- 定义DOM元素,用于在该DOM元素中显示模型或图纸 -->
  20. <div class='main'>
  21. <!-- 定义DOM元素,用于在该DOM元素中显示模型或图纸 -->
  22. <div class='model' id="domId"></div>
  23. </div>
  24. <script src="./room.js" type="text/javascript" charset="utf-8"></script>
  25. <script src="./bimViewer.js" type="text/javascript" charset="utf-8"></script>
  26. <script type="text/javascript">
  27. function getQueryObject(url) {
  28. url = url == null ? window.location.href : url
  29. const search = url.substring(url.lastIndexOf('?') + 1)
  30. const obj = {}
  31. const reg = /([^?&=]+)=([^?&=]*)/g
  32. search.replace(reg, (rs, $1, $2) => {
  33. const name = decodeURIComponent($1)
  34. let val = decodeURIComponent($2)
  35. val = String(val)
  36. obj[name] = val
  37. return rs
  38. })
  39. return obj
  40. }
  41. function returnRGBA(color) {
  42. let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
  43. return {
  44. r,
  45. g,
  46. b,
  47. a
  48. }
  49. }
  50. window.onload = function() {
  51. let query = getQueryObject();
  52. if (query.title) document.getElementById('title').innerText = query.title;
  53. let bim = new bimViewer({
  54. viewToken: query.viewToken,
  55. domElem: document.getElementById('domId'),
  56. renderSuccess: function() {
  57. if (query.showType === '2') {
  58. bim.setView('Top');
  59. for (var i = 0; i < distribution.length; i++) {
  60. bim.insertRooms({
  61. id: distribution[i].id,
  62. boundary: {
  63. "outer": distribution[i].boundary
  64. },
  65. height: distribution[i].height,
  66. roomColor: returnRGBA(distribution[i].color)
  67. })
  68. bim.addDrawable({
  69. position: distribution[i].position,
  70. offsetX: -75,
  71. offsetY: -40,
  72. html: ` <div class="tips-4">${distribution[i].name}</div>`,
  73. })
  74. }
  75. }
  76. }
  77. })
  78. }
  79. </script>
  80. </body>