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

fix: 提交点选查询代码

feature-v1.0.0
chenhaojie 1 month ago
parent
444062e085
commit
75ec10f4c0
1 changed files with 112 additions and 99 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. 211
      src/hooks/web/useProject.tsx

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

@ -1,8 +1,10 @@
import { reactive } from "vue";
import * as SyCim from "sy-cesium-sdk";
import { LayerTypeEnum } from "@/enums/projectEnum";
import { queryLayersByPos } from "@/utils/mapUtils";
import axios from "axios";
import { throttle } from "lodash-es";
import { useProjectStore } from "@/store/modules/project";
const clustering = reactive({
enabled: true,
pixelRange: 200,
@ -272,19 +274,30 @@ const baseLayerActions: Record<string, any> = {
};
export function useLayer() {
const mouseMoveEvent = throttle((e: any) => {
const winPos = e.windowPosition;
const target = viewer.scene.pick(winPos);
console.log(target);
const viewerClickEvent = throttle((e: any) => {
if (!e.wgs84SurfacePosition) return;
const projectStore = useProjectStore();
const selectLayers: any = projectStore.selectedLayers;
// .filter((item: any) => item.isNeedCluster === "1");
queryLayersByPos(e.wgs84SurfacePosition, selectLayers, (res: any) => {
if (res?.attributes?.showCode) {
const { showCode, showName, scale } = res?.attributes;
window.$bus.$emit("open-water-dialog", {
code: showCode,
name: showName,
scale
});
}
});
}, 500);
const addMouseMove = () => {
window.viewer?.on(SyCim.MouseEventType.MOUSE_MOVE, mouseMoveEvent, window.viewer);
const addViewerClick = () => {
window.viewer?.on(SyCim.MouseEventType.CLICK, viewerClickEvent, window.viewer);
};
const removeMouseMove = () => {
window.viewer?.off(SyCim.MouseEventType.MOUSE_MOVE, mouseMoveEvent, window.viewer);
const removeViewerClick = () => {
window.viewer?.off(SyCim.MouseEventType.CLICK, viewerClickEvent, window.viewer);
};
const addLayer = async (layerData: any) => {
// removeMouseMove();
removeViewerClick();
const { layerType, url, id, isNeedCluster } = layerData;
let action = null;
// 超图 S3M图层
@ -308,93 +321,93 @@ export function useLayer() {
}
if (!layerType || !(action = layerActions[layerType as string])) return;
let layer: any = await action(layerData);
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,
},
);
}
}
// 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)) {
// 3d tiles
@ -412,7 +425,7 @@ export function useLayer() {
model.id = layerData.id;
layer.addGraphic(model);
}
// addMouseMove();
addViewerClick();
};
const removeLayer = (layerData: any) => {
const { id, layerType, isNeedCluster } = layerData;
@ -447,8 +460,8 @@ export function useLayer() {
addLayer,
removeLayer,
zoomToLayer,
addMouseMove,
removeMouseMove,
addViewerClick,
removeViewerClick,
};
}

Write Preview
Loading…
Cancel
Save