Создание интерактивного 3-D глобуса с использованием JavaScript - PullRequest
Новая
       4

Создание интерактивного 3-D глобуса с использованием JavaScript

0 голосов
/ 03 июня 2019

Моя цель - создать трехмерный глобус, который будет занимать все пространство на моем сайте, который я создал с помощью сюжета.Я не могу найти никаких документов, однако я нашел чей-то проект и использовал их код, который использовался сюжетом.Это выглядит так: 

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

Это создает трехмерный глобус, где я могу повернуть его и изменить размеры, однако он занимает мало места на моей веб-странице.Я хочу изменить его размер, однако не могу найти способ сделать это без какой-либо документации.Если кто-нибудь знает альтернативный метод или способ изменить размер этого шара, это было бы очень полезно.Спасибо!

примечание: и да, функция вызывается из другого js и отображается в теге div с id = "globe"

my 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>
...