Только используя OpenStreetMap в этой карте листовки? - PullRequest
Новая
       11

Только используя OpenStreetMap в этой карте листовки?

0 голосов
/ 09 сентября 2018

Я новичок в создании карт со слоями карт и тайлами, поэтому, пожалуйста, потерпите меня.

Итак, я работаю над картой, чтобы отобразить точки, и я прочитал, что OpenStreetMap бесплатно, а mapbox - нет. По этой причине мы хотим использовать только OpenStreetMap.

Этот пример HTML рисует карту и отображает точки, но код говорит, что он использует обе технологии. Вот код.

Два вопроса:

Правильно ли говорить, что и mapbox, и OpenStreetMap, по сути, одно и то же, поскольку они оба предлагают плитки, используемые для рисования карт?

Я хотел бы удалить mapbox и использовать только OpenStreetMap в этом примере. Это возможно? 

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet - Points</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-dsdfsdjflsdfjsljfsdl+asfsfsflskjfsld==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/wrwrwerwer+wwerwrwerwer+dasdasdas==" crossorigin=""></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 1200px;
            height: 800px;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script src="points.js" type="text/javascript"></script>
<script>
    var map = L.map('map').setView([18.4148, -66.1241], 11);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.qweqeqweqweqwe.qeqqqwe', {
        maxZoom: 18,
        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>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);
    L.geoJSON([bicycleRental], {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, {
                radius: 7,
                fillColor: "#ff7800",
                color: "#000",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.8
            });
        }
    }).addTo(map);
</script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Этот является отличным ресурсом для поиска базовых карт. Когда вы выбираете один, вы можете просто скопировать предоставленный JavaScript. Большинство из них можно использовать с указанием авторства.

0 голосов
/ 09 сентября 2018

Чтобы использовать плитки OpenStreetMap, вы должны установить это: 

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a','b','c']
}).addTo(map);

Вместо серверов mapbox. Посмотрите пример в доме Брошюры https://leafletjs.com/index.html

...