@pansy/react-mapbox-gl/lib/components/MarkerCluster/MarkerCluster.js

🌍 基于 Mapbox GL 封装的 React 组件库

var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/MarkerCluster/MarkerCluster.tsx
var MarkerCluster_exports = {};
__export(MarkerCluster_exports, {
  MarkerCluster: () => MarkerCluster
});
module.exports = __toCommonJS(MarkerCluster_exports);
var import_react = __toESM(require("react"));
var import_core = require("@rcuse/core");
var import_mapbox_gl = require("mapbox-gl");
var import_supercluster = __toESM(require("supercluster"));
var import_bbox = __toESM(require("@turf/bbox"));
var import_helpers = require("@turf/helpers");
var import_Marker = require("../Marker");
var import_useMap = require("../../hooks/useMap");
var import_config = require("./config");
function InternalMarkerCluster(props, ref) {
  const {
    cluster,
    render,
    renderCluster,
    data = [],
    zoomOnClick,
    zoomOnClickPadding = 20,
    onClick,
    onClusterClick
  } = props;
  const { map } = (0, import_useMap.useMap)();
  const [list, setList] = (0, import_react.useState)([]);
  const supercluster = (0, import_react.useMemo)(() => {
    return new import_supercluster.default(__spreadValues(__spreadValues({}, import_config.defaultSuperclusterOptions), cluster));
  }, []);
  const getMapBoundary = () => {
    const bounds = map.getBounds();
    const zoom = map.getZoom();
    return [
      // @ts-expect-error
      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],
      Math.round(zoom)
    ];
  };
  const handleChangeBoundary = (0, import_react.useCallback)(
    (0, import_core.debounce)({ delay: 500 }, () => {
      const mapBoundary = getMapBoundary();
      const result = supercluster.getClusters(...mapBoundary);
      setList(
        result.map((item) => {
          return __spreadProps(__spreadValues({}, item), {
            id: item.id || (0, import_core.uuid)()
          });
        })
      );
    }),
    []
  );
  (0, import_react.useEffect)(() => {
    if (map) {
      map.on("zoom", handleChangeBoundary);
      map.on("move", handleChangeBoundary);
      map.on("resize", handleChangeBoundary);
      return () => {
        map.off("zoom", handleChangeBoundary);
        map.off("move", handleChangeBoundary);
        map.off("resize", handleChangeBoundary);
      };
    }
    return void 0;
  }, [map]);
  (0, import_react.useEffect)(() => {
    if (data) {
      supercluster.load(data);
      handleChangeBoundary();
    }
  }, [data]);
  (0, import_react.useImperativeHandle)(ref, () => supercluster, []);
  const handleClusterMarkerClick = (data2) => {
    const { properties } = data2;
    if (!(properties == null ? void 0 : properties.cluster))
      return;
    const children = supercluster.getLeaves(properties.cluster_id, Number.POSITIVE_INFINITY);
    const childrenBbox = (0, import_bbox.default)((0, import_helpers.featureCollection)(children));
    map.fitBounds(import_mapbox_gl.LngLatBounds.convert(childrenBbox), {
      padding: zoomOnClickPadding
    });
  };
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, list.map((item) => {
    const { geometry, properties } = item;
    const { point_count, cluster: cluster2, cluster_id } = properties;
    if (cluster2) {
      return /* @__PURE__ */ import_react.default.createElement(
        import_Marker.Marker,
        {
          key: item.id,
          lngLat: geometry.coordinates,
          onClick: () => {
            onClusterClick == null ? void 0 : onClusterClick(point_count, cluster_id);
            if (zoomOnClick)
              handleClusterMarkerClick(item);
          }
        },
        (0, import_core.isFunction)(renderCluster) ? renderCluster(point_count, cluster_id) : renderCluster
      );
    }
    return /* @__PURE__ */ import_react.default.createElement(
      import_Marker.Marker,
      {
        key: item.id,
        lngLat: geometry.coordinates,
        onClick: () => {
          onClick == null ? void 0 : onClick(item);
        }
      },
      (0, import_core.isFunction)(render) ? render(item) : render
    );
  }));
}
var MarkerCluster = (0, import_react.forwardRef)(InternalMarkerCluster);