Niko
/
sy-water-data-board-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 补充水库水闸的聚合交互

feature-v1.0.0
chenhaojie 1 month ago
parent
81d3e82bf4
commit
d1a985a711
3 changed files with 3666 additions and 2915 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6144
      pnpm-lock.yaml
  2. 172
      src/hooks/web/useProject.tsx
  3. 3
      src/views/Main/Map/components/LayerTree.vue

6144
pnpm-lock.yaml
View File

File diff suppressed because it is too large

172
src/hooks/web/useProject.tsx
View File

@ -4,6 +4,7 @@ import { LayerTypeEnum } from "@/enums/projectEnum";
import { queryLayersByPos } from "@/utils/mapUtils";
import axios from "axios";
import { useProjectStore } from "@/store/modules/project";
import { throttle } from "lodash-es";
const clustering = reactive({
enabled: true,
pixelRange: 200,
@ -274,26 +275,19 @@ const baseLayerActions: Record<string, any> = {
};
export function useLayer() {
const viewerClick = (e: any) => {
const projectStore = useProjectStore();
const selectedLayers: any = projectStore.selectedLayers;
queryLayersByPos(e.wgs84SurfacePosition, selectedLayers, (res: any) => {
if (res?.attributes?.showCode) {
const { showCode, showName } = res?.attributes;
window.$bus.$emit("open-water-dialog", {
code: showCode,
name: showName,
});
}
});
const mouseMoveEvent = throttle((e: any) => {
const winPos = e.windowPosition;
const target = viewer.scene.pick(winPos);
console.log(target);
}, 500);
const addMouseMove = () => {
window.viewer?.on(SyCim.MouseEventType.MOUSE_MOVE, mouseMoveEvent, window.viewer);
};
const addViewerClick = () => {
window.viewer?.on(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
};
const removeViewerClick = () => {
window.viewer?.off(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
const removeMouseMove = () => {
window.viewer?.off(SyCim.MouseEventType.MOUSE_MOVE, mouseMoveEvent, window.viewer);
};
const addLayer = async (layerData: any) => {
// removeMouseMove();
const { layerType, url, id, isNeedCluster } = layerData;
let action = null;
// 超图 S3M图层
@ -317,49 +311,92 @@ export function useLayer() {
}
if (!layerType || !(action = layerActions[layerType as string])) return;
let layer: any = await action(layerData);
if (isNeedCluster === "1" && layerData.nameCn === "水库点") {
// let baseUrl = import.meta.env.VITE_BASE_URL;
// const data = await getFeatures(layerData);
// if (data?.features?.[0]?.geometry?.type === 'Point') {
// let layerConfig = {};
// switch (layerData.nameCn) {
// case "水库点":
// layerConfig = {
// isUniqueRender: true,
// field: "ENG_SCAL",
// fieldOptions: [
// { name: "1.0", attr: "image", value: "reservoir_big.png" },
// { name: "2.0", attr: "image", value: "reservoir_big.png" },
// { name: "3.0", attr: "image", value: "reservoir_normal.png" },
// { name: "4.0", attr: "image", value: "reservoir_small.png" },
// { name: "5.0", attr: "image", value: "reservoir_small.png" },
// ],
// image: "map-title-o.png",
// };
// break;
// }
// layer = new SyCim.ClusterWfsLayer(layerData.id, {
// data,
// symbol: {
// type: "billboardP",
// imageProxy: `${baseUrl}/img/map/`, // 图片代理
// style: {
// clampToGround: false,
// image: "reservoir_small.png",
// ...layerConfig,
// },
// },
// clustering: {
// enabled: clustering.enabled,
// pixelRange: clusstering.pixelRange,
// minimumClusterSize: clustering.minimumClusterSize,
// clusterEvent: undefined,
// clusterColors: undefined, // 聚合点颜色
// getImage: undefined, // 获取聚合图片的函数
// },
// });
// }
addViewerClick();
if (isNeedCluster === "1") {
let baseUrl = import.meta.env.VITE_BASE_URL;
const data = await getFeatures(layerData);
if (data?.features?.[0]?.geometry?.type === 'Point') {
let layerConfig = {};
switch (layerData.nameCn) {
case "水库点":
layerConfig = {
isUniqueRender: true,
field: "ENG_SCAL",
fieldOptions: [
{ name: "1.0", attr: "image", value: "reservoir_big.png" },
{ name: "2.0", attr: "image", value: "reservoir_big.png" },
{ name: "3.0", attr: "image", value: "reservoir_normal.png" },
{ name: "4.0", attr: "image", value: "reservoir_small.png" },
{ name: "5.0", attr: "image", value: "reservoir_small.png" },
],
width: 24,
height: 24,
image: "reservoir_big.png",
};
break;
case "水闸":
layerConfig = {
isUniqueRender: true,
field: "ENG_SCAL",
fieldOptions: [
{ name: "1.0", attr: "image", value: "sluice_big.png" },
{ name: "2.0", attr: "image", value: "sluice_big.png" },
{ name: "3.0", attr: "image", value: "sluice_middle.png" },
{ name: "4.0", attr: "image", value: "sluice_small.png" },
{ name: "5.0", attr: "image", value: "sluice_small.png" },
],
image: "sluice_middle.png",
};
break;
}
layer = new SyCim.ClusterWfsLayer(layerData.id, {
data,
symbol: {
type: "billboardP",
imageProxy: `${baseUrl}/img/map/`, // 图片代理
style: {
clampToGround: true,
image: "reservoir_small.png",
...layerConfig,
},
clustering: {
enabled: clustering.enabled,
pixelRange: clustering.pixelRange,
minimumClusterSize: clustering.minimumClusterSize,
clusterEvent: undefined,
clusterColors: undefined, // 聚合点颜色
getImage: undefined, // 获取聚合图片的函数
},
},
});
layer.bindPopup(
(e: any) => {
const graphic = e.graphic;
if (graphic) {
const attr = graphic?.attr;
const code = attr?.RES_CODE ?? attr?.WAGA_CODE;
const name = attr?.RES_NAME ?? attr?.WAGA_NAME;
const scale = attr?.ENG_SCAL ?? attr?.WAGA_TYPE;
if (attr?.RES_CODE) {
window.$bus.$emit("open-water-dialog", {
code,
name,
scale
});
return "";
} else {
return `<div class="box">
<div class="detail-item"><span>水闸名称</span>：${name}</div>
<div class="detail-item"><span>水闸编码</span>：${code}</div>
<div class="detail-item"><span>水闸位置</span>：${attr.WAGA_LOC}</div>
</div>`;
}
}
},
{
closeButton: true,
},
);
}
}
layer && window.viewer.addLayer(layer);
if (["013000"].includes(layerType)) {
@ -378,9 +415,10 @@ export function useLayer() {
model.id = layerData.id;
layer.addGraphic(model);
}
// addMouseMove();
};
const removeLayer = (layerData: any) => {
const { id, layerType, isNeedCluster, nameCn } = layerData;
const { id, layerType, isNeedCluster } = layerData;
if (!layerType) return;
const type: any = LayerTypeEnum[layerType as never];
@ -395,8 +433,13 @@ export function useLayer() {
} as any);
}
if (isNeedCluster === "1" && nameCn === "水库点") {
removeViewerClick();
if (isNeedCluster === "1") {
const layer = window.viewer.getLayer(id);
layer?.clear();
window.viewer.removeLayer({
id,
type: SyCim.LayerType['CLUSTER_WFS_PRIMITIVE'],
} as any);
}
};
const zoomToLayer = (data: any) => {
@ -407,7 +450,8 @@ export function useLayer() {
addLayer,
removeLayer,
zoomToLayer,
removeViewerClick,
addMouseMove,
removeMouseMove,
};
}

3
src/views/Main/Map/components/LayerTree.vue
View File

@ -43,7 +43,7 @@ import { useProjectStore } from "@/store/modules/project";
import { useLayer } from "@/hooks/web/useProject";
import { flattenTree } from "@/utils/index";
import Tree from "@/components/Tree/index.vue";
const { zoomToLayer, removeViewerClick } = useLayer();
const { zoomToLayer } = useLayer();
const projectStore = useProjectStore();
defineOptions({
@ -130,6 +130,5 @@ onMounted(() => {
onBeforeUnmount(() => {
window.$bus.$off("change-layer");
removeViewerClick();
});
</script>

Write Preview
Loading…
Cancel
Save