diff --git a/src/components/testMap/index.scss b/src/components/testMap/index.scss index 380ad8c..5ef5f46 100644 --- a/src/components/testMap/index.scss +++ b/src/components/testMap/index.scss @@ -277,3 +277,18 @@ z-index: 999 !important; } } +// element 组件样式 +:deep() { + // .el-input__wrapper { + // background-color: transparent !important; + // } + // .el-input__inner { + // color: white; + // } + .el-input-number__increase, + .el-input-number__decrease { + background-color: transparent; + color: white; + display: none; + } +} diff --git a/src/components/testMap/index.vue b/src/components/testMap/index.vue index 7bbc552..d371b8e 100644 --- a/src/components/testMap/index.vue +++ b/src/components/testMap/index.vue @@ -82,6 +82,28 @@ 效果颜色:{{ formData.color ? formData.color : "" }} +
+ 经度: + +
+
+ 纬度: + +
+
半径:{{ formData.radius ? formData.radius : 0 }}米 ({ scene: { - center: { lat: 14.029537, lng: 105.94238, alt: 4879779, heading: 0, pitch: -66 } + center: { lat: 26.502888, lng: 106.174716, alt: 1961.1, heading: 25.1, pitch: -50 } }, control: { baseLayerPicker: false, // basemaps底图切换按钮 @@ -342,6 +363,7 @@ const pointPositionOperate = (e: any, label: any) => { }, clampToGround: true // 是否贴地 }; + graphic.position = new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt); graphic.setStyle(loadJson); } console.log(777); @@ -563,13 +585,13 @@ const initMars3d = async (option: any) => { formData.value.lat = event.target.point.lat; formData.value.alt = event.target.point.alt; formData.value.radius = event.target.radius; - let loadJson = { - position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt), - style: { - radius: formData.value.radius - } - }; - graphic.setStyle(loadJson); + // let loadJson = { + // position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt), + // style: { + // radius: formData.value.radius + // } + // }; + // graphic.setStyle(loadJson); }); // 开启编辑状态 graphic.startEditing(); @@ -650,7 +672,7 @@ const initMars3d = async (option: any) => { }); console.log(graphic); graphicLayer.addGraphic(graphic); - graphic.flyTo(); + graphic.flyTo({ minHeight: 2000 }); }, 200); } if (props.type == "模型") { diff --git a/src/views/goverment/frontLargeScreen/index.vue b/src/views/goverment/frontLargeScreen/index.vue index 1d5b36b..3678fe8 100644 --- a/src/views/goverment/frontLargeScreen/index.vue +++ b/src/views/goverment/frontLargeScreen/index.vue @@ -529,6 +529,7 @@ const loadModel = async () => { map.setCameraViewList(viewPoints, { complete: () => { flyOperateShow.value = false; + // map.setCameraViewList(viewPoints) } }); flyOperateShow.value = true; diff --git a/src/views/goverment/largeScreen/components/flyViewBookmark.vue b/src/views/goverment/largeScreen/components/flyViewBookmark.vue index dd37cc3..7df8db5 100644 --- a/src/views/goverment/largeScreen/components/flyViewBookmark.vue +++ b/src/views/goverment/largeScreen/components/flyViewBookmark.vue @@ -51,20 +51,23 @@ const getConfig = async () => { const { result } = await getSystemConfig(requestData); console.log(result, "6666666"); if (result) { - bookMarkId.value = result.configId; - let arr = JSON.parse(result.configValue); - if (arr && arr.length > 0) { - console.log("历史数据", arr); - for (let i = 0; i < arr.length; i++) { - const item = arr[i]; - // 删除未匹配项 - // if (listArr.value[0].img === "") { - // formState.imgObject.splice(0, 1) - // formState.found = true - // } - listArr.value.push(item); + if (listArr.value.length == 0 && !bookMarkId.value) { + // 处理特殊情况,当没数据时再进行赋值,有数据时只取Id + let arr = JSON.parse(result.configValue); + if (arr && arr.length > 0) { + console.log("历史数据", arr); + for (let i = 0; i < arr.length; i++) { + const item = arr[i]; + // 删除未匹配项 + // if (listArr.value[0].img === "") { + // formState.imgObject.splice(0, 1) + // formState.found = true + // } + listArr.value.push(item); + } } } + bookMarkId.value = result.configId; } }; // 飞到对应视角 @@ -72,10 +75,18 @@ const flytoView = (item: any) => { map.setCameraView(item.center); }; // 删除视角书签 -const delteMark = (index: number) => { +const delteMark = async (index: number) => { listArr.value.splice(index, 1); - // 记录到历史数据 - globalStore.viewBookmarkArr = JSON.stringify(listArr.value); + // 记录到接口 + console.log(listArr.value); + let requestData: any = { configKey: "flyViewConfig", configValue: JSON.stringify(listArr.value) }; + await getConfig(); + requestData.configId = bookMarkId.value; + const res = await updateSystemConfig(requestData); + console.log(res); + if (res.code == 200) { + ElMessage.success("操作成功"); + } }; // 添加视角书签 const addView = () => { @@ -105,20 +116,17 @@ const addView = () => { // }); item.img = response.image; listArr.value.unshift(item); - console.log(listArr.value); - console.log(bookMarkId.value); - // 记录到历史数据 + // 记录到接口 let requestData: any = { configKey: "flyViewConfig", configValue: JSON.stringify(listArr.value) }; - if (listArr.value.length > 0 && !bookMarkId.value) { - await getConfig(); - requestData.configId = bookMarkId.value; - } else if (listArr.value.length > 0 && bookMarkId.value) { - requestData.configId = bookMarkId.value; - } + await getConfig(); + requestData.configId = bookMarkId.value; const res = await updateSystemConfig(requestData); console.log(res); if (res.code == 200) { ElMessage.success("操作成功"); + } else { + // 当添加不成功时需要重新删除 + listArr.value.splice(listArr.value.length - 1, 1); } textVal.value = ""; }); diff --git a/src/views/goverment/largeScreen/components/mapMeasurement.vue b/src/views/goverment/largeScreen/components/mapMeasurement.vue index 5a18768..b100180 100644 --- a/src/views/goverment/largeScreen/components/mapMeasurement.vue +++ b/src/views/goverment/largeScreen/components/mapMeasurement.vue @@ -5,7 +5,7 @@
-
速度: - + (km/h)
@@ -71,6 +71,8 @@ let mapGraphic: any; let routeLayer: any; let gaodeRoute: any; // 高德路径规划 let startGraphic: any, endGraphic: any; +let routeLineData: any = null; // 初始标记路线 +let initRoutePath: any = null; onMounted(() => { map.scene.globe.depthTestAgainstTerrain = false; // 不投射到地形上 routeLayer = new mars3d.layer.GraphicLayer(); @@ -80,52 +82,11 @@ onMounted(() => { gaodeRoute = new mars3d.query.GaodeRoute({ key: ["ad31e514e7e740179d6d8f182720bcf5"] }); -}); -// 模型路线是否跟随视角 -const checkChange = (row: any, index: number) => { - let routeData = routeLayer.getGraphicById(row.id + "-" + index); - console.log(routeData); - routeData && - routeData.setCameraOptions({ - type: row.isFollow ? "gs" : "" - }); -}; -// 模型路线停止漫游 -const stopFly = (row: any, index: number) => { - let routeData = routeLayer.getGraphicById(row.id + "-" + index); - row.isStart = false; - routeData && routeData.stop(); -}; -// 模型路线漫游 -const startFly = (row: any, index: number) => { - // 加载完成在加载小车,否则地形未加载完成,小车会处于地下 - let routeData = routeLayer.getGraphicById(row.id + "-" + index); - if (routeData) { - // 启动漫游 - routeData.flyTo(); - routeData.start(); - } else { - productRoute(row, index); - } - row.isStart = true; -}; -// 生成路线 -const productRoute = (obj: any, index: number) => { - console.log(obj); - console.log(startGraphic); - console.log(endGraphic); - const graphic = routeLayer.getGraphicById(obj.id); - console.log(graphic); - let pointsArr = [] as any; - obj.points.map((item: any) => { - pointsArr.push(mars3d.LngLatPoint.fromArray(item)); - }); - console.log(pointsArr); - const newRoutePath = new mars3d.graphic.FixedRoute({ - id: obj.id + "-" + index, - name: "路线-" + index, + initRoutePath = new mars3d.graphic.FixedRoute({ + id: "route-id", + name: "路线-0", speed: 200, - positions: pointsArr, + positions: [[106.204963, 26.510103]], clockLoop: false, // 是否循环播放 model: { url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf", @@ -143,17 +104,87 @@ const productRoute = (obj: any, index: number) => { width: 3 } }); - console.log(newRoutePath); - console.log(newRoutePath.info); - routeLayer.addGraphic(newRoutePath); + mapGraphic && mapGraphic.addGraphic(initRoutePath); // 绑定popup - bindPopup(newRoutePath); - newRoutePath.autoSurfaceHeight().then(function (e: any) { + bindPopup(initRoutePath); +}); +// 速度切换 +const speedChange = () => { + console.log(111); + console.log(mapPosition.value.speed); + initRoutePath.multiplier = mapPosition.value.speed / 200; +}; +// 模型路线是否跟随视角 +const checkChange = (row: any, index: number) => { + initRoutePath && + initRoutePath.setCameraOptions({ + type: row.isFollow ? "gs" : "" + }); +}; +// 模型路线停止漫游 +const stopFly = (row: any, index: number) => { + tableData.value.map((item: any, index2: any) => { + if (index2 != index) { + let rowGraphic = routeLayer.getGraphicById(item.id); + rowGraphic.entityGraphic.width = 5; + rowGraphic.entityGraphic.material = {}; + rowGraphic.show = true; + item.isStart = false; + item.isFollow = false; + } + }); + if (!initRoutePath || !routeLineData) return; + routeLineData.show = true; + row.isStart = false; + initRoutePath && initRoutePath.stop(); +}; +// 模型路线漫游 +const startFly = (row: any, index: number) => { + // 加载完成在加载小车,否则地形未加载完成,小车会处于地下 + routeLineData = routeLayer.getGraphicById(row.id); // 初始标记路线 + tableData.value.map((item: any, index2: any) => { + if (index2 != index) { + let rowGraphic = routeLayer.getGraphicById(item.id); + rowGraphic.entityGraphic.width = 5; + rowGraphic.entityGraphic.material = {}; + rowGraphic.show = true; + item.isStart = false; + item.isFollow = false; + } + }); + // if (newRoutePath) { + // // 启动漫游 + // newRoutePath.flyTo(); + // newRoutePath.start(); + // } else { + // } + initRoutePath.show = true; + mapPosition.value.speed = 200; + initRoutePath.speed = mapPosition.value.speed; + routeLineData.show = false; + productRoute(row, index); + row.isStart = true; +}; +// 生成路线 +const productRoute = (obj: any, index: number) => { + console.log(obj); + console.log(startGraphic); + console.log(endGraphic); + const graphic = routeLayer.getGraphicById(obj.id); + graphic.show = false; + console.log(graphic); + let pointsArr = [...mars3d.PolyUtil.simplifyPositions(obj.points)] as any; // 坐标点简化 + pointsArr.splice(pointsArr.length - 1, 1); // 删除简化后生成的最后一个点,应该最后一个点是起点,为了避免回到起点 + // obj.points.map((item: any) => { + // pointsArr.push(mars3d.LngLatPoint.fromArray(item)); + // }); + initRoutePath.positions = pointsArr; + initRoutePath.autoSurfaceHeight().then(function (e: any) { // 启动漫游 - newRoutePath.flyTo(); - newRoutePath.start(); + initRoutePath.flyTo(); + initRoutePath.start(); - addParticleSystem(newRoutePath.property); + addParticleSystem(initRoutePath.property); }); }; const bindPopup = (fixedRoute: any) => { @@ -226,15 +257,20 @@ function addParticleSystem(property: any) { }); routeLayer.addGraphic(particleSystem); } -let lastRoute: any; // 高亮路线 -const highLightRoute = (row: any) => { +const highLightRoute = (row: any, index: any) => { const graphic = routeLayer.getGraphicById(row.id); - - if (lastRoute) { - lastRoute.entityGraphic.material = lastRoute.entityGraphic.material_old; - lastRoute.entityGraphic.width = lastRoute.entityGraphic.width_old; - } + tableData.value.map((item: any, index2: any) => { + let rowGraphic = routeLayer.getGraphicById(item.id); + if (index2 != index) { + rowGraphic.entityGraphic.width = 5; + rowGraphic.entityGraphic.material = {}; + } + rowGraphic.show = true; + item.isStart = false; + item.isFollow = false; + }); + initRoutePath.show = false; // 动画线材质 graphic.entityGraphic.width = 5; @@ -243,10 +279,7 @@ const highLightRoute = (row: any) => { image: new URL("@/assets/images/Mars3DImg/textures/line-color-yellow.png", import.meta.url).href, speed: 20 }); - - map.flyToGraphic(graphic); - - lastRoute = graphic; + // map.flyToGraphic(graphic); }; // html格式处理 const htmlDeal = (row: any) => { @@ -357,7 +390,7 @@ const startPicking = () => { startGraphic = graphic; const point = graphic.point; point.format(); - queryRoute(); + // queryRoute(); mapPosition.value.startPosition = point.lng + "," + point.lat; return point.lng + "," + point.lat; }); @@ -382,6 +415,7 @@ const endPicking = () => { const point = graphic.point; point.format(); queryRoute(); + initRoutePath.show = false; mapPosition.value.endPosition = point.lng + "," + point.lat; return point.lng + "," + point.lat; }); @@ -524,7 +558,6 @@ onUnmounted(() => { > div:nth-child(1) { display: flex; align-items: center; - justify-content: space-between; border-bottom: 2px solid white; padding: 5px; :deep() { @@ -536,6 +569,7 @@ onUnmounted(() => { } .el-button { margin-left: 0px !important; + margin-right: 5px; } } } diff --git a/src/views/goverment/largeScreen/components/spaceAnalysis.vue b/src/views/goverment/largeScreen/components/spaceAnalysis.vue index 4b88dda..bb71bd3 100644 --- a/src/views/goverment/largeScreen/components/spaceAnalysis.vue +++ b/src/views/goverment/largeScreen/components/spaceAnalysis.vue @@ -5,7 +5,7 @@
-
@@ -1131,6 +1135,9 @@ onUnmounted(() => { .volumeAnalysis { width: 400px; } + .viewShed { + width: 350px; + } } } // element 组件样式 diff --git a/src/views/goverment/largeScreen/components/viewBookmark.vue b/src/views/goverment/largeScreen/components/viewBookmark.vue index 411175a..04d8e9b 100644 --- a/src/views/goverment/largeScreen/components/viewBookmark.vue +++ b/src/views/goverment/largeScreen/components/viewBookmark.vue @@ -51,20 +51,23 @@ const getConfig = async () => { const { result } = await getSystemConfig(requestData); console.log(result, "6666666"); if (result) { - bookMarkId.value = result.configId; - let arr = JSON.parse(result.configValue); - if (arr && arr.length > 0) { - console.log("历史数据", arr); - for (let i = 0; i < arr.length; i++) { - const item = arr[i]; - // 删除未匹配项 - // if (listArr.value[0].img === "") { - // formState.imgObject.splice(0, 1) - // formState.found = true - // } - listArr.value.push(item); + if (listArr.value.length == 0 && !bookMarkId.value) { + // 处理特殊情况,当没数据时再进行赋值,有数据时只取Id + let arr = JSON.parse(result.configValue); + if (arr && arr.length > 0) { + console.log("历史数据", arr); + for (let i = 0; i < arr.length; i++) { + const item = arr[i]; + // 删除未匹配项 + // if (listArr.value[0].img === "") { + // formState.imgObject.splice(0, 1) + // formState.found = true + // } + listArr.value.push(item); + } } } + bookMarkId.value = result.configId; } }; // 飞到对应视角 @@ -72,10 +75,18 @@ const flytoView = (item: any) => { map.setCameraView(item.center); }; // 删除视角书签 -const delteMark = (index: number) => { +const delteMark = async (index: number) => { listArr.value.splice(index, 1); - // 记录到历史数据 - globalStore.viewBookmarkArr = JSON.stringify(listArr.value); + // 记录到接口 + console.log(listArr.value); + let requestData: any = { configKey: "bookMarkConfig", configValue: JSON.stringify(listArr.value) }; + await getConfig(); + requestData.configId = bookMarkId.value; + const res = await updateSystemConfig(requestData); + console.log(res); + if (res.code == 200) { + ElMessage.success("操作成功"); + } }; // 添加视角书签 const addView = () => { @@ -105,19 +116,17 @@ const addView = () => { // }); item.img = response.image; listArr.value.unshift(item); - console.log(listArr.value); - // 记录到历史数据 + // 记录到接口 let requestData: any = { configKey: "bookMarkConfig", configValue: JSON.stringify(listArr.value) }; - if (listArr.value.length > 0 && !bookMarkId.value) { - await getConfig(); - requestData.configId = bookMarkId.value; - } else if (listArr.value.length > 0 && bookMarkId.value) { - requestData.configId = bookMarkId.value; - } + await getConfig(); + requestData.configId = bookMarkId.value; const res = await updateSystemConfig(requestData); console.log(res); if (res.code == 200) { ElMessage.success("操作成功"); + } else { + // 当添加不成功时需要重新删除 + listArr.value.splice(listArr.value.length - 1, 1); } textVal.value = ""; }); diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index b7bc90c..bdc2a8f 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/src/views/goverment/largeScreen/index.vue @@ -55,7 +55,7 @@
-
+
{{ item.name }}
@@ -102,7 +102,7 @@
-
+
左侧图层: @@ -659,14 +659,14 @@ const lantianSkybox = new mars3d.GroundSkyBox({ } }); const data = [ - // { - // name: "物联网设备", - // icon: new URL("@/assets/images/Mars3DIcon/gj.png", import.meta.url).href, - // children: [ - // { name: "视频", icon: new URL("@/assets/images/Mars3DIcon/tsls.png", import.meta.url).href }, - // { name: "扬尘", icon: new URL("@/assets/images/Mars3DIcon/kjfx.png", import.meta.url).href } - // ] - // }, + { + name: "物联网设备", + icon: new URL("@/assets/images/Mars3DIcon/gj.png", import.meta.url).href, + children: [ + { name: "视频", icon: new URL("@/assets/images/Mars3DIcon/tsls.png", import.meta.url).href }, + { name: "扬尘", icon: new URL("@/assets/images/Mars3DIcon/kjfx.png", import.meta.url).href } + ] + }, { name: "底图", icon: new URL("@/assets/images/Mars3DIcon/dt.png", import.meta.url).href }, { name: "图层", icon: new URL("@/assets/images/Mars3DIcon/tc.png", import.meta.url).href }, { @@ -733,14 +733,22 @@ const screenComparison = () => { insertBefore: mapOld }); map.addControl(mapScreenSplit); + // 修改对比地图 + // mapScreenSplit.mapEx.basemap = "高德电子"; }; // 修改卷帘右侧图层 const changeRight = (e: any) => { - console.log(mapSplit); mapSplit.rightLayer = [layersObj[e]]; leftRollerList.value = baseMaps.value.filter((item: any) => { return item.id != rollerVal.value.rightRollerVal; }); + console.log(mapSplit.rightLayer); + console.log(layersObj); + console.log(e); + // mapSplit.setOptions({ + // rightLayer: [layersObj[rollerVal.value.rightRollerVal]], + // leftLayer: [layersObj[rollerVal.value.leftRollerVal]] + // }); }; // 修改卷帘左侧图层 const changeLeft = (e: any) => { @@ -748,6 +756,10 @@ const changeLeft = (e: any) => { rightRollerList.value = baseMaps.value.filter((item: any) => { return item.id != rollerVal.value.leftRollerVal; }); + // mapSplit.setOptions({ + // rightLayer: [layersObj[rollerVal.value.rightRollerVal]], + // leftLayer: [layersObj[rollerVal.value.leftRollerVal]] + // }); }; // 清除卷帘对比 const clearRollerComparison = () => { @@ -769,7 +781,7 @@ const rollerComparison = () => { leftLayer: [layersObj[rollerVal.value.leftRollerVal]] }); map.addControl(mapSplit); - + // map.control.baseLayerPicker = false; // basemaps底图切换按钮 // mapSplit.on(mars3d.EventType.mouseMove, function (event: any) { // console.log("拖动了mapSplit控件", event); // }); @@ -1152,7 +1164,7 @@ const getLineEffect = async () => { }); console.log(graphic); graphicLayer.addGraphic(graphic); - graphic.flyTo(); + graphic.flyTo({ minHeight: 3000 }); }, 100); } }); diff --git a/src/views/jxjview/layerManagement/components/operateDialog.vue b/src/views/jxjview/layerManagement/components/operateDialog.vue index 3998d0d..7c4e266 100644 --- a/src/views/jxjview/layerManagement/components/operateDialog.vue +++ b/src/views/jxjview/layerManagement/components/operateDialog.vue @@ -303,7 +303,7 @@ const layerTypeJson = ref([ name: "单张图片 (本地离线)", icon: new URL("@/assets/images/Mars3DImg/basemaps/offline.png", import.meta.url).href, type: "image", - url: "//data.mars3d.cn/filesrc/assets/images/Mars3DImg/world/world.jpg" + url: new URL("@/assets/images/Mars3DImg/basemaps/offline.png", import.meta.url).href }, { name: "无底图",