重复定时和连续执行

guoshilong

2023-11-13 54849757852f6ab40eb17afbd03d1d839b60a38d

 src/hooks/use-cesium-tsa.ts

@@ -1,67 +1,296 @@
import { ELocalStorageKey, EDeviceTypeName } from '/@/types'
import dockIcon from '/@/assets/icons/dock.png'
import rcIcon from '/@/assets/icons/rc.png'
import droneIcon from '/@/assets/icons/drone.png'
import * as Cesium from 'cesium'
import { useMyStore } from '/@/store'
import {
  getCurrentInstance,
} from 'vue'
interface billboardSetting {
    image: string,
    scale?: number,
    [key: string]: any
  image: string,
  scale?: number,
  [key: string]: any
}
interface pointSetting {
    pixelSize: number,
    outlineWidth: number,
    [key: string]: any
  pixelSize: number,
  outlineWidth: number,
  [key: string]: any
}
interface labelSetting {
    text: string,
    font: string,
    outlineWidth: number,
    [key: string]: any
  text: string | undefined,
  font: string,
  outlineWidth: number,
  [key: string]: any
}
interface polyline {
  width?: number
  material?: Cesium.Color
  [key: string]: any
}
interface pointOption {
    longitude: number
    latitude: number
    point?: pointSetting
    billboard?: billboardSetting
    label?: labelSetting
  longitude: number
  latitude: number
  point?: pointSetting
  billboard?: billboardSetting
  polyline?: polyline
  label?: labelSetting
  id?: string
  heading?: number
  pitch?: number
  roll?: number
}
// 定义全局的viewer变量防止重复生成
// eslint-disable-next-line no-var
var viewer: Cesium.Viewer | null = null
export function cesiumOperation () {
  let handler: Cesium.ScreenSpaceEventHandler
  const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
  // 天地图Key
  // 天地图地图
  const TDT_IMG_C = 'https://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
      '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
      '&style=default&format=tiles&tk=' + TDT_Token
  // 天地图注记
  const TDT_ZJ = 'https://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
      '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
      '&style=default&format=tiles&tk=' + TDT_Token
  // 标准地图注记
  const TID_STAND = 'https://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
  '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
  '&style=default&format=tiles&tk=' + TDT_Token
  // 天地图图层变量
  const imageryProvider_tdt = new Cesium.WebMapTileServiceImageryProvider({
    url: TDT_IMG_C,
    layer: 'tdtImg_c',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
    maximumLevel: 50,
  })
  // 标准地图图层变量
  const imageryProvider_stand = new Cesium.UrlTemplateImageryProvider({
    url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    // format: 'image/jpeg',
    // show: true,
    maximumLevel: 18,
    credit: 'stand_tc'
  })
  // 标准地图图层注解
  const imageryProvider_standZh = new Cesium.UrlTemplateImageryProvider({
    url: 'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    maximumLevel: 18,
    credit: 'stand_zj'
  })
  // 天地图中文注记加载
  const annotation = new Cesium.WebMapTileServiceImageryProvider({
    url: TDT_ZJ,
    layer: 'tdtZwImg_c',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
    maximumLevel: 50,
  })
  const dimension = ref(3)
  const store = useMyStore()
  const _init = () => {
    // Cesium Token
    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 = new Cesium.Viewer('cesiumContainer', {
      infoBox: false, // 禁用沙箱，解决控制台报错
      animation: false, // 左下角的动画仪表盘
      baseLayerPicker: false, // 右上角的图层选择按钮
      geocoder: false, // 搜索框
      homeButton: false, // home按钮
      sceneModePicker: false, // 模式切换按钮
      timeline: false, // 底部的时间轴
      navigationHelpButton: false, // 右上角的帮助按钮，
      selectionIndicator: false, // 是否显示选择指示器
      baseLayer: false,
    })
    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) // 禁用双击
    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 4500000
    loadLAYER()
  }
  // 加载图层、注解方法
  const loadLAYER = () => {
    // 天地图图层加载
    if (store.state.common.mapSetting.mode === 1) {
      viewer?.imageryLayers.addImageryProvider(imageryProvider_tdt)
    }
    // 标准地图加载
    if (store.state.common.mapSetting.mode === 0) {
      viewer?.imageryLayers.addImageryProvider(imageryProvider_stand)
      viewer?.imageryLayers.addImageryProvider(imageryProvider_standZh)
    }
    // 路线图加载
    if (store.state.common.mapSetting.roadLine === true && store.state.common.mapSetting.mode === 1) {
      viewer?.imageryLayers.addImageryProvider(annotation)
    }
  }

export function cesiumOperation (viewer: any) {
  const cesiumExample = viewer
  const icons = new Map([
    [EDeviceTypeName.Aircraft, droneIcon],
    [EDeviceTypeName.Gateway, rcIcon],
    [EDeviceTypeName.Dock, dockIcon]
  ])
  // 清除所有标记点
  function removeAllPoint () {
    console.log(cesiumExample, 'cesiumExample')
    if (cesiumExample) {
      cesiumExample.entities.removeAll()
    if (viewer) {
      viewer?.entities?.removeAll()
    }
  }
  // 添加标记点
  function addPoint (pointOption:pointOption) {
    cesiumExample.entities.add({
      position: Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude),
  const addPoint = (pointOption: pointOption) => {
    if (!pointOption.longitude && !pointOption.latitude) return
    const position = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude)
    viewer?.entities.add({
      position,
      billboard: pointOption.billboard,
      point: pointOption.point
      point: pointOption.point,
      label: pointOption.label,
      id: pointOption.id,
    })
  }

  // 添加线段
  const addPolyline = (pointOption: pointOption) => {
    viewer?.entities.add({
      polyline: pointOption.polyline,
      id: pointOption.id,
    })
  }

  // 通过点ID删除
  function removeById (id:string) {
    viewer?.entities.removeById(id)
    const pointEntity = viewer?.entities.getById(id)
    if (pointEntity && pointEntity !== undefined) {
      viewer?.entities.remove(pointEntity)
    }
  }
  // 通过点ID获取实体
  function getEntityById (id:string) {
    const pointEntity = viewer?.entities.getById(id)
    return pointEntity
  }
  // 更新图片实体位置
  function updateEntityPosition (longitude:number, latitude:number, id:string, params?:any) {
    const entity = getEntityById(id) as Cesium.Entity
    const position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
    const heading = Cesium.Math.toRadians(-params.heading)
    if (Cesium.defined(entity)) {
      entity.position = position
      entity.billboard.rotation = heading
    }
  }
  // 飞行 flyto
  function flyTo (pointOption:pointOption, time: number = 3) {
    const destination = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude, 1000)
  const flyTo = (pointOption: pointOption, time: number = 4, height:number = 3000) => {
    if (!pointOption.longitude && !pointOption.latitude) return
    const destination = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude, height)
    const duration = time
    cesiumExample.camera.flyTo({
    viewer?.camera.flyTo({
      destination,
      duration
    })
  }

  // 二维三维切换
  // 切换为二三维模式
  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
    }
  }

  // 地图放大
  const zoonIn = (range:number) => {
    // 获取当前视角的高度
    const cameraHeight = viewer?.camera.positionCartographic.height
    const amout = Cesium.Math.sign(range) * cameraHeight / Math.log(cameraHeight)
    viewer?.camera.zoomIn(amout)
  }
  // 地图缩小
  const zoonOut = (range:number) => {
    const cameraHeight = viewer?.camera.positionCartographic.height
    const amout = Cesium.Math.sign(range) * cameraHeight / Math.log(cameraHeight)
    viewer?.camera.zoomOut(amout)
  }
  // 生成或删除路网图层
  const roadPattern = (flag:boolean) => {
    if (store.state.common.mapSetting.mode === 0) return
    const imageryLayers = viewer?.scene.imageryLayers
    const tdtZwImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtZwImg_c')
    if (!flag) {
      viewer?.imageryLayers.remove(tdtZwImg_c)
    } else {
      viewer?.imageryLayers.addImageryProvider(annotation)
    }
  }
  // 切换不同背景图层
  const patternMap = () => {
    const imageryLayers = viewer?.scene.imageryLayers
    // 切换为标准图层
    if (store.state.common.mapSetting.mode === 0) {
      const tdtImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtImg_c')
      const tdtZwImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtZwImg_c')
      viewer?.imageryLayers.remove(tdtImg_c)
      viewer?.imageryLayers.remove(tdtZwImg_c)
    } else {
      const tdtStand_c = imageryLayers?._layers.find(v => v.imageryProvider.credit.html === 'stand_tc')
      const tdtStand_zj = imageryLayers?._layers.find(v => v.imageryProvider.credit.html === 'stand_zj')
      viewer?.imageryLayers.remove(tdtStand_c)
      viewer?.imageryLayers.remove(tdtStand_zj)
    }
    loadLAYER()
  }
  onMounted(() => {
    if (viewer) return
    _init()
    const { appContext } = getCurrentInstance()
    const global = appContext.config.globalProperties
    global.$viewer = viewer
  })

  // 销毁地图模型
  // onUnmounted(() => {
  //   // viewer = null
  // })
  return {
    addPoint,
    removeAllPoint,
    flyTo
    flyTo,
    removeById,
    switchModel,
    dimension,
    zoonIn,
    zoonOut,
    roadPattern,
    patternMap,
    getEntityById,
    updateEntityPosition,
    addPolyline
  }
}