npm - @belife/belife-bim-air - Versions diffs - 1.6.1-zy.86.patch.7 → 1.6.1-zy.86.patch.9 - Mend

@belife/belife-bim-air 1.6.1-zy.86.patch.7 → 1.6.1-zy.86.patch.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

package/docs/feature//346/236/204/344/273/266/346/220/234/347/264/242.md ADDED Viewed

@@ -0,0 +1,178 @@
+# 构件搜索
+在模型场景中可以获取所有构件的列表，也可以使用名字和ID对构件进行搜索。
+## 获取构件列表
+可以通过轻量模型提供的函数获取所有构件的列表。
+```js
+let lightModel = viewModel.findObjectByType("LightModel");
+lightModel.modelLoaded.add(function (model) {
+    // 构件列表获取一般在模型导入后进行,通过LightModel的modelLoaded事件来完成
+    let components = lightModel.getComponentList();
+})
+```
+getComponentList获取所有控件的列表，列表项返回控件的key，id和name。
+## 控件搜索
+可以通过轻量模型提供的函数获进行构件搜索。
+```js
+let component = model.findComponentById(id);
+```
+findComponentById通过构件的id进行构件搜索，并返回构件信息。
+```js
+let component = model.findComponentByName(name);
+```
+findComponentByName通过构件的name进行构件搜索，并返回构件信息。
+## 实例HTML下载
+可直接<a :href="$withBase('/demo/构件搜索.html')" target="_blank"><b>预览构件搜索实例</b></a>
+或者复制以下代码保存成html格式打开实例
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>构件搜索实例</title>
+    <script src="http://120.78.129.125:8111/js/jquery.js"></script>
+    <script src="http://120.78.129.125:8111/js/gs.dev.js"></script>
+    <script src="http://120.78.129.125:8111/js/longan/longan.js"></script>
+    <style>
+        .search-box {
+            color: #46CFB0;
+            margin: auto auto;
+            padding: 10px;
+            position: absolute;
+            left: 20px;
+            top: 20px;
+            background-color: #2C3E50;
+            min-width: 300px;
+            min-height: 50px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px #555;
+            overflow: auto;
+        }
+        .component-box {
+            color: #46CFB0;
+            margin: auto auto;
+            padding: 10px;
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            background-color: #2C3E50;
+            min-width: 300px;
+            max-height: 95vh;
+            min-height: 50px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px #555;
+            overflow: auto;
+        }
+        .component-box .title {
+            font-weight: bold;
+        }
+        .component-box li {
+            list-style: none;
+            font-size: 13px;
+        }
+        li .name,
+        .value {
+            min-width: 50px;
+            display: inline-block;
+            /* padding: 0 5px; */
+        }
+    </style>
+</head>
+<body style="margin:0px">
+    <div>
+        <div id="viewer">
+        </div>
+        <div class="search-box">
+            <div class="search">
+                <input type="text" placeholder="请输入构件id" name="" id="searchId" value="" />
+                <button onclick="searchClick('id')"><i>id搜索构件</i></button>
+            </div>
+            <div class="search">
+                <input type="text" placeholder="请输入构件name" name="" id="searchName" value="" />
+                <button onclick="searchClick('name')"><i>name搜索构件</i></button>
+            </div>
+            <div>屋顶id和name均为243274</div>
+        </div>
+        <div class="component-box">
+            <div class="title">构件列表：</div>
+            <div class="component-list"></div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        let viewModel;
+        let viewer;
+        GraStoneCloud.DevModule.onReady = function () {
+            $("#viewer").css("height", window.innerHeight);
+            $(window).resize(function () {
+                $("#viewer").css("height", window.innerHeight);
+            });
+            viewer = new GraStoneCloud.DevFx.Viewer("viewer");
+            viewer.backgroundColor([0.9, 0.9, 0.9]);
+            viewModel = new GraStoneCloud.DevFx.ViewModel();
+            viewModel.viewer(viewer);
+            viewModel.modelServiceHost("120.78.129.125:8111");
+            viewModel.loadModelByPath("3f67fd8baf95428fb25b845909d1c738", "demo.mca");
+            viewer.setViewMode(Longan.ViewMode.Iso, true);
+            viewer.updateDisplay();
+            viewer.operatorManager.add(new GraStoneCloud.DevFx.CameraMouse());
+            let lightModel = viewModel.findObjectByType("LightModel");
+            lightModel.modelLoaded.add(function (model) {
+                let components = lightModel.getComponentList();
+                $('.component-list').empty();
+                let componentList = "";
+                for (var item of components) {
+                    componentList += '<li>'
+                        + '<div class="name" style="min-width:40px">key：</div><div class="value">' + item.key + '</div>'
+                        + '<div class="name" style="min-width:30px">id：</div><div class="value" style="min-width:60px">' + item.id + '</div>'
+                        + '<div class="name">name：</div><div class="value">' + item.name + '</div>'
+                        + '</li>';
+                }
+                $('.component-list').append(componentList);
+                console.log(components)
+            })
+        }
+        function searchClick(prop) {
+            let model = viewModel.findObjectByType("LightModel");
+            let component;
+            let value;
+            if (prop === "id") {
+                value = $("#searchId").val()
+                component = model.findComponentById(value);
+            } else if (prop === "name") {
+                value = $("#searchName").value
+                component = model.findComponentByName(value);
+            }
+            console.log("prop", prop, model, value)
+            model.setComponentColor(value, 0, 0, 200, 125);
+            viewer.updateDisplay();
+        }
+    </script>
+</body>
+</html>
+```

package/docs/feature//346/236/204/344/273/266/346/230/276/347/244/272.md ADDED Viewed

@@ -0,0 +1,187 @@
+# 构件显示
+可通过构件的id去改变构件的颜色位置等凸显构件的显示效果
+## 构件变色
+通过setComponentColor使构件变色，
+接口传入构件id，和4个分别对应**r,g,b,a**的参数，其中**r,g,b**接受0-255的整数，**a**接受0-1的浮点数
+构件更改颜色后需要updateDisplay来更新Viewer才可以显示更改后的样式
+```js
+model.setComponentColor(id, 0, 138, 255, 0.8); // 构件变色
+viewer.updateDisplay(); // 构件变色必须更新Viewer才能显示
+```
+可通过以下接口取消变色
+```js
+model.unsetComponentColor(id); // 取消构件变色
+viewer.updateDisplay(); //同样需要更新Viewer
+```
+## 构件闪烁
+通过setComponentFlash使构件在两个颜色间变化闪烁
+接口传入构件id，并传入两个长度为4的颜色数组，数组对应格式是[**r,g,b,a**],其中**r,g,b**接受0-255的整数，**a**接受0-1的浮点数
+```js
+model.setComponentFlash(id, [255, 0, 0, 1], [255, 255, 0, 1]); // 构件闪烁
+```
+可通过以下接口取消闪烁
+```js
+model.unsetComponentFlash(id); // 取消构件闪烁
+```
+## 构件反向高亮
+通过setComponentReverseHighlight使除此构件外的其他构件变色高亮，
+接口传入构件id，和4个分别对应**r,g,b,a**的参数，其中**r,g,b**接受0-255的整数，**a**接受0-1的浮点数
+```js
+model.setComponentReverseHighlight(id, 0, 138, 255, 0.4); // 反向高亮
+viewer.updateDisplay(); // 构件反向高亮必须更新Viewer才能显示
+```
+可通过以下接口取消反向高亮
+```js
+model.unsetComponentReverseHighlight(id); // 取消反向高亮
+viewer.updateDisplay(); // 构件反向高亮必须更新Viewer才能显示
+```
+## 构件浮起
+通过setComponentFloat接口传入构件id，该构件即可上浮到视野最前方，通常搭配构件变色或构件闪烁使用。
+```js
+model.setComponentFloat(id); // 构件浮起
+```
+可通过以下接口取消浮起
+```js
+model.unsetComponentFloat(id); // 取消构件浮起
+```
+:::tip
+若需要搭配构件变色或构件闪烁使用，setComponentFloat需要写在setComponentColor，setComponentFlash后面
+:::
+## 实例HTML下载
+可直接<a :href="$withBase('/demo/构件显示.html')" target="_blank"><b>预览构件显示实例</b></a>
+或者复制以下代码保存成html格式打开实例
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>构件显示实例</title>
+    <script src="http://120.78.129.125:8111/js/jquery.js"></script>
+    <script src="http://120.78.129.125:8111/js/gs.dev.js"></script>
+    <script src="http://120.78.129.125:8111/js/longan/longan.js"></script>
+    <style>
+        .search-box {
+            color: #46CFB0;
+            margin: auto auto;
+            padding: 10px;
+            position: absolute;
+            left: 20px;
+            top: 20px;
+            background-color: #2C3E50;
+            min-width: 300px;
+            min-height: 50px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px #555;
+            overflow: auto;
+        }
+    </style>
+</head>
+<body style="margin:0px">
+    <div>
+        <div id="viewer">
+        </div>
+        <div class="search-box">
+            <div class="search">
+                <button onclick="searchClick(1)"><i>高亮</i></button>
+                <button onclick="searchClick(2)"><i>闪烁</i></button>
+                <button onclick="searchClick(3)"><i>高亮浮起</i></button>
+                <button onclick="searchClick(4)"><i>闪烁浮起</i></button>
+                <button onclick="searchClick(5)"><i>反向高亮</i></button>
+                <button onclick="searchClick(6)"><i>反向高亮浮起</i></button>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        let viewModel;
+        let viewer;
+        GraStoneCloud.DevModule.onReady = function () {
+            $("#viewer").css("height", window.innerHeight);
+            $(window).resize(function () {
+                $("#viewer").css("height", window.innerHeight);
+            });
+            viewer = new GraStoneCloud.DevFx.Viewer("viewer");
+            viewer.backgroundColor([0.9, 0.9, 0.9]);
+            viewModel = new GraStoneCloud.DevFx.ViewModel();
+            viewModel.viewer(viewer);
+            viewModel.modelServiceHost("120.78.129.125:8111");
+            viewModel.loadModelByPath("3f67fd8baf95428fb25b845909d1c738", "demo.mca");
+            viewer.setViewMode(Longan.ViewMode.Iso, true);
+            viewer.updateDisplay();
+            viewer.operatorManager.add(new GraStoneCloud.DevFx.CameraMouse());
+        }
+        function searchClick(type) {
+            let model = viewModel.findObjectByType("LightModel");
+            if (model != null) {
+                let idArray = ["990645", "990620", "990646", "990621", "990647", "990648", "990317", "990596", "989344", "989521",]
+                let ids = [];
+                for (let item of idArray) {
+                    let component = model.findComponentById(item);
+                    let a = model.getComponentIdsByKey(component.key)
+                    ids.push(...a); // 获取构件下的所有子构件id列表
+                }
+                for (let i = 0; i < ids.length; i++) {
+                    model.unsetComponentFloat(ids[i]); // 取消构件浮起
+                    model.unsetComponentColor(ids[i]); // 取消构件变色
+                    model.unsetComponentFlash(ids[i]); // 取消构件闪烁
+                    model.unsetComponentReverseHighlight(ids[i]); // 取消反向高亮
+                    viewer.updateDisplay();
+                }
+                for (let i = 0; i < ids.length; i++) {
+                    if (type === 1) {
+                        model.setComponentColor(ids[i], 0, 138, 255, 0.8); // 构件变色
+                        viewer.updateDisplay(); // 构件变色必须更新Viewer才能显示
+                    }
+                    else if (type === 2) {
+                        model.setComponentFlash(ids[i], [255, 0, 0, 1], [255, 255, 0, 1]); // 构件闪烁
+                    }
+                    else if (type === 3) {
+                        model.setComponentColor(ids[i], 0, 138, 255, 0.8);
+                        model.setComponentFloat(ids[i]); // 构件浮起
+                        viewer.updateDisplay();
+                    }
+                    else if (type === 4) {
+                        model.setComponentFlash(ids[i], [255, 0, 0, 1], [255, 255, 0, 1]);
+                        model.setComponentFloat(ids[i]);
+                    }
+                    else if (type === 5) {
+                        model.setComponentReverseHighlight(ids[i], 0, 138, 255, 0.4); // 构件反向高亮
+                        viewer.updateDisplay();
+                    }
+                    else if (type === 6) {
+                        model.setComponentReverseHighlight(ids[i], 0, 138, 255, 0.4);
+                        model.setComponentFloat(ids[i]);
+                        viewer.updateDisplay();
+                    }
+                }
+            }
+        }
+    </script>
+</body>
+</html>
+```

package/docs/feature//346/236/204/344/273/266/351/232/224/347/246/273.md ADDED Viewed

@@ -0,0 +1,125 @@
+# 构件隔离
+传入构件id，可使此构件以外的所有构件半透明并禁止被选中
+## 具体实现
+通过setComponentIsolation接口传入构件id,使此构件以外的所有构件半透明并禁止被选中
+```js
+model.setComponentIsolation(id);
+```
+可通过以下接口取消构件隔离
+```js
+model.unsetComponentIsolation(id); // 取消构件隔离
+```
+## 实例HTML下载
+可直接<a :href="$withBase('/demo/构件隔离.html')" target="_blank"><b>预览构件隔离实例</b></a>
+或者复制以下代码保存成html格式打开实例
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>构件显示实例</title>
+    <script src="http://120.78.129.125:8111/js/jquery.js"></script>
+    <script src="http://120.78.129.125:8111/js/gs.dev.js"></script>
+    <script src="http://120.78.129.125:8111/js/longan/longan.js"></script>
+    <style>
+        .search-box {
+            color: #46CFB0;
+            margin: auto auto;
+            padding: 10px;
+            position: absolute;
+            left: 20px;
+            top: 20px;
+            background-color: #2C3E50;
+            min-width: 300px;
+            min-height: 50px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px #555;
+            overflow: auto;
+        }
+    </style>
+</head>
+<body style="margin:0px">
+    <div>
+        <div id="viewer">
+        </div>
+        <div class="search-box">
+            <div class="search">
+                <button onclick="searchClick(1)">构件隔离</button>
+                <button onclick="searchClick(2)">取消构件隔离</button>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        let viewModel;
+        let viewer;
+        GraStoneCloud.DevModule.onReady = function () {
+            $("#viewer").css("height", window.innerHeight);
+            $(window).resize(function () {
+                $("#viewer").css("height", window.innerHeight);
+            });
+            viewer = new GraStoneCloud.DevFx.Viewer("viewer");
+            viewer.backgroundColor([0.9, 0.9, 0.9]);
+            viewModel = new GraStoneCloud.DevFx.ViewModel();
+            viewModel.viewer(viewer);
+            viewModel.modelServiceHost("120.78.129.125:8111");
+            viewModel.loadModelByPath("3f67fd8baf95428fb25b845909d1c738", "demo.mca");
+            viewer.setViewMode(Longan.ViewMode.Iso, true);
+            viewer.updateDisplay();
+            viewer.operatorManager.add(new GraStoneCloud.DevFx.CameraMouse());
+            let objectSelector = new GraStoneCloud.DevFx.ObjectSelector();
+            viewer.operatorManager.add(objectSelector);
+        }
+        function searchClick(type) {
+            let model = viewModel.findObjectByType("LightModel");
+            if (model != null) {
+                let idArray = ["990645", "990620", "990646", "990621", "990647", "990648", "990317", "990596", "989344", "989521",]
+                let ids = [];
+                for (let item of idArray) {
+                    let component = model.findComponentById(item);
+                    let a = model.getComponentIdsByKey(component.key)
+                    ids.push(...a); // 获取构件下的所有子构件id列表
+                }
+                for (let i = 0; i < ids.length; i++) {
+                    if (type === 1) {
+                        model.setComponentReverseHighlight(ids[i], 0, 138, 255, 0.4);
+                        model.setComponentFloat(ids[i]);
+                        model.setComponentIsolation(ids[i]);
+                        viewer.updateDisplay();
+                    }
+                    else if (type === 2) {
+                        model.unsetComponentReverseHighlight(ids[i]);
+                        model.unsetComponentFloat(ids[i]);
+                        model.unsetComponentIsolation(ids[i]);
+                        viewer.updateDisplay();
+                    }
+                }
+            }
+        }
+    </script>
+</body>
+</html>
+```

package/docs/feature//346/250/241/345/236/213/345/211/226/345/210/207.md ADDED Viewed

@@ -0,0 +1,7 @@
+# 模型剖切
+## 实例HTML下载
+可直接复制以下代码保存成html格式打开实例
+```html
+```

package/docs/feature//346/250/241/345/236/213/345/257/274/345/205/245.md ADDED Viewed

@@ -0,0 +1,81 @@
+# 模型导入
+轻量化云平台模型可以通过模型在Model Cloud里的名字或ID进行导入。
+## 创建ViewModel
+ViewModel是视图和模型的桥梁对象，通过它可以进行模型相关的操作。
+```js
+let viewModel = new GraStoneCloud.DevFx.ViewModel();
+viewModel.viewer(viewer);
+viewModel.modelServiceHost("120.78.129.125:8111");
+```
+ViewModel中的viewer函数是把当前的Viewer控件和ViewModel绑定。
+ViewModel中的modelServiceHost属性是设置Model Cloud模型云服务地址的，云服务提供模型导入的相关服务。
+## 导入模型。
+通过ViewModel的loadModelByPath函数可以导入模型。
+```js
+viewModel.loadModelByPath("3f67fd8baf95428fb25b845909d1c738", "demo.mca");
+```
+其中loadModelByPath有两个参数，分别是UserId和FileName，
+UserId是Model Cloud云服务的用户名，
+FileName是存放在Model Cloud里的文件名，文件名必须是全路径文件名。
+## 等轴居中模型
+通过调用Viewer的setViewMode函数可以对场景进行视图设置。
+```js
+viewer.setViewMode(Longan.ViewMode.Iso, true);
+```
+其中第一个参数是视图的设置类型，等轴设置是Longan.ViewMode.Iso，设置的详细说明请查看[setViewMode的API文档](/feature/视图设置.md)。
+第二个参数是对视图进行设置时是否进行Fit World操作，也就是把模型居中显示。
+## 实例HTML下载
+可直接<a :href="$withBase('/demo/模型导入.html')" target="_blank"><b>预览模型导入实例</b></a>
+或者复制以下代码保存成html格式打开实例
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>首页</title>
+    <script src="http://120.78.129.125:8111/js/jquery.js"></script>
+    <script src="http://120.78.129.125:8111/js/gs.dev.js"></script>
+    <script src="http://120.78.129.125:8111/js/longan/longan.js"></script>
+</head>
+<body style="margin:0px">
+    <div>
+        <div id="viewer">
+        </div>
+    </div>
+    <script type="text/javascript">
+        GraStoneCloud.DevModule.onReady = function () {
+            $("#viewer").css("height", window.innerHeight);
+            $(window).resize(function () {
+                $("#viewer").css("height", window.innerHeight);
+            });
+            let viewer = new GraStoneCloud.DevFx.Viewer("viewer");
+            viewer.backgroundColor([0.9, 0.9, 0.9]);
+			let viewModel = new GraStoneCloud.DevFx.ViewModel();
+			viewModel.viewer(viewer);
+			viewModel.modelServiceHost("120.78.129.125:8111");
+			viewModel.loadModelByPath("3f67fd8baf95428fb25b845909d1c738", "demo.mca");
+			viewer.setViewMode(Longan.ViewMode.Iso, true);
+			viewer.updateDisplay();
+		}
+    </script>
+</body>
+</html>
+```