我一直试图在查看器中点击任何特定节点时显示自定义停靠面板。
最初按照这个文档。https:/forge.autodesk.comendocsviewerv2referencejavascriptdockingpanel。
错误 - 未捕获的类型错误：在DockingPanel处，this.setVisible不是一个函数。
按照这个StackOverflow的解决方案。如何创建一个对接面板
这次没有出错，但面板没有出现。于是提出了这个问题，并得到了一个建议，即明确调用并设置面板的尺寸。
如何创建停靠面板（在较新版本的autodesk forge viewer中）。
但这个问题经过反复编辑，修改不清楚，已经乱了套。因此在这里再次提出来，并提供更多的细节。以便我能得到适当的帮助。
自定义停靠面板正在创建并添加到DOM中。在DOM中指定的所有尺寸下，我都能找到它们，z-index也设置为2.但在显示上还是有问题。
我将附上截图的链接--显示正在添加的mypanel部分和附加的CSS。
[！[控制台截图][1]][1]。https:/i.stack.imgur.comMwcD7.png。
下面是我的实现。
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
<style>
body {
margin: 0;
}
#forgeViewer {
width: 100%;
height: 100%;
margin: 0;
background-color: #F0F8FF;
}
</style>
</head>
<body>
<div id="forgeViewer"></div>
</body>
<script>
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoic1c2N2R1MUFrS2JTbVp0bEVPb2F5TVNmSjRGSUthcWV2cUxEcFAyU0VkYlZrd1lRYTdTR2JacWc4NUZzWUVPaiIsImV4cCI6MTU4NzY1NDA4M30.zt7dAGOS58TEzyWKyA-Y6YiLGsRNWTy6fcIPLiaCCM4';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
SimplePanel = function(parentContainer, id, title, content, x, y)
{
this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});
// Auto-fit to the content and don't allow resize. Position at the coordinates given.
//
this.container.style.height = "150px";
this.container.style.width = "450px";
this.container.style.resize = "auto";
this.container.style.left = x + "px";
this.container.style.top = y + "px";
this.container.style.zIndex = 2;
};
SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;
SimplePanel.prototype.initialize = function()
{
this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);
this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);
this.closer = this.createCloseButton();
this.title.appendChild(this.closer);
var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);
var html = [
'<div class="uicomponent-panel-controls-container">',
'<div class="panel panel-default">',
'<table class="table table-hover table-responsive" id = "clashresultstable">',
'<thead>',
'<th>Name</th><th>Status</th><th>Found</th><th>Approved By</th><th>Description</th>',
'</thead>',
'<tbody>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'</tbody>',
'</table>',
'</div>',
'</div>'
].join('\n');
$(this.scrollContainer).append(html);
this.initializeMoveHandlers(this.title);
this.initializeCloseHandler(this.closer);
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
function onDocumentLoadSuccess(viewerDocument) {
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
//console.log(viewer.model.getData());
console.log(viewer.model.getDocumentNode());
// console.log(SimplePanel.container)
// viewer.getPropertyPanel(true).setVisible(true)
var content = document.createElement('div');
var mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content);
mypanel.setVisible(true);
})
}
function onDocumentLoadFailure() {
console.error('Failed fetching Forge manifest');
}
</script>
</html> ```
[1]: https://i.stack.imgur.com/MwcD7.png
就像我在另一个答案中建议的那样，尝试在面板的stylingCSS中设置定位正确(左和顶部等)，而你的代码中似乎缺少了这一点来初始化面板......。
var mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content); // x,y are not being set.
mypanel.setVisible(true);
在你的截图中,面板似乎是在视口外用无效的坐标值进行渲染... ...