| | |
| | | * @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: |
| | | * |
| | |
| | | <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() |
| | |
| | | }) |
| | | viewer.value?.imageryLayers.addImageryProvider(annotation) |
| | | } |
| | | // 相机设置 |
| | | const camera = () => { } |
| | | // 获取地图点击坐标 |
| | | const getCoordinate = () => { |
| | | if (!centerConfig.value.type) return |
| | |
| | | latitude, |
| | | } |
| | | store.commit('SET_CENTER_CONFIG_LATITUDE', data) |
| | | console.log(store, '设置成功') |
| | | } |
| | | Point(longitude, latitude) |
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK) |
| | |
| | | // 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() |
| | | }) |
| | |
| | | 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> |