From 4f9555a3f2ec3573bf9113cc468f9da6e3ea0f23 Mon Sep 17 00:00:00 2001 From: kun <1422840143@qq.com> Date: Thu, 2 Nov 2023 18:50:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E6=96=B0=E5=A2=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/modules/mapCommon.ts | 25 + src/components/testMap/index.vue | 126 +++- src/views/goverment/largeScreen/index.vue | 47 +- .../components/operateDialog.vue | 2 +- .../components/operateDialog.vue | 2 +- .../components/operateDialog.vue | 569 ++++++++---------- src/views/jxjview/pointManagement/index.vue | 128 ++-- 7 files changed, 517 insertions(+), 382 deletions(-) diff --git a/src/api/modules/mapCommon.ts b/src/api/modules/mapCommon.ts index 730fed7..abfade7 100644 --- a/src/api/modules/mapCommon.ts +++ b/src/api/modules/mapCommon.ts @@ -67,3 +67,28 @@ export const albugineaMapEdit = (params: any) => { export const albugineaMapDelete = (params: any) => { return http.post(BASEURL + `/base/tilesetLayer/delete`, params); }; + +// 点坐标效果分页列表 +export const diffuseWallPage = (params: any) => { + return http.post(BASEURL + `/base/diffuseWall/page`, params); +}; +// 点坐标效果列表 +export const diffuseWallList = (params: any) => { + return http.post(BASEURL + `/base/diffuseWall/list`, params); +}; +// 点坐标效果新增 +export const diffuseWallAdd = (params: any) => { + return http.post(BASEURL + `/base/diffuseWall/add`, params); +}; +// 点坐标效果详细信息 +export const diffuseWallDetails = (params: any) => { + return http.post(BASEURL + `/base/diffuseWall/queryById`, params); +}; +// 点坐标效果编辑 +export const diffuseWallEdit = (params: any) => { + return http.post(BASEURL + `/base/diffuseWall/edit`, params); +}; +// 点坐标效果删除 +export const diffuseWallDelete = (params: any) => { + return http.post(BASEURL + `/base/diffuseWall/delete`, params); +}; diff --git a/src/components/testMap/index.vue b/src/components/testMap/index.vue index aaac50d..123917e 100644 --- a/src/components/testMap/index.vue +++ b/src/components/testMap/index.vue @@ -59,6 +59,35 @@ 保存当前配置 +
+
+ 效果颜色：{{ formData.color ? formData.color : "" }} + +
+
+ 半径：{{ formData.radius ? formData.radius : 0 }}米 + +
+
+ 速度值：{{ formData.speed ? formData.speed : 0 }} + +
+
+ 保存当前配置 +
+
@@ -73,7 +102,14 @@ import * as Cesium from "mars3d-cesium"; //导入mars3d主库 import "mars3d/dist/mars3d.css"; import * as mars3d from "mars3d"; -import { baseMapDetails, baseMapEdit, albugineaMapDetails, albugineaMapEdit } from "@/api/modules/mapCommon"; +import { + baseMapDetails, + baseMapEdit, + albugineaMapDetails, + albugineaMapEdit, + diffuseWallDetails, + diffuseWallEdit +} from "@/api/modules/mapCommon"; import { ElMessage } from "element-plus"; const props = defineProps({ testMapVisible: Boolean, @@ -108,6 +144,17 @@ let map: any; let graphicLayer: any; let thisLayer: any; // 选中的图层 let thisAlbuginea: any; // 选中的白膜 +// 修改点坐标当前配置 +const editPointPositionConfig = async () => { + let requestData = { + id: props.relativeId, + ...formData.value + }; + const res: any = await diffuseWallEdit(requestData); + if (res.code == 200) { + ElMessage.success("操作成功"); + } +}; // 修改白膜当前配置 const editAlbugineaConfig = async () => { let requestData = { @@ -130,6 +177,32 @@ const editBaseMapsConfig = async () => { ElMessage.success("操作成功"); } }; +// 点坐标效果操作 +const pointPositionOperate = (e: any, label: any) => { + console.log(formData.value); + let graphic = graphicLayer.getGraphicById(formData.value.id); + console.log(graphic); + let _rotation = Math.random(); + let loadJson = { + radius: formData.value.radius, + materialType: mars3d.MaterialType[formData.value.type], + materialOptions: { + // 扫描材质 + image: formData.value.type == "CircleScan" ? formData.value.image : "", + color: formData.value.color, + speed: formData.value.speed + }, + clampToGround: true // 是否贴地 + }; + if (formData.value.type == "CircleScan") { + loadJson.stRotation = new Cesium.CallbackProperty(function (e) { + _rotation += 0.1; + return _rotation; + }, false); + loadJson.classificationType = Cesium.ClassificationType.BOTH; + } + graphic.setStyle(loadJson); +}; let initCenter: any; // 初始中心经纬度 let requestNum: number = 0; // 请求中心点次数 // 白膜图层操作 @@ -188,6 +261,20 @@ const layerOperate = (e: any, label: any) => { thisLayer[label] = e; } }; +// 获取点坐标数据详情 +const getPointPositionInfo = async () => { + let requestData = { + id: props.relativeId + }; + const { result }: { result: any } = await diffuseWallDetails(requestData); + console.log(result, "--------点坐标"); + if (result) { + formData.value = { + ...result + }; + await initMars3d(configJson.value); + } +}; // 获取白膜数据详情 const getAlbugineaInfo = async () => { let requestData = { @@ -259,12 +346,49 @@ const initMars3d = (option: any) => { // 创建矢量数据图层 graphicLayer = new mars3d.layer.GraphicLayer(); map.addLayer(graphicLayer); + if (props.type == "点坐标效果") { + let _rotation = Math.random(); + let loadJson = { + id: formData.value.id, + position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt), + style: { + radius: formData.value.radius, + materialType: mars3d.MaterialType[formData.value.type], + materialOptions: { + // 扫描材质 + image: formData.value.type == "CircleScan" ? formData.value.image : "", + color: formData.value.color, + speed: formData.value.speed + }, + // stRotation: new Cesium.CallbackProperty(function (e) { + // _rotation += 0.1; + // return _rotation; + // }, false), + // classificationType: Cesium.ClassificationType.BOTH, + clampToGround: true // 是否贴地 + }, + attr: { remark: "展示" } + }; + + if (formData.value.type == "CircleScan") { + loadJson.style.stRotation = new Cesium.CallbackProperty(function (e) { + _rotation += 0.1; + return _rotation; + }, false); + loadJson.style.classificationType = Cesium.ClassificationType.BOTH; + } + const graphic = new mars3d.graphic.CircleEntity(loadJson); + graphicLayer.addGraphic(graphic); + graphic.flyTo(); + } }; onMounted(async () => { if (props.type == "底图") { await getBaseMapsInfo(); } else if (props.type == "白膜") { await getAlbugineaInfo(); + } else if (props.type == "点坐标效果") { + await getPointPositionInfo(); } }); onUnmounted(() => { diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index bce6181..6036289 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/src/views/goverment/largeScreen/index.vue @@ -245,7 +245,7 @@ import MapPrint from "./components/mapPrint.vue"; import FlyRoam from "./components/flyRoam.vue"; import MapMark from "./components/mapMark.vue"; import RouteNavigation from "./components/routeNavigation.vue"; -import { getSystemConfig, baseMapList, albugineaMapList } from "@/api/modules/mapCommon"; +import { getSystemConfig, baseMapList, albugineaMapList, diffuseWallList } from "@/api/modules/mapCommon"; const configJson = ref({}); const screenComparisonShow = ref(false); // 分屏对比弹框 const leftRollerList = ref([]); @@ -792,6 +792,8 @@ const initMars3d = (option: any) => { map.addLayer(graphicLayer); // 获取配置文件底图数据 getBasicMaps(); + // 查询配置点坐标效果 + getPointPosition(); // 添加数据 // addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]); // addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]); @@ -842,6 +844,49 @@ const initMars3d = (option: any) => { // map.addEffect(snowEffect); // map.addEffect(snowCover); }; +// 查询配置点坐标效果 +const getPointPosition = async () => { + const resPointPosition: any = await diffuseWallList({}); + console.log(resPointPosition, "点坐标效果666666"); + if (resPointPosition.result && resPointPosition.result.length > 0) { + resPointPosition.result.map((item: any) => { + if (item.show) { + let _rotation = Math.random(); + let loadJson = { + id: item.id, + position: new mars3d.LngLatPoint(item.lng, item.lat, item.alt), + style: { + radius: item.radius, + materialType: mars3d.MaterialType[item.type], + materialOptions: { + // 扫描材质 + image: item.type == "CircleScan" ? item.image : "", + color: item.color, + speed: item.speed + }, + // stRotation: new Cesium.CallbackProperty(function (e) { + // _rotation += 0.1; + // return _rotation; + // }, false), + // classificationType: Cesium.ClassificationType.BOTH, + clampToGround: true // 是否贴地 + }, + attr: { remark: "展示" } + }; + + if (item.type == "CircleScan") { + loadJson.style.stRotation = new Cesium.CallbackProperty(function (e) { + _rotation += 0.1; + return _rotation; + }, false); + loadJson.style.classificationType = Cesium.ClassificationType.BOTH; + } + const graphic = new mars3d.graphic.CircleEntity(loadJson); + graphicLayer.addGraphic(graphic); + } + }); + } +}; // 获取config.json中的底图配置 const getBasicMaps = async () => { const layers = { diff --git a/src/views/jxjview/albugineaManagement/components/operateDialog.vue b/src/views/jxjview/albugineaManagement/components/operateDialog.vue index e17a65a..7842529 100644 --- a/src/views/jxjview/albugineaManagement/components/operateDialog.vue +++ b/src/views/jxjview/albugineaManagement/components/operateDialog.vue @@ -99,7 +99,7 @@ diff --git a/src/views/jxjview/layerManagement/components/operateDialog.vue b/src/views/jxjview/layerManagement/components/operateDialog.vue index 77a481e..fac3dec 100644 --- a/src/views/jxjview/layerManagement/components/operateDialog.vue +++ b/src/views/jxjview/layerManagement/components/operateDialog.vue @@ -122,7 +122,7 @@ diff --git a/src/views/jxjview/pointManagement/components/operateDialog.vue b/src/views/jxjview/pointManagement/components/operateDialog.vue index 64288d8..3952745 100644 --- a/src/views/jxjview/pointManagement/components/operateDialog.vue +++ b/src/views/jxjview/pointManagement/components/operateDialog.vue @@ -1,10 +1,10 @@