From 2f741e7382a87431fb03f181ec74e7529bd3e14a Mon Sep 17 00:00:00 2001 From: cbwu <504-wuchengbo@htsdfp.com> Date: Wed, 13 Mar 2024 10:27:01 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20SceneViewer.vue=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/components/map/SceneViewer.vue | 83 ++++++------------------------ src/global.d.ts | 1 + src/style.css | 79 ---------------------------- src/utils/map/camera.ts | 20 +++++++ src/utils/map/sceneViewer.ts | 66 ++++++++++++++++++++++++ 6 files changed, 105 insertions(+), 146 deletions(-) create mode 100644 src/utils/map/camera.ts create mode 100644 src/utils/map/sceneViewer.ts diff --git a/index.html b/index.html index 4ecaf65..4d7aa22 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@ /> --> -
+
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue index 09e0d06..718ca38 100644 --- a/src/components/map/SceneViewer.vue +++ b/src/components/map/SceneViewer.vue @@ -12,67 +12,30 @@ import { getTDTProvider, getTDTTerrainProvider, } from '@/utils/map/TDTProvider' +import { initViewer, perfViewer } from '@/utils/map/sceneViewer' +import { flyToChina } from '@/utils/map/camera' const viewerDivRef = ref() +let viewer: Cesium.Viewer window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/' // window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E' - -//离线地球底图 -const earth_native = Cesium.TileMapServiceImageryProvider.fromUrl( - // 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII', - Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'), +// 修改相机的默认矩形范围 +Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( + 75.0, // 西经 + 0.0, // 南纬 + 140.0, // 东经 + 60.0, // 北纬 ) -onMounted(async () => { - // 修改相机的默认矩形范围 - Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( - 75.0, // 西经 - 0.0, // 南纬 - 140.0, // 东经 - 60.0, // 北纬 - ) - //未联网状态加载默认本地底图，保证地球有底图显示 - let viewer = new Cesium.Viewer(viewerDivRef.value as HTMLElement, { - infoBox: false, //是否显示点击要素之后显示的信息 - homeButton: false, //是否显示Home按钮 - navigationHelpButton: false, //是否显示帮助信息控件 - timeline: false, //是否显示时间线控件 - animation: false, //是否显示动画控件 - sceneModePicker: true, //是否显示投影方式控件 - sceneMode: Cesium.SceneMode.SCENE3D, //设置场景模式，3D球体 - // terrain: Cesium.Terrain.fromWorldTerrain(), - baseLayerPicker: false, //是否显示图层选择控件 - requestRenderMode: true, //启用请求渲染模式 - scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存 - fullscreenButton: false, //右下角 全屏控件 - orderIndependentTranslucency: false, - contextOptions: { webgl: { alpha: true } }, - baseLayer: Cesium.ImageryLayer.fromProviderAsync(earth_native, {}), - }) - //去除cesium logo，隐藏版本信息 - const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement - creditContainer.style.display = 'none' - // viewer.scene.debugShowFramesPerSecond = true //开启帧率调试 - // 限制相机缩放 - viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值 - viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000 //相机高度的最大值 - // 抗锯齿 - // 是否支持图像渲染像素化处理 - // if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { - // viewer.resolutionScale = window.devicePixelRatio - // } - viewer.scene.postProcessStages.fxaa.enabled = true - // 水雾特效 - viewer.scene.globe.showGroundAtmosphere = true - // 关闭太阳，月亮，天空盒，雾等相关特效 - viewer.scene.moon.show = false - viewer.scene.fog.enabled = false - viewer.scene.sun.show = false - viewer.scene.skyBox.show = false - // 优化加载WMTS图层速度 - Cesium.RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量 - Cesium.RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流 + +onMounted(() => { + //初始化 + viewer = initViewer(viewerDivRef.value as HTMLElement) + // 性能优化 + perfViewer(viewer) + // 定位到中国 + flyToChina(viewer) //添加天地图影像 viewer.imageryLayers.addImageryProvider( @@ -84,18 +47,6 @@ onMounted(async () => { ) // 添加三维地形服务 viewer.terrainProvider = getTDTTerrainProvider() - // 将三维球定位到中国 - viewer.camera.flyTo({ - destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 12550000), - orientation: { - heading: Cesium.Math.toRadians(348.4202942851978), - pitch: Cesium.Math.toRadians(-89.74026687972041), - roll: Cesium.Math.toRadians(0), - }, - complete: function callback() { - // 定位完成之后的回调函数 - }, - }) }) diff --git a/src/global.d.ts b/src/global.d.ts index c55cf9a..e4a098b 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -8,5 +8,6 @@ declare global { interface Window { Cesium: typeof C CESIUM_BASE_URL: string + Viewer: C.Viewer } } diff --git a/src/style.css b/src/style.css index bb131d6..e69de29 100644 --- a/src/style.css +++ b/src/style.css @@ -1,79 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/utils/map/camera.ts b/src/utils/map/camera.ts new file mode 100644 index 0000000..56ea4f5 --- /dev/null +++ b/src/utils/map/camera.ts @@ -0,0 +1,20 @@ +// 场景相机相关操作 +import { Viewer, Cartesian3, Math } from 'cesium' +/** + * 将三维球定位到中国 + * @param viewer :Viewer对象 + */ +function flyToChina(viewer: Viewer) { + viewer.camera.flyTo({ + destination: Cartesian3.fromDegrees(103.84, 31.15, 12550000), + orientation: { + heading: Math.toRadians(348.4202942851978), + pitch: Math.toRadians(-89.74026687972041), + roll: Math.toRadians(0), + }, + complete: function callback() { + // 定位完成之后的回调函数 + }, + }) +} +export { flyToChina } diff --git a/src/utils/map/sceneViewer.ts b/src/utils/map/sceneViewer.ts new file mode 100644 index 0000000..86935c4 --- /dev/null +++ b/src/utils/map/sceneViewer.ts @@ -0,0 +1,66 @@ +// Viewer初始化 +import { Viewer, TileMapServiceImageryProvider } from 'cesium' + +//离线地球底图 +const earth_native = TileMapServiceImageryProvider.fromUrl( + // 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII', + Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'), +) +/** + * Viewer初始化 + * @param container :id或HTML对象 + * @returns :viewer对象 + */ +function initViewer(container: string | Element): Viewer { + //未联网状态加载默认本地底图，保证地球有底图显示 + const viewer = new Viewer(container as HTMLElement, { + infoBox: false, //是否显示点击要素之后显示的信息 + homeButton: false, //是否显示Home按钮 + navigationHelpButton: false, //是否显示帮助信息控件 + timeline: false, //是否显示时间线控件 + animation: false, //是否显示动画控件 + sceneModePicker: true, //是否显示投影方式控件 + sceneMode: Cesium.SceneMode.SCENE3D, //设置场景模式，3D球体 + // terrain: Cesium.Terrain.fromWorldTerrain(), + baseLayerPicker: false, //是否显示图层选择控件 + requestRenderMode: true, //启用请求渲染模式 + scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存 + fullscreenButton: false, //右下角 全屏控件 + orderIndependentTranslucency: false, + contextOptions: { webgl: { alpha: true } }, + // mapProjection: new Cesium.WebMercatorProjection(), + baseLayer: Cesium.ImageryLayer.fromProviderAsync(earth_native, {}), + }) + //去除cesium logo，隐藏版本信息 + const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement + creditContainer.style.display = 'none' + // 水雾特效 + viewer.scene.globe.showGroundAtmosphere = true + // 限制相机缩放 + viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值 + viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000 //相机高度的最大值 + return viewer +} + +/** + * 性能优化 + * @param viewer :场景Viewer + */ +function perfViewer(viewer: Viewer) { + // 抗锯齿 + // 是否支持图像渲染像素化处理 + // if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { + // viewer.resolutionScale = window.devicePixelRatio + // } + viewer.scene.postProcessStages.fxaa.enabled = true + // 关闭太阳，月亮，天空盒，雾等相关特效 + viewer.scene.moon.show = false + viewer.scene.fog.enabled = false + viewer.scene.sun.show = false + viewer.scene.skyBox.show = false + // 优化加载WMTS图层速度 + Cesium.RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量 + Cesium.RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流 +} + +export { initViewer, perfViewer }