ChenZhuo
/
GCSGUI
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
pull/6/head
zhaipx 2 years 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>
<style>
@import 'components/styles/cesium-compass.css';
@import 'styles/cesium-compass.css';
#map {
width: 100vw;
height: 100vh;

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

@ -7,6 +7,7 @@
import { Angle } from '@/utils/map/angle.ts'
import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType} from 'cesium'
import {onMounted, ref} from "vue";
import {cartesian2ToCartesian3} from "@/utils/map/coordinate.ts";
let nowLatStr: string, nowLonStr: string
let lonlatStr = ref('')
let isDecimal = ref(true)
@ -17,13 +18,6 @@ onMounted(()=>{
let handler = new ScreenSpaceEventHandler(canvas)
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)
if (position) {
//将笛卡尔三维坐标转为地图坐标（弧度）
@ -35,13 +29,14 @@ onMounted(()=>{
let camera_alt = (_viewer.camera.positionCartographic.height / 1000) // 视高
// 相机低于250、俯仰角小于-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) { //如果是十进制度
lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)：${elevStr}`
lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度: ${elevStr}`
}
else {
lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)：${elevStr}`
lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)},
高度: ${elevStr}`
}
} catch (e) {}
}
@ -49,12 +44,13 @@ onMounted(()=>{
})
function lonlatClick() {
let elevStr = lonlatStr.value.split('海拔')[1]
let elevStr = lonlatStr.value.split('高度')[1]
console.log(elevStr)
if(isDecimal.value){
lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` + elevStr
lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` + elevStr
}
else {
lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度` + elevStr
}
isDecimal.value = !isDecimal.value
}
@ -74,7 +70,7 @@ function lonlatClick() {
bottom: 1px;
left: 0;
width: 100vw;
height: 2.3rem;
height: 1.7rem;
background-color: rgba(47, 53, 60, 0.8);
color: #fff;
font-size: 0.7rem;
@ -83,9 +79,9 @@ function lonlatClick() {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
#lonlatText{
margin-left: 2rem;
background: none;
border: none;
color: #ffffff;

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

@ -39,7 +39,7 @@ Ion.defaultAccessToken =
// 60.0, // 北纬
// )
onMounted(async () => {
onMounted( () => {
//初始化
viewer = initViewer(viewerDivRef.value as HTMLElement)
// 性能优化
@ -61,7 +61,7 @@ onMounted(async () => {
viewer.terrainProvider = getTDTTerrainProvider()
// 标记点图层，存储所有地标点
const markerLayer = new CustomDataSource('Marker')
await viewer.dataSources.add(markerLayer)
viewer.dataSources.add(markerLayer)
// 挂载在window，供全局组件共享
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 {
position: absolute;
padding-left: 0;
padding-right: 0;
right: .1rem;
height: 2rem;
bottom: .2rem;
font-weight: bolder;
box-sizing: content-box;
z-index: 2;
}
/*比例尺文本*/
.distance-legend-label {
display: inline-block;
font-family: 'Roboto', sans-serif;
padding-left: .5rem;
font-size: .9rem;
line-height: 1rem;
color: #FFFFFF;
width: 7.5rem;
text-align: center;
}
/*比例尺线段*/
.distance-legend-scale-bar {
border-left: .1rem solid #FFFFFF;
border-right: .1rem solid #FFFFFF;
border-bottom: .1rem solid #FFFFFF;
position: absolute;
height: .7rem;
top: 1rem;
}
@media print {
.distance-legend {
display: none;
}
}
@media screen and (max-width: 700px),
screen and (max-height: 420px) {
.distance-legend {
display: none;
}
}
/*缩放按钮外边框*/
.navigation-controls {
position: absolute;
right: 1.8rem;
top: 65vh;
width: 2rem;
border-radius: .5rem .5rem .5rem .5rem;
font-weight: 300;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.naviagation-control:active {
color: #FFF;
}
.navigation-control-last {
cursor: pointer;
border-bottom: 1px solid #b5b4b4;
border-bottom: 0;
}
/* + 按钮*/
.navigation-control-icon-zoom-in {
position: relative;
text-align: center;
font-size: 1.2rem;
color: #2c2c2c;
background: #FFFFFF;
border-radius: .5rem .5rem 0 0;
padding-bottom: 4px;
}
.navigation-control-icon-zoom-in:hover {
background: rgb(223, 223, 223);
border-radius: .5rem .5rem 0 0;
}
/* - 按钮*/
.navigation-control-icon-zoom-out {
position: relative;
text-align: center;
font-size: 1.4rem;
background: #FFFFFF;
color: #2c2c2c;
border-radius: 0 0 .5rem .5rem;
}
.navigation-control-icon-zoom-out:hover {
background: rgb(223, 223, 223);
border-radius: 0 0 .5rem .5rem;
}
/* reset 按钮*/
.navigation-control-icon-reset {
position: relative;
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;
top: 50vh;
width: 6rem;
height: 6rem;
overflow: hidden;
}
.compass-outer-ring {
position: absolute;
top: 0;
width: 6rem;;
height: 6rem;;
fill: #5b5b5b;
}
.compass-outer-ring-background {
position: absolute;
top: 14px;
left: 14px;
width: 44px;
height: 44px;
border-radius: 44px;
border: 12px solid rgb(255, 255, 255);
box-sizing: content-box;
}
.compass-gyro {
pointer-events: none;
position: absolute;
top: 0;
width: 95px;
height: 95px;
fill: #5b5b5b;
}
.compass-gyro-active {
fill: #68ADFE;
}
.compass-gyro-background {
position: absolute;
top: 31px;
left: 31px;
width: 2rem;
height: 2rem;
border-radius: 33px;
background-color: rgba(250, 250, 250, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: content-box;
}
.compass-gyro-background:hover+.compass-gyro {
fill: #68ADFE;
}
.compass-rotation-marker {
position: absolute;
top: 0;
width: 95px;
height: 95px;
fill: #68ADFE;
}
@media screen and (max-width: 700px),
screen and (max-height: 420px) {
.navigation-controls {
display: none;
}
.compass {
display: none;
}
}
@media print {
.navigation-controls {
display: none;
}
.compass {
display: none;
}
}
/*重写比例尺、罗盘、缩放控件样式 */
/*比例尺背景*/
.distance-legend {
position: absolute;
padding-left: 0;
padding-right: 0;
right: .1rem;
height: 2rem;
bottom: .2rem;
font-weight: bolder;
box-sizing: content-box;
z-index: 2;
}
/*比例尺文本*/
.distance-legend-label {
display: inline-block;
font-family: 'Roboto', sans-serif;
padding-left: .5rem;
font-size: .8rem;
color: #FFFFFF;
width: 7.5rem;
text-align: center;
}
/*比例尺线段*/
.distance-legend-scale-bar {
border-left: .1rem solid #FFFFFF;
border-right: .1rem solid #FFFFFF;
border-bottom: .1rem solid #FFFFFF;
position: absolute;
height: .7rem;
top: 1rem;
}
@media print {
.distance-legend {
display: none;
}
}
@media screen and (max-width: 700px),
screen and (max-height: 420px) {
.distance-legend {
display: none;
}
}
/*缩放按钮外边框*/
.navigation-controls {
position: absolute;
right: 1.8rem;
top: 65vh;
width: 2rem;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: .3rem .3rem .3rem .3rem;
font-weight: 300;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.naviagation-control:active {
color: #FFF;
}
.navigation-control-last {
cursor: pointer;
border-bottom: 1px solid #b5b4b4;
border-bottom: 0;
}
/* + 按钮*/
.navigation-control-icon-zoom-in {
position: relative;
text-align: center;
font-size: 1.2rem;
color: #FFFFFF;
padding-bottom: 4px;
}
.navigation-control-icon-zoom-in:hover {
background: rgba(204, 204, 204, 0.78);
border-radius: .3rem .3rem 0 0;
}
/* - 按钮*/
.navigation-control-icon-zoom-out {
position: relative;
text-align: center;
font-size: 1.4rem;
color: #FFFFFF;
}
.navigation-control-icon-zoom-out:hover {
background: rgba(204, 204, 204, 0.78);
border-radius: 0 0 .3rem .3rem;
}
/* reset 按钮*/
.navigation-control-icon-reset {
position: relative;
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;
top: 50vh;
width: 6rem;
height: 6rem;
overflow: hidden;
}
.compass-outer-ring {
position: absolute;
top: 0;
width: 6rem;;
height: 6rem;;
fill: rgba(255, 255, 255, 0.5);
}
.compass-outer-ring-background {
position: absolute;
top: 14px;
left: 14px;
width: 44px;
height: 44px;
border-radius: 44px;
border: 12px solid rgba(47, 53, 60, 0.8);
box-sizing: content-box;
}
.compass-gyro {
pointer-events: none;
position: absolute;
top: 0;
width: 95px;
height: 95px;
fill: #faf6f6;
}
.compass-gyro-active {
fill: #68ADFE;
}
.compass-gyro-background {
position: absolute;
top: 31px;
left: 31px;
width: 2rem;
height: 2rem;
border-radius: 33px;
background-color: rgba(47, 53, 60, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: content-box;
}
.compass-gyro-background:hover+.compass-gyro {
fill: #68ADFE;
}
.compass-rotation-marker {
position: absolute;
top: 0;
width: 95px;
height: 95px;
fill: #68ADFE;
}
@media screen and (max-width: 700px),
screen and (max-height: 420px) {
.navigation-controls {
display: none;
}
.compass {
display: none;
}
}
@media print {
.navigation-controls {
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({
destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
orientation: {
heading: Math.toRadians(348.4202942851978),
pitch: Math.toRadians(-89.74026687972041),
heading: Math.toRadians(0),
pitch: Math.toRadians(-90),
roll: Math.toRadians(0),
},
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
creditContainer.style.display = 'none'
// 开启深度检测
viewer.scene.globe.depthTestAgainstTerrain = true
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 = 20000000 //相机高度的最大值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10350000 //相机高度的最大值
// 设置设备像素比，可能会影响渲染性能
// viewer.resolutionScale = window.devicePixelRatio
// 视图重绘后确保清晰度

Write Preview
Loading…
Cancel
Save