时间戳

首页 > 解决方案 > 仅在此传单地图中使用 OpenStreetMap？

html - 仅在此传单地图中使用 OpenStreetMap？

问题描述

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

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

标签： htmlleafletmapbox

解决方案

要使用 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

推荐阅读