| | |
|---|
| | | * @Author: 胡思旗 931347610@qq.com |
|---|
| | | * @Date: 2023-08-22 17:50:30 |
|---|
| | | * @LastEditors: husq 931347610@qq.com |
|---|
| | | * @LastEditTime: 2023-09-01 16:48:42 |
|---|
| | | * @LastEditTime: 2023-09-05 14:12:49 |
|---|
| | | * @FilePath: \Cloud-API-Demo-Web\src\components\cesiumMap\cesium.vue |
|---|
| | | * @Description: |
|---|
| | | * |
|---|
| | |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <div class="height-100 width-100 cesium" id="cesiumContainer" @click="getCoordinate"></div> |
|---|
| | | <div v-if="centerConfig.type && !centerConfig.latitude" class="pointLongitude">在地图上点击绘制项目中心点</div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import * as Cesium from 'cesium' |
|---|
| | | import { onMounted, ref, onUnmounted } from 'vue' |
|---|
| | | import { useMyStore } from '/@/store' |
|---|
| | | const viewer: { value: Cesium.Viewer | null | undefined } = ref() |
|---|
| | | const store = useMyStore() |
|---|
| | | const centerConfig = computed(() => { |
|---|
| | | return store.state.map.centerConfig |
|---|
| | | }) |
|---|
| | | const init = () => { |
|---|
| | | // Cesium Token |
|---|
| | | const cesiumToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMjdmNGUxZC02YzY3LTQyZWUtOTNmYy1hNTI0MDRkZDY2ZmEiLCJpZCI6MTYxODgyLCJpYXQiOjE2OTI3NTQyNDV9.Pm7xTwPmKowPzFgJ0TsIKOtthigq86BLJX4c8M97Hhw' |
|---|
| | |
|---|
| | | const camera = () => {} |
|---|
| | | // 获取地图点击坐标 |
|---|
| | | const getCoordinate = () => { |
|---|
| | | if (!centerConfig.value.type) return |
|---|
| | | let longitude: number, latitude: number |
|---|
| | | viewer.value?.screenSpaceEventHandler.setInputAction((e: any) => { |
|---|
| | | const cartesian = viewer.value?.camera.pickEllipsoid(e.position, viewer.value?.scene.globe.ellipsoid) |
|---|
| | |
|---|
| | | const cartographic = Cesium.Cartographic.fromCartesian(cartesian) |
|---|
| | | longitude = Cesium.Math.toDegrees(cartographic.longitude) |
|---|
| | | latitude = Cesium.Math.toDegrees(cartographic.latitude) |
|---|
| | | const data = { |
|---|
| | | longitude, |
|---|
| | | latitude, |
|---|
| | | } |
|---|
| | | store.commit('SET_CENTER_CONFIG_LATITUDE', data) |
|---|
| | | console.log(store, '设置成功') |
|---|
| | | } |
|---|
| | | Point(longitude, latitude) |
|---|
| | | return { longitude, latitude } |
|---|
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const Point = (longitude:number, latitude:number) => { |
|---|
| | | const entity = viewer.value?.entities.add({ |
|---|
| | | position: Cesium.Cartesian3.fromDegrees(longitude, latitude), |
|---|
| | |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | </style> |
|---|
