WuChengbo
/
GCSGUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: SceneViewer.vue 组件代码结构调整。

Browse Source
master
cbwu 1 year ago
parent 28437ac65e
commit 2f741e7382
6 changed files with 105 additions and 146 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -48,7 +48,7 @@
/> --> /> -->
</head> </head>
<body> <body>
<div id="app" style="margin: 0; padding: 0; border: 0"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

83
src/components/map/SceneViewer.vue
Unescape Escape View File

@ -12,67 +12,30 @@ import {
getTDTProvider, getTDTProvider,
getTDTTerrainProvider, getTDTTerrainProvider,
} from '@/utils/map/TDTProvider' } from '@/utils/map/TDTProvider'
import { initViewer, perfViewer } from '@/utils/map/sceneViewer'
import { flyToChina } from '@/utils/map/camera'
const viewerDivRef = ref<HTMLDivElement>() const viewerDivRef = ref<HTMLDivElement>()
let viewer: Cesium.Viewer
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/' window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
// window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署 // window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署
Cesium.Ion.defaultAccessToken = Cesium.Ion.defaultAccessToken =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E' 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E'
// 修改相机的默认矩形范围
//离线地球底图 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
const earth_native = Cesium.TileMapServiceImageryProvider.fromUrl( 75.0, // 西经
// 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII', 0.0, // 南纬
Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'), 140.0, // 东经
60.0, // 北纬
) )
onMounted(async () => {
// 修改相机的默认矩形范围 onMounted(() => {
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( //初始化
75.0, // 西经 viewer = initViewer(viewerDivRef.value as HTMLElement)
0.0, // 南纬 // 性能优化
140.0, // 东经 perfViewer(viewer)
60.0, // 北纬 // 定位到中国
) flyToChina(viewer)
//未联网状态加载默认本地底图，保证地球有底图显示
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 //关闭请求调度器的请求节流
//添加天地图影像 //添加天地图影像
viewer.imageryLayers.addImageryProvider( viewer.imageryLayers.addImageryProvider(
@ -84,18 +47,6 @@ onMounted(async () => {
) )
// 添加三维地形服务 // 添加三维地形服务
viewer.terrainProvider = getTDTTerrainProvider() 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() {
// 定位完成之后的回调函数
},
})
}) })
</script> </script>

1
src/global.d.ts vendored
Unescape Escape View File

@ -8,5 +8,6 @@ declare global {
interface Window { interface Window {
Cesium: typeof C Cesium: typeof C
CESIUM_BASE_URL: string CESIUM_BASE_URL: string
Viewer: C.Viewer
} }
} }

79
src/style.css
Unescape Escape View File

@ -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;
}
}

20
src/utils/map/camera.ts
Unescape Escape View File

@ -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 }

66
src/utils/map/sceneViewer.ts
Unescape Escape View File

@ -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 }
Write Preview
Loading…
Cancel
Save