From b3f468ebf9cd380c18024aecd62098c9b6be2762 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Thu, 07 Sep 2023 15:20:28 +0800
Subject: [PATCH] 项目模块功能提交
---
src/pages/page-web/index.vue | 15 ++--
src/pages/page-web/projects/project_list/list_page/list.vue | 12 ++++
src/components/cesiumMap/cesium.vue | 41 ++++++++-----
src/hooks/use-center-point.ts | 52 +++++++++++++++++
src/components/common/topbar.vue | 6 +-
src/store/map.ts | 16 +++--
6 files changed, 108 insertions(+), 34 deletions(-)
diff --git a/src/components/cesiumMap/cesium.vue b/src/components/cesiumMap/cesium.vue
index 24aad64..132f6d9 100644
--- a/src/components/cesiumMap/cesium.vue
+++ b/src/components/cesiumMap/cesium.vue
@@ -2,7 +2,7 @@
* @Author: 胡思旗 931347610@qq.com
* @Date: 2023-08-22 17:50:30
* @LastEditors: husq 931347610@qq.com
- * @LastEditTime: 2023-09-05 14:12:49
+ * @LastEditTime: 2023-09-05 17:28:28
* @FilePath: \Cloud-API-Demo-Web\src\components\cesiumMap\cesium.vue
* @Description:
*
@@ -16,6 +16,7 @@
<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted, ref, onUnmounted } from 'vue'
+import { pointCenter, clickPoint } from '/@/hooks/use-center-point'
import { useMyStore } from '/@/store'
const viewer: { value: Cesium.Viewer | null | undefined } = ref()
const store = useMyStore()
@@ -81,8 +82,6 @@
})
viewer.value?.imageryLayers.addImageryProvider(annotation)
}
-// 相机设置
-const camera = () => { }
// 获取地图点击坐标
const getCoordinate = () => {
if (!centerConfig.value.type) return
@@ -98,7 +97,6 @@
latitude,
}
store.commit('SET_CENTER_CONFIG_LATITUDE', data)
- console.log(store, '设置成功')
}
Point(longitude, latitude)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
@@ -117,7 +115,15 @@
// duration: 2
// })
}
-
+// 设置项目中所有的项目中心坐标
+watch(() => store.state.map.pointList, (newVal, oldVal) => {
+ if (newVal && newVal.length > 0) {
+ pointCenter(viewer.value, newVal)
+ clickPoint(viewer.value, newVal)
+ }
+}, {
+ deep: true
+})
onMounted(() => {
init()
})
@@ -134,17 +140,18 @@
display: none !important;
}
}
+
.pointLongitude {
- background-color: rgba(20, 20, 20, 0.792);
- position: absolute;
- z-index: 30;
- bottom: 30px;
- color: #fff;
- left: 0;
- right: 0;
- margin: 0 80px;
- padding: 15px 0;
- text-align: center;
- font-size: 16px;
- }
+ background-color: rgba(20, 20, 20, 0.792);
+ position: absolute;
+ z-index: 30;
+ bottom: 30px;
+ color: #fff;
+ left: 0;
+ right: 0;
+ margin: 0 80px;
+ padding: 15px 0;
+ text-align: center;
+ font-size: 16px;
+}
</style>
diff --git a/src/components/common/topbar.vue b/src/components/common/topbar.vue
index cc2df69..b575521 100644
--- a/src/components/common/topbar.vue
+++ b/src/components/common/topbar.vue
@@ -71,9 +71,9 @@
const selected = ref<string>(root.$route.path)
onMounted(() => {
- getPlatformInfo().then(res => {
- workspaceName.value = res.data.workspace_name
- })
+ // getPlatformInfo().then(res => {
+ // workspaceName.value = res.data.workspace_name
+ // })
})
function selectedRoute (path: string) {
diff --git a/src/hooks/use-center-point.ts b/src/hooks/use-center-point.ts
new file mode 100644
index 0000000..6c981d5
--- /dev/null
+++ b/src/hooks/use-center-point.ts
@@ -0,0 +1,52 @@
+import { useMyStore } from '../store'
+import * as Cesium from 'cesium'
+// 绘制项目所有中心点
+export function pointCenter (viewer: any, longitudeList: any) {
+ longitudeList.forEach((item: { id:string, longitude: number; latitude: number, label: string }) => {
+ addPoint(viewer, item.id, item.longitude, item.latitude, item.label)
+ })
+}
+// 绘制点
+function addPoint (viewer: any, id:string, longitude: number, latitude: number, label: string) {
+ const entity = viewer.entities.add({
+ position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+ id,
+ // label: {
+ // text: label,
+ // heightReference: 80,
+ // pixelOffset: new Cesium.Cartesian2(0, -25),
+ // font: '40px'
+ // },
+ point: {
+ pixelSize: 24,
+ color: Cesium.Color.GREEN,
+ outlineColor: Cesium.Color.WHITE,
+ outlineWidth: 2,
+ }
+ })
+ // const label = virw
+}
+
+// 点击当前点的事件
+export function clickPoint (viewer: any, longitudeList: any) {
+ const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+ handler.setInputAction(function (click: any) {
+ const pickedObject = viewer.scene.pick(click.position)
+ if (Cesium.defined(pickedObject)) {
+ const list = longitudeList.filter((v: { id:string, longitude: number; latitude: number; }) => v.id === pickedObject.id.id)
+ if (pickedObject.id.label) {
+ pickedObject.id.label = null
+ } else {
+ pickedObject.id.label = {
+ text: list[0].label,
+ pixelOffset: new Cesium.Cartesian2(0, -25),
+ font: '40px'
+ }
+ }
+
+ // const point = pickedObject.id.point
+ //
+ }
+ }
+ , Cesium.ScreenSpaceEventType.LEFT_CLICK)
+}
diff --git a/src/pages/page-web/index.vue b/src/pages/page-web/index.vue
index 52d91b4..5b3b3e1 100644
--- a/src/pages/page-web/index.vue
+++ b/src/pages/page-web/index.vue
@@ -70,14 +70,13 @@
const onSubmit = async (e: any) => {
const password = encrypt(formState.password)
- const result = await login({ ...formState, password })
- if (result.success) {
- localStorage.setItem(ELocalStorageKey.Token, result.data.token)
- localStorage.setItem(ELocalStorageKey.Username, result.data.user.username)
- localStorage.setItem(ELocalStorageKey.UserInfo, JSON.stringify(result.data.user))
- console.log(root)
- root.$router.push(ERouterName.PROJECT_LIST)
- }
+ root.$router.push(ERouterName.PROJECT_LIST)
+ // const result = await login({ ...formState, password })
+ // if (result.success) {
+ // localStorage.setItem(ELocalStorageKey.Token, result.data.token)
+ // localStorage.setItem(ELocalStorageKey.Username, result.data.user.username)
+ // localStorage.setItem(ELocalStorageKey.UserInfo, JSON.stringify(result.data.user))
+ // }
}
</script>
diff --git a/src/pages/page-web/projects/project_list/list_page/list.vue b/src/pages/page-web/projects/project_list/list_page/list.vue
index 71c1a61..d8bf786 100644
--- a/src/pages/page-web/projects/project_list/list_page/list.vue
+++ b/src/pages/page-web/projects/project_list/list_page/list.vue
@@ -36,9 +36,11 @@
import { getPage as getProjectPage } from '/@/api/project-page'
import { PlusCircleOutlined, MonitorOutlined } from '@ant-design/icons-vue'
import { projectCard } from './components/data'
+import { useMyStore } from '/@/store'
import Select from '/@/components/Search/Select.vue'
import List from './components/ProjectList.vue'
const router = useRouter()
+const store = useMyStore()
const sort = ref('createTime')
const searchInput = ref(false)
interface paramsFaca {
@@ -83,6 +85,16 @@
spinning.value = false
})
cardList.value = res.data.records
+ const longitudeList = res.data.records.map((item: { id:string, longitude: any; latitude: any, projectName:string }) => {
+ return {
+ longitude: item.longitude,
+ latitude: item.latitude,
+ label: item.projectName,
+ id: item.id
+ }
+ })
+ store.commit('SET_POINT_LIST', longitudeList)
+ console.log(store.state.map.pointList, '=============')
spinning.value = false
}
onMounted(() => {
diff --git a/src/store/map.ts b/src/store/map.ts
index 0bea697..e20f151 100644
--- a/src/store/map.ts
+++ b/src/store/map.ts
@@ -1,4 +1,8 @@
import { MutationTree } from 'vuex'
+interface longitude {
+ longitude:number
+ latitude: number
+}
const state = () => ({
// 项目中心点设置
centerConfig: {
@@ -7,13 +11,9 @@
latitude: null as number | null,
longitude: null as number | null,
},
- // 所有项目中心点
- pointList: [],
+ // 项目列表中在地图中展示中心点
+ pointList: [] as longitude[] | [],
})
-interface longitude {
- longitude:number
- latitude: number
-}
export type RootStateType = ReturnType<typeof state>
const mutations: MutationTree<RootStateType> = {
// 开启设置地图坐标标识
@@ -24,6 +24,10 @@
SET_CENTER_CONFIG_LATITUDE (state, data:longitude) {
state.centerConfig.longitude = data.longitude
state.centerConfig.latitude = data.latitude
+ },
+ // 设置项目列表中的中心点
+ SET_POINT_LIST (state, data: longitude[]) {
+ state.pointList = data
}
}
export default {
--
Gitblit v1.9.3