CustomOverlay/index.tsx

@@ -91,7 +91,7 @@ const CustomOverlay: React.FC<PropsWithChildren<CustomOverlayProps>> = (
       position: {
         x: position[0],
         y: position[1],
-        z: 100,
+        z: 10,
       },
       topOffset: offset?.top ?? 0,
       leftOffset: offset?.left ?? 0,

MapView/index.tsx

@@ -11,6 +11,7 @@ import React, {
   memo,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -43,11 +44,13 @@ const MapView: React.ForwardRefRenderFunction<
     showCustomComponent = true,
     // boundingSpherePoints,
     mode = '3D',
+    customInitCallback = (viewer: any) => {},
+    showOriginMap = true,
   } = props;
 
   const mapRef = useRef<HTMLDivElement>(null);
   /** 地图容器尺寸  */
-  const [mapSize, setMapSize] = useState<{ width?: number; height?: number }>();
+  const [mapSize, setMapSize] = useState<{ width?: number; height?: number }>({});
   /** 地图实例 */
   const mapViewer = useRef<any>(null);
   const click$ = useEventEmitter();
@@ -62,10 +65,12 @@ const MapView: React.ForwardRefRenderFunction<
       const { width, height } = containerRef.current?.getBoundingClientRect();
 
       if (width !== previous?.width || height !== previous?.height) {
-        setMapSize({
+        console.log('useDebounceFn-run setMapSize， width', width, 'height', height);
+        setMapSize(prev => ({
+          ...prev,
           width: width,
           height: height,
-        });
+        }));
       }
     },
     {
@@ -79,11 +84,84 @@ const MapView: React.ForwardRefRenderFunction<
    * 重新设置地图容器宽高
    */
   useEffect(() => {
+    if (!containerRef.current) return;
     run();
     window.addEventListener('resize', run);
+
+    // V25-4 需求要动态调整地图大小，所以需要监听父元素的宽高变化；之前的window resize侦听无效。
+    let resizeTimeout: NodeJS.Timeout;
+    const observer = new ResizeObserver((entries) => {
+      // 使用防抖来避免连续多次触发
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const entry = entries[0];
+        if (!entry) return;
+
+        setMapSize(prev => {
+          if (!props.changeSize || !props.changeSize.x1 || !props.changeSize.y1 || !props.changeSize.x2 || !props.changeSize.y2) return prev;
+          if (!prev.width || !prev.height) return prev;
+
+          // 步骤1：安全访问changeSize属性
+          const { x1, y1, x2, y2 } = props.changeSize || { x1: 908, y1: 430, x2: 908, y2: 572 };
+          const containerWidth = entry.contentRect.width;
+          const containerHeight = entry.contentRect.height;
+
+          // 步骤2：计算目标宽高比
+          const targetRatios = [
+            { ratio: x1 / y1, width: x1, height: y1 },
+            { ratio: x2 / y2, width: x2, height: y2 }
+          ];
+
+          // 步骤3：计算当前宽高比
+          const currentRatio = containerWidth / containerHeight;
+          
+          // 步骤4：找到最接近的目标比例
+          interface RatioInfo {
+            ratio: number;
+            width: number;
+            height: number;
+            diff: number;
+          }
+
+          const closest = targetRatios.reduce<RatioInfo>((prev, curr) => {
+            const diff = Math.abs(currentRatio - curr.ratio);
+            return diff < prev.diff 
+              ? { ...curr, diff } 
+              : prev;
+          }, { 
+            ratio: 0, 
+            width: 0, 
+            height: 0, 
+            diff: Infinity 
+          });
+
+          // 步骤5：计算缩放比例
+          const scale = prev.width / closest.width;
+          // const targetHeight = prev.height || 0 * scale;
+          const targetHeight = closest.height * scale;
+          // console.log('scale', scale, 'targetHeight', targetHeight);
+
+          // 步骤6：保持与之前状态的宽高比一致性
+          const shouldUpdate = 
+            prev.width !== containerWidth ||
+            prev.height !== targetHeight;
+
+          console.log('shouldUpdate', shouldUpdate, 'prev.width', prev.width, 'prev.height', prev.height, 'targetHeight', targetHeight);
+
+          return shouldUpdate 
+            ? { width: prev.width, height: targetHeight }
+            // ? { width: containerWidth, height: targetHeight }
+            : prev;
+        });
+      }, 100); // 100ms 防抖间隔
+    });
+
+    observer.observe(containerRef.current);
     // 清理函数，停止观察
     return () => {
       window.removeEventListener('resize', run);
+      observer.disconnect();
+      clearTimeout(resizeTimeout);
     };
   }, [containerRef.current]);
 
@@ -94,6 +172,8 @@ const MapView: React.ForwardRefRenderFunction<
    */
   useImperativeHandle(ref, () => mapViewer.current);
 
+  const zoomFactor = showOriginMap ? 20000 : 20000;
+
   /** 地图初始化 */
   const initMap = () => {
     if (!mapRef.current) {
@@ -102,6 +182,7 @@ const MapView: React.ForwardRefRenderFunction<
     if (!center) {
       throw new Error('地图中心点是必须的');
     }
+    console.log('initMap');
 
     mapViewer.current = null;
 
@@ -113,7 +194,7 @@ const MapView: React.ForwardRefRenderFunction<
 
     /**根据缩放等级，更新 z 值 */
     if (zoom && zoom < 20 && zoom > 0) {
-      z = 20000 * zoom;
+      z = zoomFactor * zoom;
     }
 
     mapViewer.current = new CooGL.MapViewer(mapRef.current, {
@@ -134,7 +215,7 @@ const MapView: React.ForwardRefRenderFunction<
     };
     mapViewer.current?.zoomTo(centerP);
 
-    layersOptionsList.forEach((item) => {
+    showOriginMap && layersOptionsList.forEach((item) => {
       /** 添加图层 */
       mapViewer.current.addLayer(
         new CooGL.Layer.fromWmtsImagery({
@@ -160,6 +241,7 @@ const MapView: React.ForwardRefRenderFunction<
     mapViewer.current.readyEvent.addEventListener(() => {
       setTrue();
     });
+
     /** 设置最大缩放层级 */
     mapViewer.current.camera.controller.maximumZoomDistance = 250000;
     mapViewer.current.event.click(function (mapEventTarget: any) {
@@ -177,6 +259,15 @@ const MapView: React.ForwardRefRenderFunction<
         }
       }
     });
+
+    // initCooglLoadArea();
+    // setTimeout(initCooglLoadArea, 1);
+    //
+    if (customInitCallback) {
+    // if (!showOriginMap && customInitCallback) {
+      customInitCallback(mapViewer.current);
+    }
+    
   };
 
   useEffect(() => {
@@ -200,7 +291,7 @@ const MapView: React.ForwardRefRenderFunction<
 
     /**根据缩放等级，更新 z 值 */
     if (zoom && zoom < 20 && zoom > 0) {
-      z = 20000 * zoom;
+      z = zoomFactor * zoom;
     }
 
     const centerP = {

Polyline/index.tsx

@@ -22,13 +22,16 @@ const Polyline: React.FC<PolylineProps> = (props) => {
     if (!mapViewer) {
       return;
     }
-    const vectors = points.map((item) => {
+    const vectors = points?.map((item) => {
       return {
         x: item[0],
         y: item[1],
         z: 10,
       };
     });
+    if (!vectors) {
+      return;
+    }
     let curMaterial = lineColor;
 
     if (material === 'flowLine') {

map.d.ts

@@ -16,6 +16,12 @@ declare type MapViewProps = {
   controllerStyle?: any;
   /** maker点击事件 */
   onClick?: (e: any) => void;
+  /** 自定义初始化回调 */
+  customInitCallback?: (viewer: any) => void;
+  /** 是否显示原始地图 */
+  showOriginMap?: boolean;
+  /** 改变地图容器宽高 */
+  changeSize?: { x1: number; y1: number; x2: number; y2: number };
 };
 /** Map api 文档  @see http://123.157.223.158:30017/Documentation/MapViewer.html */
 declare type MapViewMethods = any;

mapEnv.ts

@@ -13,7 +13,7 @@ const token = IS_PROD
   : 'f658c515-d407-42a0-a537-0993a4ed13f1';
 
 const gisUrl = IS_PROD
-  ? 'https://api.cd.cegn.cn:4432/gateway/gis/1/'
+  ? 'https://10.1.174.34:13600/cim/'
   : 'https://api.cdmbc.cn:4432/gateway/gis/1/';
 
 export default {