@uiw/react-baidu-map-api-loader/cjs/index.js

Baidu Map api-loader Components for React.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.delay = delay;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactBaiduMapUtils = require("@uiw/react-baidu-map-utils");
var _jsxRuntime = require("react/jsx-runtime");
/// <reference types="@uiw/react-baidu-map-types" />

/**
 * 初始化和加载baidu地图
 */

function delay(time) {
  return new Promise((resolve, reject) => {
    window && window.setTimeout(resolve, time);
  });
}
const DEFAULT_RETRY_TIME = 3;

/**
 * APILoader 用于加载百度地图依赖
 */
let APILoader = exports.default = /*#__PURE__*/function (_React$Component) {
  function APILoader(props) {
    var _this;
    (0, _classCallCheck2.default)(this, APILoader);
    _this = (0, _callSuper2.default)(this, APILoader, [props]);
    (0, _defineProperty2.default)(_this, "isMountedOk", false);
    (0, _defineProperty2.default)(_this, "handleError", error => {
      if (_this.isMountedOk) {
        _this.setState({
          error
        });
      }
    });
    (0, _defineProperty2.default)(_this, "finish", () => {
      if (window && _this.props.type === 'webgl') {
        window.BMap = window.BMapGL;
      }
      if (_this.isMountedOk) {
        _this.setState({
          loaded: true
        });
      }
    });
    _this.state = {
      loaded: props.type === 'webgl' ? window && !!window.BMapGL && !!window.BMapGL.Map : window && !!window.BMap && !!window.BMap.Map
    };
    if (_this.props.akay == null) {
      throw new TypeError('BaiDuMap: akay is required');
    }
    return _this;
  }
  (0, _inherits2.default)(APILoader, _React$Component);
  return (0, _createClass2.default)(APILoader, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.isMountedOk = true;
      const {
        callbackName
      } = this.props;
      if (!window || !callbackName) {
        return;
      }
      if (this.props.type === 'webgl' && window && window.BMapGL && !window.BMapGL.Map || this.props.type === 'webgl' && window && !window.BMapGL || window && window.BMap && !window.BMap.Map || window && !window.BMap) {
        if (window && window[callbackName]) {
          APILoader.waitQueue.push([this.finish, this.handleError]);
          return;
        }
        this.loadMap();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.isMountedOk = false;
    }
  }, {
    key: "render",
    value: function render() {
      if (window && window.BMapGL && this.props.type === 'webgl') {
        window.BMap = window.BMapGL;
      }
      return this.state.loaded ? this.props.children : this.props.fallback ? this.props.fallback(this.state.error) : this.state.error ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          color: 'red'
        },
        children: this.state.error.message
      }) : null;
    }
  }, {
    key: "getScriptSrc",
    value: function getScriptSrc() {
      const cfg = this.props;
      let protocol = cfg.protocol || window.location.protocol;
      if (protocol.indexOf(':') === -1) {
        protocol += ':';
      }
      const args = [`v=${cfg.version}`, `ak=${cfg.akay}`, `callback=${cfg.callbackName}`];
      if (cfg.type) {
        args.push(`type=${cfg.type}`);
      }
      return `${protocol}//${cfg.hostAndPath}?${args.join('&')}`;
    }
    /**
     * load BaiduMap in script tag
     */
  }, {
    key: "loadMap",
    value: async function loadMap() {
      const {
        callbackName
      } = this.props;
      if (!window || !callbackName) {
        return;
      }
      const src = this.getScriptSrc();
      window[callbackName] = () => {
        // flush queue
        const queue = APILoader.waitQueue;
        APILoader.waitQueue = [];
        queue.forEach(task => task[0]());
        this.finish();
      };
      for (let i = 0; i < DEFAULT_RETRY_TIME; i++) {
        try {
          await (0, _reactBaiduMapUtils.requireScript)(src);
          break;
        } catch (error) {
          if (i === DEFAULT_RETRY_TIME - 1) {
            const err = new Error(`Failed to load Baidu Map: ${error.message}`);
            // flush queue
            const queue = APILoader.waitQueue;
            APILoader.waitQueue = [];
            queue.forEach(task => task[1](err));
            this.handleError(err);
            return;
          }
          await delay(i * 1000);
        }
      }
    }
  }], [{
    key: "ready",
    value:
    /**
     * 等待BMap就绪
     */
    async function ready() {
      if (window && window.BMap.Map) {
        return;
      }
      if (window && window.BMapGL.Map) {
        return;
      }
      return new Promise((res, rej) => {
        APILoader.waitQueue.push([res, rej]);
      });
    }
  }]);
}(_react.default.Component);
(0, _defineProperty2.default)(APILoader, "defaultProps", {
  akay: '',
  hostAndPath: 'api.map.baidu.com/api',
  version: '2.0',
  callbackName: 'load_bmap_sdk',
  type: ''
});
/**
 * 全局可能存在多个Loader同时渲染, 但是只能由一个负责加载
 */
(0, _defineProperty2.default)(APILoader, "waitQueue", []);