使用 MapBox GL JS 无需访问令牌

Question

有没有办法在没有访问令牌的情况下使用

MapBox GL JS

？我在 MapBox GL JS 的文档中找不到任何提示，但是，

Uber

建议他们的库可以实现，为React

提供

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

？如果是的话，怎么办？

Answer 1

是的，正如评论中提到的，只是不要设置 accessToken 并避免使用任何地图框样式或图块：

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/

Answer 2

正如人们已经评论的那样，您需要添加自己的数据源，雄蕊有一些开放的图块服务或普通的 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
        }]
      }

Answer 3

查看这段代码：

https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/ 您可以删除带有“mapboxgl.accessToken”的行，然后就可以了。

我刚刚用 ReactMapboxGL 组件测试了它，它有效！ 只需将“mapStyle”属性传递给具有文档中样式对象的组件即可。

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;

Answer 5

这里是mapbox公共令牌密钥，如果您无法在mapbox“pk.eyJ1IjoiZGVsdGEtc3R1ZHVlbnQiLCJhIjoiY2xvMDk0MTVhMTJ3ZDJrcGR5ZDFkaHl4ciJ9.Gj2VU1wvxc7rFVt5E4KLOQ”中注册，您可以将其用作替代方案