在 React 中动态设置活动 Mapbox GL JS 标记的样式

Question

我正在 React (Next.js) 项目中使用 mapbox-gl-js，但我无法弄清楚如何在单击标记时以不同的方式动态设置标记样式。具体来说，我想放大活动标记并将其放在前面。

我遵循了[官方商店定位器示例]，该示例效果很好，但不包含任何动态标记样式（https://docs.mapbox.com/help/tutorials/building-a-store-locator/） .

我可以使用 ReactDOM.createRoot 渲染自定义标记，但我不确定如何根据组件状态中存储的活动标记的 id 来更新标记样式。我尝试搜索 Mapbox GL JS 文档和各种教程，但尚未找到在 React 上下文中动态更新 onClick 标记样式的明确解决方案。

如何在单击活动标记时动态重新设置其样式（例如增加大小和 z 索引）？是否有推荐的方法可以在 React/Next.js 环境中使用 Mapbox GL JS 标记来完成此任务？

任何指导或代码示例将不胜感激。如果您需要有关我的设置的任何其他详细信息，请告诉我。预先感谢！

这是我基于上述示例的代码片段。这很好地完成了它的工作，但我不清楚动态地图样式会在哪里发生。

jsx

      geojson.features.forEach((marker) => {
        const customMarker = <CustomMarker />;
        const el = document.createElement('div');
        const root = ReactDOM.createRoot(el);
        root.render(customMarker);
        el.id = `marker-${marker.properties.id}`;
        el.className = 'marker';

        new mapboxgl.Marker(el, { anchor: 'bottom' })
          .setLngLat(marker.geometry.coordinates as LngLatLike)
          .addTo(map);

        el.addEventListener('click', () => {
          centerMarker(marker);
          setActiveMarkerId(marker.properties.id);
          // Any way to rerender the active marker (i.e. modifying z-index and size)?
        });

        el.addEventListener('mouseenter', () => {
          createPopUp(marker);
        });
        el.addEventListener('mouseleave', () => {
          removePopUps();
        });
      });

Answer 1

文档说你需要使用图层或其他东西来动态设置标记的样式，但我发现你可以通过仅针对容器元素并使用 css 类轻松实现相同的效果。因此，只需为您想要的效果创建类，并根据容器元素上的类以及容器上的 onClick 切换类来激活它们。