Geo Json в mapbox GL JS не примет его через URL, формат выглядит нормально - PullRequest
Новая
       25

Geo Json в mapbox GL JS не примет его через URL, формат выглядит нормально

0 голосов
/ 22 января 2020

https://jsfiddle.net/317jdwqt/

Через пару часов мне приходится сдаваться, я пытаюсь создать линию маршрута на карте JS map. Экземпляр flask создает geo Json на https://riekus.bike/route, а также имеет файл stati c geo json для тестирования на https://riekus.bike/static/tester.json.

www.geojson.io принимает мой необработанный json как действительный, когда я копирую json и жестко кодирую его в мой файл, он работает, но, похоже, не может заставить его работать через json URL.

В jsfiddle я закомментировал пример с жестким кодом и пример с не работающим 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
    }
  });
});

1 Ответ

1 голос
/ 22 января 2020

Кажется, что может быть какая-то проблема с настройкой вашего сервера. Я только что скачал ваш tester.json и попытался воспроизвести эту проблему, но все работает нормально.

enter image description here

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