1

我正在尝试为我的标记簇（而不是常规的圆形簇）实现自定义图标。我参考了链接并实现如下代码所示： 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：无法读取未定义的属性（读取“divIcon”）

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

4

1 回答 1

2

完整的示例更新 - 工作示例在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;
}
于 2021-12-16T18:18:06.353 回答