Map组件增加cesium地图

src/components/Map/MapSelector.js

@@ -1,6 +1,8 @@
 import { Button, Col, Form, Input, Modal, Row, Select, Spin } from "antd";
 import { useEffect, useRef, useState } from "react";
-import { dynamicLoadJs } from "../../utils";
+import { dynamicLoadCss, dynamicLoadJs } from "../../utils";
+import CesiumMap from "./CesiumMap";
+import "./index.less";
 
 /**
  * 定位组件弹窗
@@ -15,6 +17,7 @@ const MapSelector = (props) => {
     area = "",
     showArea = false,
     disable = false,
+    type = "baidu",
   } = props;
 
   const mapContainerRef = useRef(null);
@@ -33,36 +36,21 @@ const MapSelector = (props) => {
     setCurrentArea(area || "");
   }, [longitude, latitude, area]);
 
-  // 初始化地图
+  // 百度地图初始化
-  const initMap = async () => {
+  const initBaiDuMap = () => {
-    if (!window.BMapGL) {
+    if (!window?.BMapGL?.Map) {
-      if (window?.base?.loadDynamicResource) {
+      setTimeout(() => {
-        await window.base.loadDynamicResource({
+        initBaiDuMap();
-          url: "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=initialize",
+      }, 50);
-          type: "script",
+      return;
-          attr: { type: "text/javascript" },
-        });
     }
-      else {
-        await dynamicLoadJs("https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=initialize");
-      }
-    }
-
-    setLoading(true);
-
-    // 确保DOM已经渲染
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    if (mapContainerRef.current) {
-      // 只有在没有地图实例时才创建新地图
-      if (!mapInstanceRef.current) {
     const map = new window.BMapGL.Map(mapContainerRef.current);
     mapInstanceRef.current = map;
 
     map.centerAndZoom(
       new window.BMapGL.Point(
-            longitude || "119.69457721306945",
+        longitude || window.mapLongitude,
-            latitude || "39.940504336846665",
+        latitude || window.mapLatitude,
       ),
       16,
     );
@@ -87,12 +75,109 @@ const MapSelector = (props) => {
         setCurrentLongitude(event.latlng.lng);
       });
     }
+  };
+
+  // Cesium地图初始化
+  const initCesiumMap = () => {
+    const { init, flyTo, addMarkPoint, getLongitudeAndLatitude } = new CesiumMap();
+    const { viewer } = init();
+    mapInstanceRef.current = viewer;
+    flyTo({ longitude: longitude || window.mapLongitude, latitude: latitude || window.mapLatitude, height: 900000 });
+    if (longitude && latitude) {
+      addMarkPoint({ longitude, latitude });
+    }
+    getLongitudeAndLatitude((error, coords) => {
+      if (error)
+        return;
+      const { longitude, latitude } = coords;
+      setCurrentLatitude(latitude);
+      setCurrentLongitude(longitude);
+    });
+  };
+
+  // 初始化地图
+  const initMap = () => {
+    setLoading(true);
+
+    if (mapContainerRef.current) {
+      // 只有在没有地图实例时才创建新地图
+      if (!mapInstanceRef.current) {
+        if (type === "baidu") {
+          initBaiDuMap();
+          return;
+        }
+        if (type === "cesium") {
+          initCesiumMap();
+        }
       }
 
       setLoading(false);
     }
   };
 
+  // 加载百度地图资源
+  const loadBaiDuMap = async () => {
+    if (!window.BMapGL) {
+      if (window?.base?.loadDynamicResource) {
+        await window.base.loadDynamicResource({
+          url: "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=initialize",
+          type: "script",
+          attr: { type: "text/javascript" },
+        });
+        initMap();
+      }
+      else {
+        await dynamicLoadJs("https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=initialize");
+        initMap();
+      }
+    }
+    else {
+      initMap();
+    }
+  };
+
+  // 加载Cesium地图资源
+  const loadCesiumMap = async () => {
+    if (!window.Cesium) {
+      if (window?.base?.loadDynamicResource) {
+        await window.base.loadDynamicResource({
+          url: "https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Cesium.js",
+          type: "script",
+          attr: { type: "text/javascript" },
+        });
+        await window.base.loadDynamicResource({
+          url: "https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Widgets/widgets.css",
+          type: "link",
+          attr: { rel: "stylesheet", type: "text/css" },
+        });
+        initMap();
+      }
+      else {
+        await dynamicLoadJs("https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Cesium.js");
+        await dynamicLoadCss("https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Widgets/widgets.css");
+        initMap();
+      }
+    }
+    else {
+      initMap();
+    }
+  };
+
+  // 加载地图资源
+  const loadMap = () => {
+    if (!window.mapLongitude && !window.mapLatitude) {
+      console.error("请在window设置变量 mapLongitude 和 mapLatitude，以供地图初始化坐标使用");
+      return;
+    }
+    if (type === "baidu") {
+      loadBaiDuMap();
+      return;
+    }
+    if (type === "cesium") {
+      loadCesiumMap();
+    }
+  };
+
   // 搜索功能
   const handleLocalSearch = () => {
     if (localSearch && mapInstanceRef.current) {
@@ -114,6 +199,10 @@ const MapSelector = (props) => {
   // 关闭弹窗
   const handleClose = () => {
     setLocalSearch("");
+    if (mapInstanceRef.current) {
+      mapInstanceRef.current.destroy();
+      mapInstanceRef.current = null;
+    }
     if (onClose)
       onClose();
   };
@@ -133,7 +222,7 @@ const MapSelector = (props) => {
     if (visible) {
       // 延迟初始化地图，确保DOM完全渲染
       initTimer = setTimeout(() => {
-        initMap();
+        loadMap();
       }, 100);
     }
 
@@ -201,7 +290,7 @@ const MapSelector = (props) => {
           )
         }
         {
-          !disable && (
+          (!disable && type === "baidu") && (
             <Row gutter={24}>
               <Col span={12}>
                 <Form.Item label="关键字搜索">
@@ -236,6 +325,7 @@ const MapSelector = (props) => {
       </Form>
       <div
         ref={mapContainerRef}
+        id="map_container"
         style={{ width: "100%", height: "500px", position: "relative" }}
       >
         <Spin size="large" tip="地图正在加载中..." spinning={loading}>