如何使用 maplibre-gl 和 react-map-gl

如何解决如何使用 maplibre-gl 和 react-map-gl

我目前正在着手将 maplibre 与 react-map-gl 结合使用。

我已阅读 documentation 关于如何使用 mapBox 的一个分支。

我已经改编了webpack-config。我将 create-react-app 项目与 rewind 一起使用。这是我的 config-overrides.js。

module.exports = function override(config,env) {
    //do stuff with the webpack config...
    module.exports = {
        webpack: (config) => {
            config.module.rules.push({
                resolve:{
                    alias: {
                        ...config.resolve.alias,'mapBox-gl': 'maplibre-gl'
                    }
                }
            })
          // Important: return the modified config
          return config
        },}
    return config;
  }

使用以下代码，我在几秒钟内看到 Maptiler 的地图，该地图是通过 maplibre 加载的。

import React,{ useState } from "react";
import ReactMapGL from "react-map-gl";

export const Map = () => {
  const [mapViewport,setMapViewport] = useState({
    height: "100vh",width: "100wh",longitude: 2.571606,latitude: 45.226913,zoom: 5
  });

  return (
    <ReactMapGL
      {...mapViewport}
      //mapBoxApiAccesstoken="MapBoxToken"
      mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
      onViewportChange={setMapViewport}
    ></ReactMapGL>
  );
};

然后它消失了，我在浏览器的控制台中看到了这个错误信息。

Error: A valid MapBox access token is required to use MapBox GL JS. To create an account or a new access token,visit https://account.mapBox.com/

如果我使用 mapBoxApiAccesstoken="MapBoxToken" 行，我可以毫无问题地使用 maptiler 地图。

 import React,zoom: 5
  });

  return (
    <ReactMapGL
      {...mapViewport}
      mapBoxApiAccesstoken="MapBoxToken"
      mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
      onViewportChange={setMapViewport}
    ></ReactMapGL>
  );
};

但我不想再需要 mapBox 令牌了。我错过了什么？

我也问过这个问题here。

解决方法

覆盖是问题所在。 config-overrides.js 应该是这样的

module.exports = function override(config,env) {
    config.module.rules.push({
        resolve:{
            alias: {
                ...config.resolve.alias,'mapbox-gl': 'maplibre-gl'
            }
        }
    })

    return config
}