|
|
/*
|
|
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
|
|
* @Date: 2024-03-13 09:32:21
|
|
|
* @LastEditors: cbwu
|
|
|
* @LastEditTime: 2024-04-10 14:02:37
|
|
|
* @Description:
|
|
|
*/
|
|
|
// Viewer初始化
|
|
|
import {
|
|
|
Viewer,
|
|
|
TileMapServiceImageryProvider,
|
|
|
ScreenSpaceEventType,
|
|
|
ImageryLayer,
|
|
|
RequestScheduler,
|
|
|
SceneMode,
|
|
|
Rectangle,
|
|
|
buildModuleUrl,
|
|
|
} from 'cesium'
|
|
|
import CesiumNavigation from 'cesium-navigation-es6'
|
|
|
|
|
|
//离线地球底图
|
|
|
const earth_native = TileMapServiceImageryProvider.fromUrl(
|
|
|
// 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
|
|
|
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: SceneMode.SCENE3D, //设置场景模式，3D球体
|
|
|
// terrain: Cesium.Terrain.fromWorldTerrain(),
|
|
|
baseLayerPicker: false, //是否显示图层选择控件
|
|
|
requestRenderMode: true, //启用请求渲染模式
|
|
|
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
|
|
|
fullscreenButton: false, //右下角 全屏控件
|
|
|
orderIndependentTranslucency: false,
|
|
|
contextOptions: { webgl: { alpha: true } },
|
|
|
maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染
|
|
|
// mapProjection: new Cesium.WebMercatorProjection(),
|
|
|
baseLayer: ImageryLayer.fromProviderAsync(earth_native, {}),
|
|
|
})
|
|
|
//去除cesium logo，隐藏版本信息
|
|
|
const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
|
|
|
creditContainer.style.display = 'none'
|
|
|
// 开启深度检测
|
|
|
viewer.scene.globe.depthTestAgainstTerrain = false
|
|
|
// 水雾特效
|
|
|
viewer.scene.globe.showGroundAtmosphere = true
|
|
|
// 设置更高的缩放惯性以使缩放操作更平滑
|
|
|
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.9
|
|
|
// 限制相机缩放
|
|
|
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值
|
|
|
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10350000 //相机高度的最大值
|
|
|
// 设置设备像素比，可能会影响渲染性能
|
|
|
// viewer.resolutionScale = window.devicePixelRatio
|
|
|
// 视图重绘后确保清晰度
|
|
|
viewer.scene.preRender.addEventListener(function () {
|
|
|
if (viewer.resolutionScale !== window.devicePixelRatio) {
|
|
|
viewer.resolutionScale = window.devicePixelRatio
|
|
|
}
|
|
|
})
|
|
|
// 去掉entity的点击事件（双击、单击）
|
|
|
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
|
|
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
|
|
|
)
|
|
|
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
|
|
ScreenSpaceEventType.LEFT_CLICK,
|
|
|
)
|
|
|
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图层速度
|
|
|
RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量
|
|
|
RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流
|
|
|
}
|
|
|
|
|
|
function showNavigator(viewer: Viewer) {
|
|
|
const options: any = {}
|
|
|
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle
|
|
|
options.defaultResetView = Rectangle.fromDegrees(80, 22, 130, 50)
|
|
|
options.enableCompass = true //罗盘组件 true启用，false禁用
|
|
|
options.enableCompassOuterRing = true //罗盘外环组件 true启用，false禁用
|
|
|
options.enableZoomControls = true //缩放组件 true启用，false禁用
|
|
|
options.enableDistanceLegend = true //比例尺组件 true启用，false禁用
|
|
|
new CesiumNavigation(viewer, options)
|
|
|
}
|
|
|
export { initViewer, perfViewer, showNavigator }
|