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

perf: 优化状态条，恢复罗盘深色透明样式，调整相机初始视角

Browse Source
pull/6/head
zhaipx 11 months ago
parent 771a8b1c35
commit 32c0247870
6 changed files with 207 additions and 215 deletions
Show Stats Download Patch File Download Diff File

2
src/App.vue
Unescape Escape View File

@ -11,7 +11,7 @@ import BottomBar from '@/components/map/BottomBar.vue'
</script> </script>
<style> <style>
@import 'components/styles/cesium-compass.css'; @import 'styles/cesium-compass.css';
#map { #map {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;

26
src/components/map/BottomBar.vue
Unescape Escape View File

@ -7,6 +7,7 @@
import { Angle } from '@/utils/map/angle.ts' import { Angle } from '@/utils/map/angle.ts'
import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType} from 'cesium' import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType} from 'cesium'
import {onMounted, ref} from "vue"; import {onMounted, ref} from "vue";
import {cartesian2ToCartesian3} from "@/utils/map/coordinate.ts";
let nowLatStr: string, nowLonStr: string let nowLatStr: string, nowLonStr: string
let lonlatStr = ref('') let lonlatStr = ref('')
let isDecimal = ref(true) let isDecimal = ref(true)
@ -17,13 +18,6 @@ onMounted(()=>{
let handler = new ScreenSpaceEventHandler(canvas) let handler = new ScreenSpaceEventHandler(canvas)
handler.setInputAction((e:any)=> { handler.setInputAction((e:any)=> {
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点 //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
// let position: any = _viewer.scene.pickPosition(e.endPosition)
// if (!position) {
// position = _viewer.scene.camera.pickEllipsoid(
// e.startPosition,
// _viewer.scene.globe.ellipsoid,
// )
// }
let position = cartesian2ToCartesian3(_viewer, e.endPosition) let position = cartesian2ToCartesian3(_viewer, e.endPosition)
if (position) { if (position) {
//将笛卡尔三维坐标转为地图坐标（弧度） //将笛卡尔三维坐标转为地图坐标（弧度）
@ -35,13 +29,14 @@ onMounted(()=>{
let camera_alt = (_viewer.camera.positionCartographic.height / 1000) // 视高 let camera_alt = (_viewer.camera.positionCartographic.height / 1000) // 视高
// 相机低于250、俯仰角小于-80度时才计算海拔高度（否则误差大） // 相机低于250、俯仰角小于-80度时才计算海拔高度（否则误差大）
let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80) let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80)
let elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)?? '' : '' // 海拔 let elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)+'m'?? '' : '高度过高'
if(isDecimal.value) { //如果是十进制度 if(isDecimal.value) { //如果是十进制度
lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)：${elevStr}` lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度: ${elevStr}`
} }
else { else {
lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)：${elevStr}` lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)},
高度: ${elevStr}`
} }
} catch (e) {} } catch (e) {}
} }
@ -49,12 +44,13 @@ onMounted(()=>{
}) })
function lonlatClick() { function lonlatClick() {
let elevStr = lonlatStr.value.split('海拔')[1] let elevStr = lonlatStr.value.split('高度')[1]
console.log(elevStr)
if(isDecimal.value){ if(isDecimal.value){
lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` + elevStr lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` + elevStr
} }
else { else {
lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度` + elevStr
} }
isDecimal.value = !isDecimal.value isDecimal.value = !isDecimal.value
} }
@ -74,7 +70,7 @@ function lonlatClick() {
bottom: 1px; bottom: 1px;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 2.3rem; height: 1.7rem;
background-color: rgba(47, 53, 60, 0.8); background-color: rgba(47, 53, 60, 0.8);
color: #fff; color: #fff;
font-size: 0.7rem; font-size: 0.7rem;
@ -83,9 +79,9 @@ function lonlatClick() {
padding: 0; padding: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
} }
#lonlatText{ #lonlatText{
margin-left: 2rem;
background: none; background: none;
border: none; border: none;
color: #ffffff; color: #ffffff;

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

@ -39,7 +39,7 @@ Ion.defaultAccessToken =
// 60.0, // 北纬 // 60.0, // 北纬
// ) // )
onMounted(async () => { onMounted( () => {
//初始化 //初始化
viewer = initViewer(viewerDivRef.value as HTMLElement) viewer = initViewer(viewerDivRef.value as HTMLElement)
// 性能优化 // 性能优化
@ -61,7 +61,7 @@ onMounted(async () => {
viewer.terrainProvider = getTDTTerrainProvider() viewer.terrainProvider = getTDTTerrainProvider()
// 标记点图层，存储所有地标点 // 标记点图层，存储所有地标点
const markerLayer = new CustomDataSource('Marker') const markerLayer = new CustomDataSource('Marker')
await viewer.dataSources.add(markerLayer) viewer.dataSources.add(markerLayer)
// 挂载在window，供全局组件共享 // 挂载在window，供全局组件共享
window.viewer = viewer window.viewer = viewer

30
src/components/styles/cesium-compass.css → src/styles/cesium-compass.css
Unescape Escape View File

@ -17,8 +17,7 @@
display: inline-block; display: inline-block;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
padding-left: .5rem; padding-left: .5rem;
font-size: .9rem; font-size: .8rem;
line-height: 1rem;
color: #FFFFFF; color: #FFFFFF;
width: 7.5rem; width: 7.5rem;
text-align: center; text-align: center;
@ -52,7 +51,8 @@ screen and (max-height: 420px) {
right: 1.8rem; right: 1.8rem;
top: 65vh; top: 65vh;
width: 2rem; width: 2rem;
border-radius: .5rem .5rem .5rem .5rem; border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: .3rem .3rem .3rem .3rem;
font-weight: 300; font-weight: 300;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -75,27 +75,23 @@ screen and (max-height: 420px) {
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 1.2rem; font-size: 1.2rem;
color: #2c2c2c; color: #FFFFFF;
background: #FFFFFF;
border-radius: .5rem .5rem 0 0;
padding-bottom: 4px; padding-bottom: 4px;
} }
.navigation-control-icon-zoom-in:hover { .navigation-control-icon-zoom-in:hover {
background: rgb(223, 223, 223); background: rgba(204, 204, 204, 0.78);
border-radius: .5rem .5rem 0 0; border-radius: .3rem .3rem 0 0;
} }
/* - 按钮*/ /* - 按钮*/
.navigation-control-icon-zoom-out { .navigation-control-icon-zoom-out {
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 1.4rem; font-size: 1.4rem;
background: #FFFFFF; color: #FFFFFF;
color: #2c2c2c;
border-radius: 0 0 .5rem .5rem;
} }
.navigation-control-icon-zoom-out:hover { .navigation-control-icon-zoom-out:hover {
background: rgb(223, 223, 223); background: rgba(204, 204, 204, 0.78);
border-radius: 0 0 .5rem .5rem; border-radius: 0 0 .3rem .3rem;
} }
/* reset 按钮*/ /* reset 按钮*/
.navigation-control-icon-reset { .navigation-control-icon-reset {
@ -122,7 +118,7 @@ screen and (max-height: 420px) {
top: 0; top: 0;
width: 6rem;; width: 6rem;;
height: 6rem;; height: 6rem;;
fill: #5b5b5b; fill: rgba(255, 255, 255, 0.5);
} }
.compass-outer-ring-background { .compass-outer-ring-background {
@ -132,7 +128,7 @@ screen and (max-height: 420px) {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 44px; border-radius: 44px;
border: 12px solid rgb(255, 255, 255); border: 12px solid rgba(47, 53, 60, 0.8);
box-sizing: content-box; box-sizing: content-box;
} }
@ -142,7 +138,7 @@ screen and (max-height: 420px) {
top: 0; top: 0;
width: 95px; width: 95px;
height: 95px; height: 95px;
fill: #5b5b5b; fill: #faf6f6;
} }
.compass-gyro-active { .compass-gyro-active {
@ -156,7 +152,7 @@ screen and (max-height: 420px) {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 33px; border-radius: 33px;
background-color: rgba(250, 250, 250, 0.8); background-color: rgba(47, 53, 60, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: content-box; box-sizing: content-box;
} }

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

@ -8,8 +8,8 @@ function flyToChina(viewer: Viewer) {
viewer.camera.flyTo({ viewer.camera.flyTo({
destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000), destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
orientation: { orientation: {
heading: Math.toRadians(348.4202942851978), heading: Math.toRadians(0),
pitch: Math.toRadians(-89.74026687972041), pitch: Math.toRadians(-90),
roll: Math.toRadians(0), roll: Math.toRadians(0),
}, },
complete: function callback() { complete: function callback() {

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

@ -53,14 +53,14 @@ function initViewer(container: string | Element): Viewer {
const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
creditContainer.style.display = 'none' creditContainer.style.display = 'none'
// 开启深度检测 // 开启深度检测
viewer.scene.globe.depthTestAgainstTerrain = true viewer.scene.globe.depthTestAgainstTerrain = false
// 水雾特效 // 水雾特效
viewer.scene.globe.showGroundAtmosphere = true viewer.scene.globe.showGroundAtmosphere = true
// 设置更高的缩放惯性以使缩放操作更平滑 // 设置更高的缩放惯性以使缩放操作更平滑
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.9 viewer.scene.screenSpaceCameraController.inertiaZoom = 0.9
// 限制相机缩放 // 限制相机缩放
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值 viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000 //相机高度的最大值 viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10350000 //相机高度的最大值
// 设置设备像素比，可能会影响渲染性能 // 设置设备像素比，可能会影响渲染性能
// viewer.resolutionScale = window.devicePixelRatio // viewer.resolutionScale = window.devicePixelRatio
// 视图重绘后确保清晰度 // 视图重绘后确保清晰度

Write Preview
Loading…
Cancel
Save