Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
1a02e87f by 刘远
Options

新增 页面

1 parent 939dec7d
Inline Side-by-side
Showing 59 changed files with 1856 additions and 219 deletions
No preview for this file type

553 Bytes | W: | H:

461 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.69 KB | W: | H:

27.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<template>
<div class="container">
<div class="wrapper">
<div class="box">
</div>
</div>
<div class="mian">
<div class="title">
<span>通视分析</span>
<span @click="closePop" class="close">×</span>
</div>
<div class="func-input">
<span>观察点高度</span>
<el-input-number v-model="num" controls-position="right" @change="handleChange"
style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="1" :max="10000">
</el-input-number>
<span style="margin-left: 12px;">米</span>
</div>
<div class="func-btn">
<div class="btn-wrapper add-bg" @click="startAnalysis">
<img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
<span>开始分析</span>
</div>
<div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
<img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
<span>清除分析结果</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'allSee',
components: {},
data() {
return {
step: 0.01,
num: 1,
// isAnalysis: true
}
},
mounted() {},
methods: {
closePop() {
this.$emit('closePop', 'allSee')
},
handleChange() {
},
startAnalysis() {
// this.isAnalysis = true;
},
stopAnalysis() {
// this.isAnalysis = false;
}
}
}
</script>
<style scoped>
.container {
position: relative;
color: #fff;
font-size: 16px;
width: 450px;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border: 1px solid rgba(151, 151, 151, 0.58);
}
.box {
background: rgba(4, 10, 10, 0.58);
box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
/* filter: blur(10px); */
height: 100px;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.mian {
position: relative;
width: 100%;
height: 100%;
z-index: 1000;
}
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
.title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 18px 24px;
font-size: 20px;
}
.func-input {
display: flex;
align-items: center;
/* justify-content: space-between; */
padding: 18px 24px 0px 24px;
font-size: 18px;
cursor: pointer;
}
.func {
padding: 18px 24px;
}
.func-btn {
display: flex;
padding: 18px 24px 44px 24px;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.btn-wrapper {
display: flex;
align-items: center;
width: 190px;
height: 36px;
background-image: url('../assets/弹窗按钮背景-默认.png');
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 36px;
}
.add-bg {
background-image: url('../assets/弹窗按钮背景-选中.png');
}
.close {
cursor: pointer;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(4, 10, 10, 0.58) !important;
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
background: rgba(4, 10, 10, 0.58);
}
>>>.el-input-number.is-controls-right .el-input-number__decrease,
>>>.el-input-number__increase {
border-left: 1px solid rgba(4, 10, 10, 0.58);
}
>>>.el-icon-arrow-up:before,
>>>.el-icon-arrow-down:before {
color: #fff;
}
>>>.el-input-number.is-controls-right .el-input-number__increase {
border-bottom: 1px solid rgba(4, 10, 10, 0.58);
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="wrapper">
<div class="box">
</div>
</div>
<div class="mian">
<div class="title">
<span>视域分析</span>
<span @click="closePop" class="close">×</span>
</div>
<div class="func-input">
<span class="text-right">观察点高度</span>
<el-input-number v-model="sdgc" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='0.1' :min="0" :max="10000">
</el-input-number>
<span style="margin-left: 12px;">米</span>
</div>
<div class="func-input">
<span class="text-right">观察方向</span>
<el-input-number v-model="swsd" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='1' :min="0" :max="360">
</el-input-number>
<span style="margin-left: 12px;">度</span>
</div>
<div class="func-input">
<span class="text-right">观察距离</span>
<el-input-number v-model="ymsd" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="10000">
</el-input-number>
<span style="margin-left: 12px;">米</span>
</div>
<div class="func-input">
<span class="text-right">水平视场角</span>
<el-input-number v-model="ymsd" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='1' :min="0" :max="360">
</el-input-number>
<span style="margin-left: 12px;">度</span>
</div>
<div class="func-input">
<span class="text-right">垂直视场角</span>
<el-input-number v-model="ymsd" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="360">
</el-input-number>
<span style="margin-left: 12px;">度</span>
</div>
<div class="func-btn">
<div class="btn-wrapper add-bg" @click="startAnalysis">
<img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
<span>开始分析</span>
</div>
<div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
<img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
<span>清除分析结果</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'horizon',
components: {},
data() {
return {
step: 0.01,
num: 1,
sdgc: '', // 水底高程
swsd: '', // 水位深度
ymsd: '', // 淹没速度
isXmbj: true,
// isAnalysis: true
}
},
mounted() {},
methods: {
closePop() {
this.$emit('closePop', 'horizon')
},
startAnalysis() {
},
stopAnalysis() {
},
}
}
</script>
<style scoped>
.container {
position: relative;
color: #fff;
font-size: 16px;
width: 450px;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border: 1px solid rgba(151, 151, 151, 0.58);
}
.box {
background: rgba(4, 10, 10, 0.58);
box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
/* filter: blur(10px); */
height: 100px;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.mian {
position: relative;
width: 100%;
height: 100%;
z-index: 1000;
}
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
.title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 18px 24px;
font-size: 20px;
}
.func-input {
display: flex;
align-items: center;
/* justify-content: space-between; */
padding: 18px 24px 0px 24px;
font-size: 18px;
cursor: pointer;
}
.func {
padding: 18px 24px;
}
.func-btn {
display: flex;
padding: 18px 24px 44px 24px;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.btn-wrapper {
display: flex;
align-items: center;
width: 190px;
height: 36px;
background-image: url('../assets/弹窗按钮背景-默认.png');
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 36px;
}
.add-bg {
background-image: url('../assets/弹窗按钮背景-选中.png');
}
.btn-wrapper2 {
display: flex;
align-items: center;
width: 116px;
height: 38px;
background-image: url('../assets/一张图/bg_专题分析.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 38px;
margin-left: 13px;
}
.add-bg2 {
background-image: url('../assets/一张图/bg_资源目录.png');
}
.close {
cursor: pointer;
}
.center {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
}
.text-right {
display: inline-block;
width: 90px;
text-align: right;
font-size: 18px;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(4, 10, 10, 0.58) !important;
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
background: rgba(4, 10, 10, 0.58);
}
>>>.el-input-number.is-controls-right .el-input-number__decrease,
>>>.el-input-number__increase {
border-left: 1px solid rgba(4, 10, 10, 0.58);
}
>>>.el-icon-arrow-up:before,
>>>.el-icon-arrow-down:before {
color: #fff;
}
>>>.el-input-number.is-controls-right .el-input-number__increase {
border-bottom: 1px solid rgba(4, 10, 10, 0.58);
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="wrapper">
<div class="box">
</div>
</div>
<div class="mian">
<div class="title">
<span>控高分析</span>
<span @click="closePop" class="close">×</span>
</div>
<div class="func-btn">
<div class="btn-wrapper add-bg" @click="startAnalysis">
<img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
<span>开始分析</span>
</div>
<div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
<img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
<span>清除分析结果</span>
</div>
</div>
<div class="kg-img">
<div class="kg-box">
<img :src="src" alt="" style="width: 100%; height: 100%;">
<div class="btn-wrapper2">
<span class="center">左侧立面</span>
</div>
</div>
<div class="kg-box">
<img :src="src" alt="" style="width: 100%; height: 100%;">
<div class="btn-wrapper2">
<span class="center">右侧立面</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'kgAnalusis',
components: {},
data() {
return {
src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3820738330,1510784229&fm=26&gp=0.jpg'
}
},
mounted() {},
methods: {
closePop() {
this.$emit('closePop', 'kgAnalusis')
},
startAnalysis() {
},
stopAnalysis() {
},
}
}
</script>
<style scoped>
.container {
position: relative;
color: #fff;
font-size: 16px;
width: 450px;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border: 1px solid rgba(151, 151, 151, 0.58);
}
.box {
background: rgba(4, 10, 10, 0.58);
box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
/* filter: blur(10px); */
height: 100px;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.mian {
position: relative;
width: 100%;
height: 100%;
z-index: 1000;
}
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
.title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 18px 24px;
font-size: 20px;
}
.func-input {
display: flex;
align-items: center;
/* justify-content: space-between; */
padding: 18px 24px 0px 24px;
font-size: 18px;
cursor: pointer;
}
.func {
padding: 18px 24px;
}
.func-btn {
display: flex;
padding: 18px 24px 30px 24px;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.btn-wrapper {
display: flex;
align-items: center;
width: 190px;
height: 36px;
background-image: url('../assets/弹窗按钮背景-默认.png');
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 36px;
}
.add-bg {
background-image: url('../assets/弹窗按钮背景-选中.png');
}
.btn-wrapper2 {
position: absolute;
top: 12px;
right: 24px;
display: flex;
align-items: center;
width: 116px;
height: 38px;
background-image: url('../assets/一张图/bg_专题分析.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 38px;
margin-left: 13px;
}
.add-bg2 {
background-image: url('../assets/一张图/bg_资源目录.png');
}
.close {
cursor: pointer;
}
.center {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
}
.text-right {
display: inline-block;
width: 90px;
text-align: right;
font-size: 18px;
}
.kg-img {
width: 410px;
padding: 0px 24px 0px 24px;
padding-bottom: 10px;
}
.kg-box {
width: 100%;
height: 180px;
position: relative;
margin-bottom: 20px;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(4, 10, 10, 0.58) !important;
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
background: rgba(4, 10, 10, 0.58);
}
>>>.el-input-number.is-controls-right .el-input-number__decrease,
>>>.el-input-number__increase {
border-left: 1px solid rgba(4, 10, 10, 0.58);
}
>>>.el-icon-arrow-up:before,
>>>.el-icon-arrow-down:before {
color: #fff;
}
>>>.el-input-number.is-controls-right .el-input-number__increase {
border-bottom: 1px solid rgba(4, 10, 10, 0.58);
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="list-box">
<span>规划项目</span>
<span>综合楼</span>
<div class="wrapper">
<div class="box">
</div>
</div>
<div class="list-box">
<span>建设单位</span>
<span>青海人和顺置业有限公司</span>
</div>
<div class="list-box">
<span>规划用地性质</span>
<span>B2商务设施用地</span>
</div>
<div class="list-box">
<span>总用地面积</span>
<span>26.245</span>
</div>
<div class="list-box">
<span>净用地面积</span>
<span>26.07</span>
</div>
<div class="list-box">
<span>其他面积</span>
<span>0</span>
<div class="mian">
<div class="list-box">
<span>规划项目</span>
<span>综合楼</span>
</div>
<div class="list-box">
<span>建设单位</span>
<span>青海人和顺置业有限公司</span>
</div>
<div class="list-box">
<span>规划用地性质</span>
<span>B2商务设施用地</span>
</div>
<div class="list-box">
<span>总用地面积</span>
<span>26.245</span>
</div>
<div class="list-box">
<span>净用地面积</span>
<span>26.07</span>
</div>
<div class="list-box">
<span>其他面积</span>
<span>0</span>
</div>
</div>
</div>
</template>
......@@ -32,8 +38,7 @@
name: 'mapPop',
components: {},
data() {
return {
}
return {}
},
mounted() {},
methods: {
......@@ -44,21 +49,45 @@
<style scoped>
.container {
position: relative;
color: #fff;
font-size: 16px;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.box {
background: rgba(4, 10, 10, 0.57);
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50);
/* filter: blur(10px); */
height: 100px;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.mian {
position: relative;
padding: 4px 14px 14px 14px;
font-size: 16px;
width: 100%;
height: 100%;
z-index: 1000;
}
.list-box span:nth-of-type(1){
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2){
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
......
<template>
<div class="container">
<div>
<div class="func-ico" :class="[isReturn?'selected':'']" @click="handleReturn()">
<img src="../assets/一张图/icon_复位.png" alt="">
<div class="func-ico" :class="[isReturn?'selected':'']" @click="handleReturn('isReturn')">
<el-tooltip class="item" effect="dark" content="复位" placement="left">
<img src="../assets/一张图/icon_复位.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[enlarge?'selected':'']" @click="handleEnlarge()">
<img src="../assets/一张图/icon_放大.png" alt="">
<div class="func-ico" :class="[enlarge?'selected':'']" @click="handleEnlarge('enlarge')">
<el-tooltip class="item" effect="dark" content="放大" placement="left">
<img src="../assets/一张图/icon_放大.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[narrow?'selected':'']" @click="handleNarrow()">
<img src="../assets/一张图/icon_缩小.png" alt="">
<div class="func-ico" :class="[narrow?'selected':'']" @click="handleNarrow('narrow')">
<el-tooltip class="item" effect="dark" content="缩小" placement="left">
<img src="../assets/一张图/icon_缩小.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[coordinate?'selected':'']" @click="handleCoordinate()">
<img src="../assets/一张图/icon_坐标.png" alt="">
<div class="func-ico" :class="[coordinate?'selected':'']" @click="handleCoordinate('coordinate')">
<el-tooltip class="item" effect="dark" content="坐标" placement="left">
<img src="../assets/一张图/icon_坐标.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[distance?'selected':'']" @click="handleDistance()">
<img src="../assets/一张图/icon_距离.png" alt="">
<div class="func-ico" :class="[distance?'selected':'']" @click="handleDistance('distance')">
<el-tooltip class="item" effect="dark" content="距离" placement="left">
<img src="../assets/一张图/icon_距离.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[area?'selected':'']" @click="handleArea()">
<img src="../assets/一张图/icon_面积.png" alt="">
<div class="func-ico" :class="[area?'selected':'']" @click="handleArea('area')">
<el-tooltip class="item" effect="dark" content="面积" placement="left">
<img src="../assets/一张图/icon_面积.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[marker?'selected':'']" @click="handleMarker()">
<img src="../assets/一张图/icon_标注.png" alt="">
<div class="func-ico" :class="[marker?'selected':'']" @click="handleMarker('marker')">
<el-tooltip class="item" effect="dark" content="标注" placement="left">
<img src="../assets/一张图/icon_标注.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[rollerShutter?'selected':'']" @click="handleRollerShutter()">
<img src="../assets/一张图/icon_卷帘.png" alt="">
<div class="func-ico" :class="[rollerShutter?'selected':'']" @click="handleRollerShutter('rollerShutter')">
<el-tooltip class="item" effect="dark" content="卷帘" placement="left">
<img src="../assets/一张图/icon_卷帘.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[splitScreen?'selected':'']" @click="handleSplitScreen()">
<img src="../assets/一张图/icon_分屏.png" alt="">
<div class="func-ico" :class="[splitScreen?'selected':'']" @click="handleSplitScreen('splitScreen')">
<el-tooltip class="item" effect="dark" content="分屏" placement="left">
<img src="../assets/一张图/icon_分屏.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[toNorth?'selected':'']" @click="handleToNorth()">
<img src="../assets/一张图/icon_指北.png" alt="">
<div class="func-ico" :class="[toNorth?'selected':'']" @click="handleToNorth('toNorth')">
<el-tooltip class="item" effect="dark" content="指北" placement="left">
<img src="../assets/一张图/icon_指北.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[topSee?'selected':'']" @click="handleTopSee()">
<img src="../assets/一张图/icon_顶视.png" alt="">
<div class="func-ico" :class="[topSee?'selected':'']" @click="handleTopSee('topSee')">
<el-tooltip class="item" effect="dark" content="顶视" placement="left">
<img src="../assets/一张图/icon_顶视.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[roundSee?'selected':'']" @click="handleRoundSee()">
<img src="../assets/一张图/icon_环视.png" alt="">
<div class="func-ico" :class="[roundSee?'selected':'']" @click="handleRoundSee('roundSee')">
<el-tooltip class="item" effect="dark" content="环视" placement="left">
<img src="../assets/一张图/icon_环视.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[horizon?'selected':'']" @click="handleHorizon()">
<img src="../assets/一张图/icon_视域.png" alt="">
<div class="func-ico" :class="[allSee?'selected':'']" @click="handleAllSee('allSee')">
<el-tooltip class="item" effect="dark" content="通视" placement="left">
<img src="../assets/一张图/icon_通视.png" alt="">
</el-tooltip>
</div>
<!--以下都未设计图片 -->
<!--淹没分析 -->
<div class="func-ico" :class="[ymAnslysis?'selected':'']" @click="handleymAnslysis('ymAnslysis')">
<el-tooltip class="item" effect="dark" content="淹没" placement="left">
<img src="../assets/一张图/icon_通视.png" alt="">
</el-tooltip>
</div>
<!--阴影分析 -->
<div class="func-ico" :class="[yyAnslysis?'selected':'']" @click="handleyyAnslysis('yyAnslysis')">
<el-tooltip class="item" effect="dark" content="阴影" placement="left">
<img src="../assets/一张图/icon_通视.png" alt="">
</el-tooltip>
</div>
<!--控高分析 -->
<div class="func-ico" :class="[kgAnalusis?'selected':'']" @click="handlekgAnalusis('kgAnalusis')">
<el-tooltip class="item" effect="dark" content="控高" placement="left">
<img src="../assets/一张图/icon_通视.png" alt="">
</el-tooltip>
</div>
<div class="func-ico" :class="[allSee?'selected':'']" @click="handleAllSee()">
<img src="../assets/一张图/icon_通视.png" alt="">
<!--天际线分析 -->
<div class="func-ico" :class="[tjxAnslysis?'selected':'']" @click="handletjxAnslysis('tjxAnslysis')">
<el-tooltip class="item" effect="dark" content="天际线" placement="left">
<img src="../assets/一张图/icon_通视.png" alt="">
</el-tooltip>
</div>
<!-- <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
<img src="../assets/toolbar_icon_ 展开.png" alt="">
</div> -->
......@@ -59,72 +114,73 @@
export default {
name: 'rightFunc',
components: {},
props: ['isReturn', 'enlarge', 'narrow', 'coordinate', 'distance',
'area', 'marker', 'rollerShutter', 'splitScreen', 'toNorth',
'topSee', 'roundSee', 'horizon', 'allSee','ymAnslysis',
'tjxAnslysis', 'yyAnslysis', 'kgAnalusis'
],
data() {
return {
isReturn: false, // 复位
enlarge: false, // 放大
narrow: false, // 缩小
coordinate: false, // 坐标
distance: false, // 距离
area: false, // 面积
marker: false, // 标记
rollerShutter: false, // 卷帘
splitScreen: false, // 分屏
toNorth: false, // 指北
topSee: false, // 顶视
roundSee: false, // 环视
horizon: false, // 视域
allSee: false, // 通视
}
return {}
},
mounted() {},
methods: {
handleReturn() {
this.$emit('isReturn', this.isReturn);
handleReturn(val) {
this.$emit('isReturn', val, this.isReturn);
},
handleEnlarge() {
this.$emit('enlarge', this.enlarge);
handleEnlarge(val) {
this.$emit('enlarge', val, this.enlarge);
},
handleNarrow() {
this.$emit('narrow', this.narrow);
handleNarrow(val) {
this.$emit('narrow', val, this.narrow);
},
handleCoordinate() {
this.$emit('coordinate', this.coordinate);
handleCoordinate(val) {
this.$emit('coordinate', val, this.coordinate);
},
handleDistance() {
this.$emit('distance', this.distance);
handleDistance(val) {
this.$emit('distance', val, this.distance);
},
handleArea() {
this.$emit('area', this.area);
handleArea(val) {
this.$emit('area', val, this.area);
},
handleMarker() {
this.$emit('marker', this.marker);
handleMarker(val) {
this.$emit('marker', val, this.marker);
},
handleRollerShutter() {
this.$emit('rollerShutter', this.rollerShutter);
handleRollerShutter(val) {
this.$emit('rollerShutter', val, this.rollerShutter);
},
handleSplitScreen() {
this.$emit('splitScreen', this.splitScreen);
handleSplitScreen(val) {
this.$emit('splitScreen', val, this.splitScreen);
},
handleToNorth() {
this.$emit('toNorth', this.toNorth);
handleToNorth(val) {
this.$emit('toNorth', val, this.toNorth);
},
handleTopSee() {
this.$emit('topSee', this.topSee);
handleTopSee(val) {
this.$emit('topSee', val, this.topSee);
},
handleRoundSee(val) {
this.$emit('roundSee', val, this.roundSee);
},
handleRoundSee() {
this.$emit('roundSee', this.roundSee);
handleHorizon(val) {
this.$emit('horizon', val, this.horizon);
},
handleHorizon() {
this.$emit('horizon', this.horizon);
handleAllSee(val) {
this.$emit('allSee', val, this.allSee);
},
handleAllSee() {
this.$emit('allSee', this.allSee);
handleymAnslysis(val) {
this.$emit('ymAnslysis', val, this.ymAnslysis);
},
handletjxAnslysis(val) {
this.$emit('tjxAnslysis', val, this.tjxAnslysis);
},
handleyyAnslysis(val) {
this.$emit('yyAnslysis', val, this.yyAnslysis);
},
handlekgAnalusis(val) {
this.$emit('kgAnalusis', val, this.kgAnalusis);
}
}
}
</script>
......
<template>
<div class="container">
<div class="wrapper">
<div class="box">
</div>
</div>
<div class="mian">
<div class="title">
<span>天际线分析</span>
<span @click="closePop" class="close">×</span>
</div>
<div class="func-btn">
<div class="btn-wrapper add-bg" @click="startAnalysis">
<img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
<span>绘制观察线</span>
</div>
<div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
<img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_绘制观察线.png" alt="">
<span>清除分析结果</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'tjxAnslysis',
components: {},
data() {
return {
}
},
mounted() {},
methods: {
closePop() {
this.$emit('closePop', 'tjxAnslysis')
},
startAnalysis() {
},
stopAnalysis() {
},
}
}
</script>
<style scoped>
.container {
position: relative;
color: #fff;
font-size: 16px;
width: 450px;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border: 1px solid rgba(151, 151, 151, 0.58);
}
.box {
background: rgba(4, 10, 10, 0.58);
box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
/* filter: blur(10px); */
height: 100px;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.mian {
position: relative;
width: 100%;
height: 100%;
z-index: 1000;
}
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
.title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 18px 24px;
font-size: 20px;
}
.func-input {
display: flex;
align-items: center;
/* justify-content: space-between; */
padding: 18px 24px 0px 24px;
font-size: 18px;
cursor: pointer;
}
.func {
padding: 18px 24px;
}
.func-btn {
display: flex;
padding: 18px 24px 44px 24px;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.btn-wrapper {
display: flex;
align-items: center;
width: 190px;
height: 36px;
background-image: url('../assets/弹窗按钮背景-默认.png');
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 36px;
}
.add-bg {
background-image: url('../assets/弹窗按钮背景-选中.png');
}
.btn-wrapper2 {
display: flex;
align-items: center;
width: 116px;
height: 38px;
background-image: url('../assets/一张图/bg_专题分析.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 38px;
margin-left: 13px;
}
.add-bg2 {
background-image: url('../assets/一张图/bg_资源目录.png');
}
.close {
cursor: pointer;
}
.center {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
}
.text-right {
display: inline-block;
width: 90px;
text-align: right;
font-size: 18px;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(4, 10, 10, 0.58) !important;
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
background: rgba(4, 10, 10, 0.58);
}
>>>.el-input-number.is-controls-right .el-input-number__decrease,
>>>.el-input-number__increase {
border-left: 1px solid rgba(4, 10, 10, 0.58);
}
>>>.el-icon-arrow-up:before,
>>>.el-icon-arrow-down:before {
color: #fff;
}
>>>.el-input-number.is-controls-right .el-input-number__increase {
border-bottom: 1px solid rgba(4, 10, 10, 0.58);
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="wrapper">
<div class="box">
</div>
</div>
<div class="mian">
<div class="title">
<span>淹没分析</span>
<span @click="closePop" class="close">×</span>
</div>
<div class="func-input">
<span>分析区域</span>
<div class="btn-wrapper2" :class="[isXmbj?'add-bg2': '']" @click="handleIsXmbj(true)">
<span class="center">项目边界</span>
</div>
<div class="btn-wrapper2" :class="[!isXmbj?'add-bg2': '']" @click="handleIsXmbj(false)">
<span class="center">绘制</span>
</div>
</div>
<div class="func-input">
<span>水底高程</span>
<el-input-number v-model="sdgc" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000">
</el-input-number>
<span style="margin-left: 12px;">米</span>
</div>
<div class="func-input">
<span>水位深度</span>
<el-input-number v-model="swsd" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000">
</el-input-number>
<span style="margin-left: 12px;">米</span>
</div>
<div class="func-input">
<span>淹没速度</span>
<el-input-number v-model="ymsd" controls-position="right"
style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000">
</el-input-number>
<span style="margin-left: 12px;">米</span>
</div>
<div class="func-input">
<span>当前水位</span>
<span style="margin-left: 36px;">1263.7米</span>
</div>
<div class="func-btn">
<div class="btn-wrapper add-bg" @click="startAnalysis">
<img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
<span>开始分析</span>
</div>
<div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
<img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_暂停分析.png" alt="">
<span>暂停分析</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'allSee',
components: {},
data() {
return {
step: 0.01,
num: 1,
sdgc: '', // 水底高程
swsd: '', // 水位深度
ymsd: '', // 淹没速度
isXmbj: true,
// isAnalysis: true
}
},
mounted() {},
methods: {
closePop() {
this.$emit('closePop', 'ymAnslysis')
},
handleChange() {
},
startAnalysis() {
// this.isAnalysis = true;
},
stopAnalysis() {
// this.isAnalysis = false;
},
handleIsXmbj(flag) {
this.isXmbj = flag;
}
}
}
</script>
<style scoped>
.container {
position: relative;
color: #fff;
font-size: 16px;
width: 450px;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border: 1px solid rgba(151, 151, 151, 0.58);
}
.box {
background: rgba(4, 10, 10, 0.58);
box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
/* filter: blur(10px); */
height: 100px;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.mian {
position: relative;
width: 100%;
height: 100%;
z-index: 1000;
}
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
.title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 18px 24px;
font-size: 20px;
}
.func-input {
display: flex;
align-items: center;
/* justify-content: space-between; */
padding: 18px 24px 0px 24px;
font-size: 18px;
cursor: pointer;
}
.func {
padding: 18px 24px;
}
.func-btn {
display: flex;
padding: 18px 24px 44px 24px;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.btn-wrapper {
display: flex;
align-items: center;
width: 190px;
height: 36px;
background-image: url('../assets/弹窗按钮背景-默认.png');
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 36px;
}
.add-bg {
background-image: url('../assets/弹窗按钮背景-选中.png');
}
.btn-wrapper2 {
display: flex;
align-items: center;
width: 116px;
height: 38px;
background-image: url('../assets/一张图/bg_专题分析.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 38px;
margin-left: 13px;
}
.add-bg2 {
background-image: url('../assets/一张图/bg_资源目录.png');
}
.close {
cursor: pointer;
}
.center {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(4, 10, 10, 0.58) !important;
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
background: rgba(4, 10, 10, 0.58);
}
>>>.el-input-number.is-controls-right .el-input-number__decrease,
>>>.el-input-number__increase {
border-left: 1px solid rgba(4, 10, 10, 0.58);
}
>>>.el-icon-arrow-up:before,
>>>.el-icon-arrow-down:before {
color: #fff;
}
>>>.el-input-number.is-controls-right .el-input-number__increase {
border-bottom: 1px solid rgba(4, 10, 10, 0.58);
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="wrapper">
<div class="box">
</div>
</div>
<div class="mian">
<div class="title">
<span>阴影分析</span>
<span @click="closePop" class="close">×</span>
</div>
<div class="func-btn">
<div class="btn-wrapper add-bg" @click="startAnalysis">
<img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
<span>开始分析</span>
</div>
<div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
<img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
<span>清除分析结果</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'yyAnslysis',
components: {},
data() {
return {
}
},
mounted() {},
methods: {
closePop() {
this.$emit('closePop', 'yyAnslysis')
},
startAnalysis() {
},
stopAnalysis() {
},
}
}
</script>
<style scoped>
.container {
position: relative;
color: #fff;
font-size: 16px;
width: 450px;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border: 1px solid rgba(151, 151, 151, 0.58);
}
.box {
background: rgba(4, 10, 10, 0.58);
box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
/* filter: blur(10px); */
height: 100px;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.mian {
position: relative;
width: 100%;
height: 100%;
z-index: 1000;
}
.list-box span:nth-of-type(1) {
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2) {
margin-top: 14px;
display: inline-block;
}
.title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 18px 24px;
font-size: 20px;
}
.func-input {
display: flex;
align-items: center;
/* justify-content: space-between; */
padding: 18px 24px 0px 24px;
font-size: 18px;
cursor: pointer;
}
.func {
padding: 18px 24px;
}
.func-btn {
display: flex;
padding: 18px 24px 44px 24px;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.btn-wrapper {
display: flex;
align-items: center;
width: 190px;
height: 36px;
background-image: url('../assets/弹窗按钮背景-默认.png');
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 36px;
}
.add-bg {
background-image: url('../assets/弹窗按钮背景-选中.png');
}
.btn-wrapper2 {
display: flex;
align-items: center;
width: 116px;
height: 38px;
background-image: url('../assets/一张图/bg_专题分析.png');
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
line-height: 38px;
margin-left: 13px;
}
.add-bg2 {
background-image: url('../assets/一张图/bg_资源目录.png');
}
.close {
cursor: pointer;
}
.center {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
}
.text-right {
display: inline-block;
width: 90px;
text-align: right;
font-size: 18px;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(4, 10, 10, 0.58) !important;
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
background: rgba(4, 10, 10, 0.58);
}
>>>.el-input-number.is-controls-right .el-input-number__decrease,
>>>.el-input-number__increase {
border-left: 1px solid rgba(4, 10, 10, 0.58);
}
>>>.el-icon-arrow-up:before,
>>>.el-icon-arrow-down:before {
color: #fff;
}
>>>.el-input-number.is-controls-right .el-input-number__increase {
border-bottom: 1px solid rgba(4, 10, 10, 0.58);
}
</style>
\ No newline at end of file
西双版纳6日5晚游玩
西安-西双版纳-西安 住星光夜市附近
D1 去酒店放行李 女士休息，男士去取车 [剧场]傣秀 [恰饭] 星光夜市
D2 [游玩] 中科院西双版纳热带植物园 晚上返回酒店 休整后市区转转 恰饭
D3 [游玩] 野象谷，基诺山寨 晚上返回酒店 恰饭
D5 [游玩] 西双版纳热带雨林国家公园望天树景区。
D5 [游玩] 傣族园、 告庄西双景。
D6 想去哪里就去哪里
D7 还车，准备回家
主要费用
机票 西安 - 西双版纳 往返直飞 往返单人3200左右 3200 * 2 6400
住宿 两间 10.1~10.7 400 * 6 2400 * 1 4800
租车费用 400 每天 7 天 预计2800 （看app中每天送100油卡）
大约 两人： 6400 + 4800 + 1400 12600(两人)
\ No newline at end of file
......@@ -11,20 +11,43 @@
@searchRoat='searchRoat'></rightTopFunc>
</div>
<div class="rightFunc">
<rightFunc @isReturn='isReturn'
@enlarge='enlarge'
<rightFunc @isReturn='EisReturn'
@enlarge='Eenlarge'
@narrow='narrow'
@coordinate='coordinate'
@distance='distance'
@area='area'
@marker='marker'
@rollerShutter='rollerShutter'
@splitScreen='splitScreen'
@toNorth='toNorth'
@topSee='topSee'
@roundSee='roundSee'
@horizon='horizon'
@allSee='allSee'></rightFunc>
@coordinate='Ecoordinate'
@distance='Edistance'
@area='Earea'
@marker='Emarker'
@rollerShutter='ErollerShutter'
@splitScreen='EsplitScreen'
@toNorth='EtoNorth'
@topSee='EtopSee'
@roundSee='EroundSee'
@horizon='Ehorizon'
@allSee='EallSee'
@ymAnslysis='EymAnslysis'
@tjxAnslysis='EtjxAnslysis'
@yyAnslysis='EyyAnslysis'
@kgAnalusis='EkgAnalusis'
:enlarge='enlarge'
:narrow='narrow'
:coordinate='coordinate'
:distance='distance'
:area='area'
:marker='marker'
:rollerShutter='rollerShutter'
:splitScreen='splitScreen'
:toNorth='toNorth'
:topSee='topSee'
:roundSee='roundSee'
:horizon='horizon'
:allSee='allSee'
:ymAnslysis='ymAnslysis'
:tjxAnslysis='tjxAnslysis'
:yyAnslysis='yyAnslysis'
:kgAnalusis='kgAnalusis'></rightFunc>
</div>
<div class="bottomNav">
<bottomNav></bottomNav>
......@@ -35,6 +58,30 @@
<div class="mapPop">
<mapPop></mapPop>
</div>
<div class="allSee" v-if='allSee'>
<allSee @closePop='closePop'></allSee>
</div>
<div class="allSee" v-if='ymAnslysis'>
<ymAnslysis @closePop='closePop'></ymAnslysis>
</div>
<div class="allSee" v-if='horizon'>
<horizon @closePop='closePop'></horizon>
</div>
<div class="allSee" v-if='tjxAnslysis'>
<tjxAnslysis @closePop='closePop'></tjxAnslysis>
</div>
<div class="allSee" v-if='yyAnslysis'>
<yyAnslysis @closePop='closePop'></yyAnslysis>
</div>
<div class="allSee kg-anslysis" v-if='kgAnalusis'>
<kgAnalusis @closePop='closePop'></kgAnalusis>
</div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
<div id="cesiumContainer">
<div class="" ref="slider"></div>
......@@ -55,6 +102,12 @@
import leftAssert from '../components/leftAssert';
import mapPop from '../components/mapPop';
import allSee from '../components/allSee'; //通视
import ymAnslysis from '../components/ymAnslysis'; //淹没分析
import horizon from '../components/horizon'; // 视域分析
import tjxAnslysis from '../components/tjxAnslysis'; // 天际线分析
import yyAnslysis from '../components/yyAnslysis'; // 阴影分析
import kgAnalusis from '../components/kgAnalusis'; // 控高分析
export default {
components: {
......@@ -63,14 +116,44 @@
rightFunc,
bottomNav,
leftAssert,
mapPop
mapPop,
allSee,
ymAnslysis,
horizon,
tjxAnslysis,
yyAnslysis,
kgAnalusis,
},
data() {
return {
viewer: undefined,
entity: undefined,
devTypes: ['point', 'polyline', 'polygon'],
roll: {r: undefined, b: false}
roll: {r: undefined, b: false},
isReturn: false, // 复位
enlarge: false, // 放大
narrow: false, // 缩小
coordinate: false, // 坐标
distance: false, // 距离
area: false, // 面积
marker: false, // 标记
rollerShutter: false, // 卷帘
splitScreen: false, // 分屏
toNorth: false, // 指北
topSee: false, // 顶视
roundSee: false, // 环视
horizon: false, // 视域
allSee: false, // 通视
ymAnslysis: false, // 淹没分析
tjxAnslysis: false, // 天际线分析
yyAnslysis: false, // 阴影分析
kgAnalusis: false, // 控高分析
keepArr: ['isReturn', 'enlarge', 'narrow', 'coordinate', 'distance',
'area', 'marker', 'rollerShutter', 'splitScreen', 'toNorth',
'topSee', 'roundSee', 'horizon', 'allSee', 'ymAnslysis',
'tjxAnslysis', 'yyAnslysis', 'kgAnalusis']
}
},
mounted() {
......@@ -157,29 +240,29 @@
// rightFunc
// 复位
,isReturn(val) {}
,EisReturn(val) {}
// 放大
,enlarge() {
,Eenlarge() {
this.viewer.camera.zoomIn(300);
}
// 缩小
,narrow() {
,EEnarrow() {
this.viewer.camera.zoomOut(300);
}
// 坐标
,coordinate() {
,Ecoordinate() {
}
// 距离
,distance(val) {
,Edistance(val) {
new measureTools.measureTools(this.viewer).measurePolyLine();
}
// 面积
,area(val) {
,Earea(val) {
new measureTools.measureTools(this.viewer).measurePolygon();
}
// 标记
,marker(val) {
,Emarker(val) {
// this.draw.type.point || (this.draw.type.point = new tool.attributes.point({viewer: this.viewer}));
// this.draw.create('point');
this.draw.startDraw({
......@@ -191,7 +274,7 @@
});
}
// 卷帘
,rollerShutter() {
,ErollerShutter() {
this.roll.r || (this.roll.r = new roller({
imageryLayers: this.viewer.imageryLayers,
url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb'
......@@ -203,108 +286,144 @@
this.viewer.scene.imagerySplitPosition = this.roll.b && this.$refs.slider.offsetLeft / this.$refs.slider.parentElement.offsetWidth
}
// 分屏
,splitScreen() {}
,EsplitScreen() {}
// 指北
,toNorth() {}
,EtoNorth() {}
// 顶视
,topSee() {}
,EtopSee() {}
// 环视
,roundSee() {
var parentEntity = this.viewer.entities.add(new Cesium.Entity()), positions = [], cartesian, polyline;
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.handler.setInputAction(evt => {
cartesian = this.viewer.scene.pickPosition(evt.position);
// cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
positions.push(cartesian.clone());
// addCompany.createPoint.call(this, {position: cartesian})
if(positions.length === 1) {
this.handler.setInputAction(moveEvent => {
positions[1] = this.viewer.scene.pickPosition(moveEvent.endPosition);
// positions[1] = this.draw.getCatesian3FromPX(moveEvent.endPosition, this.viewer, []);
!polyline && (polyline = addCompany.createPolyline.call(this, positions));
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
return;
}
this.handler.destroy();
// console.log(Cesium.Cartesian3.distance(positions[0], positions[1]));
// var cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
var viewPointEntity = this.viewer.entities.add({
parent: parentEntity,
position: positions[0],
ellipsoid: {
radii: new Cesium.Cartesian3(5, 5, 5),
material: Cesium.Color.GREEN
}
});
// // 世界坐标转换为投影坐标
var webMercatorProjection = new Cesium.WebMercatorProjection(this.viewer.scene.globe.ellipsoid);
var viewPointWebMercator = webMercatorProjection.project(Cesium.Cartographic.fromCartesian(positions[0]));
// // 排除碰撞监测的对象
var objectsToExclude = [viewPointEntity];
// 目标点集合
var destPoints = [];
// 视域点和目标点的距离
var radius = Cesium.Cartesian3.distance(positions[0], positions[1]); // 视距1000米
// 计算一圈
for (var i = 0; i <= 30; i++) {
// 度数转弧度
var radians = Cesium.Math.toRadians(i);
// 计算目标点
var toPoint = new Cesium.Cartesian3(viewPointWebMercator.x + radius * Math.cos(radians), viewPointWebMercator.y + radius * Math.sin(radians), 10);
// 投影坐标转世界坐标
toPoint = webMercatorProjection.unproject(toPoint);
destPoints.push(Cesium.Cartographic.toCartesian(toPoint.clone()));
}
let viewer = this.viewer;
// 绘制线
function drawLine(leftPoint, secPoint, color) {
viewer.entities.add({
polyline: {
positions: [leftPoint, secPoint],
arcType: Cesium.ArcType.NONE,
width: 5,
material: color,
depthFailMaterial: color
}
})
}
pickFromRay.call(this);
function pickFromRay() {
for (var i = 0; i < destPoints.length; i++) {
// 计算射线的方向，目标点left 视域点right
var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(destPoints[i], positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3());
console.log(direction);
// 建立射线
var ray = new Cesium.Ray(positions[0], direction);
var result = viewer.scene.pickFromRay(ray, objectsToExclude); // 计算交互点，返回第一个
showIntersection(result, destPoints[i], positions[0]);
}
}
// 处理交互点
function showIntersection(result, destPoint, cartesian) {
// 如果是场景模型的交互点，排除交互点是地球表面
if (Cesium.defined(result) && Cesium.defined(result.object)) {
drawLine(result.position, cartesian, Cesium.Color.GREEN); // 可视区域
drawLine(result.position, destPoint, Cesium.Color.RED); // 不可视区域
} else {
drawLine(cartesian, destPoint, Cesium.Color.GREEN);
}
}
this.handler.destroy();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
,EroundSee() {
// var parentEntity = this.viewer.entities.add(new Cesium.Entity()), positions = [], cartesian, polyline;
// this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
// this.handler.setInputAction(evt => {
// cartesian = this.viewer.scene.pickPosition(evt.position);
// // cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
// positions.push(cartesian.clone());
// // addCompany.createPoint.call(this, {position: cartesian})
// if(positions.length === 1) {
// this.handler.setInputAction(moveEvent => {
// positions[1] = this.viewer.scene.pickPosition(moveEvent.endPosition);
// // positions[1] = this.draw.getCatesian3FromPX(moveEvent.endPosition, this.viewer, []);
// !polyline && (polyline = addCompany.createPolyline.call(this, positions));
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// return;
// }
// this.handler.destroy();
// // console.log(Cesium.Cartesian3.distance(positions[0], positions[1]));
// // var cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
// var viewPointEntity = this.viewer.entities.add({
// parent: parentEntity,
// position: positions[0],
// ellipsoid: {
// radii: new Cesium.Cartesian3(5, 5, 5),
// material: Cesium.Color.GREEN
// }
// });
// // // 世界坐标转换为投影坐标
// var webMercatorProjection = new Cesium.WebMercatorProjection(this.viewer.scene.globe.ellipsoid);
// var viewPointWebMercator = webMercatorProjection.project(Cesium.Cartographic.fromCartesian(positions[0]));
// // // 排除碰撞监测的对象
// var objectsToExclude = [viewPointEntity];
// // 目标点集合
// var destPoints = [];
// // 视域点和目标点的距离
// var radius = Cesium.Cartesian3.distance(positions[0], positions[1]); // 视距1000米
// // 计算一圈
// for (var i = 0; i <= 30; i++) {
// // 度数转弧度
// var radians = Cesium.Math.toRadians(i);
// // 计算目标点
// var toPoint = new Cesium.Cartesian3(viewPointWebMercator.x + radius * Math.cos(radians), viewPointWebMercator.y + radius * Math.sin(radians), 10);
// // 投影坐标转世界坐标
// toPoint = webMercatorProjection.unproject(toPoint);
// destPoints.push(Cesium.Cartographic.toCartesian(toPoint.clone()));
// }
// let viewer = this.viewer;
// // 绘制线
// function drawLine(leftPoint, secPoint, color) {
// viewer.entities.add({
// polyline: {
// positions: [leftPoint, secPoint],
// arcType: Cesium.ArcType.NONE,
// width: 5,
// material: color,
// depthFailMaterial: color
// }
// })
// }
// pickFromRay.call(this);
// function pickFromRay() {
// for (var i = 0; i < destPoints.length; i++) {
// // 计算射线的方向，目标点left 视域点right
// var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(destPoints[i], positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3());
// console.log(direction);
// // 建立射线
// var ray = new Cesium.Ray(positions[0], direction);
// var result = viewer.scene.pickFromRay(ray, objectsToExclude); // 计算交互点，返回第一个
// showIntersection(result, destPoints[i], positions[0]);
// }
// }
// // 处理交互点
// function showIntersection(result, destPoint, cartesian) {
// // 如果是场景模型的交互点，排除交互点是地球表面
// if (Cesium.defined(result) && Cesium.defined(result.object)) {
// drawLine(result.position, cartesian, Cesium.Color.GREEN); // 可视区域
// drawLine(result.position, destPoint, Cesium.Color.RED); // 不可视区域
// } else {
// drawLine(cartesian, destPoint, Cesium.Color.GREEN);
// }
// }
// this.handler.destroy();
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 视域
,horizon() {
,Ehorizon(val) {
this[val] = !this[val];
this.onlySelect(val);
}
// 通视
,allSee() {}
,EallSee(val) {
this[val] = !this[val];
this.onlySelect(val);
},
// 淹没分析
EymAnslysis(val) {
this[val] = !this[val];
this.onlySelect(val);
},
// 天际线分析
EtjxAnslysis(val) {
this[val] = !this[val];
this.onlySelect(val);
},
// 阴影分析
EyyAnslysis(val) {
this[val] = !this[val];
this.onlySelect(val);
},
// 控高分析
EkgAnalusis(val) {
this[val] = !this[val];
this.onlySelect(val);
},
// 关闭pop方法
closePop(val) {
this[val] = false;
},
onlySelect(val) {
this.keepArr.forEach(ele => {
if(val == ele) {
this[ele] = this[ele];
}else {
this[ele] = false;
};
})
}
}
}
</script>
......@@ -456,4 +575,16 @@
.promptContent{
color:white;
}
.allSee {
position: absolute;
z-index: 1000;
right: 122px;
top: 416px;
}
.kg-anslysis {
top: 265px;
}
</style>
\ No newline at end of file
......