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,8 +36,87 @@ const MapSelector = (props) => {
     setCurrentArea(area || "");
   }, [longitude, latitude, area]);
 
+  // 百度地图初始化
+  const initBaiDuMap = () => {
+    if (!window?.BMapGL?.Map) {
+      setTimeout(() => {
+        initBaiDuMap();
+      }, 50);
+      return;
+    }
+    const map = new window.BMapGL.Map(mapContainerRef.current);
+    mapInstanceRef.current = map;
+
+    map.centerAndZoom(
+      new window.BMapGL.Point(
+        longitude || window.mapLongitude,
+        latitude || window.mapLatitude,
+      ),
+      16,
+    );
+
+    map.enableScrollWheelZoom(true);
+
+    // 如果有初始坐标，添加标记
+    if (longitude && latitude) {
+      const point = new window.BMapGL.Point(longitude, latitude);
+      const marker = new window.BMapGL.Marker(point);
+      map.addOverlay(marker);
+    }
+
+    // 添加点击事件
+    if (!disable) {
+      map.addEventListener("click", (event) => {
+        map.clearOverlays();
+        const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
+        const marker = new window.BMapGL.Marker(point);
+        map.addOverlay(marker);
+        setCurrentLatitude(event.latlng.lat);
+        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 = async () => {
+  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({
@@ -42,54 +124,57 @@ const MapSelector = (props) => {
           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();
+    }
+  };
 
-    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",
-            latitude || "39.940504336846665",
-          ),
-          16,
-        );
-
-        map.enableScrollWheelZoom(true);
-
-        // 如果有初始坐标，添加标记
-        if (longitude && latitude) {
-          const point = new window.BMapGL.Point(longitude, latitude);
-          const marker = new window.BMapGL.Marker(point);
-          map.addOverlay(marker);
-        }
-
-        // 添加点击事件
-        if (!disable) {
-          map.addEventListener("click", (event) => {
-            map.clearOverlays();
-            const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
-            const marker = new window.BMapGL.Marker(point);
-            map.addOverlay(marker);
-            setCurrentLatitude(event.latlng.lat);
-            setCurrentLongitude(event.latlng.lng);
-          });
-        }
+  // 加载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();
+    }
+  };
 
-      setLoading(false);
+  // 加载地图资源
+  const loadMap = () => {
+    if (!window.mapLongitude && !window.mapLatitude) {
+      console.error("请在window设置变量 mapLongitude 和 mapLatitude，以供地图初始化坐标使用");
+      return;
+    }
+    if (type === "baidu") {
+      loadBaiDuMap();
+      return;
+    }
+    if (type === "cesium") {
+      loadCesiumMap();
     }
   };
 
@@ -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}>