@uiw/react-baidu-map-custom-overlay
Version:
Baidu Map custom-overlay Components for React.
123 lines (122 loc) • 4.87 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useCustomOverlay = useCustomOverlay;
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
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 = require("react");
var _reactDom = require("react-dom");
var _reactBaiduMapMap = require("@uiw/react-baidu-map-map");
var _reactBaiduMapUtils = require("@uiw/react-baidu-map-utils");
function getCustomOverlay() {
return /*#__PURE__*/function (_BMap$Overlay) {
function _class(elm, _position, paneName) {
var _this;
(0, _classCallCheck2.default)(this, _class);
_this = (0, _callSuper2.default)(this, _class);
(0, _defineProperty2.default)(_this, "container", void 0);
(0, _defineProperty2.default)(_this, "map", void 0);
(0, _defineProperty2.default)(_this, "paneName", void 0);
(0, _defineProperty2.default)(_this, "position", void 0);
(0, _defineProperty2.default)(_this, "offset", void 0);
(0, _defineProperty2.default)(_this, "initialize", map => {
const panes = map.getPanes();
_this.container.style.position = 'absolute';
_this.map = map;
panes[_this.paneName].appendChild(_this.container);
return _this.container;
});
(0, _defineProperty2.default)(_this, "draw", () => {
if (_this.position == null || _this.map == null) {
return;
}
const position = _this.map.pointToOverlayPixel(_this.position);
const {
width = 0,
height = 0
} = _this.offset || {};
_this.container.style.left = "".concat(position.x + width, "px");
_this.container.style.top = "".concat(position.y + height, "px");
});
(0, _defineProperty2.default)(_this, "setOffset", offset => {
_this.offset = offset;
_this.draw();
});
(0, _defineProperty2.default)(_this, "setPosition", position => {
_this.position = position;
_this.draw();
});
(0, _defineProperty2.default)(_this, "setVisiable", visiable => {
_this.container.style.display = visiable ? 'block' : 'none';
});
(0, _defineProperty2.default)(_this, "getPosition", () => {
return _this.position;
});
(0, _defineProperty2.default)(_this, "setZIndex", index => {
_this.container.style.zIndex = index.toString();
});
_this.container = elm;
_this.paneName = paneName || 'markerPane';
_this.position = _position;
return _this;
}
(0, _inherits2.default)(_class, _BMap$Overlay);
return (0, _createClass2.default)(_class);
}(BMap.Overlay);
}
function useCustomOverlay() {
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const {
children,
paneName,
position
} = props;
const {
map
} = (0, _reactBaiduMapMap.useMapContext)();
const [customOverlay, setCustomOverlay] = (0, _react.useState)();
const [div, setDiv] = (0, _react.useState)();
const [portal, setPortal] = (0, _react.useState)();
const [count, setCount] = (0, _react.useState)(0);
(0, _react.useEffect)(() => {
return () => {
if (map && customOverlay) {
map.removeOverlay(customOverlay);
}
};
}, [customOverlay, map]);
(0, _react.useMemo)(() => {
if (map && !portal && document) {
const elm = document.createElement('div');
const CustomOverlay = getCustomOverlay();
const portalInstance = /*#__PURE__*/(0, _reactDom.createPortal)(children, elm);
const CompOverlay = new CustomOverlay(elm, position, paneName);
setCount(count + 1);
setDiv(elm);
map.addOverlay(CompOverlay);
setPortal(portalInstance);
setCustomOverlay(CompOverlay);
}
}, [children, count, map, paneName, portal, position]);
const prevCount = (0, _reactBaiduMapUtils.usePrevious)(count);
(0, _react.useMemo)(() => {
if (map && div && children && count === prevCount) {
const portalInstance = /*#__PURE__*/(0, _reactDom.createPortal)(children, div);
setPortal(portalInstance);
setCount(count + 1);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [children, customOverlay]);
(0, _reactBaiduMapUtils.useProperties)(customOverlay, props, ['ZIndex', 'Offset', 'Position', 'Visiable']);
return {
portal,
setPortal,
customOverlay,
setCustomOverlay
};
}