React Leaflet 中 MarkerClusters 的自定义图标

Question

我正在尝试为我的标记簇（而不是常规的圆形簇）实现自定义图标。我参考了 link 并实现如下代码所示： https://www.npmjs.com/package/react-leaflet-markercluster

import { divIcon, L, Icon } from "leaflet";

const createClusterCustomIcon = function (cluster) {
    return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'marker-cluster-custom',
    iconUrl: "leaflet/group.png",
    iconSize: [25, 25]
    });
}

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon}>
      ... My code with Markers ...
</MarkerClusterGroup>

但我不断收到：

TypeError: Cannot read properties of undefined (reading 'divIcon')

有没有办法使用自定义图像作为标记簇的图标？另外，有没有办法更改用于显示集群内标记数量的文本颜色？任何帮助将不胜感激。

Answer 1

完成示例更新 - 工作示例在 codesanbox

import React from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import MarkerClusterGroup from "react-leaflet-markercluster";
import L from "leaflet";

import "./styles.css";

export default function App() {
  const createClusterCustomIcon = function (cluster) {
    return L.divIcon({
      html: `<span>${cluster.getChildCount()}</span>`,
      // customMarker is the class name in the styles.css file
      className: "customMarker",
      iconSize: L.point(40, 40, true)
    });
  };

  return (
    <MapContainer
      className="markercluster-map"
      center={[51.0, 19.0]}
      zoom={4}
      maxZoom={18}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />

      <MarkerClusterGroup
        showCoverageOnHover={false}
        iconCreateFunction={createClusterCustomIcon}
      >
        <Marker position={[49.8397, 24.0297]} />
        <Marker position={[52.2297, 21.0122]} />
        <Marker position={[51.5074, -0.0901]} />
      </MarkerClusterGroup>
    </MapContainer>
  );
}

文件styles.css
最重要的是你需要把 pin.png 放在 public 文件夹里。

body {
  padding: 0;
  margin: 0;
}

.markercluster-map {
  height: 100vh;
}

.customMarker {
  background-image: url(/pin.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.customMarker span {
  display: block;
  margin-top: 5px;
  margin-left: 13px;
  color: #fff;
}

React Leaflet 中 MarkerClusters 的自定义图标

Custom icons for MarkerClusters in React Leaflet

reactjs

leaflet

leaflet.markercluster

react-leaflet-v3