项目模块功能提交

husq

2023-09-07 b3f468ebf9cd380c18024aecd62098c9b6be2762

项目模块功能提交

 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>

 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) {

 src/hooks/use-center-point.ts

New file
@@ -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)
}

 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>

 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(() => {

 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 {