@pansy/react-mapbox-gl/es/components/Marker/marker.js

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

// src/components/Marker/marker.tsx
import React, { useEffect, useImperativeHandle } from "react";
import Mapbox from "mapbox-gl";
import { useGetState, usePortal } from "@rcuse/core";
import { useMap } from "../../hooks/useMap";
import { usePropsReactive } from "../../hooks/usePropsReactive";
import { useEvents } from "../../hooks/useEvents";
import { allProps, setterMap, converterMap } from "./config";
import { MarkerEventMap, MarkerEventList } from "./constant";
var Marker = React.forwardRef((props, ref) => {
  const { map } = useMap();
  const { Portal, container } = usePortal();
  const [marker, setMarker, getMarker] = useGetState();
  const { onInstanceCreated } = usePropsReactive(props, marker, {
    setterMap,
    converterMap
  });
  useEvents(marker, props, {
    eventMap: MarkerEventMap,
    eventList: MarkerEventList
  });
  useImperativeHandle(ref, () => marker, [marker]);
  const handleClick = (e) => {
    var _a;
    (_a = props.onClick) == null ? void 0 : _a.call(props, {
      type: "click",
      target: getMarker(),
      originalEvent: e
    });
  };
  const handleDoubleClick = (e) => {
    e.stopPropagation();
    e.preventDefault();
  };
  useEffect(() => {
    if (map) {
      createInstance().then((marker2) => {
        setMarker(marker2);
        marker2.addTo(map);
        container.addEventListener("click", handleClick);
        container.addEventListener("dblclick", handleDoubleClick);
        onInstanceCreated();
      });
    }
    return () => {
      if (container) {
        container.removeEventListener("click", handleClick);
        container.removeEventListener("dblclick", handleClick);
      }
    };
  }, [map]);
  const createInstance = () => {
    const options = getCreateOptions(props);
    if (options.lngLat) {
      const marker2 = new Mapbox.Marker(container, options);
      marker2.setLngLat(options.lngLat);
      return Promise.resolve(marker2);
    } else {
      return Promise.reject();
    }
  };
  const getCreateOptions = (props2) => {
    const options = {};
    allProps.forEach((key) => {
      if (key in props2) {
        options[key] = getSetterValue(key, props2);
      }
    });
    return options;
  };
  const getSetterValue = (key, props2) => {
    var _a, _b;
    let value = props2[key];
    if (key in converterMap) {
      try {
        value = (_b = (_a = converterMap)[key]) == null ? void 0 : _b.call(_a, props2[key]);
      } catch (error) {
      }
    }
    return value;
  };
  return /* @__PURE__ */ React.createElement(React.Fragment, null, marker && /* @__PURE__ */ React.createElement(Portal, null, props.children));
});
export {
  Marker
};