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

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

@ -1,193 +1,189 @@
/*重写比例尺、罗盘、缩放控件样式 */ /*重写比例尺、罗盘、缩放控件样式 */
/*比例尺背景*/ /*比例尺背景*/
.distance-legend { .distance-legend {
position: absolute; position: absolute;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
right: .1rem; right: .1rem;
height: 2rem; height: 2rem;
bottom: .2rem; bottom: .2rem;
font-weight: bolder; font-weight: bolder;
box-sizing: content-box; box-sizing: content-box;
z-index: 2; z-index: 2;
} }
/*比例尺文本*/ /*比例尺文本*/
.distance-legend-label { .distance-legend-label {
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; }
} /*比例尺线段*/
/*比例尺线段*/ .distance-legend-scale-bar {
.distance-legend-scale-bar { border-left: .1rem solid #FFFFFF;
border-left: .1rem solid #FFFFFF; border-right: .1rem solid #FFFFFF;
border-right: .1rem solid #FFFFFF; border-bottom: .1rem solid #FFFFFF;
border-bottom: .1rem solid #FFFFFF; position: absolute;
position: absolute; height: .7rem;
height: .7rem; top: 1rem;
top: 1rem; }
}
@media print {
@media print { .distance-legend {
.distance-legend { display: none;
display: none; }
} }
}
@media screen and (max-width: 700px),
@media screen and (max-width: 700px), screen and (max-height: 420px) {
screen and (max-height: 420px) { .distance-legend {
.distance-legend { display: none;
display: none; }
} }
}
/*缩放按钮外边框*/
/*缩放按钮外边框*/ .navigation-controls {
.navigation-controls { position: absolute;
position: absolute; right: 1.8rem;
right: 1.8rem; top: 65vh;
top: 65vh; width: 2rem;
width: 2rem; border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: .5rem .5rem .5rem .5rem; 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;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.naviagation-control:active { .naviagation-control:active {
color: #FFF; color: #FFF;
} }
.navigation-control-last { .navigation-control-last {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #b5b4b4; border-bottom: 1px solid #b5b4b4;
border-bottom: 0; border-bottom: 0;
} }
/* + 按钮*/ /* + 按钮*/
.navigation-control-icon-zoom-in { .navigation-control-icon-zoom-in {
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 1.2rem; font-size: 1.2rem;
color: #2c2c2c; color: #FFFFFF;
background: #FFFFFF; padding-bottom: 4px;
border-radius: .5rem .5rem 0 0; }
padding-bottom: 4px; .navigation-control-icon-zoom-in:hover {
} background: rgba(204, 204, 204, 0.78);
.navigation-control-icon-zoom-in:hover { border-radius: .3rem .3rem 0 0;
background: rgb(223, 223, 223); }
border-radius: .5rem .5rem 0 0; /* - 按钮*/
} .navigation-control-icon-zoom-out {
/* - 按钮*/ position: relative;
.navigation-control-icon-zoom-out { text-align: center;
position: relative; font-size: 1.4rem;
text-align: center; color: #FFFFFF;
font-size: 1.4rem; }
background: #FFFFFF; .navigation-control-icon-zoom-out:hover {
color: #2c2c2c; background: rgba(204, 204, 204, 0.78);
border-radius: 0 0 .5rem .5rem; border-radius: 0 0 .3rem .3rem;
} }
.navigation-control-icon-zoom-out:hover { /* reset 按钮*/
background: rgb(223, 223, 223); .navigation-control-icon-reset {
border-radius: 0 0 .5rem .5rem; position: relative;
} height: 0;
/* reset 按钮*/ fill: rgba(255, 255, 255, 0.8);
.navigation-control-icon-reset { padding: 0 0 0 0; /* 显示reset按钮： padding: 0 0 1.5rem 0; */
position: relative; box-sizing: content-box;
height: 0; }
fill: rgba(255, 255, 255, 0.8);
padding: 0 0 0 0; /* 显示reset按钮： padding: 0 0 1.5rem 0; */ /*罗盘*/
box-sizing: content-box; .compass {
} pointer-events: auto;
position: absolute;
/*罗盘*/ right: 0;
.compass { top: 50vh;
pointer-events: auto; width: 6rem;
position: absolute; height: 6rem;
right: 0; overflow: hidden;
top: 50vh; }
width: 6rem;
height: 6rem; .compass-outer-ring {
overflow: hidden; position: absolute;
} top: 0;
width: 6rem;;
.compass-outer-ring { height: 6rem;;
position: absolute; fill: rgba(255, 255, 255, 0.5);
top: 0; }
width: 6rem;;
height: 6rem;; .compass-outer-ring-background {
fill: #5b5b5b; position: absolute;
} top: 14px;
left: 14px;
.compass-outer-ring-background { width: 44px;
position: absolute; height: 44px;
top: 14px; border-radius: 44px;
left: 14px; border: 12px solid rgba(47, 53, 60, 0.8);
width: 44px; box-sizing: content-box;
height: 44px; }
border-radius: 44px;
border: 12px solid rgb(255, 255, 255); .compass-gyro {
box-sizing: content-box; pointer-events: none;
} position: absolute;
top: 0;
.compass-gyro { width: 95px;
pointer-events: none; height: 95px;
position: absolute; fill: #faf6f6;
top: 0; }
width: 95px;
height: 95px; .compass-gyro-active {
fill: #5b5b5b; fill: #68ADFE;
} }
.compass-gyro-active { .compass-gyro-background {
fill: #68ADFE; position: absolute;
} top: 31px;
left: 31px;
.compass-gyro-background { width: 2rem;
position: absolute; height: 2rem;
top: 31px; border-radius: 33px;
left: 31px; background-color: rgba(47, 53, 60, 0.8);
width: 2rem; border: 1px solid rgba(255, 255, 255, 0.2);
height: 2rem; box-sizing: content-box;
border-radius: 33px; }
background-color: rgba(250, 250, 250, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2); .compass-gyro-background:hover+.compass-gyro {
box-sizing: content-box; fill: #68ADFE;
} }
.compass-gyro-background:hover+.compass-gyro { .compass-rotation-marker {
fill: #68ADFE; position: absolute;
} top: 0;
width: 95px;
.compass-rotation-marker { height: 95px;
position: absolute; fill: #68ADFE;
top: 0; }
width: 95px;
height: 95px; @media screen and (max-width: 700px),
fill: #68ADFE; screen and (max-height: 420px) {
} .navigation-controls {
display: none;
@media screen and (max-width: 700px), }
screen and (max-height: 420px) { .compass {
.navigation-controls { display: none;
display: none; }
} }
.compass {
display: none; @media print {
} .navigation-controls {
} display: none;
}
@media print { .compass {
.navigation-controls { display: none;
display: none; }
} }
.compass {
display: none;
}
}

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