From 76c204e16d63d26658ba3f45f2c4f18fc90bd2aa Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Mon, 5 Jan 2026 17:19:25 +0800 Subject: [PATCH] =?UTF-8?q?Map=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0cesium?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/MapSelector.js | 178 ++++++++++++++++++++++-------- 1 file changed, 134 insertions(+), 44 deletions(-) diff --git a/src/components/Map/MapSelector.js b/src/components/Map/MapSelector.js index 540a57e..3d4486d 100644 --- a/src/components/Map/MapSelector.js +++ b/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") && ( @@ -236,6 +325,7 @@ const MapSelector = (props) => {