@pansy/react-mapbox-gl/es/components/Map/map.js

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

var __defProp = Object.defineProperty;
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;
};

// src/components/Map/map.tsx
import Mapbox from "mapbox-gl";
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { useEvents } from "../../hooks/useEvents";
import { usePropsReactive } from "../../hooks/usePropsReactive";
import { MapContext } from "./context";
import { allProps, converterMap, setterMap } from "./config";
import { MapEventList, MapEventMap } from "./constant";
var Map = forwardRef((props, ref) => {
  const { className, loading, containerStyle, children } = props;
  const containerRef = useRef(null);
  const [mapInstance, setMapInstance] = useState();
  const style = useMemo(
    () => __spreadValues({
      position: "relative",
      width: "100%",
      height: "100%"
    }, containerStyle),
    [containerStyle]
  );
  const getCreateOptions = (props2) => {
    const container = containerRef.current;
    const options = {
      container
    };
    allProps.forEach((key) => {
      if (key in props2 && key !== "container")
        options[key] = props2[key];
    });
    return options;
  };
  const createInstance = () => {
    const options = getCreateOptions(props);
    return Promise.resolve(new Mapbox.Map(options));
  };
  const { current: contextValue } = useRef({});
  const { onInstanceCreated } = usePropsReactive(props, mapInstance, {
    setterMap,
    converterMap
  });
  useEvents(mapInstance, props, {
    eventMap: MapEventMap,
    eventList: MapEventList
  });
  useImperativeHandle(ref, () => mapInstance, [mapInstance]);
  useEffect(() => {
    if (!containerRef.current)
      return;
    createInstance().then((map) => {
      onInstanceCreated();
      contextValue.map = map;
      setMapInstance(map);
    });
  }, [containerRef]);
  const CHILD_CONTAINER_STYLE = {
    height: "100%"
  };
  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, style, className }, !mapInstance && loading, mapInstance && /* @__PURE__ */ React.createElement(MapContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", { style: CHILD_CONTAINER_STYLE }, children)));
});
Map.displayName = "Map";
export {
  Map
};