Как использовать стандартные серверы листов OpenStreetMap с Mapbox GL JS? - PullRequest
Новая
       9

Как использовать стандартные серверы листов OpenStreetMap с Mapbox GL JS?

0 голосов
/ 11 марта 2020

Я пытаюсь использовать Mapbox GL в сочетании с простыми публичными c серверами OSM. Следуя примеру того, как добавить источник растровых плиток , мой минимальный пример выглядит следующим образом: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Minimal OSM Test</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      border: solid 1px #000000;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = new mapboxgl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {
          osm: {
            type: 'raster',
            tiles: ["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"],
          }
        },
        layers: [{
          id: 'osm',
          type: 'raster',
          source: 'osm',
        }],
      }
    });
  </script>

</body>

</html>

К сожалению, это не работает: карта делает ничего не показывать, и консоль браузера заполнена ошибками заблокированных перекрестных запросов.

С другими библиотеками карт, такими как Leaflet или OpenLayers, у меня нет проблем с подключением к серверам publi c OSM.

Как мне сделать эту работу в Mapbox GL JS?

1 Ответ

1 голос
/ 14 марта 2020

Обобщая идеи в комментариях выше, а также добавляя важное примечание об атрибуции, этот JSFiddle достигает того, что вы ищете: https://jsfiddle.net/g1rwx8kp/.

Следующие изменения были made:

  • Как отмечено chris-g , вы должны удалить {s} из URL-адреса плитки.
  • Как отмечено AndrewHarvey , указав tileSize - это хорошая практика. Здесь я включил tileSize: 256.

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

    Данные OpenStreetMap бесплатны для всех. Нашими серверами плиток не являются.

    Кроме того, в качестве требования для использования серверов плиток указан «четко отображаемый атрибут лицензии». Поэтому я рекомендую внимательно ознакомиться с этими политиками, прежде чем часто подключаться к серверам publi c OSM. Или, может быть, кто-то другой, имеющий опыт использования этих листов, может предоставить больше информации!

...