OpenLayers+React逐个添加地图路线要素时颜色样式错乱Bug

问题现象 #

开发学校项目过程中遇到渲染bug：

• 按「先添加黑色路线、再添加红色路线」的顺序勾选复选框时，两条路线颜色显示完全正常
• 按「先添加红色路线、再添加黑色路线」的顺序操作时，两条路线都会显示为红色
  已通过控制台打印所有相关变量、图层内已添加的要素，数据均符合预期，反复核查代码未定位到根因。

原有实现代码 #

添加路线逻辑 #

useEffect(() => {
    if (props.addRoute) {
      let feature = new Feature();
      let coordinates = [];
      props.addRoute.geometry.coordinates.forEach((coordinate) => {
        coordinates.push(fromLonLat(coordinate));
      });

      const color = props.addRoute.properties.route_color;
      const width = props.addRoute.properties.route_width;

      feature.setId(props.addRoute.id);
      feature.setGeometry(new LineString(coordinates));
      feature.setStyle(
        new Style({
          zIndex: featuresLayer.getSource().getFeatures().length,
          stroke: new Stroke({
            color: color,
            width: width,
          }),
        })
      );
      featuresLayer.getSource().addFeature(feature);

      console.log(featuresLayer.getSource().getFeatures());
    }
  }, [props.addRoute]);

移除路线逻辑 #

useEffect(() => {
    if (props.removeRoute) {
      let feature = featuresLayer
        .getSource()
        .getFeatureById(props.removeRoute.id);
      featuresLayer.getSource().removeFeature(feature);
    }
  }, [props.removeRoute]);

路线列表组件 #

import React from "react";
import "./tables.css";

const RouteTable = (props) => {
  const formatDate = (date) => {
    let localDate = new Date(date);
    let currentDate = new Date();
    if (
      localDate.getDay() == currentDate.getDay() &&
      localDate.getMonth() == currentDate.getMonth() &&
      localDate.getFullYear() == currentDate.getFullYear()
    ) {
      return localDate.toLocaleTimeString();
    } else {
      return localDate.toLocaleString();
    }
  };

  return (
    <div className="routeTable">
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Modified</th>
            <th>Detail</th>
            <th>Show</th>
          </tr>
        </thead>
        <tbody>
          {props.routeData &&
            props.routeData.map((route) => (
              <tr key={route["id"]}>
                <td>{route["properties"]["title"]}</td>
                <td>{formatDate(route["properties"]["modified_at"])}</td>
                <td>
                  <img
                    src="../../../static/images/detail.png"
                    alt="detail"
                    width="20"
                    height="20"
                    onClick={() => props.toggleModal(route)}
                  />
                </td>
                <td>
                  <input
                    type="checkbox"
                    onChange={(e) => props.handleCheckbox(e, route)}
                  />
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
};

export default RouteTable;

复选框事件处理 #

const handleCheckbox = (e, content) => {
  if (e.target.checked) {
    setAddRoute(content);
    setRemoveRoute(false);
  } else {
    setRemoveRoute(content);
    setAddRoute(false);
  }
};

问题根因 #

1. 状态与命令式API时序不匹配：通过React state中转要添加/删除的路线，再用useEffect监听state变化操作OpenLayers地图，React状态批量更新、effect执行顺序和地图API调用时序存在不可控偏差，连续操作时会出现样式引用污染。
2. 样式绑定方式存在缺陷：单独为每个要素实例化Style/Stroke对象，连续添加要素时OpenLayers内部样式缓存会出现异常引用，导致后添加的要素错误复用之前的样式配置。
3. zIndex计算逻辑不合理：用添加要素时的图层要素总数作为zIndex，新增/删除要素时长度动态变化，会引发渲染层级异常。

修复方案 #

1. 移除多余的中转state和对应useEffect #

直接在复选框事件回调中操作地图图层，避免状态同步时序问题，同时提前判断要素是否存在，防止重复添加：

const handleCheckbox = (e, content) => {
  const source = featuresLayer.getSource();
  const existingFeature = source.getFeatureById(content.id);
  if (e.target.checked) {
    if (existingFeature) return;
    const coordinates = content.geometry.coordinates.map(coord => fromLonLat(coord));
    const feature = new Feature({
      geometry: new LineString(coordinates)
    });
    feature.setId(content.id);
    // 将样式参数存在要素属性上，不直接绑定Style实例
    feature.set('routeColor', content.properties.route_color);
    feature.set('routeWidth', content.properties.route_width);
    source.addFeature(feature);
  } else {
    if (existingFeature) source.removeFeature(existingFeature);
  }
};

2. 给矢量图层配置统一的样式函数 #

初始化featuresLayer时统一配置style渲染规则，根据要素自身属性动态返回样式，从根源避免样式对象复用问题：

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";

// 建议用useRef存储图层实例，避免组件重渲染时重建
const featuresLayer = new VectorLayer({
  source: new VectorSource(),
  style: (feature) => {
    return new Style({
      zIndex: 10, // 可根据业务需求设置固定层级或基于要素属性计算
      stroke: new Stroke({
        color: feature.get('routeColor'),
        width: feature.get('routeWidth')
      })
    })
  }
});

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