@serNevajno

Как на карте mapbox gl сделать стиль карты как стандартый на openstreetmap?

Здравствуйте, ув. сообщество. Подскажите, пожалуйста, как на карте mapbox gl сделать стиль карты как стандартый на openstreetmap?
Так на mapbox gl:
5d78f9383c6f7923477777.jpeg
Надо:
5d78f9754525f254331213.jpeg
Код:
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Locate the user</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.2.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.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.eyJ1IjoicnRrbWFwIiwiYSI6ImNqejJvbjloczA0dGczZG1uamRxNHNrM24ifQ.oJBnsuU9ILbPW7Ehz2cyPA';
  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-96, 37.8], // starting position
    zoom: 3 // starting zoom
  });

  // Add geolocate control to the map.
  map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
    trackUserLocation: true
  }));
</script>

</body>
</html>
  • Вопрос задан
  • 1437 просмотров
Решения вопроса 1
freeExec
@freeExec
Участник OpenStreetMap
Не использовать стиль mapbox, а подключить напрямую те же тайлы, что и на osm.org, с соответствующими условиями.
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"],
"tileSize": 256,
"attribution": 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [-74.50, 40], // starting position
zoom: 2 // starting zoom
});

Возможно {s} в адресе на сработает, надо экспериментировать, но как-то так.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@EmelyanovKonstantin
GIS архитектура, аналитика, разработка
Поменять стиль. Вот так:
<html>
<head>
  <meta charset='utf-8' />
  <title>Locate the user</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.2.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.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.eyJ1IjoicnRrbWFwIiwiYSI6ImNqejJvbjloczA0dGczZG1uamRxNHNrM24ifQ.oJBnsuU9ILbPW7Ehz2cyPA';
  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'https://maputnik.github.io/osm-liberty/style.json',
    center: [-96, 37.8], // starting position
    zoom: 3 // starting zoom
  });

  // Add geolocate control to the map.
  map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
    trackUserLocation: true
  }));
</script>

</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы