将 Cesium 应用程序添加到 Plotly Dash 不起作用

问题描述

我正在尝试将 Cesium 集成到我的 Plotly Dash 应用程序中，但是当我从我的 Jupyter 笔记本本地运行它时，它不会在 Plotly Dash 中呈现 Cesium 应用程序。我的python代码如下：

import dash
import dash_html_components as html
external_css = ['https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Widgets/widgets.css']

app = dash.Dash(__name__,title='Cesium Test',external_stylesheets=external_css)

app.layout = html.Div(id='blah',children=[
                          'Testing...',html.Script(src='https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Cesium.js'),html.Div(id='cesiumContainer'),html.Script('''
          Cesium.Ion.defaultAccesstoken = 'any_code_works';
          var viewer = new Cesium.Viewer('cesiumContainer');
                          ''')
                      ])

if __name__ == '__main__':
    app.run_server(debug=True,use_reloader=False)

这是一个工作示例（单击“显示”按钮以查看它呈现 Cesium 应用程序）：

https://glitch.com/edit/#!/hyper-sixth-hope?path=index.html%3A17%3A11

解决方法

@alexcjohnson 帮助我完成了 Plotly community

这是工作代码：

import dash
import dash_html_components as html
from dash.dependencies import Input,Output

external_css = ['https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Widgets/widgets.css']
external_scripts = [{'src':'https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Cesium.js'}]

app = dash.Dash(__name__,title='Cesium Test',external_scripts=external_scripts,external_stylesheets=external_css)

app.layout = html.Div(id='blah',children=[
                          'Testing...',html.Div(id='cesiumContainer')
                      ])

app.clientside_callback(
    '''
    function(id) {
        Cesium.Ion.defaultAccessToken = "any_code_works";
        var viewer = new Cesium.Viewer(id);
        return true;
    }
    ''',Output('cesiumContainer','data-done'),Input('cesiumContainer','id')
)

if __name__ == '__main__':
    app.run_server(debug=True,use_reloader=False)