仅在此传单地图中使用 OpenStreetMap？答案

【问题标题】：Only using OpenStreetMap in this leaflet map?仅在此传单地图中使用 OpenStreetMap？
【发布时间】：2018-09-11 04:50:45
【问题描述】：

我是使用地图图层和图块创建地图的新手，所以请多多包涵。

所以我正在制作一张地图来显示点，我读到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>

【问题讨论】：

标签： html leaflet mapbox

【解决方案1】：

要使用 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 服务器。查看 Leaflet 主页上的示例https://leafletjs.com/index.html

【讨论】：

【解决方案2】：

This 是查找底图的绝佳资源。当您选择一个时，您可以简单地复制提供的 JavaScript。大多数都可以免费使用并注明出处。

【讨论】：