703 lines
22 KiB
TypeScript
703 lines
22 KiB
TypeScript
import React, { useState, useEffect, useCallback } from "react";
|
||
import { useData, useMap } from "../MapComponent";
|
||
import ToolbarButton from "@/components/olmap/common/ToolbarButton";
|
||
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
||
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
|
||
import PaletteOutlinedIcon from "@mui/icons-material/PaletteOutlined";
|
||
import QueryStatsOutlinedIcon from "@mui/icons-material/QueryStatsOutlined";
|
||
import PropertyPanel from "./PropertyPanel"; // 引入属性面板组件
|
||
import DrawPanel from "./DrawPanel"; // 引入绘图面板组件
|
||
|
||
import VectorSource from "ol/source/Vector";
|
||
import VectorLayer from "ol/layer/Vector";
|
||
import { Style, Stroke, Fill, Circle } from "ol/style";
|
||
import { FeatureLike } from "ol/Feature";
|
||
import Feature from "ol/Feature";
|
||
import StyleEditorPanel from "./StyleEditorPanel";
|
||
import StyleLegend from "./StyleLegend"; // 引入图例组件
|
||
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
|
||
|
||
import { config } from "@/config/config";
|
||
const backendUrl = config.BACKEND_URL;
|
||
|
||
import { LayerStyleState } from "./StyleEditorPanel";
|
||
|
||
// 添加接口定义隐藏按钮的props
|
||
interface ToolbarProps {
|
||
hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
|
||
queryType?: string; // 可选的查询类型参数
|
||
}
|
||
const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
|
||
const map = useMap();
|
||
const data = useData();
|
||
if (!data) return null;
|
||
const { currentTime, selectedDate, schemeName } = data;
|
||
const [activeTools, setActiveTools] = useState<string[]>([]);
|
||
const [highlightFeature, setHighlightFeature] = useState<FeatureLike | null>(
|
||
null
|
||
);
|
||
const [showPropertyPanel, setShowPropertyPanel] = useState<boolean>(false);
|
||
const [showDrawPanel, setShowDrawPanel] = useState<boolean>(false);
|
||
const [showStyleEditor, setShowStyleEditor] = useState<boolean>(false);
|
||
const [highlightLayer, setHighlightLayer] =
|
||
useState<VectorLayer<VectorSource> | null>(null);
|
||
|
||
// 样式状态管理 - 在 Toolbar 中管理，带有默认样式
|
||
const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>([
|
||
{
|
||
isActive: false, // 默认不激活，不显示图例
|
||
layerId: "junctions",
|
||
layerName: "节点图层",
|
||
styleConfig: {
|
||
property: "pressure",
|
||
classificationMethod: "pretty_breaks",
|
||
segments: 6,
|
||
minSize: 4,
|
||
maxSize: 12,
|
||
minStrokeWidth: 2,
|
||
maxStrokeWidth: 8,
|
||
fixedStrokeWidth: 3,
|
||
colorType: "gradient",
|
||
singlePaletteIndex: 0,
|
||
gradientPaletteIndex: 0,
|
||
rainbowPaletteIndex: 0,
|
||
showLabels: false,
|
||
opacity: 0.9,
|
||
adjustWidthByProperty: true,
|
||
},
|
||
legendConfig: {
|
||
layerId: "junctions",
|
||
layerName: "节点图层",
|
||
property: "压力", // 暂时为空，等计算后更新
|
||
colors: [],
|
||
type: "point",
|
||
dimensions: [],
|
||
breaks: [],
|
||
},
|
||
},
|
||
{
|
||
isActive: false, // 默认不激活，不显示图例
|
||
layerId: "pipes",
|
||
layerName: "管道图层",
|
||
styleConfig: {
|
||
property: "flow",
|
||
classificationMethod: "pretty_breaks",
|
||
segments: 6,
|
||
minSize: 4,
|
||
maxSize: 12,
|
||
minStrokeWidth: 2,
|
||
maxStrokeWidth: 8,
|
||
fixedStrokeWidth: 3,
|
||
colorType: "gradient",
|
||
singlePaletteIndex: 0,
|
||
gradientPaletteIndex: 0,
|
||
rainbowPaletteIndex: 0,
|
||
showLabels: false,
|
||
opacity: 0.9,
|
||
adjustWidthByProperty: true,
|
||
},
|
||
legendConfig: {
|
||
layerId: "pipes",
|
||
layerName: "管道图层",
|
||
property: "流量", // 暂时为空，等计算后更新
|
||
colors: [],
|
||
type: "linestring",
|
||
dimensions: [],
|
||
breaks: [],
|
||
},
|
||
},
|
||
]);
|
||
|
||
// 计算激活的图例配置
|
||
const activeLegendConfigs = layerStyleStates
|
||
.filter((state) => state.isActive && state.legendConfig.property)
|
||
.map((state) => ({
|
||
...state.legendConfig,
|
||
layerName: state.layerName,
|
||
layerId: state.layerId,
|
||
}));
|
||
// 创建高亮图层
|
||
useEffect(() => {
|
||
if (!map) return;
|
||
|
||
const highLightSource = new VectorSource();
|
||
const highLightLayer = new VectorLayer({
|
||
source: highLightSource,
|
||
style: new Style({
|
||
stroke: new Stroke({
|
||
color: `rgba(255, 0, 0, 1)`,
|
||
width: 5,
|
||
}),
|
||
fill: new Fill({
|
||
color: `rgba(255, 0, 0, 0.2)`,
|
||
}),
|
||
image: new Circle({
|
||
radius: 7,
|
||
stroke: new Stroke({
|
||
color: `rgba(255, 0, 0, 1)`,
|
||
width: 3,
|
||
}),
|
||
fill: new Fill({
|
||
color: `rgba(255, 0, 0, 0.2)`,
|
||
}),
|
||
}),
|
||
}),
|
||
properties: {
|
||
name: "属性查询高亮图层", // 设置图层名称
|
||
value: "info_highlight_layer",
|
||
type: "multigeometry",
|
||
properties: [],
|
||
},
|
||
});
|
||
|
||
map.addLayer(highLightLayer);
|
||
setHighlightLayer(highLightLayer);
|
||
|
||
return () => {
|
||
map.removeLayer(highLightLayer);
|
||
};
|
||
}, [map]);
|
||
// 高亮要素的函数
|
||
useEffect(() => {
|
||
if (!highlightLayer) {
|
||
return;
|
||
}
|
||
const source = highlightLayer.getSource();
|
||
if (!source) {
|
||
return;
|
||
}
|
||
// 清除之前的高亮
|
||
source.clear();
|
||
// 添加新的高亮要素
|
||
if (highlightFeature instanceof Feature) {
|
||
source.addFeature(highlightFeature);
|
||
}
|
||
}, [highlightFeature]);
|
||
// 地图点击选择要素事件处理函数
|
||
const handleMapClickSelectFeatures = useCallback(
|
||
async (event: { coordinate: number[] }) => {
|
||
if (!map) return;
|
||
const feature = await mapClickSelectFeatures(event, map); // 调用导入的函数
|
||
setHighlightFeature(feature);
|
||
},
|
||
[map, setHighlightFeature]
|
||
);
|
||
// 添加矢量属性查询事件监听器
|
||
useEffect(() => {
|
||
if (!activeTools.includes("info") || !map) return;
|
||
map.on("click", handleMapClickSelectFeatures);
|
||
|
||
return () => {
|
||
map.un("click", handleMapClickSelectFeatures);
|
||
};
|
||
}, [activeTools, map, handleMapClickSelectFeatures]);
|
||
|
||
// 处理工具栏按钮点击事件
|
||
const handleToolClick = (tool: string) => {
|
||
// 样式工具的特殊处理 - 只有再次点击时才会取消激活和关闭
|
||
if (tool === "style") {
|
||
if (activeTools.includes("style")) {
|
||
// 如果样式工具已激活，点击时关闭
|
||
setShowStyleEditor(false);
|
||
setActiveTools((prev) => prev.filter((t) => t !== "style"));
|
||
} else {
|
||
// 激活样式工具，打开样式面板
|
||
setActiveTools((prev) => [...prev, "style"]);
|
||
setShowStyleEditor(true);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 其他工具的处理逻辑
|
||
if (activeTools.includes(tool)) {
|
||
// 如果当前工具已激活，再次点击时取消激活并关闭面板
|
||
deactivateTool(tool);
|
||
setActiveTools((prev) => prev.filter((t) => t !== tool));
|
||
} else {
|
||
// 如果当前工具未激活，先关闭所有其他工具，然后激活当前工具
|
||
// 关闭所有面板（但保持样式编辑器状态）
|
||
closeAllPanelsExceptStyle();
|
||
|
||
// 取消激活所有非样式工具
|
||
setActiveTools((prev) => {
|
||
const styleActive = prev.includes("style");
|
||
return styleActive ? ["style", tool] : [tool];
|
||
});
|
||
|
||
// 激活当前工具并打开对应面板
|
||
activateTool(tool);
|
||
}
|
||
};
|
||
|
||
// 取消激活指定工具并关闭对应面板
|
||
const deactivateTool = (tool: string) => {
|
||
switch (tool) {
|
||
case "info":
|
||
setShowPropertyPanel(false);
|
||
setHighlightFeature(null);
|
||
break;
|
||
case "draw":
|
||
setShowDrawPanel(false);
|
||
break;
|
||
case "history":
|
||
// 取消历史查询激活时的清理（目前不保留额外状态）
|
||
break;
|
||
}
|
||
};
|
||
|
||
// 激活指定工具并打开对应面板
|
||
const activateTool = (tool: string) => {
|
||
switch (tool) {
|
||
case "info":
|
||
setShowPropertyPanel(true);
|
||
break;
|
||
case "draw":
|
||
setShowDrawPanel(true);
|
||
break;
|
||
case "history":
|
||
// 激活历史查询后立即触发一次网络历史数据查询（结果暂时打印到控制台）
|
||
queryNetworkHistory();
|
||
break;
|
||
}
|
||
};
|
||
|
||
// 查询管网历史数据的函数（激活时调用）
|
||
const queryNetworkHistory = async () => {
|
||
try {
|
||
// 由当前选中日期和 currentTime 构造查询时间（UTC ISO）
|
||
let dateObj: Date;
|
||
if (selectedDate instanceof Date) {
|
||
dateObj = new Date(selectedDate);
|
||
} else {
|
||
dateObj = new Date(selectedDate as any);
|
||
}
|
||
const minutes = Number(currentTime) || 0;
|
||
dateObj.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
|
||
const querytime = dateObj.toISOString();
|
||
|
||
let url: string;
|
||
if (queryType === "scheme") {
|
||
url = `${backendUrl}/queryschemesimulationrecordsbytime/?scheme_name=${schemeName}&querytime=${querytime}`;
|
||
} else {
|
||
url = `${backendUrl}/querysimulationrecordsbytime/?querytime=${querytime}`;
|
||
}
|
||
|
||
const response = await fetch(url);
|
||
if (!response.ok) {
|
||
console.error("查询管网历史数据失败：", response.statusText);
|
||
return;
|
||
}
|
||
const result = await response.json();
|
||
// TODO: 根据需要把结果展示到面板或状态中，目前先打印
|
||
console.log("管网历史数据：", result);
|
||
// 简单提示用户已查询（可改为更友好的 UI）
|
||
// eslint-disable-next-line no-alert
|
||
alert("已查询管网历史数据（请查看控制台或后续面板展示）。");
|
||
} catch (error) {
|
||
console.error("查询管网历史数据出错：", error);
|
||
}
|
||
};
|
||
|
||
// 关闭所有面板（除了样式编辑器）
|
||
const closeAllPanelsExceptStyle = () => {
|
||
setShowPropertyPanel(false);
|
||
setHighlightFeature(null);
|
||
setShowDrawPanel(false);
|
||
// 样式编辑器保持其当前状态，不自动关闭
|
||
};
|
||
const [computedProperties, setComputedProperties] = useState<
|
||
Record<string, any>
|
||
>({});
|
||
// 添加 useEffect 来查询计算属性
|
||
useEffect(() => {
|
||
if (!highlightFeature || !selectedDate) {
|
||
setComputedProperties({});
|
||
return;
|
||
}
|
||
|
||
const id = highlightFeature.getProperties().id;
|
||
if (!id) {
|
||
setComputedProperties({});
|
||
return;
|
||
}
|
||
|
||
const queryComputedProperties = async () => {
|
||
try {
|
||
const properties = highlightFeature?.getProperties?.() || {};
|
||
const type =
|
||
properties.geometry?.getType?.() === "LineString" ? "link" : "node";
|
||
// selectedDate 格式化为 YYYY-MM-DD
|
||
let dateObj: Date;
|
||
if (selectedDate instanceof Date) {
|
||
dateObj = new Date(selectedDate);
|
||
} else {
|
||
dateObj = new Date(selectedDate);
|
||
}
|
||
const minutes = Number(currentTime) || 0;
|
||
dateObj.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
|
||
// 转为 UTC ISO 字符串
|
||
const querytime = dateObj.toISOString(); // 例如 "2025-09-16T16:30:00.000Z"
|
||
let response;
|
||
if (queryType === "scheme") {
|
||
response = await fetch(
|
||
`${backendUrl}/queryschemesimulationrecordsbyidtime/?scheme_name=${schemeName}&id=${id}&querytime=${querytime}&type=${type}`
|
||
);
|
||
} else {
|
||
response = await fetch(
|
||
`${backendUrl}/querysimulationrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
|
||
);
|
||
}
|
||
if (!response.ok) {
|
||
throw new Error("API request failed");
|
||
}
|
||
const data = await response.json();
|
||
setComputedProperties(data.results[0] || {});
|
||
} catch (error) {
|
||
console.error("Error querying computed properties:", error);
|
||
setComputedProperties({});
|
||
}
|
||
};
|
||
// 仅当 currentTime 有效时查询
|
||
if (currentTime !== -1 && queryType) queryComputedProperties();
|
||
}, [highlightFeature, currentTime, selectedDate]);
|
||
|
||
// 从要素属性中提取属性面板需要的数据
|
||
const getFeatureProperties = useCallback(() => {
|
||
if (!highlightFeature) return {};
|
||
const layer = highlightFeature?.getId()?.toString().split(".")[0];
|
||
const properties = highlightFeature.getProperties();
|
||
// 计算属性字段，增加 key 字段
|
||
const pipeComputedFields = [
|
||
{ key: "flow", label: "流量", unit: "m³/s" },
|
||
{ key: "friction", label: "摩阻", unit: "" },
|
||
{ key: "headloss", label: "水头损失", unit: "m" },
|
||
{ key: "quality", label: "水质", unit: "mg/L" },
|
||
{ key: "reaction", label: "反应", unit: "1/s" },
|
||
{ key: "setting", label: "设置", unit: "" },
|
||
{ key: "status", label: "状态", unit: "" },
|
||
{ key: "velocity", label: "流速", unit: "m/s" },
|
||
];
|
||
const nodeComputedFields = [
|
||
{ key: "actualdemand", label: "实际需水量", unit: "m³/s" },
|
||
{ key: "head", label: "水头", unit: "m" },
|
||
{ key: "pressure", label: "压力", unit: "m" },
|
||
{ key: "quality", label: "水质", unit: "mg/L" },
|
||
];
|
||
|
||
if (layer === "geo_pipes_mat" || layer === "geo_pipes") {
|
||
let result = {
|
||
id: properties.id,
|
||
type: "管道",
|
||
properties: [
|
||
{ label: "起始节点ID", value: properties.node1 },
|
||
{ label: "终点节点ID", value: properties.node2 },
|
||
{ label: "长度", value: properties.length?.toFixed?.(1), unit: "m" },
|
||
{
|
||
label: "管径",
|
||
value: properties.diameter?.toFixed?.(1),
|
||
unit: "mm",
|
||
},
|
||
{ label: "粗糙度", value: properties.roughness },
|
||
{ label: "局部损失", value: properties.minor_loss },
|
||
{ label: "初始状态", value: "开" },
|
||
],
|
||
};
|
||
// 追加计算属性
|
||
if (computedProperties) {
|
||
pipeComputedFields.forEach(({ key, label, unit }) => {
|
||
if (computedProperties[key] !== undefined) {
|
||
result.properties.push({
|
||
label,
|
||
value:
|
||
computedProperties[key].toFixed?.(3) || computedProperties[key],
|
||
unit,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
return result;
|
||
}
|
||
if (layer === "geo_junctions_mat" || layer === "geo_junctions") {
|
||
let result = {
|
||
id: properties.id,
|
||
type: "节点",
|
||
properties: [
|
||
{
|
||
label: "海拔",
|
||
value: properties.elevation?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
// 将 demand1~demand5 与 pattern1~pattern5 作为二级表格展示
|
||
{
|
||
type: "table",
|
||
label: "基本需水量",
|
||
columns: ["demand", "pattern"],
|
||
rows: Array.from({ length: 5 }, (_, i) => i + 1)
|
||
.map((idx) => {
|
||
const d = properties?.[`demand${idx}`]?.toFixed?.(3);
|
||
const p = properties?.[`pattern${idx}`];
|
||
// 仅当 demand 有效时展示该行
|
||
if (d !== undefined && d !== null && d !== "") {
|
||
return [typeof d === "number" ? d.toFixed(3) : d, p ?? "-"];
|
||
}
|
||
})
|
||
.filter(Boolean) as (string | number)[][],
|
||
} as any,
|
||
],
|
||
};
|
||
// 追加计算属性
|
||
if (computedProperties) {
|
||
nodeComputedFields.forEach(({ key, label, unit }) => {
|
||
if (computedProperties[key] !== undefined) {
|
||
result.properties.push({
|
||
label,
|
||
value:
|
||
computedProperties[key].toFixed?.(3) || computedProperties[key],
|
||
unit,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
return result;
|
||
}
|
||
if (layer === "geo_tanks_mat" || layer === "geo_tanks") {
|
||
return {
|
||
id: properties.id,
|
||
type: "水池",
|
||
properties: [
|
||
{
|
||
label: "海拔",
|
||
value: properties.elevation?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
{
|
||
label: "初始水位",
|
||
value: properties.init_level?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
{
|
||
label: "最低水位",
|
||
value: properties.min_level?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
{
|
||
label: "最高水位",
|
||
value: properties.max_level?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
{
|
||
label: "直径",
|
||
value: properties.diameter?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
{
|
||
label: "最小容积",
|
||
value: properties.min_vol?.toFixed?.(1),
|
||
unit: "m³",
|
||
},
|
||
// {
|
||
// label: "容积曲线",
|
||
// value: properties.vol_curve,
|
||
// },
|
||
{
|
||
label: "溢出",
|
||
value: properties.overflow ? "是" : "否",
|
||
},
|
||
],
|
||
};
|
||
}
|
||
if (layer === "geo_reservoirs_mat" || layer === "geo_reservoirs") {
|
||
return {
|
||
id: properties.id,
|
||
type: "水库",
|
||
properties: [
|
||
{
|
||
label: "水头",
|
||
value: properties.head?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
// {
|
||
// label: "模式",
|
||
// value: properties.pattern,
|
||
// },
|
||
],
|
||
};
|
||
}
|
||
if (layer === "geo_pumps_mat" || layer === "geo_pumps") {
|
||
return {
|
||
id: properties.id,
|
||
type: "水泵",
|
||
properties: [
|
||
{ label: "起始节点 ID", value: properties.node1 },
|
||
{ label: "终点节点 ID", value: properties.node2 },
|
||
{
|
||
label: "功率",
|
||
value: properties.power?.toFixed?.(1),
|
||
unit: "kW",
|
||
},
|
||
{
|
||
label: "扬程",
|
||
value: properties.head?.toFixed?.(1),
|
||
unit: "m",
|
||
},
|
||
{
|
||
label: "转速",
|
||
value: properties.speed?.toFixed?.(1),
|
||
unit: "rpm",
|
||
},
|
||
{
|
||
label: "模式",
|
||
value: properties.pattern,
|
||
},
|
||
],
|
||
};
|
||
}
|
||
if (layer === "geo_valves_mat" || layer === "geo_valves") {
|
||
return {
|
||
id: properties.id,
|
||
type: "阀门",
|
||
properties: [
|
||
{ label: "起始节点 ID", value: properties.node1 },
|
||
{ label: "终点节点 ID", value: properties.node2 },
|
||
{
|
||
label: "直径",
|
||
value: properties.diameter?.toFixed?.(1),
|
||
unit: "mm",
|
||
},
|
||
{
|
||
label: "阀门类型",
|
||
value: properties.v_type,
|
||
},
|
||
// {
|
||
// label: "设置",
|
||
// value: properties.setting?.toFixed?.(2),
|
||
// },
|
||
{
|
||
label: "局部损失",
|
||
value: properties.minor_loss?.toFixed?.(2),
|
||
},
|
||
],
|
||
};
|
||
}
|
||
// 传输频率文字对应
|
||
const getTransmissionFrequency = (transmission_frequency: string) => {
|
||
// 传输频率文本：00:01:00，00:05:00，00:10:00，00:30:00，01:00:00，转换为分钟数
|
||
const parts = transmission_frequency.split(":");
|
||
if (parts.length !== 3) return transmission_frequency;
|
||
const hours = parseInt(parts[0], 10);
|
||
const minutes = parseInt(parts[1], 10);
|
||
const seconds = parseInt(parts[2], 10);
|
||
const totalMinutes = hours * 60 + minutes + (seconds >= 30 ? 1 : 0);
|
||
return totalMinutes;
|
||
};
|
||
// 可靠度文字映射
|
||
const getReliability = (reliability: number) => {
|
||
switch (reliability) {
|
||
case 1:
|
||
return "高";
|
||
case 2:
|
||
return "中";
|
||
case 3:
|
||
return "低";
|
||
default:
|
||
return "未知";
|
||
}
|
||
};
|
||
if (layer === "geo_scada_mat" || layer === "geo_scada") {
|
||
let result = {
|
||
id: properties.id,
|
||
type: "SCADA设备",
|
||
properties: [
|
||
{
|
||
label: "类型",
|
||
value:
|
||
properties.type === "pipe_flow" ? "流量传感器" : "压力传感器",
|
||
},
|
||
{
|
||
label: "关联节点 ID",
|
||
value: properties.associated_element_id,
|
||
},
|
||
{
|
||
label: "传输模式",
|
||
value:
|
||
properties.transmission_mode === "non_realtime"
|
||
? "定时传输"
|
||
: "实时传输",
|
||
},
|
||
{
|
||
label: "传输频率",
|
||
value: getTransmissionFrequency(properties.transmission_frequency),
|
||
unit: "分钟",
|
||
},
|
||
{
|
||
label: "可靠性",
|
||
value: getReliability(properties.reliability),
|
||
},
|
||
],
|
||
};
|
||
return result;
|
||
}
|
||
return {};
|
||
}, [highlightFeature, computedProperties]);
|
||
|
||
return (
|
||
<>
|
||
<div className="absolute top-4 left-4 bg-white p-1 rounded-xl shadow-lg flex opacity-85 hover:opacity-100 transition-opacity">
|
||
{!hiddenButtons?.includes("info") && (
|
||
<ToolbarButton
|
||
icon={<InfoOutlinedIcon />}
|
||
name="查看属性"
|
||
isActive={activeTools.includes("info")}
|
||
onClick={() => handleToolClick("info")}
|
||
/>
|
||
)}
|
||
{!hiddenButtons?.includes("history") && (
|
||
<ToolbarButton
|
||
icon={<QueryStatsOutlinedIcon />}
|
||
name="查询历史数据"
|
||
isActive={activeTools.includes("history")}
|
||
onClick={() => handleToolClick("history")}
|
||
/>
|
||
)}
|
||
{!hiddenButtons?.includes("draw") && (
|
||
<ToolbarButton
|
||
icon={<EditOutlinedIcon />}
|
||
name="标记绘制"
|
||
isActive={activeTools.includes("draw")}
|
||
onClick={() => handleToolClick("draw")}
|
||
/>
|
||
)}
|
||
{!hiddenButtons?.includes("style") && (
|
||
<ToolbarButton
|
||
icon={<PaletteOutlinedIcon />}
|
||
name="图层样式"
|
||
isActive={activeTools.includes("style")}
|
||
onClick={() => handleToolClick("style")}
|
||
/>
|
||
)}
|
||
</div>
|
||
{showPropertyPanel && <PropertyPanel {...getFeatureProperties()} />}
|
||
{showDrawPanel && map && <DrawPanel />}
|
||
{showStyleEditor && (
|
||
<StyleEditorPanel
|
||
layerStyleStates={layerStyleStates}
|
||
setLayerStyleStates={setLayerStyleStates}
|
||
/>
|
||
)}
|
||
|
||
{/* 图例显示 */}
|
||
{activeLegendConfigs.length > 0 && (
|
||
<div className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
|
||
<div className="flex flex-row gap-3">
|
||
{activeLegendConfigs.map((config, index) => (
|
||
<StyleLegend key={`${config.layerId}-${index}`} {...config} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Toolbar;
|