Github 页面 React 应用程序中缺少 Mapbox GL 样式

Question

我创建了一个托管 React 应用程序的 GitHub 页面应用程序。在此应用程序中，我有 2 个使用 react-map-gl 的 Mapbox 地图实例，并且在 GitHub 页面上部署时缺少一些样式。

在本地，所有样式都能正确加载，并且地图看起来很棒。然而，一旦部署，一些样式就会丢失，而不是全部。

• 我的自定义样式无法加载（尽管它们已公开）

• mapbox://styles/mapbox/satellite-v9

  负载正常

• mapbox://styles/mapbox/outdoors-v12

  无法加载
• 所有地形都丢失了

我声明的两张地图如下

1. 地球仪

<Map
  initialViewState={{
    longitude: -100,
    latitude: 40,
    zoom: 1,
  }}
  terrain={{ source: "mapbox-dem", exaggeration: 1.5 }}
  mapboxAccessToken={
    "redacted"
  }
  style={{ width: "100%", height: 480 }}
  mapStyle="mapbox://styles/mapbox/outdoors-v12"
>
  <Source
    id="mapbox-dem"
    type="raster-dem"
    url="mapbox://mapbox.mapbox-terrain-dem-v1"
    tileSize={512}
    maxzoom={14}
  />
</Map>

2. 3D地图

<Map
  initialViewState={{
    longitude: longitude,
    latitude: latitude,
    zoom: 14,
    bearing: 80,
    pitch: 80,
  }}
  maxPitch={85}
  terrain={{ source: "mapbox-dem", exaggeration: 1.5 }}
  mapboxAccessToken="redacted"
  style={{ width: "100%", height: "100vh" }}
  mapStyle={"mapbox://styles/mapbox/satellite-v9"}
>
  <Source
    id="mapbox-dem"
    type="raster-dem"
    url="mapbox://mapbox.mapbox-terrain-dem-v1"
    tileSize={512}
    maxzoom={14}
  />
  <MapMarker
    fixed
    closeButton
    markerName={name}
    latitude={latitude}
    longitude={longitude}
  />
  <Layer {...skyLayer} />
</Map>

在本地我看到：

VS部署在GitHub页面上：

代币

部署中使用与本地相同的令牌。我尝试过使用默认的公共令牌、仅允许某些域的自定义令牌等。无论我尝试什么，都一样。

有人知道我可能会错过什么吗？我觉得这是 GitHub 页面限制，但同时加载了一些样式（例如卫星-v9，但不是 3d 或户外-v12

Answer 1

我发现了这个问题 - 我在这个 React 应用程序中使用

create-react-app

，并且我必须按照其文档中的详细信息配置 Mapbox 的 WebPack 转译： 转译 | MapBox安装

我将以下内容添加到我的 package.json 中：

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not safari < 10",
      "not chrome < 51",
      "not android < 5",
      "not ie < 12"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

所以最终不是 GitHub Pages 限制，只是隐藏在

create-react-app

脚本中的捆绑问题:)