Leaflet 1.7: L.MarkerClusterGroup 不是函数

Question

我正在尝试在传单地图上使用 MarkerClusterGroup。我有错误 L.MarkerClusterGroup is not a function。我已经阅读了相关主题，但它们仅适用于 leaflet 1.7 以下的版本。

我正在将 React 与 webpack 结合使用。

import { Icon, Marker, Circle, LatLngBounds, Popup, DivIcon } from "leaflet";
import "leaflet.markercluster";


const divIcon = new DivIcon();
      const markersCluster = L.MarkerClusterGroup({
        chunkedLoading: true,
        iconCreateFunction: function (cluster) {
          return divIcon({
            html: cluster.getChildCount(),
            className: "mycluster",
            iconSize: null,
          });
        },
});

我也试过全局导入 L：

import * as L from "leaflet";
import "leaflet.markercluster";


const divIcon = new L.DivIcon();
      const markersCluster = L.MarkerClusterGroup({
        chunkedLoading: true,
        iconCreateFunction: function (cluster) {
          return divIcon({
            html: cluster.getChildCount(),
            className: "mycluster",
            iconSize: null,
          });
        },
});

如何解决这个问题？

Answer 1

根据您的构建引擎，很遗憾，从“leaflet”导入的 L 命名空间可能无法使用 MarkerClusterGroup（来自 leaflet.markercluster 插件）进行扩充。

但您可以改用 window.L，总是由插件增强。

顺便说一句，要么使用带有 new 关键字的 class 构造函数形式：new window.L.MarkerClusterGroup()，要么使用带有 lowerCamelCase 的工厂形式：L.markerClusterGroup()

import * as L from "leaflet";
import "leaflet.markercluster";

console.log(window.L === L); // false...

const divIcon = new L.DivIcon();
      const markersCluster = new window.L.MarkerClusterGroup({ // Use window.L for plugins
        chunkedLoading: true,
        iconCreateFunction: function (cluster) {
          return divIcon({
            html: cluster.getChildCount(),
            className: "mycluster",
            iconSize: null,
          });
        },
});

现场演示：https://stackblitz.com/edit/js-ojki89?file=index.js

Leaflet 1.7: L.MarkerClusterGroup 不是函数

Leaflet 1.7: L.MarkerClusterGroup is not a function

leaflet

leaflet.markercluster