基于react-map-gl与maplibre-gl的双地图同步联动问题求助

要解决双地图联动的问题，核心是让两张地图共享同一个视图状态，并确保只有当前被操作的地图触发状态更新，避免循环触发。以下是修改后的完整代码：

import * as React from 'react';
import { useState, useCallback } from 'react';
import { render } from 'react-dom';
import Map from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const LIGHT_MAP_STYLE = 'https://tiles.basemaps.cartocdn.com/gl/positron-gl-style/style.json';
const DARK_MAP_STYLE = 'https://tiles.basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';

const LeftMapStyle = {
  position: 'absolute',
  width: '50%',
  height: 800,
};
const RightMapStyle = {
  position: 'absolute',
  left: '50%',
  width: '50%',
  height: 800,
};

export default function ExtraDashboards() {
  const [viewState, setViewState] = useState({
    longitude: -122.43,
    latitude: 37.78,
    zoom: 12,
    pitch: 30
  });

  const [activeMap, setActiveMap] = useState('left');
  
  // 标记当前操作的地图
  const onLeftMoveStart = useCallback(() => setActiveMap('left'), []);
  const onRightMoveStart = useCallback(() => setActiveMap('right'), []);

  // 仅由当前操作的地图更新视图状态
  const onMove = useCallback(event => {
    if (event.target.id === activeMap) {
      setViewState(event.viewState);
    }
  }, [activeMap]);

  return (
    <div style={{ position: 'relative', height: '100%' }}>
      <Map
        id="left"
        viewState={viewState}
        onMoveStart={onLeftMoveStart}
        onMove={onMove}
        mapLib={maplibregl}
        mapStyle={LIGHT_MAP_STYLE}
        style={LeftMapStyle}
      />
      <Map
        id="right"
        viewState={viewState}
        onMoveStart={onRightMoveStart}
        onMove={onMove}
        mapLib={maplibregl}
        mapStyle={DARK_MAP_STYLE}
        style={RightMapStyle}
      />
    </div>
  );
}

function renderToDom(container) {
  render(<ExtraDashboards />, container);
}

关键改动说明： #

• 将两张地图的initialViewState替换为viewState：initialViewState仅在组件初始化时生效，而viewState会响应状态变化实时更新地图视图，这是实现联动的核心。
• 优化onMove回调逻辑：通过判断事件目标的ID与当前激活地图是否一致，确保只有正在操作的地图会更新共享的viewState，避免两张地图互相触发更新导致的循环问题。
• 移除未使用的mode状态：简化代码结构，保留必要的状态管理逻辑。

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