138 lines
4.9 KiB
Vue
138 lines
4.9 KiB
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>
|