354 lines
9.6 KiB
JavaScript
354 lines
9.6 KiB
JavaScript
import { Button, Col, Form, Input, Modal, Row, Select, Spin } from "antd";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { dynamicLoadCss, dynamicLoadJs } from "../../utils";
|
||
import CesiumMap from "./CesiumMap";
|
||
import "./index.less";
|
||
|
||
/**
|
||
* 定位组件弹窗
|
||
*/
|
||
const MapSelector = (props) => {
|
||
const {
|
||
visible,
|
||
onClose,
|
||
longitude,
|
||
latitude,
|
||
onConfirm,
|
||
area = "",
|
||
showArea = false,
|
||
disable = false,
|
||
type = "baidu",
|
||
} = props;
|
||
|
||
const mapContainerRef = useRef(null);
|
||
const mapInstanceRef = useRef(null);
|
||
const local = useRef(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [currentLongitude, setCurrentLongitude] = useState(longitude || "");
|
||
const [currentLatitude, setCurrentLatitude] = useState(latitude || "");
|
||
const [localSearch, setLocalSearch] = useState("");
|
||
const [currentArea, setCurrentArea] = useState("");
|
||
|
||
// 当外部经纬度变化时，更新内部状态
|
||
useEffect(() => {
|
||
setCurrentLongitude(longitude || "");
|
||
setCurrentLatitude(latitude || "");
|
||
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 = () => {
|
||
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) {
|
||
local.current = new window.BMapGL.LocalSearch(mapInstanceRef.current, {
|
||
renderOptions: { map: mapInstanceRef.current },
|
||
});
|
||
local.current.search(localSearch);
|
||
}
|
||
};
|
||
|
||
// 清空
|
||
const handleLocalClear = () => {
|
||
setLocalSearch("");
|
||
if (mapInstanceRef.current) {
|
||
local.current.search("");
|
||
}
|
||
};
|
||
|
||
// 关闭弹窗
|
||
const handleClose = () => {
|
||
setLocalSearch("");
|
||
if (mapInstanceRef.current) {
|
||
mapInstanceRef.current.destroy();
|
||
mapInstanceRef.current = null;
|
||
}
|
||
if (onClose)
|
||
onClose();
|
||
};
|
||
|
||
// 确认选择
|
||
const handleConfirm = () => {
|
||
if (onConfirm) {
|
||
onConfirm(currentLongitude, currentLatitude, { area: currentArea });
|
||
}
|
||
handleClose();
|
||
};
|
||
|
||
// 监听visible变化
|
||
useEffect(() => {
|
||
let initTimer;
|
||
|
||
if (visible) {
|
||
// 延迟初始化地图，确保DOM完全渲染
|
||
initTimer = setTimeout(() => {
|
||
loadMap();
|
||
}, 100);
|
||
}
|
||
|
||
return () => {
|
||
if (initTimer) {
|
||
clearTimeout(initTimer);
|
||
}
|
||
};
|
||
}, [visible]);
|
||
|
||
const handleAfterClose = () => {
|
||
if (mapInstanceRef.current) {
|
||
try {
|
||
mapInstanceRef.current.clearOverlays();
|
||
mapInstanceRef.current.destroy();
|
||
mapInstanceRef.current = null;
|
||
}
|
||
catch (e) {
|
||
console.warn("Error destroying map on unmount:", e);
|
||
}
|
||
mapInstanceRef.current = null;
|
||
}
|
||
};
|
||
|
||
// 组件卸载时清理地图
|
||
useEffect(() => {
|
||
return () => {
|
||
handleAfterClose();
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<Modal
|
||
open={visible}
|
||
title="坐标"
|
||
onCancel={handleClose}
|
||
width={1000}
|
||
destroyOnHidden={false}
|
||
maskClosable={false}
|
||
afterClose={handleAfterClose}
|
||
footer={[
|
||
<Button key="back" onClick={handleClose}>
|
||
取消
|
||
</Button>,
|
||
!disable && (
|
||
<Button key="submit" type="primary" onClick={handleConfirm}>
|
||
确定
|
||
</Button>
|
||
),
|
||
]}
|
||
>
|
||
<Form labelAlign="right" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
{
|
||
showArea && (
|
||
<Row gutter={24}>
|
||
<Col span={12}>
|
||
<Form.Item label="所属区域">
|
||
<Select value={currentArea} onChange={e => setCurrentArea(e)} allowClear>
|
||
<Select.Option value="1">东港区</Select.Option>
|
||
<Select.Option value="2">西港区</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
)
|
||
}
|
||
{
|
||
(!disable && type === "baidu") && (
|
||
<Row gutter={24}>
|
||
<Col span={12}>
|
||
<Form.Item label="关键字搜索">
|
||
<Input value={localSearch} onChange={e => setLocalSearch(e.target.value)} allowClear />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item label=" " colon={false} style={{ textAlign: "right" }}>
|
||
<Button type="primary" onClick={handleLocalSearch}>
|
||
搜索
|
||
</Button>
|
||
<Button onClick={handleLocalClear} style={{ marginLeft: 8 }}>
|
||
重置
|
||
</Button>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
)
|
||
}
|
||
<Row gutter={24}>
|
||
<Col span={12}>
|
||
<Form.Item label="经度">
|
||
<Input disabled value={currentLongitude} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item label="纬度">
|
||
<Input disabled value={currentLatitude} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
<div
|
||
ref={mapContainerRef}
|
||
id="map_container"
|
||
style={{ width: "100%", height: "500px", position: "relative" }}
|
||
>
|
||
<Spin size="large" tip="地图正在加载中..." spinning={loading}>
|
||
<div style={{
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||
zIndex: 1000,
|
||
}}
|
||
/>
|
||
</Spin>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
MapSelector.displayName = "MapSelector";
|
||
|
||
export default MapSelector;
|