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”导入的命名空间可能不会通过（来自 leaflet.markercluster 插件）L进行扩展。MarkerClusterGroup

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

顺便说一句，要么使用带有关键字的类构造函数形式new：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