Question

我的目标是创建3D地球，该地球将占据我在网站中使用plotly创建的整个空间。我找不到任何文档，但是我找到了某人的项目，并使用了他们密谋使用的代码。它是这样的：

  function drawGlobe() {

    var data = [{
        type: 'choropleth',
        locationmode: 'country names',
        autocolorscale: false,
        reversescale: true,
        colorscale: [
            [0, 'rgb(0, 0, 139)'],
            [1, 'rgb(144, 238, 144)']
        ]
    }];

    var layout = {
        geo: {
            showocean: true,
            oceancolor: 'rgba(74,128,245, 0.5)',
            showlakes: true,
            lakecolor: 'rgba(74,128,245, 0.5)',
            showland: true,
            landcolor: 'rgb(64, 64, 64)',
            mapframe: false,

        projection: {
            type: 'orthographic'
        },
        bgcolor:"rgba(0,0,0,0)",
        },
        paper_bgcolor: 'rgba(0,0,0,0)',
    };

    var update = {
        width:1700,
        height:1000
    };
// {showLink: false},{responsive: true}
    Plotly.newPlot('globe', data, layout, update);
}

这将创建一个3D地球，可以在其中旋转并更改大小，但是它只占用了我的网页很小的空间。我想调整它的大小，但是如果没有任何文档，找不到它的方法。如果有人知道改变地球尺寸的替代方法或方法，那将非常有帮助。谢谢！

注意：是的，正在从另一个js调用该函数，并绘制到具有id =“ globe”的div标签

我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Air-Quality</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
    integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
    crossorigin=""></script>


    <link rel="stylesheet" href="../static/css/style.css">
    <!-- leaflet -->


    <!-- My on scrape for lists -->
    <script>
        var canadian_cities = {{canada_cities|tojson}};
    </script>
</head>

<body>
    <div id="globe">

    </div>

    <div class="description text-center" style="overflow-x:auto;">
        <p>For all of the pollutant PPM is measurment unit.</p>
        <table class="aqi-table" align="center">
          Pollutants that have greatest effect on AQI.
          <thead>
            <td>PM2.5</td>
            <td>PM10</td>
            <td>O3</td>
            <td>NO2</td>
            <td>SO2</td>
            <td>CO</td>
          </thead>
          <tbody>
            <tr>
                <td>placeholder</td>
                <td>placeholder</td>
                <td>placeholder</td>
                <td>placeholder</td>
                <td>placeholder</td>
                <td>placeholder</td>
            </tr>
          </tbody>
          </table>
    </div>
    <script src="../static/js/config.js"></script>
    <script src="../static/js/choropleth_globe.js"></script>
    <script src="../static/js/app.js"></script>
</body>
</html>

使用JavaScript创建交互式3-D地球

0 个答案: