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

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

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

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

const propPanel = viewer.getPropertyPanel( true );

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

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

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

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( "無(wú)法從服務(wù)器獲取屬性" ) );
            
               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 );

二、使用自定義屬性面板

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

在來(lái)我們透過(guò)繼承 Autodesk.Viewing.Extensions.ViewerPropertyPanel 來(lái)創(chuàng)建自個(gè)的屬性面板（使用 ES2017 的語(yǔ)法，部份代碼來(lái)自 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( "無(wú)法從服務(wù)器獲取屬性" ) );
            
               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();
       }
    }
}

透過(guò)撰寫(xiě)括展讓自定義屬性窗取代自帶的：

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 );

以上希望對(duì)各為小伙伴有幫助～

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