autodesk-forge - 如何在伪造查看器中显示 2 个不同的标签集作为标记
问题描述
我正在尝试根据示例标记代码在伪造查看器中显示一些标签。我的代码适用于一个数据集,但是当我添加另一个数据集时,我得到:“BuildingData.js:113 Uncaught TypeError: this.frags[("dbId" + dbId)] is not iterable”。这两个数据集是扩展 BuildingData 类的扩展,它们只是创建一个按钮并调用 super.init()。当我激活第二个标签集时,我不明白为什么它会失败。
我正在使用查看器的 v7。
class BuildingData extends Autodesk.Viewing.Extension {
constructor(viewer, options) {
super(viewer, options);
}
init(){
//Callback to update labels
const updateLabelsCallback = () => {
if(this.button.getState() === 0) {
this.updateLabels();
}
};
//Events when to update the labels
OnEvent(this.viewer, Autodesk.Viewing.CAMERA_CHANGE_EVENT, updateLabelsCallback);
OnEvent(this.viewer, Autodesk.Viewing.ISOLATE_EVENT, updateLabelsCallback);
OnEvent(this.viewer, Autodesk.Viewing.HIDE_EVENT, updateLabelsCallback);
OnEvent(this.viewer, Autodesk.Viewing.SHOW_EVENT, updateLabelsCallback);
//Add the button to the data bar
this.button.onClick = (ev) => {
this.enabled = !this.enabled;
this.button.setState(this.enabled ? 0 : 1);
this.showLabels();
};
this.viewer.dataBar.getControl("dataGrp").addControl(this.button);
}
cleanup(){
//remove button from data bar
this.viewer.dataBar.getControl("dataGroup").removeControl(this.button);
//remove labels
let labels = FindAll(`#${this.viewer.clientContainer.id} div.adsk-viewing-viewer label.data.${this.dataClass}`);
for(let label of labels) label.remove();
}
showLabels() {
let viewerContainer = Find(`#${this.viewer.clientContainer.id} div.adsk-viewing-viewer`);
//remove old labels
let labels = FindAll(`#${this.viewer.clientContainer.id} div.adsk-viewing-viewer label.data.${this.dataClass}`);
for(let label of labels) label.remove();
//show new labels?
if(!this.enabled) return;
//check if the model tree is available
let tree = this.viewer.model.getInstanceTree();
if(tree === undefined){
console.log("Model tree is not loaded yet");
return;
}
//select sessor & fit to view
const onClick = (e) => {
this.viewer.select(e.currentTarget.dataset.dbId);
this.viewer.utilities.fitToView();
};
this.frags = [];
for(let i = 0; i < this.labels.length; i++){
const label = this.labels[i];
this.frags["dbId" + label.dbId] = [];
// create the label for the dbId
let lbl = document.createElement("label");
lbl.classList.add("data");
lbl.classList.add("update");
lbl.classList.add(this.dataClass);
lbl.dataset.dbId = label.dbId;
lbl.style.cssText = `display: ${this.viewer.isNodeVisible(label.dbId) ? "block" : "none"}`;
//add click event
OnEvent(lbl, "click", onClick);
let span = document.createElement("span");
lbl.appendChild(span);
span.innerText = label.name;
viewerContainer.appendChild(lbl);
//Collect fragment ids of dbId
tree.enumNodeFragments(label.dbId, (fragId) => {
this.frags["dbId" + label.dbId].push(fragId);
this.updateLabels();
});
}
}
updateLabels() {
for(const label of FindAll(`#${this.viewer.clientContainer.id} div.adsk-viewing-viewer .update`)){
const dbId = label.dataset.dbId;
//get center of the dbId based on the bounding box of the fragments
const pos = this.viewer.worldToClient(this.getBoundingBox(dbId).center());
//position label in the center of the box
label.style.cssText = `left: ${Math.floor(pos.x - label.offsetWidth / 2)}px`;
label.style.cssText +=`top: ${Math.floor(pos.y - label.offsetHeight / 2)}px`;
label.style.cssText +=`display: ${this.viewer.isNodeVisible(dbId) ? "block" : "none"})`;
}
}
getBoundingBox(dbId) {
var fragList = this.viewer.model.getFragmentList();
const nodebBox = new THREE.Box3()
//get bounding box for each fragment
for(const fragId of this.frags["dbId" + dbId]){ //<----- ERROR is here
const fragBBox = new THREE.Box3();
fragList.getWorldBounds(fragId, fragBBox);
nodebBox.union(fragBBox);
}
return nodebBox
}
}
解决方案
我找到了解决方案,我试图更新查看器中的所有标签(两个数据集的),而不仅仅是与活动数据集对应的标签。更改 updateLabels() 中的 1 行修复了它:
const label of FindAll(`#${this.viewer.clientContainer.id} div.adsk-viewing-viewer .data.${this.dataClass}`
推荐阅读
- html - Bootstrap 4 模态背景
- google-bigquery - 在 Big Query 上访问 csv 上传错误集合
- amazon-ec2 - 如何从 cli 设置图像名称
- swift - 为什么我不能修改在闭包外声明的变量?
- mongodb - MongoDB绑定ip
- python - 无法绕过 Firefox 中的 SSH 证书问题
- javascript - 如何将外部样式应用于 D3 中的数据连接?
- java - 我在 linux 中使用 jdk-8u251-linux-i586.tar.gz 安装程序安装了 jdk1.8,但仍然出现错误:bash: /bin/java: No such file or directory
- python - 在值是另一个字典的字典中,如何更改第二个字典的特定值?
- python - 将 Google 大查询数据下载到 Jupyter 笔记本,但仅捕获 1000 行