React-leaflet -单击时向CircleMarker添加/删除样式

React-leaflet是一个基于React框架的Leaflet地图库，它提供了在React应用中使用Leaflet地图的便捷方式。React-leaflet允许我们在地图上添加各种交互元素和样式。

在React-leaflet中，要实现单击时向CircleMarker添加/删除样式，可以通过以下步骤完成：

首先，确保已经安装了React-leaflet库。可以使用npm或yarn进行安装。
在React组件中导入所需的库和组件：

import { MapContainer, TileLayer, CircleMarker } from 'react-leaflet';
import { useState } from 'react';

在组件中定义一个状态变量，用于控制CircleMarker的样式：

const [selected, setSelected] = useState(false);

在MapContainer组件中添加一个事件处理函数，用于处理CircleMarker的点击事件：

const handleClick = () => {
  setSelected(!selected);
};

在MapContainer组件中添加一个CircleMarker组件，并根据selected状态变量来设置样式：

<CircleMarker center={[latitude, longitude]} radius={10} onClick={handleClick} pathOptions={{ fillColor: selected ? 'red' : 'blue' }} />

在上述代码中，center属性指定了CircleMarker的位置，radius属性指定了CircleMarker的半径大小，onClick属性指定了点击事件的处理函数，pathOptions属性用于设置CircleMarker的样式，根据selected状态变量来决定填充颜色。

最后，在MapContainer组件中添加一个TileLayer组件，用于显示地图：

<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

这是一个使用OpenStreetMap作为地图图层的示例，你也可以使用其他地图图层。

完整的React-leaflet代码示例：

import { MapContainer, TileLayer, CircleMarker } from 'react-leaflet';
import { useState } from 'react';

const MyMap = () => {
  const [selected, setSelected] = useState(false);

  const handleClick = () => {
    setSelected(!selected);
  };

  return (
    <MapContainer center={[latitude, longitude]} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <CircleMarker center={[latitude, longitude]} radius={10} onClick={handleClick} pathOptions={{ fillColor: selected ? 'red' : 'blue' }} />
    </MapContainer>
  );
};

export default MyMap;

这样，当你点击CircleMarker时，它的样式将会改变。你可以根据需要自定义样式和处理逻辑。

腾讯云相关产品和产品介绍链接地址：