摘要：最近有的小伙伴們都在詢問要怎么在里顯示自訂義屬性，要做到這個是挺容易的。在來我們透過繼承來創(chuàng)建自個的屬性面板使用的語法，部份代碼來自的無法從服務器獲取屬性透過撰寫括展讓自定義屬性窗取代自帶的以上希望對各為小伙伴有幫助參考

最近有 Autodesk Forge 的小伙伴們都在詢問要怎么在 Viewer 里顯示自訂義屬性，要做到這個是挺容易的。目前有兩種方式可以做到這個效果，一種是直接添加自定屬性到 Viewer 自帶的屬性面板上，另一種是使用自定義屬性面板，其作法如下所示：

一、添加自定屬性到 Viewer 自帶的屬性面板上：

要添加自定義屬性到自帶的屬性面板上前必需先獲取屬性面板的實體：

const propPanel = viewer.getPropertyPanel( true );

透過 propPanel.addProperty() 添加自訂義屬性，例如：

propPanel.addProperty( "所屬房名", "課廳", "其他" );

一般我們不會這樣直接調(diào)用這些方法，而是將它寫到一個 Viewer 擴展里，其范例如下 (使用 ES2017 的語法)：

class CustomProperyPanelExt extends Autodesk.Viewing.Extension {
    constructor( viewer, options ) {
        super( viewer, options );
        
        this.onSelectionChanged = this.onSelectionChanged.bind( this );
    }
    
    getRemoteProps( dbId ) {
        return new Promise(( resolve, reject ) => {
            fetch( `http://127.0.0.1/api/props/${ dbId }`, {
                method: "get",
                headers: new Headers({
                    "Content-Type": "application/json"
                })
            })
            .then( ( response ) => {
                if( response.status === 200 ) {
                  return response.json();
                } else {
                  return reject( new Error( response.statusText ) );
                }
            })
            .then( ( data ) => {
               if( !data ) return reject( new Error( "無法從服務器獲取屬性" ) );
            
               return resolve( data );
            })
            .catch( ( error ) => reject( new Error( error ) ) );
        });
    }
    
    async onSelectionChanged( event ) {
        if( !event.selections || event.selections.length <= 0
            || !event.selections[0].dbIdArray
            || event.selections[0].dbIdArray.length <= 0 ) return;
        
        const dbId = event.selections[0].dbIdArray[0];
        const propPanel = this.viewer.getPropertyPanel( true );
        
        try {
          const props = await this.getRemoteProps( dbId );

          for( let i = 0; i < props.length; i++ ) {
              const prop = props[i];
              propPanel.addProperty( prop.name, prop.value, prop.category );
          }
        } catch( error ) {
            console.error( 
        }
    }
    
    load() {
        this.viewer.addEventListener(
            Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT,
            this.onSelectionChanged
        );
        return true;
    }
    
    unload() {
        this.viewer.removeEventListener(
            Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT,
            this.onSelectionChanged
        );
        return true;
    }
}
Autodesk.Viewing.theExtensionManager.registerExtension( "Autodesk.ADN.CustomPropsPanel", CustomProperyPanelExt );

二、使用自定義屬性面板

使用這個方法是創(chuàng)建一個自定義的屬性面板，并透過 viewer.setPropertyPanel() 取代Viewer 自帶的屬性面板。

在來我們透過繼承 Autodesk.Viewing.Extensions.ViewerPropertyPanel 來創(chuàng)建自個的屬性面板（使用 ES2017 的語法，部份代碼來自 Forge Viewer 的 viewer3D.js）：

class CustomPropsPanel extends Autodesk.Viewing.Extensions.ViewerPropertyPanel {
    constructor( viewer ) {
        super( viewer );
    }
    
    getRemoteProps( dbId ) {
        return new Promise(( resolve, reject ) => {
            fetch( `http://127.0.0.1/api/props/${ dbId }`, {
                method: "get",
                headers: new Headers({
                    "Content-Type": "application/json"
                })
            })
            .then( ( response ) => {
                if( response.status === 200 ) {
                  return response.json();
                } else {
                  return reject( new Error( response.statusText ) );
                }
            })
            .then( ( data ) => {
               if( !data ) return reject( new Error( "無法從服務器獲取屬性" ) );
            
               return resolve( data );
            })
            .catch( ( error ) => reject( new Error( error ) ) );
        });
    }
    
    async setNodeProperties( dbId ) {
        this.propertyNodeId = dbId;
        
        if( !this.viewer ) return;
        
        try {
            const reuslt = await this.getRemoteProps( dbId );

            this.setTitle( reuslt.Name, { localizeTitle: true } );
            this.setProperties( reuslt.properties );
            this.highlight( this.viewer.searchText );
    
            this.resizeToContent();
    
            if( this.isVisible() ) {
                const toolController = this.viewer.toolController,
                mx = toolController.lastClickX,
                my = toolController.lastClickY,
                panelRect = this.container.getBoundingClientRect(),
                px = panelRect.left,
                py = panelRect.top,
                pw = panelRect.width,
                ph = panelRect.height,
                canvasRect = this.viewer.canvas.getBoundingClientRect(),
                cx = canvasRect.left,
                cy = canvasRect.top,
                cw = canvasRect.width,
                ch = canvasRect.height;
        
                if( (px <= mx && mx < px + pw) && (py <= my && my < py + ph) ) {
                    if( (mx < px + (pw / 2)) && (mx + pw) < (cx + cw) ) {
                       this.container.style.left = Math.round( mx - cx ) + "px";
                       this.container.dockRight = false;
                    } else if( cx <= (mx - pw) ) {
                       this.container.style.left = Math.round( mx - cx - pw ) + "px";
                       this.container.dockRight = false;
                    } else if( (mx + pw) < (cx + cw) ) {
                       this.container.style.left = Math.round( mx - cx ) + "px";
                       this.container.dockRight = false;
                    } else if( (my + ph) < (cy + ch) ) {
                       this.container.style.top = Math.round( my - cy ) + "px";
                       this.container.dockBottom = false;
                    } else if( cy <= (my - ph) ) {
                       this.container.style.top = Math.round( my - cy - ph ) + "px";
                       this.container.dockBottom = false;
                    }
               }
          }
       } catch( error ) {
           this.showDefaultProperties();
       }
    }
}

透過撰寫括展讓自定義屬性窗取代自帶的：

class CustomProperyPanelExt extends Autodesk.Viewing.Extension {
    constructor( viewer, options ) {
        super( viewer, options );
    }

    load() {
        this.viewer.setPropertyPanel( new CustomPropsPanel( viewer ) );
        return true;
    }
    
    unload() {
        return true;
    }
}
Autodesk.Viewing.theExtensionManager.registerExtension( "Autodesk.ADN.CustomPropsPanel", CustomProperyPanelExt );

以上希望對各為小伙伴有幫助～

參考：https://github.com/Autodesk-F...