如何在 React Leaflet 中有条件地设置 CircleMarkers 样式？答案

【问题标题】：How to conditionally style CircleMarkers in React Leaflet?如何在 React Leaflet 中有条件地设置 CircleMarkers 样式？
【发布时间】：2022-11-08 23:55:15
【问题描述】：

所以，和其他一些用户一样，我最近遇到了在 React Leaflet GeoJSON 层上的弹出窗口中添加 React 功能的问题。在阅读了关于 SO 的几篇文章之后，问题显然归结为使用原生 Leaflet 功能和使用 React Leaflet 实现抽象出来的功能之间的不匹配。在使用原生 Leaflet 方法时，弹出绑定只接受一个字符串，这会阻止添加 JSX 或额外的交互。

在放弃 GeoJSON 组件的同时，我也失去了 onEachFeature 函数，这是轻松设置图层样式并向图层添加事件的主要方法。在重构我的应用程序以使用圆形标记时，我似乎无法弄清楚如何根据功能的属性有条件地设置各个标记的样式。似乎 GeoJSON 层 pathOptions 道具似乎不接受这样的功能：

import { CircleMarker, Popup } from "react-leaflet";
import PopupContent from "./PopupContent";

const CircleMarkerLayer = ({ data }) => {
    return  data.features.map((feature) => {
    const { coordinates } = feature.geometry
    const markerStyles = function(feature) {
        switch (feature.properties.type) {
            case 'Sticker': return {color: '#a50026'};
            case 'Mural':   return {color: '#d73027'};
            case 'Marker':   return {color: '#f46d43'};
            case 'Characters':   return {color: '#fdae61'};
            case 'Letters':   return {color: '#fee090' };
            case 'Tippex':   return {color: '#ffffbf'};
            case 'Spray':    return {color: '#e0f3f8'};
            case 'Chalk':    return{color: '#abd9e9'};
            case 'Label maker sticker':    return{color: '#74add1' };
            case 'Poster':    return{color: '#4575b4'};
            }
      }
    return (
        <CircleMarker key={feature.properties.id} center={[coordinates[1], coordinates[0]]} pathOptions={markerStyles}>
            <Popup>
                <PopupContent content={feature} />
            </Popup>
        </CircleMarker>
    )
    }

    )
}

此外，尚不清楚如何添加其他事件，例如 MouseOver 和 MouseOut，我想将其用作 UI 的一部分。我的最终目标是在弹出窗口中的图像中添加一个灯箱，但现在我被条件样式难住了。

【问题讨论】：

pathOptions 需要是 PathOptions 类型，而不是你的情况下的函数。
是否有任何关于 pathOptions 的单个图层类型接受什么的文档，因为该功能适用于 GeoJSON 图层组件？
是的，geoJson 可以接受 styleFunction 但不能接受另一个。 react-leaflet.js.org/docs/api-components react-leaflet 的文档有点欠缺。但是它是打字的，所以你应该能够看到你项目中的打字。您可以通过 ctr+cklick 浏览并查找类型
谢谢，这似乎真的限制了无法使用 GeoJSON 制作弹出组件，然后在圆圈标记上没有样式功能......
我会说这取决于所述组件的使用情况。您仍然可以传递 PathOptions 并更改颜色。如果您想在图标方面有更多选择，您可以使用常规标记并设置您想要的任何图标。

标签： reactjs events styling react-leaflet

【解决方案1】：

CircleMarker 仍然可以采用 pathOptions ，它应该是以下类型：

export interface PathOptions extends InteractiveLayerOptions {
    stroke?: boolean | undefined;
    color?: string | undefined;
    weight?: number | undefined;
    opacity?: number | undefined;
    lineCap?: LineCapShape | undefined;
    lineJoin?: LineJoinShape | undefined;
    dashArray?: string | number[] | undefined;
    dashOffset?: string | undefined;
    fill?: boolean | undefined;
    fillColor?: string | undefined;
    fillOpacity?: number | undefined;
    fillRule?: FillRule | undefined;
    renderer?: Renderer | undefined;
    className?: string | undefined;
}

所以在这种情况下，只需使用您已经拥有的功能：

import { CircleMarker, Popup } from "react-leaflet";
import PopupContent from "./PopupContent";

const markerStyles = (feature) => {
  switch (feature.properties.type) {
    case "Sticker":
      return { color: "#a50026" };
    case "Mural":
      return { color: "#d73027" };
    case "Marker":
      return { color: "#f46d43" };
    case "Characters":
      return { color: "#fdae61" };
    case "Letters":
      return { color: "#fee090" };
    case "Tippex":
      return { color: "#ffffbf" };
    case "Spray":
      return { color: "#e0f3f8" };
    case "Chalk":
      return { color: "#abd9e9" };
    case "Label maker sticker":
      return { color: "#74add1" };
    case "Poster":
      return { color: "#4575b4" };
  }
};
const CircleMarkerLayer = ({ data }) => {
  return data.features.map((feature) => {
    const { coordinates } = feature.geometry;
    return (
      <CircleMarker
        key={feature.properties.id}
        center={[coordinates[1], coordinates[0]]}
        pathOptions={markerStyles(feature)}
      >
        <Popup>
          <PopupContent content={feature} />
        </Popup>
      </CircleMarker>
    );
  });
};

【讨论】：