未捕获的错误:使用Planetary,js时无法在Object。<anonymous>上加载JSON world-110m.json。

时间:2019-06-04 03:28:47

标签: javascript html

我正在尝试使用Planetary.js http://planetaryjs.com/examples/rotating.html,但它给了我错误。我已经在空文件夹中尝试过了,在该文件夹中我在一个文件夹中创建了每个html,js,并且效果很好。现在,我尝试按照烧瓶模板进行相同的操作。这是我的文件路径

mainfolder
|
|->templates
|      |->index.html
|      |-> world-110m.json
|
|->static
     |->css
     |->js
         |->draw_globe.js
         |-> planetaryjs.min.js

我放置了world-110m.json,因为在http://planetaryjs.com/documentation/index.html的文档中,它清楚地告诉了我

// You can remove this statement if `world-110m.json`
// is in the same path as the HTML page:
planet.loadPlugin(planetaryjs.plugins.earth({
  topojson: { file: 'http/path/to/world-110m.json' }
}));

因此,当我在所有文件夹都放在一个文件夹中的另一个文件夹上尝试时,它工作得很好。我不确定如何解决这个问题

这是我的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>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/style.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>

    <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
    <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>

</head>

<body>
    <div class="text-center main">
        <canvas id='globe' width='700' height='700'></canvas>
    </div>

    <script type='text/javascript' src='../static/js/planetaryjs.min.js'></script>
    <script src="../static/js/config.js"></script>
    <script src="../static/js/draw_globe.js"></script>
    <script src="../static/js/app.js"></script>
</body>
</html>

draw_globe.js

var planet = planetaryjs.planet();
var canvas = document.getElementById('globe');
// You can remove this statement if `world-110m.json`
// is in the same path as the HTML page:

// Make the planet fit well in its canvas
planet.projection.scale(250).translate([250, 250]);
planet.draw(canvas);

如果您需要任何其他信息,请告诉我,我将实时更新。谢谢!

0 个答案:

没有答案