使用react-map-gl切换地图样式后如何重新初始化source和layer？

• 切换地图基底样式时，mapbox-gl 内核会清空当前所有已注册的source和layer，react-map-gl 绑定的自定义Source、Layer组件需要跟随新的样式上下文重新挂载
• React 异步渲染调度的时序差会导致样式切换时，Layer 组件的挂载时机早于对应的 Source 组件，mapbox-gl 在校验 Layer 依赖的 source 是否存在时触发报错，后续 Source 挂载完成后 Layer 会自动关联成功，所以功能表现正常
• 7.1.0 版本之前的 react-map-gl 未对样式切换后的重挂载逻辑做时序优化，容易出现重复注册/注销的冲突报错

方案1：给 Source、Layer 绑定与样式关联的唯一key（最简便） #

强制组件跟随地图样式切换销毁重渲染，从根源避免时序冲突，代码示例如下：

import { useState } from 'react'
import Map, { Source, Layer } from 'react-map-gl'

const MapDemo = () => {
  // 地图样式状态
  const [mapStyle, setMapStyle] = useState('mapbox://styles/mapbox/streets-v12')

  // 切换街道/卫星样式
  const toggleMapMode = () => {
    setMapStyle(prev => 
      prev.includes('streets') 
        ? 'mapbox://styles/mapbox/satellite-streets-v12' 
        : 'mapbox://styles/mapbox/streets-v12'
    )
  }

  return (
    <Map
      mapboxAccessToken={'你的mapbox密钥'}
      style={{ width: '100%', height: '100vh' }}
      mapStyle={mapStyle}
    >
      {/* 核心：给Source和Layer的key绑定当前mapStyle变量 */}
      <Source
        key={`custom-data-source-${mapStyle}`}
        id="custom-data"
        type="geojson"
        data={'你的geojson数据地址或对象'}
      >
        <Layer
          key={`custom-data-layer-${mapStyle}`}
          id="custom-layer"
          type="circle"
          paint={{
            'circle-radius': 6,
            'circle-color': '#2563eb'
          }}
        />
      </Source>
    </Map>
  )
}

方案2：监听样式加载完成事件再渲染图层 #

如果需要更精准的控制，可以监听地图的styledata事件，确认基底样式加载完成后再渲染自定义图层：

import { useState, useEffect } from 'react'
import Map, { Source, Layer, useMap } from 'react-map-gl'

const CustomLayer = () => {
  const { current: mapInstance } = useMap()
  const [isStyleReady, setIsStyleReady] = useState(false)

  useEffect(() => {
    if (!mapInstance) return
    const handleStyleLoad = () => {
      // 确认样式完全加载完成
      if (mapInstance.isStyleLoaded()) {
        setIsStyleReady(true)
      }
    }
    mapInstance.on('styledata', handleStyleLoad)
    return () => {
      mapInstance.off('styledata', handleStyleLoad)
      setIsStyleReady(false)
    }
  }, [mapInstance, mapInstance?.getStyle()])

  return isStyleReady ? (
    <Source id="custom-data" type="geojson" data={'你的数据'}>
      <Layer id="custom-layer" type="circle" paint={{'circle-radius':6}} />
    </Source>
  ) : null
}

方案3：升级 react-map-gl 到最新稳定版 #

v7.1.0 之后的官方版本已经修复了样式切换场景下的组件挂载时序问题，如果当前使用的版本低于v7，优先升级依赖可以解决绝大多数同类报错。

注意：自定义 Source、Layer 的 id 不要和地图基底样式内置的资源 id 重名，避免出现覆盖冲突导致的注册失败问题。

内容的提问来源于stack exchange，提问作者TechTeddy