javascript 使用MapBox GL JS而无需访问令牌

zqdjd7g9  于 2023-06-04  发布在  Java
关注(0)|答案(4)|浏览(601)

有没有办法在没有访问令牌的情况下使用MapBox GL JS?我在MapBox GL JS的文档中找不到任何提示,但是,Uber建议可以使用他们的库providing React Components for MapBox GL JS
来自react-map-gl的文档
不使用Mapbox令牌显示Map
如果您使用其他分幅源(例如,如果您托管自己的Map分幅),则可以在不使用Mapbox服务的情况下使用Map组件。你需要一个自定义的Mapbox GL样式,指向你自己的矢量图块源,并使用mapStyle prop将其传递给ReactMapGL。此自定义样式必须与平铺源的方案匹配。
来源https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens
是否可以在没有访问令牌的情况下使用“原生”MapBox GL JS?如果是,如何进行?

g6baxovj

g6baxovj1#

是的,正如评论中提到的,不要设置accessToken,也不要使用任何Map框样式或图块:

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

然后,您可以通过map.addLayer/addSource以编程方式添加图层,或者创建自己的style.json文件,引用您的tile服务器和图层。样式规范在这里有详细的文档:https://docs.mapbox.com/mapbox-gl-js/style-spec/

des4xlb0

des4xlb02#

正如人们已经评论你需要添加自己的数据源,雄蕊有一些开放的瓷砖服务或正常的OSM会做。将样式索引更改为具有源和图层参数的对象。Mapbox风格的文档非常好。https://docs.mapbox.com/mapbox-gl-js/style-spec/
我已经创建了一个中等的职位,一步一步-https://medium.com/@markallengis/simple-web-map-using-mapbox-gl-js-a44e583e0589
下面是我的意思的一个简单例子,注意如果你的服务是向量,那么更新 * 类型 *。

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
        }]
      }
pu3pd22g

pu3pd22g3#

查看以下代码:https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/您可以删除带有“mapboxgl.accessToken”的行,然后继续。
我刚刚用ReactMapboxGL组件测试了它,它工作正常!只需将“mapStyle”属性传递给文档中的样式对象组件。

vi4fp9gy

vi4fp9gy4#

还有一种解决方案,您不需要任何mapbox,因为在mapbox v2之后,它需要一个令牌,并且它不会帮助用户实现未来的功能。有一个替代mapbox的MAPLIBRE。你可以使用maplibre css实现Map,使用Cartocdn JSON文件实现Map样式(城市,道路,学校等)。你可以在这个Map上添加数据集,集群和其他功能。
下面是使用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;

相关问题