ts/src/views/Earth/index.vue

<script setup>
import { MouseTooltip } from '@cesium-extends/tooltip'
// import { useBase } from '../BaseMB/hooks/base'

// const { addBaseFacilities } = useBase()

onMounted(async () => {
  window.viewer = new Cesium.Viewer('earth-container', {
    selectionIndicator: false,
    animation: false,
    baseLayerPicker: false,
    geocoder: false,
    timeline: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    infoBox: false,
    fullscreenButton: false,
    homeButton: false,

    imageryProvider: false,
  })
  // viewer.scene.skyAtmosphere.show = false
  // viewer.scene.fog.enable = true
  // viewer.scene.globe.enableLighting = false

  // viewer.imageryLayers.addImageryProvider(
  //   new Cesium.UrlTemplateImageryProvider({
  //     // url: 'http://192.168.10.201:2022/api/maptilecache/service/tms/1.0.0/img_globle1to9-PNG-4326@EPSG:4326@png/{z}/{x}/{reverseY}.png',
  //     // url: 'js/Cesium/Assets/Textures/NaturalEarthII/{z}/{x}/{reverseY}.jpg',
  //     // url: './resources/map/{z}/{x}/{y}.jpg',
  //     url: 'https://rt2.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&scene=0&version=347',
  //     // tilingScheme: new Cesium.GeographicTilingScheme(),
  //     tilingScheme: new Cesium.WebMercatorTilingScheme(),
  //   })
  // )
  // viewer.scene.debugShowFramesPerSecond = true
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(117.48, 30.67, 18000000.0),
  })

  viewer.clock.shouldAnimate = true
  viewer.shadows = false
  // viewer.scene.globe.enableLighting = true

  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    console.log('window.devicePixelRatio', window.devicePixelRatio)
    viewer.resolutionScale = window.devicePixelRatio
  }

  // 开启抗锯齿
  // viewer.scene.fxaa = true
  viewer.scene.postProcessStages.fxaa.enabled = true
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      positiveX: 'GV/resources/theme/skyBox/PositiveX.jpg',
      negativeX: 'GV/resources/theme/skyBox/NegativeX.jpg',
      positiveY: 'GV/resources/theme/skyBox/PositiveY.jpg',
      negativeY: 'GV/resources/theme/skyBox/NegativeY.jpg',
      positiveZ: 'GV/resources/theme/skyBox/PositiveZ.jpg',
      negativeZ: 'GV/resources/theme/skyBox/NegativeZ.jpg',
      // positiveX: './images/skybox/skyCube2k_px.jpg',
      // negativeX: './images/skybox/skyCube2k_mx.jpg',
      // positiveY: './images/skybox/skyCube2k_py.jpg',
      // negativeY: './images/skybox/skyCube2k_my.jpg',
      // positiveZ: './images/skybox/skyCube2k_pz.jpg',
      // negativeZ: './images/skybox/skyCube2k_mz.jpg',
    },
  })

  // viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
  //   url: 'http://192.168.10.201:2022/api/maptilecache/service/terrain/taiwan-HeightMap-4326',
  //   // url: Cesium.IonResource.fromAssetId(3956),
  //   // url: 'http://data.marsgis.cn/terrain',
  //   requestVertexNormals: true,
  //   requestWaterMask: true,
  // })

  // viewer.terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
  //   'http://192.168.10.201:2022/api/maptilecache/service/terrain/taiwan-HeightMap-4326',
  //   {
  //     requestVertexNormals: true,
  //     requestWaterMask: true,
  //   }
  // )
  // viewer.scene.globe.depthTestAgainstTerrain = true
  // setTimeout(() => {
  //   const tooltip = new MouseTooltip(window.viewer, {
  //     offset: [10, -10],
  //     content: `1111`,
  //   })
  //   tooltip.show()
  //   // addBaseFacilities()
  //   window.addEventListener('mousemove', function (event) {
  //     const mousePosition = new Cesium.Cartesian2(event.clientX, event.clientY)

  //     // 将鼠标屏幕坐标转换为地理坐标
  //     const ray = viewer.camera.getPickRay(mousePosition)
  //     const cartesian = viewer.scene.globe.pick(ray, viewer.scene)

  //     if (Cesium.defined(cartesian)) {
  //       const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
  //       const longitude = Cesium.Math.toDegrees(cartographic.longitude)
  //       const latitude = Cesium.Math.toDegrees(cartographic.latitude)
  //       console.log(`Latitude: ${latitude}, Longitude: ${longitude}`)
  //       tooltip.content = `[${longitude}, ${latitude}]`
  //       // tooltip.show()
  //     } else {
  //       tooltip.hide()
  //     }
  //   })
  // }, 2000)

  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  // var tooltip = document.getElementById("toolTip");

  handler.setInputAction(function (movement) {
    // tooltip.style.display = "none";
    // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);

    const ray = viewer.camera.getPickRay(movement.position)
    const promise = viewer.imageryLayers.pickImageryLayerFeatures(
      ray,
      viewer.scene
    )
    Promise.resolve(promise).then(function (features) {
      console.log(features)
    })
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
})
</script>

<template>
  <div
    id="earth-container"
    class="absolute bottom-0 left-0 right-0 top-0"
  ></div>
</template>