ts/src/views/PlaceName/hooks/hooks.jsx

import { ref } from 'vue'

let viewer = null
const model = ref({
  name: null,
  lon: null,
  lat: null,
  level: null,
})
export function usePlaceName() {
  const showPlace = ref(true)
  function addPlaceName() {
    showPlace.value = !showPlace.value
  }

  return {
    model,
    showPlace,
    addPlaceName,
    initViewer,
    clickPoint,
  }
}

async function initViewer() {
  viewer = new Cesium.Viewer('place-earth', {
    selectionIndicator: false,
    animation: false,
    baseLayerPicker: false,
    // geocoder: false,
    timeline: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    infoBox: false,
    fullscreenButton: false,
    homeButton: false,

    imageryProvider: false,
    geocoder: new OpenStreetMapNominatimGeocoder(),
    // geocoder: new Cesium.CartographicGeocoderService(),
  })

  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()) {
    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 = await Cesium.CesiumTerrainProvider.fromUrl(
    'http://192.168.10.201:2022/api/maptilecache/service/terrain/taiwan-HeightMap-4326',
    {
      requestVertexNormals: true,
      requestWaterMask: true,
    }
  )

  viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: window.settings.map[3].url,
      tilingScheme: new Cesium[window.settings.map[3].tilingScheme](),
    })
  )
}

let getPointHandler = null
function clickPoint() {
  if (getPointHandler) {
    return
  }
  getPointHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  viewer._container.style.cursor = 'crosshair'
  getPointHandler.setInputAction(event => {
    const cartesian = viewer.scene.pickPosition(event.position)
    if (Cesium.defined(cartesian)) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      const longitude = Cesium.Math.toDegrees(cartographic.longitude)
      const latitude = Cesium.Math.toDegrees(cartographic.latitude)

      model.value.lon = longitude
      model.value.lat = latitude
    }

    getPointHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    getPointHandler = null
    viewer._container.style.cursor = ''
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

function OpenStreetMapNominatimGeocoder() {}
OpenStreetMapNominatimGeocoder.prototype.geocode = function (input) {
  const query = `format=jsonv2&accept-language=zh&polygon_geojson=1&countrycodes=cn&q=${input}`
  const requestString = 'https://nominatim.openstreetmap.org/search?' + query
  return Cesium.Resource.fetchJson(requestString) //请求url获取json数据
    .then(function (results) {
      let bboxDegrees
      return results.map(function (resultObject) {
        bboxDegrees = resultObject.boundingbox
        return {
          displayName: resultObject.display_name,
          destination: Cesium.Rectangle.fromDegrees(
            bboxDegrees[2],
            bboxDegrees[0],
            bboxDegrees[3],
            bboxDegrees[1]
          ),
        }
      })
    })
}

function AMapNominatimGeocoder() {}
AMapNominatimGeocoder.prototype.geocode = function (input) {
  const query = `key=****&keywords=${input}`
  const requestString = 'https://restapi.amap.com/v3/place/text?' + query
  return Cesium.Resource.fetchJson(requestString) //请求url获取json数据
    .then(function (results) {
      return results.pois.map(function (bboxDegrees) {
        let [lng, lat] = bboxDegrees['location'].split(',')
        return {
          displayName: bboxDegrees['name'],
          destination: Cesium.Rectangle.fromDegrees(lng, lat, lng, lat),
        }
      })
    })
}