如何在偽造查看器中顯示 2 個不同的 label 集作為標記

Question

我正在嘗試根據示例標記代碼在偽造查看器中顯示一些標簽。 我的代碼適用於一個數據集，但是當我添加另一個數據集時，我得到：“BuildingData.js:113 Uncaught TypeError: this.frags[("dbId" + dbId)] is not iterable”。 這兩個數據集是擴展 BuildingData class 的擴展，它們只是創建一個按鈕並調用 super.init()。 當我激活第二個 label 集時，我不明白為什么它會失敗。

我正在使用查看器的 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
    }
}

Answer 1

我找到了解決方案，我試圖更新查看器中的所有標簽（兩個數據集的），而不僅僅是與活動數據集對應的標簽。 更改 updateLabels() 中的 1 行修復了它：

const label of FindAll(`#${this.viewer.clientContainer.id} div.adsk-viewing-viewer .data.${this.dataClass}`