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

【问题标题】：Adding Cesium app to Plotly Dash Doesn’t Work将 Cesium 应用程序添加到 Plotly Dash 不起作用
【发布时间】：2020-12-21 13:52:43
【问题描述】：

我正在尝试将 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

【问题讨论】：

标签： python plotly jupyter plotly-dash cesium

【解决方案1】：

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

【讨论】：