在不使用访问令牌的情况下使用MapBox GL JS

Question

有没有一种方法可以在不使用访问令牌的情况下使用MapBox GL JS？我在MapBox GL JS的文档中找不到任何提示，然而，Uber建议使用他们的库，提供用于MapBox GL JS的React组件，这是可能的。

从react-map-gl的文档中得知：

显示没有Mapbox令牌的地图

如果您使用另一个瓷砖源（例如，如果您托管自己的地图瓷砖），则可以使用地图组件而不使用Mapbox服务。您将需要一个自定义的Mapbox GL样式，指向您自己的矢量瓦片源，并将其传递给ReactMapGL，使用mapStyle属性。此自定义样式必须与您的瓦片源的模式匹配。

来源https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens 是否可以在不使用访问令牌的情况下使用“本机”的MapBox GL JS？如果可以，如何实现？

- four-eyes

---

如果您正在使用Mapbox瓦片源，则不需要这样做。 - charlietfl

@charlietfl 我不想使用 MapBox 瓦片源，而是从我自己的服务器提供我的瓦片... - four-eyes

因此，请勿向构造函数选项提供密钥。 - charlietfl

可能是重复的问题：react-map-gl使用osm瓦片而不需要API密钥。 - bluenote10

Answer 1

是的，正如评论中提到的那样，只需不设置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/

- Scarysize

---

这似乎不再是情况了；Mapbox GL JS v2.0+甚至需要一个API密钥来初始化地图。:( 哦，好吧。 - Matt

Answer 2

正如其他人已经评论的那样，您需要添加自己的数据源，Stamen提供了一些开放式瓷砖服务或普通的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
        }]
      }

- mark

---

Mapbox现在已经在2版本中更改了mapbox-gl-js，不再是开放的，您将需要一个密钥才能继续使用，因此上面的回复已经过时。已经有几个分支 - https://github.com/maplibre/maplibre-gl-js - mark

Answer 3

请查看此代码段: https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/ 您可以删除带有“mapboxgl.accessToken”的行，然后就可以使用了。

我刚刚使用ReactMapboxGL组件测试了它，它可以正常工作！只需将样式对象传递给组件的“mapStyle”属性即可。

- Stan

---

这对于在Fidles或GitHub上公开您的代码而不暴露您的密钥非常有帮助。非常感谢。 - Johan Hoeksma

Answer 4

还有一种解决方案，您不需要任何mapbox，因为在mapbox v2之后，它需要一个令牌，并且它将无法帮助用户实现未来的功能。有一个替代mapbox的地图库，叫做MAPLIBRE。您可以使用maplibre css进行地图实现，使用Cartocdn JSON文件进行地图样式设置（城市、道路、学校等）。 您可以使用此地图添加数据集、聚类和其他功能。

以下是使用react、maplibre和javascript的代码片段：

import React, { useState, useEffect, useRef } from 'react';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';


  const MaplibreUe = () => {
  const mapContainer = useRef(null);
  const [viewState, setViewState] = useState({
    center: [-100.43, 35],
    zoom: 5,
    pitch: 50
  });

  useEffect(() => {
      const map = new maplibregl.Map({
      container: mapContainer.current,
      style: 'https://tiles.basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
      ...viewState,
    });

    map.addControl(new maplibregl.ScaleControl(), 'bottom-right');
    map.addControl(new maplibregl.FullscreenControl(), 'bottom-right');
    map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
    map.addControl(new maplibregl.GeolocateControl(), 'bottom-right');

   return () => {
      map.remove();
    };
  
  }, []);

  return (
    <>
      <div
        ref={mapContainer}
        style={{
          width: '100%',
          height: '100%',
          position: 'absolute',
        }}
      ></div>
    </>
  );
};

export default MaplibreUe;

- Rana Hamza