Merge branch 'develop' of http://s16s652780.51mypc.cn:49896/r/yskj/iot_dron...

xieb

2023-09-13 3667807a7b7418efc090ee3fa6a6b734bc3080bf

 src/components/cesiumMap/cesium.vue

@@ -1,36 +1,35 @@
<!--
 * @Author: 胡思旗 931347610@qq.com
 * @Date: 2023-08-22 17:50:30
 * @LastEditors: husq 931347610@qq.com
 * @LastEditTime: 2023-09-07 16:45:18
 * @FilePath: \Cloud-API-Demo-Web\src\components\cesiumMap\cesium.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
  <div class="height-100 width-100 cesium" id="cesiumContainer"></div>
  <div v-if="centerConfig.type && !centerConfig.latitude" class="pointLongitude">在地图上点击绘制项目中心点</div>
  <div class="switch">
    <div class="2d" v-if="dimension === 3" @click="switchModel('2D')">2D</div>
    <div class="3d" v-else @click="switchModel('3D')">3D</div>
  </div>
</template>

<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted, ref, onUnmounted } from 'vue'
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()
let viewer: Cesium.Viewer | null = null
let handler: Cesium.ScreenSpaceEventHandler
const dimension = ref(3)
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
// 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 cesiumToken = import.meta.env.VITE_CESIUM_TOKEN
  Cesium.Ion.defaultAccessToken = cesiumToken
  Cesium.Camera.DEFAULT_VIEW_FACTOR = -0.45
  // 西南东北，默认显示中国
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(110, -25, 110, 90)
  viewer.value = new Cesium.Viewer('cesiumContainer', {
  viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
    animation: false, // 左下角的动画仪表盘
    baseLayerPicker: false, // 右上角的图层选择按钮
@@ -39,9 +38,15 @@
    sceneModePicker: false, // 模式切换按钮
    timeline: false, // 底部的时间轴
    navigationHelpButton: false, // 右上角的帮助按钮，
    selectionIndicator: false, // 是否显示选择指示器
    baseLayer: false,
  })
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  loadLAYER()
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) // 禁用双击
  // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 4500000
  global.$viewer = viewer
}
// 加载图层、注解方法
const loadLAYER = () => {
@@ -67,7 +72,7 @@
    tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
    maximumLevel: 50,
  })
  viewer.value?.imageryLayers.addImageryProvider(imageryProvider)
  viewer?.imageryLayers.addImageryProvider(imageryProvider)
  // 天地图中文注记加载
  const annotation = new Cesium.WebMapTileServiceImageryProvider({
    url: TDT_ZJ,
@@ -80,12 +85,12 @@
    tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
    maximumLevel: 50,
  })
  viewer.value?.imageryLayers.addImageryProvider(annotation)
  viewer?.imageryLayers.addImageryProvider(annotation)
}
const Point = (longitude: number, latitude: number) => {
  // 移除地图所有点 重新绘制
  viewer.value?.entities.removeAll()
  const entity = viewer.value?.entities.add({
  viewer?.entities.removeAll()
  const entity = viewer?.entities.add({
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
    point: {
      pixelSize: 24,
@@ -100,27 +105,47 @@
  //   duration: 2
  // })
}

// 切换为二三维模式
const switchModel = (type: string) => {
  switch (type) {
    case '2D':
      viewer.scene.camera.setView({
        orientation: {
          pitch: Cesium.Math.toRadians(-60),
          heading: Cesium.Math.toRadians(0),
        }
      })
      dimension.value = 2
      break
    case '3D':
      viewer.scene.camera.setView({
        orientation: {
          pitch: Cesium.Math.toRadians(-90),
          heading: Cesium.Math.toRadians(0),
        }
      })
      dimension.value = 3
  }
}

// 设置项目中所有的项目中心坐标
watch(() => store.state.map.pointList, (newVal, oldVal) => {
watch(() => store.state.map.pointList, (newVal) => {
  if (newVal) {
    pointCenter(viewer.value, newVal)
    clickPoint(viewer.value, newVal)
    pointCenter(viewer, newVal)
    clickPoint(viewer, newVal)
  }
}, {
  deep: true
})
// 点击地图生成项目中心点
watch(() => store.state.map.centerConfig.type, (newVal) => {
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.value?.scene.canvas)
  console.log(newVal, 'newVal')
  if (newVal === false) {
    viewer.value?.entities.removeAll()
    console.log('===false===')
  if (newVal === false || !store.state.map.centerConfig.type) {
    viewer?.entities.removeAll()
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
  } else {
    console.log('===true===')
    handler.setInputAction(function (e: any) {
      const cartesian = viewer.value?.camera.pickEllipsoid(e.position, viewer.value?.scene.globe.ellipsoid)
      const cartesian = viewer?.camera.pickEllipsoid(e.position, viewer?.scene.globe.ellipsoid)
      if (cartesian) {
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
        const longitude = Cesium.Math.toDegrees(cartographic.longitude)
@@ -130,7 +155,6 @@
          latitude,
        }
        store.commit('SET_CENTER_CONFIG_LATITUDE', data)
        console.log(data, 'data')
        Point(longitude, latitude)
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK
@@ -144,7 +168,7 @@
})
// 销毁地图模型
onUnmounted(() => {
  viewer.value = null
  viewer = null
})

</script>
@@ -169,4 +193,26 @@
  text-align: center;
  font-size: 16px;
}

.switch {
  position: absolute;
  background-color: #fff;
  z-index: 30;
  bottom: 80px;
  font-size: 14px;
  right: 20px;
  cursor: pointer;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .6);
  width: 28px;
  height: 28px;
  color: #4e4e4e;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch:hover {
  color: #1180ff;
}
</style>