From 79186e119246c0a9415082bafe1872e5df4bc341 Mon Sep 17 00:00:00 2001 From: cbwu <504-wuchengbo@htsdfp.com> Date: Wed, 13 Mar 2024 11:41:26 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20cesium=E7=B1=BB=E5=9E=8B=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=EF=BC=8CViewer=E6=8C=82=E8=BD=BD=E5=9C=A8window?= =?UTF-8?q?=E4=B8=8A=E4=BE=9B=E5=85=A8=E5=B1=80=E7=BB=84=E4=BB=B6=E4=BD=BF?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/SceneViewer.vue | 23 ++++++++++++++--------- src/global.d.ts | 9 +++++---- src/utils/map/TDTProvider.ts | 12 ++++++++---- src/utils/map/camera.ts | 2 +- src/utils/map/sceneViewer.ts | 20 ++++++++++++++------ 5 files changed, 42 insertions(+), 24 deletions(-) diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue index 718ca38..fbd4216 100644 --- a/src/components/map/SceneViewer.vue +++ b/src/components/map/SceneViewer.vue @@ -4,7 +4,8 @@ diff --git a/src/global.d.ts b/src/global.d.ts index e4a098b..3c68547 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,13 +1,14 @@ -import * as C from 'cesium' +// import * as Cesium from 'cesium' +import type { Cesium, Viewer } from 'cesium' // 扩展全局变量 declare global { // 定义全局Cesium类型 - const Cesium: typeof C + const Cesium: Cesium // 允许扩展 Window interface Window { - Cesium: typeof C + Cesium: Cesium CESIUM_BASE_URL: string - Viewer: C.Viewer + Viewer: Viewer } } diff --git a/src/utils/map/TDTProvider.ts b/src/utils/map/TDTProvider.ts index 5132b0d..04f122c 100644 --- a/src/utils/map/TDTProvider.ts +++ b/src/utils/map/TDTProvider.ts @@ -1,5 +1,9 @@ // 天地图影像服务 -import { WebMapTileServiceImageryProvider } from 'cesium' +import { + WebMapTileServiceImageryProvider, + GeographicTilingScheme, + WebMercatorTilingScheme, +} from 'cesium' //地图服务枚举类型：_c为墨卡托投影，_w为经纬度投影 enum TDTLayerType { Vec = 'vec', //矢量底图 @@ -37,8 +41,8 @@ export function getTDTProvider( // 切片方式 const tilingScheme = projectionType == TDTProjectionType.WGS84 - ? new Cesium.GeographicTilingScheme() - : new Cesium.WebMercatorTilingScheme() + ? new GeographicTilingScheme() + : new WebMercatorTilingScheme() const tileMatrixLabels = projectionType == TDTProjectionType.WGS84 ? new Array(19).fill(1).map((v, i) => `${i}`) @@ -74,7 +78,7 @@ export function getTDTTerrainProvider() { TDT_tk terrainUrls.push(url) } - // @ts-ignore + const provider = new Cesium.GeoTerrainProvider({ urls: terrainUrls, }) diff --git a/src/utils/map/camera.ts b/src/utils/map/camera.ts index 56ea4f5..bb60749 100644 --- a/src/utils/map/camera.ts +++ b/src/utils/map/camera.ts @@ -6,7 +6,7 @@ import { Viewer, Cartesian3, Math } from 'cesium' */ function flyToChina(viewer: Viewer) { viewer.camera.flyTo({ - destination: Cartesian3.fromDegrees(103.84, 31.15, 12550000), + destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000), orientation: { heading: Math.toRadians(348.4202942851978), pitch: Math.toRadians(-89.74026687972041), diff --git a/src/utils/map/sceneViewer.ts b/src/utils/map/sceneViewer.ts index 86935c4..0ea76d1 100644 --- a/src/utils/map/sceneViewer.ts +++ b/src/utils/map/sceneViewer.ts @@ -1,10 +1,17 @@ // Viewer初始化 -import { Viewer, TileMapServiceImageryProvider } from 'cesium' +import { + Viewer, + TileMapServiceImageryProvider, + ImageryLayer, + RequestScheduler, + SceneMode, + buildModuleUrl, +} from 'cesium' //离线地球底图 const earth_native = TileMapServiceImageryProvider.fromUrl( // 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII', - Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'), + buildModuleUrl('Assets/Textures/NaturalEarthII'), ) /** * Viewer初始化 @@ -20,7 +27,7 @@ function initViewer(container: string | Element): Viewer { timeline: false, //是否显示时间线控件 animation: false, //是否显示动画控件 sceneModePicker: true, //是否显示投影方式控件 - sceneMode: Cesium.SceneMode.SCENE3D, //设置场景模式，3D球体 + sceneMode: SceneMode.SCENE3D, //设置场景模式，3D球体 // terrain: Cesium.Terrain.fromWorldTerrain(), baseLayerPicker: false, //是否显示图层选择控件 requestRenderMode: true, //启用请求渲染模式 @@ -28,8 +35,9 @@ function initViewer(container: string | Element): Viewer { fullscreenButton: false, //右下角 全屏控件 orderIndependentTranslucency: false, contextOptions: { webgl: { alpha: true } }, + maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染 // mapProjection: new Cesium.WebMercatorProjection(), - baseLayer: Cesium.ImageryLayer.fromProviderAsync(earth_native, {}), + baseLayer: ImageryLayer.fromProviderAsync(earth_native, {}), }) //去除cesium logo，隐藏版本信息 const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement @@ -59,8 +67,8 @@ function perfViewer(viewer: Viewer) { viewer.scene.sun.show = false viewer.scene.skyBox.show = false // 优化加载WMTS图层速度 - Cesium.RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量 - Cesium.RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流 + RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量 + RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流 } export { initViewer, perfViewer }