解决百度地图react-bmapgl的一些问题

1、和react 19 不兼容

由于 React 19 调整了 react-dom 的导出方式，导致无法直接使用 ReactDOM.render 方法

修改源码打patch-package包

diff --git a/node_modules/react-bmapgl/dist/Overlay/CustomOverlayDom.js b/node_modules/react-bmapgl/dist/Overlay/CustomOverlayDom.js index d746663..393d033 100644 --- a/node_modules/react-bmapgl/dist/Overlay/CustomOverlayDom.js +++ b/node_modules/react-bmapgl/dist/Overlay/CustomOverlayDom.js @@ -5,7 +5,7 @@

• @email hdr01@126.com / Object.defineProperty(exports, "__esModule", { value: true }); -var react_dom_1 = require("react-dom"); +var react_dom_1 = require("react-dom/client"); /*
• 自定义覆盖物的DOM生成类
• @param point 定位点坐标 @@ -52,6 +52,7 @@ function CustomOverlayDom(point, options) { this.getProperties = function () { return this._options.properties; };

• this._root = null; } CustomOverlayDom.prototype.initialize = function (map) { this._map = map; @@ -73,7 +74,10 @@ CustomOverlayDom.prototype.initialize = function (map) { this._div.style.transform + ' translate3d(0,0,0)' : 'translate3d(0,0,0)'; }

• react_dom_1.render(this._options.html, this._div);

• this._root = react_dom_1.createRoot(this._div);
• this._root.render(this._options.html);
• var pane = this._options.fixBottom ? map.getPanes().floatShadow : map.getPanes().floatPane; @@ -106,6 +110,8 @@ CustomOverlayDom.prototype.draw = function () { } }; CustomOverlayDom.prototype.destroy = function () {

• react_dom_1.unmountComponentAtNode(this._div);

• this._root.unmount();
• this._root = null;

}; exports.default = CustomOverlayDom;

2、自定义覆盖物修改children 不更新问题

因为这个库不会监听children，所以不会更新覆盖物，我尝试了修改源码监听children变更，结果dom无限更新

那就只能利用react的机制去强制更新组件了

 key={`${focusObj.deviceId}_${Date.now()}`}          

给key加上时间值，触发强制刷新

3、初始化覆盖物位置计算错误的情况

修改源码

CustomOverlayDom.prototype.initialize = function (map) {
   //xxx
   // 确保div有有效尺寸后再计算位置
   if (this._div.offsetWidth === 0 || this._div.offsetHeight === 0) {
       setTimeout(() => this.draw(), 0);
   }
   //xxx
};