refactor(map): 优化分片加载与数据源管理
- 将文件导入路径由"uploadFile/gwj"调整为"uploadFile" - 升级zy-react-library依赖版本至2.1.0 - 使用更合理的默认chunkSize 50替代原来的10,提升加载效率 - 在添加实体集合时,将entityCollection添加到viewer.dataSources中,确保数据源正确管理 - 统一代码风格,移除重复添加entityCollection的操作,提高代码可读性和性能master
parent
6c279d6ba6
commit
477509877c
|
|
@ -40,7 +40,7 @@
|
||||||
"react-transition-group": "^4.4.5",
|
"react-transition-group": "^4.4.5",
|
||||||
"sass": "^1.97.0",
|
"sass": "^1.97.0",
|
||||||
"sass-loader": "^16.0.6",
|
"sass-loader": "^16.0.6",
|
||||||
"zy-react-library": "^2.0.15"
|
"zy-react-library": "^2.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antfu/eslint-config": "^5.4.1",
|
"@antfu/eslint-config": "^5.4.1",
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { Descriptions, Divider } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import PreviewImg from "zy-react-library/components/PreviewImg";
|
import PreviewImg from "zy-react-library/components/PreviewImg";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
|
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile";
|
||||||
import useDictionary from "zy-react-library/hooks/useDictionary";
|
import useDictionary from "zy-react-library/hooks/useDictionary";
|
||||||
import useGetFile from "zy-react-library/hooks/useGetFile";
|
import useGetFile from "zy-react-library/hooks/useGetFile";
|
||||||
import { getLabelName } from "zy-react-library/utils";
|
import { getLabelName } from "zy-react-library/utils";
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { Descriptions, Divider } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import PreviewImg from "zy-react-library/components/PreviewImg";
|
import PreviewImg from "zy-react-library/components/PreviewImg";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
|
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile";
|
||||||
import useDictionary from "zy-react-library/hooks/useDictionary";
|
import useDictionary from "zy-react-library/hooks/useDictionary";
|
||||||
import useGetFile from "zy-react-library/hooks/useGetFile";
|
import useGetFile from "zy-react-library/hooks/useGetFile";
|
||||||
import { getLabelName } from "zy-react-library/utils";
|
import { getLabelName } from "zy-react-library/utils";
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import PreviewImg from "zy-react-library/components/PreviewImg";
|
||||||
import PreviewPdf from "zy-react-library/components/PreviewPdf";
|
import PreviewPdf from "zy-react-library/components/PreviewPdf";
|
||||||
import PreviewWord from "zy-react-library/components/PreviewWord";
|
import PreviewWord from "zy-react-library/components/PreviewWord";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
|
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile";
|
||||||
import useGetFile from "zy-react-library/hooks/useGetFile";
|
import useGetFile from "zy-react-library/hooks/useGetFile";
|
||||||
import { getFileSuffix, getLabelName, isEmptyToWhether } from "zy-react-library/utils";
|
import { getFileSuffix, getLabelName, isEmptyToWhether } from "zy-react-library/utils";
|
||||||
import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
|
import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
|
||||||
|
|
|
||||||
|
|
@ -125,8 +125,9 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
// 添加港口点
|
// 添加港口点
|
||||||
const addPortPoint = async () => {
|
const addPortPoint = async () => {
|
||||||
const viewer = getViewer();
|
const viewer = getViewer();
|
||||||
await chunkedLoad(portPoint, 10, async (item) => {
|
|
||||||
const entityCollection = createEntityCollection("portEntityCollection");
|
const entityCollection = createEntityCollection("portEntityCollection");
|
||||||
|
viewer.dataSources.add(entityCollection);
|
||||||
|
await chunkedLoad(portPoint, 50, async (item) => {
|
||||||
entityCollection.entities.add(
|
entityCollection.entities.add(
|
||||||
new Cesium.Entity({
|
new Cesium.Entity({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
|
|
@ -136,7 +137,6 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
monitorItems: { data: { ...item, markType: "港口" } },
|
monitorItems: { data: { ...item, markType: "港口" } },
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
viewer.dataSources.add(entityCollection);
|
|
||||||
});
|
});
|
||||||
await addMergedEntityCollection(viewer, "portEntityCollection");
|
await addMergedEntityCollection(viewer, "portEntityCollection");
|
||||||
};
|
};
|
||||||
|
|
@ -162,8 +162,9 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
else {
|
else {
|
||||||
branchOfficePoint = filterNull([pointInfo]);
|
branchOfficePoint = filterNull([pointInfo]);
|
||||||
}
|
}
|
||||||
await chunkedLoad(branchOfficePoint, 10, async (item) => {
|
|
||||||
const entityCollection = createEntityCollection("branchOfficeEntityCollection");
|
const entityCollection = createEntityCollection("branchOfficeEntityCollection");
|
||||||
|
viewer.dataSources.add(entityCollection);
|
||||||
|
await chunkedLoad(branchOfficePoint, 50, async (item) => {
|
||||||
entityCollection.entities.add(
|
entityCollection.entities.add(
|
||||||
new Cesium.Entity({
|
new Cesium.Entity({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
|
|
@ -175,7 +176,6 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
viewer.dataSources.add(entityCollection);
|
|
||||||
});
|
});
|
||||||
await addMergedEntityCollection(viewer, "branchOfficeEntityCollection");
|
await addMergedEntityCollection(viewer, "branchOfficeEntityCollection");
|
||||||
mitt.emit(changeCoverMaskVisibleMittKey, false);
|
mitt.emit(changeCoverMaskVisibleMittKey, false);
|
||||||
|
|
@ -199,9 +199,8 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
return;
|
return;
|
||||||
mitt.emit(changeCoverMaskVisibleMittKey, true);
|
mitt.emit(changeCoverMaskVisibleMittKey, true);
|
||||||
const currentEdge = edgeMap[id]();
|
const currentEdge = edgeMap[id]();
|
||||||
const entityCollection = createEntityCollection(
|
const entityCollection = createEntityCollection("fourColorDiagramEntityCollection");
|
||||||
"fourColorDiagramEntityCollection",
|
getViewer().dataSources.add(entityCollection);
|
||||||
);
|
|
||||||
// 先收集需要渲染的数据
|
// 先收集需要渲染的数据
|
||||||
const itemsToRender = [];
|
const itemsToRender = [];
|
||||||
|
|
||||||
|
|
@ -240,7 +239,6 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
getViewer().dataSources.add(entityCollection);
|
|
||||||
mitt.emit(changeCoverMaskVisibleMittKey, false);
|
mitt.emit(changeCoverMaskVisibleMittKey, false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -263,6 +261,7 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
mitt.emit(changeCoverMaskVisibleMittKey, true);
|
mitt.emit(changeCoverMaskVisibleMittKey, true);
|
||||||
const currentEdge = edgeMap[id]();
|
const currentEdge = edgeMap[id]();
|
||||||
const entityCollection = createEntityCollection("wallEntityCollection");
|
const entityCollection = createEntityCollection("wallEntityCollection");
|
||||||
|
viewer.dataSources.add(entityCollection);
|
||||||
const wallList = currentEdge.wallList;
|
const wallList = currentEdge.wallList;
|
||||||
if (!Array.isArray(wallList))
|
if (!Array.isArray(wallList))
|
||||||
return;
|
return;
|
||||||
|
|
@ -290,7 +289,6 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
viewer.dataSources.add(entityCollection);
|
|
||||||
mitt.emit(changeCoverMaskVisibleMittKey, false);
|
mitt.emit(changeCoverMaskVisibleMittKey, false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -381,10 +379,9 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
throw new Error("请传入markIcon(扎点图标)");
|
throw new Error("请传入markIcon(扎点图标)");
|
||||||
const viewer = getViewer();
|
const viewer = getViewer();
|
||||||
mitt.emit(changeCoverMaskVisibleMittKey, true);
|
mitt.emit(changeCoverMaskVisibleMittKey, true);
|
||||||
await chunkedLoad(filterNull(pointList), 10, async (item) => {
|
const entityCollection = createEntityCollection(`markEntityCollection_${options.markType}`);
|
||||||
const entityCollection = createEntityCollection(
|
viewer.dataSources.add(entityCollection);
|
||||||
`markEntityCollection_${options.markType}`,
|
await chunkedLoad(filterNull(pointList), 50, async (item) => {
|
||||||
);
|
|
||||||
const name = item[options.titleKey] || "";
|
const name = item[options.titleKey] || "";
|
||||||
entityCollection.entities.add(
|
entityCollection.entities.add(
|
||||||
new Cesium.Entity({
|
new Cesium.Entity({
|
||||||
|
|
@ -397,7 +394,6 @@ export default function useMapMethods(viewerRef, request) {
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
viewer.dataSources.add(entityCollection);
|
|
||||||
});
|
});
|
||||||
const dataSource = await addMergedEntityCollection(
|
const dataSource = await addMergedEntityCollection(
|
||||||
viewer,
|
viewer,
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export const formatPolygon = (item) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
// 分片加载方法
|
// 分片加载方法
|
||||||
export const chunkedLoad = async (dataArray, chunkSize = 10, processItem) => {
|
export const chunkedLoad = async (dataArray, chunkSize = 50, processItem) => {
|
||||||
const results = [];
|
const results = [];
|
||||||
for (let i = 0; i < dataArray.length; i += chunkSize) {
|
for (let i = 0; i < dataArray.length; i += chunkSize) {
|
||||||
const chunk = dataArray.slice(i, i + chunkSize);
|
const chunk = dataArray.slice(i, i + chunkSize);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue