fix: 修复 Popup 设置 lngLat 不生效

Author: wangxingkang

src/components/Popup/Popup.tsx

@@ -6,6 +6,7 @@ import Mapbox from 'mapbox-gl';
 import { useMap } from '../../hooks/useMap';
 import { useEvents } from '../../hooks/useEvents';
 import { usePropsReactive } from '../../hooks/usePropsReactive';
+import { applyReactStyle } from '../../utils/applyReactStyle';
 import { allProps, setterMap, converterMap } from './config';
 import { MarkerEventMap, MarkerEventList } from './constant';
 
@@ -41,6 +42,17 @@ export const Popup = forwardRef<MapboxPopup, PopupProps>(
       [map]
     );
 
+    useEffect(
+      () => {
+        const popupElement = popup?.getElement();
+
+        if (popupElement) {
+          applyReactStyle(popupElement, props.style);
+        }
+      },
+      [props.style, popup]
+    )
+
     const createInstance = () => {
       const options = getCreateOptions(props);
 

src/components/Popup/config.ts

@@ -1,4 +1,5 @@
 import type { PropKey } from './types';
+import { toLngLat } from '../../utils/toLngLat';
 
 /** 静态属性 */
 export const StaticProps: PropKey[] = [
@@ -15,12 +16,13 @@ export const NativeDynamicProps: PropKey[] = [
   'offset',
   'maxWidth',
   'altitude',
+  'lngLat',
 ];
 
 export const allProps = NativeDynamicProps.concat(StaticProps);
 
 export const setterMap = {};
 
 export const converterMap: Partial<Record<PropKey, (...value: any[]) => any>> = {
-
+  lngLat: toLngLat,
 };

src/utils/applyReactStyle.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import type { KeysOfUnion } from 'type-fest';
+
+const unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
+
+// https://github.com/visgl/react-map-gl/blob/master/modules/react-mapbox/src/utils/apply-react-style.ts
+export function applyReactStyle(
+  element: HTMLElement,
+  styles: React.CSSProperties = {}
+) {
+  if (!element || !styles) {
+    return;
+  }
+
+  const style = element.style;
+
+  for (const key in styles) {
+    const val = styles[key as KeysOfUnion<React.CSSProperties>];
+
+    if (Number.isFinite(val) && !unitlessNumber.test(key)) {
+      // @ts-expect-error ignore error
+      style[key] = `${val}px`;
+    } else {
+      // @ts-expect-error ignore error
+      style[key] = val;
+    }
+  }
+}