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

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

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
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));

// src/components/MarkerCluster/MarkerCluster.tsx
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { debounce, isFunction, uuid } from "@rcuse/core";
import { LngLatBounds } from "mapbox-gl";
import Supercluster from "supercluster";
import bbox from "@turf/bbox";
import { featureCollection } from "@turf/helpers";
import { Marker } from "../Marker";
import { useMap } from "../../hooks/useMap";
import { defaultSuperclusterOptions } from "./config";
function InternalMarkerCluster(props, ref) {
  const {
    cluster,
    render,
    renderCluster,
    data = [],
    zoomOnClick,
    zoomOnClickPadding = 20,
    onClick,
    onClusterClick
  } = props;
  const { map } = useMap();
  const [list, setList] = useState([]);
  const supercluster = useMemo(() => {
    return new Supercluster(__spreadValues(__spreadValues({}, 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 = useCallback(
    debounce({ delay: 500 }, () => {
      const mapBoundary = getMapBoundary();
      const result = supercluster.getClusters(...mapBoundary);
      setList(
        result.map((item) => {
          return __spreadProps(__spreadValues({}, item), {
            id: item.id || uuid()
          });
        })
      );
    }),
    []
  );
  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]);
  useEffect(() => {
    if (data) {
      supercluster.load(data);
      handleChangeBoundary();
    }
  }, [data]);
  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 = bbox(featureCollection(children));
    map.fitBounds(LngLatBounds.convert(childrenBbox), {
      padding: zoomOnClickPadding
    });
  };
  return /* @__PURE__ */ React.createElement(React.Fragment, null, list.map((item) => {
    const { geometry, properties } = item;
    const { point_count, cluster: cluster2, cluster_id } = properties;
    if (cluster2) {
      return /* @__PURE__ */ React.createElement(
        Marker,
        {
          key: item.id,
          lngLat: geometry.coordinates,
          onClick: () => {
            onClusterClick == null ? void 0 : onClusterClick(point_count, cluster_id);
            if (zoomOnClick)
              handleClusterMarkerClick(item);
          }
        },
        isFunction(renderCluster) ? renderCluster(point_count, cluster_id) : renderCluster
      );
    }
    return /* @__PURE__ */ React.createElement(
      Marker,
      {
        key: item.id,
        lngLat: geometry.coordinates,
        onClick: () => {
          onClick == null ? void 0 : onClick(item);
        }
      },
      isFunction(render) ? render(item) : render
    );
  }));
}
var MarkerCluster = forwardRef(InternalMarkerCluster);
export {
  MarkerCluster
};