Javascript mapbox GL JS中的GeoJson不会通过URL接受它，格式似乎很好_Javascript_Flask_Mapbox_Geojson

Javascript mapbox GL JS中的GeoJson不会通过URL接受它，格式似乎很好

javascript flask mapbox

Javascript mapbox GL JS中的GeoJson不会通过URL接受它，格式似乎很好,javascript,flask,mapbox,geojson,Javascript,Flask,Mapbox,Geojson,几个小时后我不得不放弃，我正试图在mapbox JS地图上创建一条路线。flask实例正在创建geoJson，并且还有一个静态geoJson文件要测试 www.geojson.io接受我的原始json为有效，当我复制json并将其硬编码到文件中时，它可以工作，但似乎无法通过json URL使其工作在JSFIDLE中，我注释掉了硬编码的示例和不工作的URL示例代码： mapboxgl.accessToken = "pk.eyJ1Ijoicmlla3VzIiwiYSI6ImNrNWphOWt

几个小时后我不得不放弃，我正试图在mapbox JS地图上创建一条路线。flask实例正在创建geoJson，并且还有一个静态geoJson文件要测试

www.geojson.io接受我的原始json为有效，当我复制json并将其硬编码到文件中时，它可以工作，但似乎无法通过json URL使其工作

在JSFIDLE中，我注释掉了硬编码的示例和不工作的URL示例

代码：

mapboxgl.accessToken =
  "pk.eyJ1Ijoicmlla3VzIiwiYSI6ImNrNWphOWt5dTAxOHEzbm1zNjltMHJ6b3QifQ.6AaxHGmQTpk--s75pH-IrQ";
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [172.677874,-34.427676 ],
  zoom: 6
});

map.on("load", function() {
     map.addSource('routedata', {
    type: 'geojson',
    data: 'https://riekus.bike/static/tester.json'
    });
  map.addLayer({
    id: "route",
    type: "line",
    source: "routedata",

    layout: {
      "line-join": "round",
      "line-cap": "round"
    },
    paint: {
      "line-color": "#ff652f",
      "line-width": 18
    }
  });
});

看来您的服务器设置可能有问题。我刚刚下载了your tester.json并试图重现这个问题，但一切正常

我有混合内容的问题，因为我还没有设置https。你知道会出什么问题吗？文件似乎送达正确。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Add a WMS source</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>

  <div id='map'></div>
  <script>
  mapboxgl.accessToken =
    "pk.eyJ1Ijoicmlla3VzIiwiYSI6ImNrNWphOWt5dTAxOHEzbm1zNjltMHJ6b3QifQ.6AaxHGmQTpk--s75pH-IrQ";
  var map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v11",
    center: [172.677874, -34.427676],
    zoom: 6
  });

  map.on("load", function () {
    map.addSource('routedata', {
      type: 'geojson',
      data: '/tester.json'
    });

    map.addLayer({
      id: "route",
      type: "line",
      source: "routedata",

      layout: {
        "line-join": "round",
        "line-cap": "round"
      },
      paint: {
        "line-color": "#ff652f",
        "line-width": 18
      }
    });
  });
  </script>
</body>
</html>