使用没有访问令牌的 MapBox GL JS答案

【问题标题】：Use MapBox GL JS without Access Token使用没有访问令牌的 MapBox GL JS
【发布时间】：2019-12-06 15:44:38
【问题描述】：

有没有办法在没有访问令牌的情况下使用MapBox GL JS？我在MapBox GL JS 的文档中找不到任何提示，但是，Uber 建议它是possible with their library，providing React Components for MapBox GL JS。

来自react-map-gl的文档

显示没有 Mapbox 令牌的地图

可以在没有 Mapbox 服务的情况下使用地图组件，如果您使用其他瓦片源（例如，如果您托管自己的地图瓷砖）。您将需要一个指向您自己的自定义 Mapbox GL 样式矢量瓦片源，并使用 mapStyle 属性将其传递给 ReactMapGL。此自定义样式必须与您的磁贴源的架构相匹配。

来源https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens

是否可以在没有访问令牌的情况下使用“本机”MapBox GL JS？如果有，怎么做？

【问题讨论】：

如果您使用的是 mapbox 平铺源，则不会。
@charlietfl 我不想使用 MapBox Tile 源，而是从我自己的服务器提供我自己的图块...
所以不要提供构造函数选项的键
react-map-gl without API key using osm tiles的可能重复

标签： javascript reactjs mapbox mapbox-gl-js

【解决方案1】：

正如人们已经评论的那样，您需要添加自己的数据源，雄蕊有一些开放的磁贴服务，或者普通的 OSM 就可以了。将样式键更改为具有源和图层参数的对象。 Mapbox 风格的文档非常好。 https://docs.mapbox.com/mapbox-gl-js/style-spec/

我创建了一个逐步进行的中等帖子 - https://medium.com/@markallengis/simple-web-map-using-mapbox-gl-js-a44e583e0589

我在下面的意思的快速示例，请注意如果您的服务是矢量然后更新 type。

style:{
        'version': 8,
        'sources': {
          'raster-tiles': {
            'type': 'raster',
            'tiles': [
              'https://yourtileservicehere/{z}/{x}/{y}.jpg'
            ],
            'tileSize': 256,
          }
        },
        'layers': [{
          'id': 'simple-tiles',
          'type': 'raster',
          'source': 'raster-tiles',
          'minzoom': 0,
          'maxzoom': 22
        }]
      }

【讨论】：

Mapbox 现在已将版本 2 中的 mapbox-gl-js 更改为不再是 Open，您将必须拥有一个密钥，所以上面的回复现在已经过时了。已经有几个分叉了 - github.com/maplibre/maplibre-gl-js

【解决方案2】：

查看以下代码：https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/ 您可以删除带有“mapboxgl.accessToken”的行，一切顺利。

我刚刚使用 ReactMapboxGL 组件对其进行了测试，它可以工作！只需使用文档中的样式对象将“mapStyle”道具传递给组件。

【讨论】：

这非常适合在不暴露您的密钥的情况下将您的代码公开在文件或 github 中。非常感谢..

【解决方案3】：

是的，正如 cmets 所提到的，只是不要设置 accessToken 并避免使用任何 mapbox 样式或图块：

var map = new mapboxgl.Map({
    container: 'map'
    center: [-74.50, 40],
    zoom: 9
});

然后您可以通过map.addLayer/addSource 以编程方式添加您的图层，或者创建您自己的 style.json 文件来引用您的切片服务器和图层。样式规范在此处详细记录：https://docs.mapbox.com/mapbox-gl-js/style-spec/

【讨论】：