如何在React项目的Mapbox地图中添加图例？

你之前使用的是原生HTML环境下的第三方Mapbox图例控件调用语法，这类直接操作原生map实例挂载控件的方式，在React的异步渲染、虚拟DOM更新逻辑下会出现挂载失败、实例丢失的问题，推荐使用React兼容的自定义实现方式，步骤如下：

• 声明图例容器的ref用来绑定DOM节点，所有图例内容操作都放在地图加载完成的回调中执行

import { useRef, useEffect } from 'react';
import Map from 'react-map-gl'; // 如果你用的是react-map-gl封装库

function MapboxRouteMap() {
  const legendContainerRef = useRef(null);

  // 地图加载完成后填充图例内容
  const onMapLoaded = () => {
    if (!legendContainerRef.current) return;
    // 插入自定义图例内容，支持HTML字符串
    legendContainerRef.current.innerHTML = '<strong>我从白宫走到国会山的路线！</strong>';
    // 可以在这里继续添加图例色块、说明文本等自定义内容
  };

• 在Map组件内部插入自定义图例DOM节点，通过行内样式固定在右上角，和原生控件位置对齐

return (
    <Map
      mapboxAccessToken="你的Mapbox访问密钥"
      initialViewState={{
        longitude: -77.0365,
        latitude: 38.8977,
        zoom: 13
      }}
      onLoad={onMapLoaded}
    >
      {/* 自定义图例容器 */}
      <div 
        ref={legendContainerRef}
        style={{
          position: 'absolute',
          top: 10,
          right: 10,
          backgroundColor: '#fff',
          padding: '12px 16px',
          borderRadius: '4px',
          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
        }}
      />
    </Map>
  );
}

export default MapboxRouteMap;

• 如果你是直接在React中使用原生mapbox-gl库，只需要在map实例的load事件回调中，把上述自定义图例DOM挂载到地图容器节点下即可，不需要调用第三方legendControl相关方法。

所有和map实例相关的操作都要放在地图加载完成的回调中执行，避免实例未初始化完成就调用方法导致报错。

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