分析库
This commit is contained in:
1
src/renderer/components.d.ts
vendored
1
src/renderer/components.d.ts
vendored
@ -21,6 +21,7 @@ declare module 'vue' {
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
|
||||
12
src/renderer/public/sdk/YJEarth.min.js
vendored
12
src/renderer/public/sdk/YJEarth.min.js
vendored
File diff suppressed because one or more lines are too long
@ -883,51 +883,51 @@
|
||||
}
|
||||
|
||||
/* 飞行漫游 */
|
||||
.YJ-custom-base-dialog>.content .fly-roam {
|
||||
.fly-roam>.content .fly-roam {
|
||||
width: 474px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .total-time {
|
||||
.fly-roam>.content .total-time {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table {
|
||||
.fly-roam>.content .table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .table-body {
|
||||
.fly-roam>.content .table .table-body {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .tr .th:first-child,
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .tr .td:first-child {
|
||||
.fly-roam>.content .table .tr .th:first-child,
|
||||
.fly-roam>.content .table .tr .td:first-child {
|
||||
flex: 0 0 95px;
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .tr .th:nth-child(2),
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .tr .td:nth-child(2) {
|
||||
.fly-roam>.content .table .tr .th:nth-child(2),
|
||||
.fly-roam>.content .table .tr .td:nth-child(2) {
|
||||
flex: 0 0 240px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .tr .th:last-child,
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .tr .td:last-child {
|
||||
.fly-roam>.content .table .tr .th:last-child,
|
||||
.fly-roam>.content .table .tr .td:last-child {
|
||||
flex: 0 0 140px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .table-body .tr.active {
|
||||
.fly-roam>.content .table .table-body .tr.active {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.15);
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .table-body .tr:last-child {
|
||||
.fly-roam>.content .table .table-body .tr:last-child {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .table-body .tr:last-child .input {
|
||||
.fly-roam>.content .table .table-body .tr:last-child .input {
|
||||
color: #808080;
|
||||
cursor: no-drop;
|
||||
}
|
||||
@ -940,26 +940,26 @@
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
} */
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table .action {
|
||||
.fly-roam>.content .table .action {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table i {
|
||||
.fly-roam>.content .table i {
|
||||
font-size: 18px;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table i:hover {
|
||||
.fly-roam>.content .table i:hover {
|
||||
color: #6bb4ff;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam .table i:active {
|
||||
.fly-roam>.content .table i:active {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content .fly-roam button {
|
||||
.fly-roam>.content button {
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
@ -2214,33 +2214,16 @@
|
||||
.YJ-custom-base-dialog.cut-fill>.content>div .div-item:last-child .row .unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.YJ-custom-base-dialog.cut-fill>.content>div .el-slider__button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(var(--color-sdk-base-rgb), 1);
|
||||
}
|
||||
.YJ-custom-base-dialog.cut-fill>.content>div .el-slider__bar {
|
||||
background-color: rgba(var(--color-sdk-base-rgb), 1);
|
||||
}
|
||||
.YJ-custom-base-dialog.cut-fill>.content>div .firstTip {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
.YJ-custom-base-dialog.cut-fill>.content .firstTip {
|
||||
position: absolute;
|
||||
top: 157px;
|
||||
left: 340px;
|
||||
top: 145px
|
||||
}
|
||||
.YJ-custom-base-dialog.cut-fill>.content>div .endTip {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
.YJ-custom-base-dialog.cut-fill>.content .endTip {
|
||||
position: absolute;
|
||||
top: 157px;
|
||||
left: 515px;
|
||||
top: 145px;
|
||||
left: 515px
|
||||
}
|
||||
|
||||
/* 淹没分析 */
|
||||
@ -2295,6 +2278,17 @@
|
||||
flex: 0 0 60px;
|
||||
justify-content: center;
|
||||
}
|
||||
.YJ-custom-base-dialog.submerge>.content .rangeWords {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
width: 42px;
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
/* 地形分析 */
|
||||
.YJ-custom-base-dialog.terrain-excavation>.content {
|
||||
@ -2445,40 +2439,43 @@
|
||||
.YJ-custom-base-dialog.circle-view-shed>.content {
|
||||
width: 290px;
|
||||
}
|
||||
.YJ-custom-base-dialog.circle-view-shed>.content>div .el-slider__button {
|
||||
.YJ-custom-base-dialog.circle-view-shed>.content .firstTip {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
left: 88px;
|
||||
top: 145px
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog.circle-view-shed>.content .endTip {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 145px;
|
||||
}
|
||||
|
||||
.el-popper.is-dark {
|
||||
z-index: 1000000 !important
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(var(--color-sdk-base-rgb), 1);
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog.circle-view-shed>.content>div .el-slider__bar {
|
||||
background-color: rgba(var(--color-sdk-base-rgb), 1);
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog.circle-view-shed>.content>div .firstTip {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 88px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog.circle-view-shed>.content>div .endTip {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 240px;
|
||||
}
|
||||
.el-popper.is-dark {
|
||||
z-index: 100000000 !important;
|
||||
/* 确保这个值足够高 */
|
||||
.el-slider {
|
||||
--el-slider-main-bg-color: rgba(var(--color-sdk-base-rgb), 1)
|
||||
}
|
||||
|
||||
/* 地形可视域分析 */
|
||||
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
junbiao3d: '三维军标'
|
||||
},
|
||||
effect: {
|
||||
trajectoryMotion:"轨迹运动",
|
||||
trajectoryMotion: "轨迹运动",
|
||||
electronicFence: "电子围墙",
|
||||
// nightVision: '实体墙',
|
||||
radarLightWave: "扩散光波",
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
nightVision: '夜视',
|
||||
// nightVision: '飞线',
|
||||
},
|
||||
analysis:{
|
||||
analysis: {
|
||||
inundationAnalysis: "淹没分析",
|
||||
profileAnalysis: "剖面分析",
|
||||
sightAnalysis: "视线分析",
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
contour: "等高线",
|
||||
clear: "清除",
|
||||
},
|
||||
measure:{
|
||||
measure: {
|
||||
projectionArea: "投影面积",
|
||||
projectionDistanceMeasure: '投影距离',
|
||||
areaMeasure: "贴地面积",
|
||||
@ -105,11 +105,11 @@ export default {
|
||||
lopeDistanceMeasures: '坡度',
|
||||
coorMeasure: "坐标",
|
||||
clear: "清除测量",
|
||||
|
||||
|
||||
},
|
||||
tool:{
|
||||
tool: {
|
||||
routePlan: "路径规划",
|
||||
//清除轨迹
|
||||
clearRoute: '清除轨迹',
|
||||
graffiti: "涂鸦",
|
||||
// stopGraffiti: "结束涂鸦",
|
||||
clearGraffiti: "清除涂鸦",
|
||||
@ -117,17 +117,20 @@ export default {
|
||||
coorLocation: "坐标定位",
|
||||
mouseLocation: "鼠标定位",
|
||||
annotationAggregation: "标注点聚合",
|
||||
// 卷帘对比
|
||||
// 屏幕截图
|
||||
// 高清出图
|
||||
// 视频录制
|
||||
annotation: '卷帘对比',
|
||||
screenShot: '屏幕截图',
|
||||
highQuality: '高清出图',
|
||||
videoRecord: '视频录制',
|
||||
pressModel: "模型压平",
|
||||
terrainDig: "地形开挖",
|
||||
tilesetClipping: "剖切",
|
||||
clearTilesetClipping: "清除剖切",
|
||||
projConvert: '度分秒',
|
||||
projectionConvert: '投影转换',
|
||||
gdbImport: "gdb导入"
|
||||
terrainDig: "地形开挖",
|
||||
tilesetClipping: "剖切",
|
||||
clearTilesetClipping: "清除剖切",
|
||||
projConvert: '度分秒',
|
||||
projectionConvert: '投影转换',
|
||||
gdbImport: "gdb导入",
|
||||
circleStatistics: "圆形统计",
|
||||
polygonStatistics: "多边形统计",
|
||||
|
||||
},
|
||||
bottomMenu: {
|
||||
groundText: '贴地文字',
|
||||
|
||||
BIN
src/renderer/src/assets/images/second/annotation.png
Normal file
BIN
src/renderer/src/assets/images/second/annotation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 417 B |
BIN
src/renderer/src/assets/images/second/circleStatistics.png
Normal file
BIN
src/renderer/src/assets/images/second/circleStatistics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
BIN
src/renderer/src/assets/images/second/clearRoute.png
Normal file
BIN
src/renderer/src/assets/images/second/clearRoute.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/renderer/src/assets/images/second/highQuality.png
Normal file
BIN
src/renderer/src/assets/images/second/highQuality.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 784 B |
BIN
src/renderer/src/assets/images/second/polygonStatistics.png
Normal file
BIN
src/renderer/src/assets/images/second/polygonStatistics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
BIN
src/renderer/src/assets/images/second/screenShot.png
Normal file
BIN
src/renderer/src/assets/images/second/screenShot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 549 B |
BIN
src/renderer/src/assets/images/second/videoRecord.png
Normal file
BIN
src/renderer/src/assets/images/second/videoRecord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
4
src/renderer/src/icons/svg/location.svg
Normal file
4
src/renderer/src/icons/svg/location.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9.85693359375" height="12" viewBox="0 0 9.85693359375 12" fill="none">
|
||||
<path d="M4.92857 12C1.6194 9.59999 0 7.27058 0 4.94117C0 2.18823 2.18266 0 4.92857 0C7.67449 0 9.85714 2.18823 9.85714 4.94117C9.85714 7.27058 8.23775 9.59999 4.92857 12ZM4.92857 10.0235C7.25204 8.25883 8.44897 6.56471 8.44897 4.94117C8.44897 2.96471 6.9 1.41176 4.92857 1.41176C2.95714 1.41176 1.40817 2.96471 1.40817 4.94117C1.40817 6.56471 2.6051 8.25883 4.92857 10.0235ZM4.92857 7.05882C3.73164 7.05882 2.81633 6.14118 2.81633 4.94117C2.81633 3.74117 3.73164 2.82352 4.92857 2.82352C6.1255 2.82352 7.04081 3.74117 7.04081 4.94117C7.04081 6.14118 6.1255 7.05882 4.92857 7.05882ZM4.92857 5.64706C5.35102 5.64706 5.63266 5.3647 5.63266 4.94117C5.63266 4.51764 5.35102 4.2353 4.92857 4.2353C4.50612 4.2353 4.22449 4.51764 4.22449 4.94117C4.22449 5.3647 4.50612 5.64706 4.92857 5.64706Z" fill="#FFFFFF" >
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 983 B |
4
src/renderer/src/icons/svg/mouseLocation.svg
Normal file
4
src/renderer/src/icons/svg/mouseLocation.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.36865234375" height="20.00006103515625" viewBox="0 0 19.36865234375 20.00006103515625" fill="none">
|
||||
<path d="M11.576 11.2284L11.576 20.0001L14.6489 16.2511L19.3684 15.6138L11.576 11.2284ZM12.1851 1.9763C9.39733 -0.658764 4.87883 -0.658764 2.09052 1.9763C-0.696842 4.61179 -0.696842 8.88484 2.09052 11.5203L7.13785 18.0964L10.4587 13.769L10.4587 9.33545L12.923 10.6664C14.9237 8.03041 14.6917 4.3466 12.1851 1.9763ZM7.15898 8.58755C5.46872 8.58755 4.09827 7.30834 4.09827 5.72963C4.09827 4.15137 5.46872 2.87173 7.15898 2.87173C8.84876 2.87173 10.2183 4.15137 10.2183 5.72963C10.2183 7.30834 8.84876 8.58755 7.15898 8.58755Z" fill="#00FFFF" >
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 752 B |
63
src/renderer/src/utils/communication.js
Normal file
63
src/renderer/src/utils/communication.js
Normal file
@ -0,0 +1,63 @@
|
||||
import { ipcRenderer, remote } from "electron";
|
||||
import Vue from "vue";
|
||||
import { Loading } from "element-ui";
|
||||
let bus = new Vue();
|
||||
// let bus = window.$root_home;
|
||||
let $sendChanel = (chanel, arg = {}) => {
|
||||
// let bus = new Vue();
|
||||
bus.$emit(chanel, arg);
|
||||
};
|
||||
let $recvChanel = (chanel, cb) => {
|
||||
bus.$on(chanel, cb);
|
||||
};
|
||||
let $offChanel = (chanel, cb) => {
|
||||
bus.$off(chanel);
|
||||
};
|
||||
let $removeChanel = (chanel) => {
|
||||
bus.$off(chanel);
|
||||
};
|
||||
let $sendElectronChanel = (chanel, arg = null) => {
|
||||
ipcRenderer.send(chanel, arg);
|
||||
};
|
||||
let $removeElectronChanel = (chanel, cb) => {
|
||||
ipcRenderer.removeListener(chanel, cb);
|
||||
};
|
||||
let $recvElectronChanel = (chanel, cb) => {
|
||||
ipcRenderer.once(chanel, cb);
|
||||
};
|
||||
let $changeComponentShow = (selector, state, styleStr = false) => {
|
||||
$(selector).css({ display: state ? "block" : "none" });
|
||||
if (styleStr) {
|
||||
console.log(123);
|
||||
let str = styleStr.split(":");
|
||||
if (str[0] === "top") $(selector).css({ top: str[1] });
|
||||
if (str[0] === "z-index") $(selector).css({ zIndex: str[1] });
|
||||
}
|
||||
};
|
||||
let openLoading = (
|
||||
text = "拼命加载中...",
|
||||
option = {
|
||||
fullscreen: true,
|
||||
background: "rgba(0,0,0,0.63)",
|
||||
lock: true,
|
||||
// spinner: 'el-icon-loading'
|
||||
}
|
||||
) => {
|
||||
option.text = text;
|
||||
let loadingInstance = Loading.service(option);
|
||||
return loadingInstance;
|
||||
};
|
||||
|
||||
let $remote = remote;
|
||||
export {
|
||||
openLoading,
|
||||
$sendElectronChanel,
|
||||
$removeElectronChanel,
|
||||
$recvElectronChanel,
|
||||
$sendChanel,
|
||||
$recvChanel,
|
||||
$offChanel,
|
||||
$removeChanel,
|
||||
$changeComponentShow,
|
||||
$remote,
|
||||
};
|
||||
@ -2,19 +2,30 @@
|
||||
<div class="leftBox">
|
||||
<div class="left animate__animated">
|
||||
<div class="menus">
|
||||
<div class="menus_itemBox" v-for="(item, index) in menuList" :title="t(`firstMenu.${item.name}`)">
|
||||
<div class="item_icon" @click="(e) => { handleClick(item, e) }">
|
||||
<div
|
||||
class="menus_itemBox"
|
||||
v-for="(item, index) in menuList"
|
||||
:title="t(`firstMenu.${item.name}`)"
|
||||
>
|
||||
<div
|
||||
class="item_icon"
|
||||
@click="
|
||||
(e) => {
|
||||
handleClick(item, e)
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- <svg-icon :class-name="['absolute', 'zIndex-1', 'left_item_bg']" icon-class="bg2"></svg-icon> -->
|
||||
<svg-icon :name="item.svg" :size="16" color="rgba(0, 255, 255, 1)"></svg-icon>
|
||||
<div class="item_text">
|
||||
{{ t(`firstMenu.${item.name}`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<leftSideSecond class="absolute zIndex99 leftSideSecond" ref="leftSideSecondRef"></leftSideSecond>
|
||||
<leftSideSecond
|
||||
class="absolute zIndex99 leftSideSecond"
|
||||
ref="leftSideSecondRef"
|
||||
></leftSideSecond>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_bottom" @click="fold"></div>
|
||||
@ -28,6 +39,7 @@ import { bus } from '@/utils/bus'
|
||||
import leftSideSecond from '@/views/components/leftSide/leftSideSecond.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const eventBus = inject('bus')
|
||||
const menuList = ref([
|
||||
// 方案推演
|
||||
{
|
||||
@ -52,20 +64,20 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'effect',
|
||||
children: [
|
||||
"trajectoryMotion",
|
||||
"electronicFence",
|
||||
'trajectoryMotion',
|
||||
'electronicFence',
|
||||
// "nightVision",
|
||||
"radarLightWave",
|
||||
"diffusedLightWave",
|
||||
"scanStereoscopic",
|
||||
"multilateralBody",
|
||||
"waterSurface",
|
||||
"fountain",
|
||||
"waterL",
|
||||
"fire",
|
||||
"explosion",
|
||||
"smoke",
|
||||
"nightVision",
|
||||
'radarLightWave',
|
||||
'diffusedLightWave',
|
||||
'scanStereoscopic',
|
||||
'multilateralBody',
|
||||
'waterSurface',
|
||||
'fountain',
|
||||
'waterL',
|
||||
'fire',
|
||||
'explosion',
|
||||
'smoke',
|
||||
'nightVision'
|
||||
// "nightVision",
|
||||
]
|
||||
},
|
||||
@ -76,16 +88,16 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'analysis',
|
||||
children: [
|
||||
"inundationAnalysis",
|
||||
"profileAnalysis",
|
||||
"sightAnalysis",
|
||||
"kenAnalysis",
|
||||
"circleKen",
|
||||
"slopeDirection",
|
||||
"cutFill",
|
||||
"contour",
|
||||
"globalContour",
|
||||
"clear",
|
||||
'inundationAnalysis',
|
||||
'profileAnalysis',
|
||||
'sightAnalysis',
|
||||
'kenAnalysis',
|
||||
'circleKen',
|
||||
'slopeDirection',
|
||||
'cutFill',
|
||||
'contour',
|
||||
'globalContour',
|
||||
'clear'
|
||||
]
|
||||
},
|
||||
// 测量
|
||||
@ -95,17 +107,17 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'measure',
|
||||
children: [
|
||||
"projectionArea",
|
||||
"projectionDistanceMeasure",
|
||||
"areaMeasure",
|
||||
"distanceMeasure",
|
||||
"heightMeasure",
|
||||
"triangleMeasure",
|
||||
"MeasureAzimuth",
|
||||
"MeasureAngle",
|
||||
"lopeDistanceMeasures",
|
||||
"coorMeasure",
|
||||
"clear",
|
||||
'projectionArea',
|
||||
'projectionDistanceMeasure',
|
||||
'areaMeasure',
|
||||
'distanceMeasure',
|
||||
'heightMeasure',
|
||||
'triangleMeasure',
|
||||
'MeasureAzimuth',
|
||||
'MeasureAngle',
|
||||
'lopeDistanceMeasures',
|
||||
'coorMeasure',
|
||||
'clear'
|
||||
]
|
||||
},
|
||||
|
||||
@ -116,26 +128,28 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'tool',
|
||||
children: [
|
||||
"routePlan",
|
||||
//清除轨迹
|
||||
"graffiti",
|
||||
// stopGraffiti: "结束涂鸦",
|
||||
"clearGraffiti",
|
||||
"path",
|
||||
"coorLocation",
|
||||
"mouseLocation",
|
||||
"annotationAggregation",
|
||||
// 卷帘对比
|
||||
// 屏幕截图
|
||||
// 高清出图
|
||||
// 视频录制
|
||||
"pressModel",
|
||||
"terrainDig",
|
||||
"tilesetClipping",
|
||||
"clearTilesetClipping",
|
||||
"projConvert",
|
||||
"projectionConvert",
|
||||
"gdbImport",
|
||||
// 'routePlan',
|
||||
// 'clearRoute',
|
||||
// 'graffiti',
|
||||
// // stopGraffiti: "结束涂鸦",
|
||||
// 'clearGraffiti',
|
||||
// 'path',
|
||||
// 'coorLocation',
|
||||
// 'mouseLocation',
|
||||
// 'annotationAggregation',
|
||||
// 'annotation',
|
||||
// 'screenShot',
|
||||
// 'highQuality',
|
||||
// 'videoRecord',
|
||||
// 'pressModel',
|
||||
// 'terrainDig',
|
||||
// 'tilesetClipping',
|
||||
// 'clearTilesetClipping',
|
||||
// 'projConvert',
|
||||
// 'projectionConvert',
|
||||
// 'gdbImport',
|
||||
// 'circleStatistics',
|
||||
// 'polygonStatistics'
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -170,12 +184,12 @@ onMounted(() => {
|
||||
})
|
||||
const leftSideSecondRef = ref()
|
||||
const handleClick = (item: any, e) => {
|
||||
console.log("点击了", item, e);
|
||||
$(".leftSideSecond")[0].style.left = "100%";
|
||||
$(".leftSideSecond")[0].style.top = e.layerY - 120 + "px"
|
||||
$(".leftSideSecond")[0].style.display = "none"
|
||||
console.log('点击了', item, e)
|
||||
$('.leftSideSecond')[0].style.left = '100%'
|
||||
$('.leftSideSecond')[0].style.top = e.layerY - 120 + 'px'
|
||||
$('.leftSideSecond')[0].style.display = 'none'
|
||||
if (item.children.length) {
|
||||
$(".leftSideSecond")[0].style.display = "block"
|
||||
$('.leftSideSecond')[0].style.display = 'block'
|
||||
leftSideSecondRef.value.initList(item)
|
||||
}
|
||||
}
|
||||
@ -228,6 +242,24 @@ const fold = () => {
|
||||
(itemCount - 1) * itemDelay + itemDuration
|
||||
)
|
||||
}
|
||||
|
||||
const clickMenu = (item: any) => {
|
||||
console.log(item, 'item')
|
||||
switch (item.key) {
|
||||
case 'analysis':
|
||||
console.log('analysis')
|
||||
// eventBus.emit('analysisDialog')
|
||||
eventBus.emit('circleViewShedDialog') //添加高程后测试
|
||||
// eventBus.emit('submergeDialog')
|
||||
// eventBus.emit('profileDialog')
|
||||
// eventBus.emit('viewShedDialog')
|
||||
// eventBus.emit('cutFillDialog')
|
||||
// eventBus.emit('contourDialog')
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -321,10 +353,6 @@ const fold = () => {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
<template>
|
||||
<div class="leftSideSecond">
|
||||
<div class="leftSideSecondBox">
|
||||
|
||||
<template v-if="obj">
|
||||
<div class="menuItem" v-for="value in obj.children" @click="handleClick(value)">
|
||||
<img :src="'src/assets/images/second/' + `${value}` + '.png'" alt="">
|
||||
<span>{{ t(`${obj.key}.${value}`) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="leftSideSecond">
|
||||
<div class="leftSideSecondBox">
|
||||
<template v-if="obj">
|
||||
<div class="menuItem" v-for="value in obj.children" @click="handleClick(value)">
|
||||
<img
|
||||
:src="'src/assets/images/second/' + `${value}` + '.png'"
|
||||
style="color: rgb(255, 0, 0)"
|
||||
alt=""
|
||||
/>
|
||||
<span :style="{ color: !clickChange[value] ? 'var(--color-text)' : 'rgb(255,0,0)' }">{{
|
||||
t(`${obj.key}.${value}`)
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ref, reactive, getCurrentInstance } from "vue"
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { useTreeNode } from '../tree/hooks/treeNode'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import { renderMethods } from '../tree/hooks/renderTreeNode'
|
||||
@ -21,142 +26,273 @@ const { proxy } = getCurrentInstance()
|
||||
const { t } = useI18n()
|
||||
const { findParentId, findTreeIndex } = useTreeNode()
|
||||
const obj = ref(null)
|
||||
const isclick = ref(false)
|
||||
const eventBus = inject('bus')
|
||||
const initList = (value) => {
|
||||
obj.value = value
|
||||
obj.value = value
|
||||
}
|
||||
var clickChange = reactive({
|
||||
mouseLocation: false,
|
||||
annotation: false,
|
||||
annotationAggregation: false,
|
||||
videoRecord: false
|
||||
})
|
||||
var graffitiObjArr = reactive([])
|
||||
eventBus.on('graffitiObj', (data) => {
|
||||
graffitiObjArr.push(data)
|
||||
})
|
||||
const methodMap = {
|
||||
// 电子围墙
|
||||
electronicFence: () => {
|
||||
let draw = new YJ.Draw.DrawPolyline(window.earth);
|
||||
draw.start((err, positions) => {
|
||||
if (positions.length > 1) {
|
||||
let alt = positions[0].alt;
|
||||
positions.forEach((item) => {
|
||||
if (item.alt < alt) alt = item.alt;
|
||||
});
|
||||
let id = proxy.$md5(new Date().getTime() + "围墙");
|
||||
let params = {
|
||||
sourceName: "电子围墙",
|
||||
id,
|
||||
sourceType: "wallStereoscopic",
|
||||
parentId: findParentId(window.treeObj),
|
||||
params: {
|
||||
id,
|
||||
positions,
|
||||
color: "#fff",
|
||||
cornerType: undefined,
|
||||
extrudedHeight: 2.4,
|
||||
width: 0.24,
|
||||
},
|
||||
treeIndex: findTreeIndex(window.treeObj)
|
||||
}
|
||||
// console.log(params);
|
||||
// 渲染电子围墙
|
||||
renderMethods.renderWallStereoscopic(params)
|
||||
// 存入数据库
|
||||
let res = TreeApi.addOtherSource(params)
|
||||
console.log("addOtherSource", res);
|
||||
// 上树
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
}
|
||||
// 电子围墙
|
||||
electronicFence: () => {
|
||||
let draw = new YJ.Draw.DrawPolyline(window.earth)
|
||||
draw.start((err, positions) => {
|
||||
if (positions.length > 1) {
|
||||
let alt = positions[0].alt
|
||||
positions.forEach((item) => {
|
||||
if (item.alt < alt) alt = item.alt
|
||||
})
|
||||
let id = proxy.$md5(new Date().getTime() + '围墙')
|
||||
let params = {
|
||||
sourceName: '电子围墙',
|
||||
id,
|
||||
sourceType: 'wallStereoscopic',
|
||||
parentId: findParentId(window.treeObj),
|
||||
params: {
|
||||
id,
|
||||
positions,
|
||||
color: '#fff',
|
||||
cornerType: undefined,
|
||||
extrudedHeight: 2.4,
|
||||
width: 0.24
|
||||
},
|
||||
treeIndex: findTreeIndex(window.treeObj)
|
||||
}
|
||||
// console.log(params);
|
||||
// 渲染电子围墙
|
||||
renderMethods.renderWallStereoscopic(params)
|
||||
// 存入数据库
|
||||
let res = TreeApi.addOtherSource(params)
|
||||
console.log('addOtherSource', res)
|
||||
// 上树
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
}
|
||||
})
|
||||
},
|
||||
// 扩散光波
|
||||
radarLightWave: () => {
|
||||
let draw = new YJ.Draw.DrawCircle(window.earth)
|
||||
draw.start((err, params) => {
|
||||
console.log(params)
|
||||
if (params) {
|
||||
}
|
||||
})
|
||||
},
|
||||
//投影面积
|
||||
projectionArea: () => {
|
||||
new YJ.Measure.MeasureTyArea(window.earth).start()
|
||||
},
|
||||
//投影距离测量
|
||||
projectionDistanceMeasure: () => {
|
||||
new YJ.Measure.MeasureProjectionDistance(window.earth).start()
|
||||
},
|
||||
areaMeasure: () => {
|
||||
new YJ.Measure.MeasureTdArea(window.earth).start()
|
||||
},
|
||||
//距离测量
|
||||
distanceMeasure: () => {
|
||||
new YJ.Measure.MeasureDistance(window.earth).start()
|
||||
},
|
||||
//高度测量
|
||||
heightMeasure: () => {
|
||||
new YJ.Measure.MeasureHeight(window.earth).start()
|
||||
},
|
||||
//三角测量
|
||||
triangleMeasure: () => {
|
||||
new YJ.Measure.MeasureTriangle(window.earth).start()
|
||||
},
|
||||
// 方位角
|
||||
MeasureAzimuth() {
|
||||
new YJ.Measure.MeasureAzimuth(window.earth).start()
|
||||
},
|
||||
//夹角测量
|
||||
MeasureAngle() {
|
||||
new YJ.Measure.MeasureAngle(window.earth).start()
|
||||
},
|
||||
// 坡度测量
|
||||
lopeDistanceMeasures() {
|
||||
new YJ.Measure.MeasureSlopeDistance(window.earth).start()
|
||||
},
|
||||
//坐标测量
|
||||
coorMeasure() {
|
||||
new YJ.Measure.MeasureLocation(window.earth).start()
|
||||
},
|
||||
//清除测量
|
||||
clear() {
|
||||
YJ.Measure.Clear()
|
||||
},
|
||||
//淹没分析
|
||||
inundationAnalysis() {
|
||||
eventBus.emit('submergeDialog')
|
||||
},
|
||||
//剖面分析
|
||||
profileAnalysis() {
|
||||
eventBus.emit('profileDialog')
|
||||
},
|
||||
// 视线分析
|
||||
sightAnalysis() {
|
||||
eventBus.emit('analysisDialog')
|
||||
},
|
||||
//视域分析
|
||||
kenAnalysis() {
|
||||
eventBus.emit('viewShedDialog')
|
||||
},
|
||||
//圆形视域分析
|
||||
circleKen() {
|
||||
eventBus.emit('circleViewShedDialog')
|
||||
},
|
||||
//坡向分析
|
||||
slopeDirection() {
|
||||
new YJ.Analysis.SlopeAspect(window.earth)
|
||||
},
|
||||
// 填挖方分析
|
||||
cutFill() {
|
||||
eventBus.emit('cutFillDialog')
|
||||
},
|
||||
//全局等高线分析
|
||||
globalContour() {
|
||||
eventBus.emit('contourDialog')
|
||||
},
|
||||
//等高线分析
|
||||
contour() {
|
||||
let Draw = new YJ.Draw.DrawRect(window.earth)
|
||||
Draw.start((a, positions) => {
|
||||
// 等高线
|
||||
new YJ.Analysis.Contour(window.earth, { positions: positions })
|
||||
// YJ.Analysis.Clear();
|
||||
})
|
||||
},
|
||||
//分析清除
|
||||
clear() {
|
||||
YJ.Analysis.Clear()
|
||||
},
|
||||
//----------------工具------------------
|
||||
//路径规划
|
||||
routePlan() {
|
||||
eventBus.emit('routePlanningDialog')
|
||||
},
|
||||
//路径清除
|
||||
clearRoute() {},
|
||||
//涂鸦
|
||||
graffiti() {
|
||||
eventBus.emit('graffitiDialog')
|
||||
},
|
||||
//涂鸦清除
|
||||
clearGraffiti() {
|
||||
graffitiObjArr.forEach((item) => {
|
||||
item.remove()
|
||||
})
|
||||
},
|
||||
//路径
|
||||
path() {
|
||||
eventBus.emit('flyRoamDialog')
|
||||
},
|
||||
//坐标定位
|
||||
coorLocation() {
|
||||
eventBus.emit('coorLocationDialog')
|
||||
},
|
||||
//鼠标定位
|
||||
mouseLocation() {
|
||||
clickChange.mouseLocation = !clickChange.mouseLocation
|
||||
new YJ.Global.MouseCoordinate(window.earth, clickChange.mouseLocation)
|
||||
},
|
||||
//聚合标注
|
||||
annotationAggregation() {
|
||||
clickChange.annotationAggregation = !clickChange.annotationAggregation
|
||||
|
||||
},
|
||||
// 扩散光波
|
||||
radarLightWave: () => {
|
||||
let draw = new YJ.Draw.DrawCircle(window.earth);
|
||||
draw.start((err, params) => {
|
||||
console.log(params);
|
||||
if (params) {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
//投影面积
|
||||
projectionArea: () => {
|
||||
new YJ.Measure.MeasureTyArea(window.earth).start();
|
||||
},
|
||||
//投影距离测量
|
||||
projectionDistanceMeasure: () => {
|
||||
new YJ.Measure.MeasureProjectionDistance(window.earth).start();
|
||||
},
|
||||
areaMeasure: () => {
|
||||
new YJ.Measure.MeasureTdArea(window.earth).start();
|
||||
},
|
||||
//距离测量
|
||||
distanceMeasure: () => {
|
||||
new YJ.Measure.MeasureDistance(window.earth).start();
|
||||
},
|
||||
//高度测量
|
||||
heightMeasure: () => {
|
||||
new YJ.Measure.MeasureHeight(window.earth).start();
|
||||
},
|
||||
//三角测量
|
||||
triangleMeasure: () => {
|
||||
new YJ.Measure.MeasureTriangle(window.earth).start();
|
||||
},
|
||||
// 方位角
|
||||
MeasureAzimuth() {
|
||||
new YJ.Measure.MeasureAzimuth(window.earth).start();
|
||||
},
|
||||
//夹角测量
|
||||
MeasureAngle() {
|
||||
new YJ.Measure.MeasureAngle(window.earth).start();
|
||||
},
|
||||
// 坡度测量
|
||||
lopeDistanceMeasures() {
|
||||
new YJ.Measure.MeasureSlopeDistance(window.earth).start();
|
||||
},
|
||||
//坐标测量
|
||||
coorMeasure() {
|
||||
new YJ.Measure.MeasureLocation(window.earth).start();
|
||||
},
|
||||
//清除测量
|
||||
clear() {
|
||||
YJ.Measure.Clear();
|
||||
},
|
||||
YJ.Global.switchCluster(window.earth, clickChange.annotationAggregation)
|
||||
},
|
||||
//卷帘对比
|
||||
annotation() {
|
||||
clickChange.annotation = !clickChange.annotation
|
||||
// if (clickChange.annotation) {
|
||||
// YJ.Global.splitScreen.on(window.earth)
|
||||
// } else {
|
||||
// YJ.Global.splitScreen.off()
|
||||
// }
|
||||
},
|
||||
//屏幕截图
|
||||
screenShot() {},
|
||||
//高清出图
|
||||
highQuality() {
|
||||
// eventBus.emit('screenShotDialog')
|
||||
YJ.Global.ScreenShotHD(window.earth)
|
||||
},
|
||||
//视频录制
|
||||
videoRecord() {
|
||||
clickChange.videoRecord = !clickChange.videoRecord
|
||||
},
|
||||
//压模
|
||||
pressModel() {},
|
||||
//地形开挖
|
||||
terrainDig() {
|
||||
eventBus.emit('terrainExcavationDialog')
|
||||
},
|
||||
//剖切
|
||||
tilesetClipping() {},
|
||||
//删除剖切
|
||||
clearTilesetClipping() {},
|
||||
//度分秒
|
||||
projConvert() {},
|
||||
//投影转换
|
||||
projectionConvert() {},
|
||||
//GDB导入
|
||||
gdbImport() {},
|
||||
//圆形统计
|
||||
circleStatistics() {},
|
||||
//多边形统计
|
||||
polygonStatistics() {}
|
||||
}
|
||||
|
||||
const handleClick = (value = 'projectionDistanceMeasure') => {
|
||||
methodMap[value]()
|
||||
console.log('点击了', value)
|
||||
methodMap[value]()
|
||||
}
|
||||
defineExpose({
|
||||
initList
|
||||
initList
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.leftSideSecond {
|
||||
display: none;
|
||||
height: 365px;
|
||||
width: 275px;
|
||||
background: url("@/assets/images/secondBj.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 13px 4px 13px 11px;
|
||||
display: none;
|
||||
height: 365px;
|
||||
width: 275px;
|
||||
background: url('@/assets/images/secondBj.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 13px 4px 13px 11px;
|
||||
|
||||
.leftSideSecondBox {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
.leftSideSecondBox {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.menuItem {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
.menuItem {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
123
src/renderer/src/views/components/propertyBox/CircleViewShed.vue
Normal file
123
src/renderer/src/views/components/propertyBox/CircleViewShed.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="circle-view-shed"
|
||||
title="圆形视域分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">视点高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
id="viewPointHeight"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="0.1"
|
||||
v-model="viewPointHeight"
|
||||
@input="viewPointHeightInput"
|
||||
@change="viewPointHeightChange"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">采样精度</span>
|
||||
<!-- <input
|
||||
id="precision"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="100"
|
||||
step="1"
|
||||
v-model="precision"
|
||||
@input="precisionInput"
|
||||
@change="precisionChange"
|
||||
/>
|
||||
<span class="arrow"></span> -->
|
||||
<el-slider
|
||||
v-model="precision"
|
||||
:min="0"
|
||||
:max="360"
|
||||
placement="bottom"
|
||||
@change="precisionInput"
|
||||
/>
|
||||
<span class="firstTip">0</span>
|
||||
<span class="endTip">360</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
const viewPointHeight: any = ref(1.8)
|
||||
const precision: any = ref(20)
|
||||
|
||||
var visibility: any = reactive([])
|
||||
eventBus.on('circleViewShedDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
visibility = new YJ.Analysis.CircleViewShed(window.earth, {
|
||||
viewPointHeight: viewPointHeight.value,
|
||||
precision: precision.value
|
||||
})
|
||||
})
|
||||
const closeCallBack = (e) => {
|
||||
viewPointHeight.value = 1.8
|
||||
precision.value = 20
|
||||
YJ.Measure.SetMeasureStatus(false)
|
||||
}
|
||||
|
||||
const viewPointHeightChange = () => {
|
||||
visibility.viewPointHeights = viewPointHeight.value
|
||||
}
|
||||
const viewPointHeightInput = () => {
|
||||
let dom = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const precisionInput = () => {
|
||||
// let dom = document.getElementById('precision')
|
||||
// if (precision.value < dom.min * 1) {
|
||||
// precision.value = dom.min * 1
|
||||
// } else if (precision.value > dom.max * 1) {
|
||||
// precision.value = dom.max * 1
|
||||
// }
|
||||
console.log(precision, 'eeeeee')
|
||||
visibility.precisions = precision.value
|
||||
}
|
||||
const precisionChange = () => {
|
||||
console.log(precision, 'yyyy')
|
||||
}
|
||||
const draw = (e) => {
|
||||
visibility.draw()
|
||||
// visibility.create(this)
|
||||
// !window.analysisArr && (window.analysisArr = [])
|
||||
// window.analysisArr.push(visibility)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
173
src/renderer/src/views/components/propertyBox/Contour.vue
Normal file
173
src/renderer/src/views/components/propertyBox/Contour.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="contour"
|
||||
title="全局等高线"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">等高线</span>
|
||||
<input class="btn-switch show" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">等高距</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input equal-height-distance"
|
||||
id="equalHeightDistance"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="1000"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 60px"></div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 157px">
|
||||
<span class="label">选中线颜色</span>
|
||||
<div class="active-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">计曲线</span>
|
||||
<input class="btn-switch index-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">计曲线颜色</span>
|
||||
<div class="index-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">计曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input index-contour-width"
|
||||
type="number"
|
||||
title=""
|
||||
step="0.1"
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">首曲线</span>
|
||||
<input class="btn-switch intermediate-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">首曲线颜色</span>
|
||||
<div class="intermediate-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">首曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input intermediate-contour-width"
|
||||
type="number"
|
||||
step="0.1"
|
||||
title=""
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">间曲线</span>
|
||||
<input class="btn-switch halfInterval-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">间曲线颜色</span>
|
||||
<div class="halfInterval-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">间曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input halfInterval-contour-width"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">助曲线</span>
|
||||
<input class="btn-switch supplementary-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">助曲线颜色</span>
|
||||
<div class="supplementary-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">助曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input supplementary-contour-width"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
|
||||
eventBus.on('contourDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
YJ.Global.Contour(window.earth)
|
||||
})
|
||||
})
|
||||
const closeCallBack = (e) => {}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
218
src/renderer/src/views/components/propertyBox/CoorLocation.vue
Normal file
218
src/renderer/src/views/components/propertyBox/CoorLocation.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="coorLocation"
|
||||
title="坐标定位"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="小数格式" name="first">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 58%">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" v-model="longitude" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 58%">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" v-model="latitude" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">定位</span>
|
||||
<button @click="flyto"><svg-icon name="location" :size="12" />跳转</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="度分秒格式" name="second">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 78%">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" v-model="longitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="lngMin" />
|
||||
<span class="label2">分</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 78%">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" v-model="latitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="latMin" />
|
||||
<span class="label2">分</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">定位</span>
|
||||
<button @click="flyto"><svg-icon name="location" :size="12" />跳转</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="度分格式" name="third">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 90%">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" v-model="longitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="lngMin" />
|
||||
<span class="label2">分</span>
|
||||
<input class="input" type="number" v-model="lngSec" />
|
||||
<span class="label2">秒</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 90%">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" v-model="latitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="latMin" />
|
||||
<span class="label2">分</span>
|
||||
<input class="input" type="number" v-model="latSec" />
|
||||
<span class="label2">秒</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">定位</span>
|
||||
<button @click="flyto"><svg-icon name="location" :size="12" />跳转</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
var longitude = ref(null)
|
||||
var latitude = ref(null)
|
||||
|
||||
var lngMin = ref(null)
|
||||
var latMin = ref(null)
|
||||
|
||||
var lngSec = ref(null)
|
||||
var latSec = ref(null)
|
||||
|
||||
eventBus.on('coorLocationDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
})
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
longitude.value = null
|
||||
latitude.value = null
|
||||
lngMin.value = null
|
||||
latMin.value = null
|
||||
lngSec.value = null
|
||||
latSec.value = null
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
longitude.value = null
|
||||
latitude.value = null
|
||||
lngMin.value = null
|
||||
latMin.value = null
|
||||
lngSec.value = null
|
||||
latSec.value = null
|
||||
}
|
||||
const flyto = (e) => {
|
||||
switch (activeName.value) {
|
||||
case 'first':
|
||||
new YJ.Global.flyTo(window.earth, {
|
||||
position: { lng: longitude.value, lat: latitude.value, alt: 100 }
|
||||
})
|
||||
break
|
||||
case 'second':
|
||||
var lng = Math.abs(longitude.value) + Math.abs(lngMin.value) / 60
|
||||
var lat = Math.abs(latitude.value) + Math.abs(latMin.value) / 60
|
||||
lng = longitude.value < 0 ? -lng : lng
|
||||
lat = latitude.value < 0 ? -lat : lat
|
||||
|
||||
var position = { lng, lat, alt: 100 }
|
||||
new YJ.Global.flyTo(window.earth, {
|
||||
position: position
|
||||
})
|
||||
break
|
||||
case 'third':
|
||||
var lng =
|
||||
Math.abs(longitude.value) + Math.abs(lngMin.value) / 60 + Math.abs(lngSec.value) / 3600
|
||||
var lat =
|
||||
Math.abs(latitude.value) + Math.abs(latMin.value) / 60 + Math.abs(latSec.value) / 3600
|
||||
|
||||
lng = longitude.value < 0 ? -lng : lng
|
||||
lat = latitude.value < 0 ? -lat : lat
|
||||
|
||||
var position = { lng, lat, alt: 100 }
|
||||
new YJ.Global.flyTo(window.earth, {
|
||||
position: position
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
const draw = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .label2 {
|
||||
margin: 0 10px;
|
||||
}
|
||||
::v-deep .el-tabs__item {
|
||||
padding: 0px 30px 0px 0px !important;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
::v-deep .el-tabs__item.is-active,
|
||||
.el-tabs__item:hover {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 0px;
|
||||
text-shadow: 0px 0px 9px rgb(20, 118, 255);
|
||||
}
|
||||
</style>
|
||||
187
src/renderer/src/views/components/propertyBox/CutFill.vue
Normal file
187
src/renderer/src/views/components/propertyBox/CutFill.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="cut-fill"
|
||||
title="土方分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 70px">绘制分析区域</span>
|
||||
<button class="draw-btn" @click="draw">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>开始绘制
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">基准高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
id="height"
|
||||
type="number"
|
||||
title=""
|
||||
min="-999999"
|
||||
max="999999"
|
||||
v-model="height"
|
||||
@input="heightInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">精度</span>
|
||||
<!-- <div class="input-number input-number-unit">
|
||||
<input
|
||||
class="input"
|
||||
id="precision"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="1250"
|
||||
v-model="precision"
|
||||
@input="precisionInput"
|
||||
/>
|
||||
<span class="arrow"></span>
|
||||
</div> -->
|
||||
<el-slider v-model="precision" :min="0" :max="360" @change="precisionInput" />
|
||||
<span class="firstTip">0</span>
|
||||
<span class="endTip">360</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 74px">总分析面积:</span>
|
||||
<span class="text-number" name="allArea">{{ allArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 90px">无须填挖面积:</span>
|
||||
<span class="text-number" name="noArea">{{ noArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 74px">填方面积:</span>
|
||||
<span class="text-number" name="fillArea">{{ fillArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 90px">挖方面积:</span>
|
||||
<span class="text-number" name="cutArea">{{ cutArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 74px">填方体积:</span>
|
||||
<span class="text-number" name="fillVolume">{{ fillVolume }}</span>
|
||||
<span class="unit text-number">m³</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 90px">挖方体积:</span>
|
||||
<span class="text-number" name="cutVolume">{{ cutVolume }}</span>
|
||||
<span class="unit text-number">m³</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
|
||||
var height: any = ref(70)
|
||||
var precision: any = ref(125)
|
||||
var allArea: any = ref(0)
|
||||
var noArea: any = ref(0)
|
||||
var fillArea: any = ref(0)
|
||||
var cutArea: any = ref(0)
|
||||
var fillVolume: any = ref(0)
|
||||
var cutVolume: any = ref(0)
|
||||
|
||||
var cutFill: any = reactive([])
|
||||
|
||||
eventBus.on('cutFillDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
cutFill = new YJ.Analysis.CutFillAnalysis(window.earth, {
|
||||
height: height.value,
|
||||
precision: precision.value
|
||||
})
|
||||
})
|
||||
|
||||
const heightInput = () => {
|
||||
let dom = document.getElementById('height')
|
||||
if (height.value < dom.min * 1) {
|
||||
height.value = dom.min * 1
|
||||
} else if (height.value > dom.max * 1) {
|
||||
height.value = dom.max * 1
|
||||
}
|
||||
cutFill.heights = height.value
|
||||
}
|
||||
const precisionInput = () => {
|
||||
// let dom = document.getElementById('precision')
|
||||
// if (precision.value < dom.min * 1) {
|
||||
// precision.value = dom.min * 1
|
||||
// } else if (precision.value > dom.max * 1) {
|
||||
// precision.value = dom.max * 1
|
||||
// }
|
||||
cutFill.precisions = precision.value
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
height.value = 70
|
||||
precision.value = 125
|
||||
allArea.value = 0
|
||||
noArea.value = 0
|
||||
fillArea.value = 0
|
||||
cutArea.value = 0
|
||||
fillVolume.value = 0
|
||||
cutVolume.value = 0
|
||||
|
||||
cutFill && cutFill.clean()
|
||||
YJ.Measure.SetMeasureStatus(false)
|
||||
// visibility && visibility.end()
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
cutFill.create()
|
||||
cutFill.onEnd = () => {
|
||||
height.value = cutFill.heights
|
||||
precision.value = cutFill.precisions
|
||||
allArea.value = cutFill.allArea
|
||||
noArea.value = cutFill.noArea
|
||||
fillArea.value = cutFill.fillArea
|
||||
cutArea.value = cutFill.cutArea
|
||||
fillVolume.value = cutFill.fillVolume
|
||||
cutVolume.value = cutFill.cutVolume
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
157
src/renderer/src/views/components/propertyBox/FlyRoam.vue
Normal file
157
src/renderer/src/views/components/propertyBox/FlyRoam.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="fly-roam"
|
||||
title="飞行漫游"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content v-if="show">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" type="text" name="name" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isTotalTime"
|
||||
style="
|
||||
width: 16px;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
"
|
||||
/>
|
||||
<span class="label">设置总时长</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input total-time"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999.99"
|
||||
step="0.01"
|
||||
name="totalTime"
|
||||
value="0"
|
||||
/>
|
||||
<span class="unit" style="top: 6px">秒(s)</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="repeat"
|
||||
style="
|
||||
width: 16px;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
"
|
||||
/>
|
||||
<span class="label">是否循环播放</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="add-point">
|
||||
<svg class="icon-add"><use xlink:href="#yj-icon-add"></use></svg>增加视点
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="modify-point">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>调整视点
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="afreshPlay">
|
||||
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>播放
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="cease">
|
||||
<svg class="icon-pause"><use xlink:href="#yj-icon-pause"></use></svg>结束
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">序号</div>
|
||||
<div class="th">时长(s)</div>
|
||||
<div class="th">操作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-empty">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
|
||||
var show: any = ref(false)
|
||||
var flyRoam: any = reactive([])
|
||||
eventBus.on('flyRoamDialog', () => {
|
||||
show.value = true
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
flyRoam = YJ.Global.FlyRoam.open(window.earth, { repeat: Infinity })
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const clangeViewPointHeight = () => {}
|
||||
const viewPointHeightInput = () => {
|
||||
let dom = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
YJ.Global.FlyRoam.cease(window.earth)
|
||||
YJ.Global.FlyRoam.close()
|
||||
}
|
||||
const draw = (e) => {}
|
||||
const close = (e) => {
|
||||
show.value = false
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
85
src/renderer/src/views/components/propertyBox/Graffiti.vue
Normal file
85
src/renderer/src/views/components/propertyBox/Graffiti.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="graffiti"
|
||||
title="涂鸦参数"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">涂鸦颜色</span>
|
||||
<div class="color"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-2" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
id="width"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99"
|
||||
step="1"
|
||||
v-model="width"
|
||||
@input="widthInput"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
|
||||
var width: any = ref(1)
|
||||
var graffiti: any = reactive([])
|
||||
eventBus.on('graffitiDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
graffiti = new YJ.Obj.Graffiti(window.earth, {
|
||||
width: width.value
|
||||
})
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {}
|
||||
const widthInput = () => {
|
||||
let dom = document.getElementById('width')
|
||||
if (width.value < dom.min * 1) {
|
||||
width.value = dom.min * 1
|
||||
} else if (width.value > dom.max * 1) {
|
||||
width.value = dom.max * 1
|
||||
}
|
||||
graffiti.width = width.value
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
eventBus.emit('graffitiObj', graffiti)
|
||||
graffiti.start()
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
360
src/renderer/src/views/components/propertyBox/Profile.vue
Normal file
360
src/renderer/src/views/components/propertyBox/Profile.vue
Normal file
@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="profile"
|
||||
title="剖面分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="profile-echarts"></div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>重新绘制
|
||||
</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
//属性
|
||||
var profile: any = reactive([])
|
||||
var echartsObject: any = reactive({})
|
||||
|
||||
eventBus.on('profileDialog', () => {
|
||||
profile = new YJ.Analysis.Profile(window.earth)
|
||||
profile.onEnd = (point) => {
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
initEcharts(point)
|
||||
})
|
||||
}
|
||||
})
|
||||
const closeCallBack = (e) => {
|
||||
echartsObject && echartsObject.clear()
|
||||
profile && profile.clean()
|
||||
profile = []
|
||||
echartsObject = []
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
initEcharts()
|
||||
profile.reDraw()
|
||||
}
|
||||
function initEcharts(points) {
|
||||
let datas = [],
|
||||
coords = []
|
||||
const pointsData = points
|
||||
|
||||
let option
|
||||
if (pointsData) {
|
||||
const maxDistance = pointsData[pointsData.length - 1].distance
|
||||
let xAixMax = Math.ceil(maxDistance)
|
||||
for (let index = 0; index < pointsData.length; index++) {
|
||||
const element = pointsData[index]
|
||||
if (element.position.height === void 0) {
|
||||
continue
|
||||
}
|
||||
const curData = [element.distance.toFixed(2), element.position.height.toFixed(2)]
|
||||
datas.push(curData)
|
||||
const curCoords = [element.position.lng, element.position.lat]
|
||||
coords.push(curCoords)
|
||||
}
|
||||
const ele = document.getElementsByClassName('profile-echarts')[0]
|
||||
echartsObject = echarts.init(ele)
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left'
|
||||
},
|
||||
formatter(params) {
|
||||
const xy = coords[params[0].dataIndex]
|
||||
const tipData = params[0]['data']
|
||||
profile.formatter(xy, tipData)
|
||||
return (
|
||||
'距离：' +
|
||||
tipData[0] +
|
||||
'm<br>' +
|
||||
'高度：' +
|
||||
tipData[1] +
|
||||
'm<br>' +
|
||||
'坐标：' +
|
||||
xy[0].toFixed(5) +
|
||||
'，' +
|
||||
xy[1].toFixed(5)
|
||||
)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 55,
|
||||
right: 30
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
max: xAixMax,
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'ProfileLine',
|
||||
type: 'line',
|
||||
data: datas,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#39FDA1'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(85,254,139,1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(7,252,202,1)' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(14,245,210,1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(102,153,255,1)'
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(102,153,255,0.08)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(9,173,208,0.15)'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(14,245,210,1)', //阴影颜色
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
type: 'max',
|
||||
name: '最高点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'min',
|
||||
name: '最低点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
const ele = document.getElementsByClassName('profile-echarts')[0]
|
||||
echartsObject = echarts.init(ele)
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 55,
|
||||
right: 30
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'ProfileLine',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#39FDA1'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(85,254,139,1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(7,252,202,1)' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(14,245,210,1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(102,153,255,1)'
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(102,153,255,0.08)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(9,173,208,0.15)'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(14,245,210,1)', //阴影颜色
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
type: 'max',
|
||||
name: '最高点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'min',
|
||||
name: '最低点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
echartsObject.setOption(option)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="路径规划" left="180px" top="100px" :closeCallback="closeCallBack">
|
||||
<template #content>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col start-col">
|
||||
<span class="label">起点</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" @model="startLng" />
|
||||
<input class="input" type="number" title="" min="-90" max="90" @model="startLat" />
|
||||
<button @click="pickStartPos" style="margin-left: 10px">拾取</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">终点</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" @model="endLng" />
|
||||
<input class="input" type="number" title="" min="-90" max="90" @model="endLat" />
|
||||
<button class="end-pick-btn" @click="pickEndPos" style="margin-left: 10px">拾取</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
|
||||
//属性
|
||||
var startLng: any = ref(null)
|
||||
var startLat: any = ref(null)
|
||||
var endLng: any = ref(null)
|
||||
var endLat: any = ref(null)
|
||||
|
||||
var routePlanning: any = reactive([])
|
||||
eventBus.on('routePlanningDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
routePlanning = new YJ.Obj.RoutePlanning(window.earth, { gps: true })
|
||||
})
|
||||
const closeCallBack = (e) => {}
|
||||
|
||||
function pickStartPos() {}
|
||||
function pickEndPos() {}
|
||||
|
||||
const draw = (e) => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.YJ-custom-base-dialog > .content {
|
||||
width: 460px;
|
||||
}
|
||||
.YJ-custom-base-dialog > .content > div > .row .col {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.YJ-custom-base-dialog > .content .row .label {
|
||||
flex: auto;
|
||||
}
|
||||
</style>
|
||||
252
src/renderer/src/views/components/propertyBox/ScreenShot.vue
Normal file
252
src/renderer/src/views/components/propertyBox/ScreenShot.vue
Normal file
@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="screenShotHD"
|
||||
title="高清出图"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">出图方式</span>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ active: selectType == 'first' }"
|
||||
@click="clickChange('first')"
|
||||
>
|
||||
比例尺
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ active: selectType == 'second' }"
|
||||
@click="clickChange('second')"
|
||||
>
|
||||
地图层级
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ active: selectType == 'third' }"
|
||||
@click="clickChange('third')"
|
||||
>
|
||||
倍数输出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<!-- 比例尺 -->
|
||||
<div class="row" v-if="selectType == 'first'" style="margin-bottom: 20px">
|
||||
<div class="col">
|
||||
<span class="label radioWords">比例尺</span>
|
||||
<el-select v-model="radio" class="radio">
|
||||
<el-option v-for="item in 20" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<button class="curLevel" @click="draw">获取当前比例尺</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图层级 -->
|
||||
<div class="row" v-else-if="selectType == 'second'" style="margin-bottom: 20px">
|
||||
<div class="col">
|
||||
<span class="label">地图层级</span>
|
||||
<el-select v-model="level" class="level">
|
||||
<el-option v-for="item in 20" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 倍数输出 -->
|
||||
<div v-else-if="selectType == 'third'">
|
||||
<div class="row text" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span
|
||||
>当前窗口长宽：<span class="input-width">{{ canvasWidth }}</span
|
||||
>*<span class="input-height">{{ canvasHeight }}</span
|
||||
>像素</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row scale-box" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">图片大小</span>
|
||||
<el-select v-model="scale" class="photo">
|
||||
<el-option v-for="item in 10" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<span>倍窗口</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span
|
||||
>输出图片长宽：<span class="output-width">{{ canvasWidth * scale }}</span
|
||||
>*<span class="output-height">{{ canvasHeight * scale }}</span
|
||||
>像素</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start; margin-top: 10px">
|
||||
<div class="col">
|
||||
<span class="label">输出进度</span>
|
||||
<div class="range-box">
|
||||
<div class="range-bg">
|
||||
<div class="range-process-box">
|
||||
<div class="range-process"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="range-node-box">
|
||||
<span class="range-node-text">0%</span>
|
||||
<span class="range-node-text">100%</span>
|
||||
<div class="range-node-active"><span class="range-node-active-text">0%</span></div>
|
||||
</div>
|
||||
<input class="progress-input" type="range" max="100" min="0" step="0.01" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<el-checkbox v-model="modify" label="出图修饰" size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
var selectType: any = ref('first')
|
||||
var scale: any = ref(1)
|
||||
var radio: any = ref('1:500')
|
||||
var level: any = ref(1)
|
||||
var modify: any = ref(false)
|
||||
|
||||
var canvasWidth: any = ref(0)
|
||||
var canvasHeight: any = ref(0)
|
||||
|
||||
// onMounted(() => {
|
||||
// canvasWidth.value = window.earth.viewer.canvas.width
|
||||
// canvasHeight.value = window.earth.viewer.canvas.height
|
||||
// })
|
||||
|
||||
var visibility: any = reactive([])
|
||||
eventBus.on('screenShotDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
canvasWidth.value = window.earth.viewer.canvas.width
|
||||
canvasHeight.value = window.earth.viewer.canvas.height
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {}
|
||||
const clickChange = (type) => {
|
||||
switch (type) {
|
||||
case 'first': //比例尺
|
||||
selectType.value = 'first'
|
||||
break
|
||||
case 'second': //地图层级
|
||||
selectType.value = 'second'
|
||||
break
|
||||
case 'third': //倍数输出
|
||||
selectType.value = 'third'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btn-group {
|
||||
display: flex;
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
}
|
||||
.btn {
|
||||
background: transparent !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
.btn:hover {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
.curLevel {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.radioWords {
|
||||
width: 56px;
|
||||
}
|
||||
.photo {
|
||||
width: 175px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(204, 204, 204, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
// background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
// border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.radio {
|
||||
width: 108px;
|
||||
}
|
||||
::v-deep .el-select__wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
::v-deep .el-select__selected-item {
|
||||
margin-left: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-popper .is-pure {
|
||||
z-index: 1000000 !important;
|
||||
}
|
||||
::v-deep .el-popper.is-light,
|
||||
.el-popper.is-light > .el-popper__arrow:before {
|
||||
z-index: 1000000 !important;
|
||||
}
|
||||
.level {
|
||||
width: 150px;
|
||||
}
|
||||
.el-checkbox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-checkbox.el-checkbox--large .el-checkbox__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .range-node-box .range-node-text {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
368
src/renderer/src/views/components/propertyBox/Submerge.vue
Normal file
368
src/renderer/src/views/components/propertyBox/Submerge.vue
Normal file
@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="淹没分析"
|
||||
class="submerge"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">最低水位</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input"
|
||||
id="minWaterLevel"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="9999999"
|
||||
v-model="minWaterLevel"
|
||||
@input="minWaterLevelInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最高水位</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input"
|
||||
id="maxWaterLevel"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="9999999"
|
||||
v-model="maxWaterLevel"
|
||||
@input="maxWaterLevelInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">水面面积</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input area"
|
||||
id="area"
|
||||
placeholder="请绘制分析范围"
|
||||
type="number"
|
||||
v-model="area"
|
||||
min="0"
|
||||
max="9999999"
|
||||
:readonly="readOnly"
|
||||
@input="areaInput"
|
||||
/>
|
||||
<span class="unit">㎡</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">水量</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input"
|
||||
id="waterVolume"
|
||||
type="number"
|
||||
placeholder="请输入水体水量"
|
||||
title=""
|
||||
min="0"
|
||||
max="9999999"
|
||||
v-model="waterVolume"
|
||||
@input="waterVolumeInput"
|
||||
/>
|
||||
<span class="unit">m³</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row subtitle-box">
|
||||
<span class="subtitle">上升速度</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
type="range"
|
||||
max="50"
|
||||
min="0"
|
||||
step="0.01"
|
||||
v-model="risingSpeed"
|
||||
@change="risingSpeedInput"
|
||||
/>
|
||||
<span class="rangeWords">水量</span>
|
||||
<div
|
||||
class="input-number input-number-unit-3"
|
||||
style="flex: 0 0 110px; margin-left: 10px"
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
id="risingSpeed"
|
||||
type="number"
|
||||
title=""
|
||||
v-model="risingSpeed"
|
||||
max="50"
|
||||
min="0"
|
||||
@input="risingSpeedInput"
|
||||
/>
|
||||
<span class="unit">m/s</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col operate-btn-box">
|
||||
<button class="draw" @click="draw">
|
||||
<svg class="icon-draw"><use xlink:href="#yj-icon-draw"></use></svg>绘制范围
|
||||
</button>
|
||||
<button class="flyto" @click="flyTo">
|
||||
<svg class="icon-positions">
|
||||
<use xlink:href="#yj-icon-positions"></use></svg
|
||||
>定位
|
||||
</button>
|
||||
<button class="reset" @click="reset">
|
||||
<svg class="icon-reset"><use xlink:href="#yj-icon-reset"></use></svg>重置
|
||||
</button>
|
||||
<button class="analog" @click="analog">
|
||||
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>开始模拟
|
||||
</button>
|
||||
<button class="pause" v-if="!isPausng" @click="pause" style="margin-right: 0px">
|
||||
<svg class="icon-pause"><use xlink:href="#yj-icon-pause"></use></svg>暂停
|
||||
</button>
|
||||
<button class="start" v-else-if="isPausng" @click="pause" style="margin-right: 0px">
|
||||
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>播放
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">序号</div>
|
||||
<div class="th">经度</div>
|
||||
<div class="th">纬度</div>
|
||||
<div class="th">高程</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(value, i) in positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td">{{ Number(value.lng.toFixed(10)) }}</div>
|
||||
<div class="td">{{ Number(value.lat.toFixed(10)) }}</div>
|
||||
<div class="td">{{ Number(value.alt.toFixed(4)) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty" v-if="!positions.length">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider" style="margin-top: 20px"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
// 属性
|
||||
var minWaterLevel: any = ref(0)
|
||||
var maxWaterLevel: any = ref(0)
|
||||
var area: any = ref(0)
|
||||
var waterVolume: any = ref(0)
|
||||
var risingSpeed: any = ref(1)
|
||||
var waterLevel: any = ref(0)
|
||||
|
||||
var positions: any = reactive([])
|
||||
|
||||
var submerge: any = reactive([])
|
||||
|
||||
var isPausng = ref(false)
|
||||
var readOnly = ref(true)
|
||||
|
||||
eventBus.on('submergeDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
|
||||
submerge = new YJ.Analysis.Submerge(window.earth)
|
||||
submerge.onEnd = (areaV, posi) => {
|
||||
isPausng.value = false
|
||||
minWaterLevel.value = submerge.minWaterLevel
|
||||
maxWaterLevel.value = submerge.maxWaterLevel
|
||||
waterVolume.value = submerge.waterVolume
|
||||
risingSpeed.value = submerge.risingSpeed
|
||||
waterLevel.value = submerge.waterLevels
|
||||
area.value = areaV * 1
|
||||
positions = posi
|
||||
}
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {
|
||||
minWaterLevel.value = 0
|
||||
maxWaterLevel.value = 0
|
||||
area.value = 0
|
||||
waterVolume.value = 0
|
||||
risingSpeed.value = 1
|
||||
waterLevel.value = 0
|
||||
positions = []
|
||||
isPausng.value = false
|
||||
readOnly.value = true
|
||||
|
||||
submerge.destroy()
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
//方法
|
||||
function draw() {
|
||||
submerge.draw()
|
||||
}
|
||||
function flyTo() {
|
||||
submerge.flyTo()
|
||||
}
|
||||
function reset() {
|
||||
isPausng.value = false
|
||||
submerge.restart()
|
||||
}
|
||||
function pause() {
|
||||
if (isPausng.value) {
|
||||
//暂停中
|
||||
submerge.start()
|
||||
} else {
|
||||
//播放中
|
||||
submerge.pause()
|
||||
}
|
||||
isPausng.value = !isPausng.value
|
||||
}
|
||||
function analog() {
|
||||
isPausng.value = false
|
||||
submerge.move()
|
||||
}
|
||||
|
||||
function minWaterLevelInput() {
|
||||
let dom = document.getElementById('minWaterLevel')
|
||||
if (minWaterLevel.value != '.') {
|
||||
if (minWaterLevel.value < dom.min * 1) {
|
||||
minWaterLevel.value = dom.min * 1
|
||||
} else if (minWaterLevel.value > dom.max * 1) {
|
||||
minWaterLevel.value = dom.max * 1
|
||||
}
|
||||
minWaterLevel.value = Math.floor(minWaterLevel.value * 10000) / 10000
|
||||
maxWaterLevel.value = minWaterLevel.value + waterLevel.value
|
||||
|
||||
submerge.minWaterLevel = minWaterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
submerge.waterLevels = waterLevel.value
|
||||
}
|
||||
}
|
||||
function maxWaterLevelInput() {
|
||||
let dom = document.getElementById('maxWaterLevel')
|
||||
if (minWaterLevel.value != '.') {
|
||||
if (maxWaterLevel.value < dom.min * 1) {
|
||||
maxWaterLevel.value = dom.min * 1
|
||||
} else if (maxWaterLevel.value > dom.max * 1) {
|
||||
maxWaterLevel.value = dom.max * 1
|
||||
}
|
||||
if (maxWaterLevel.value < minWaterLevel.value) {
|
||||
maxWaterLevel.value = minWaterLevel.value
|
||||
} else {
|
||||
maxWaterLevel.value = Math.floor(maxWaterLevel.value * 10000) / 10000
|
||||
}
|
||||
|
||||
waterLevel.value = maxWaterLevel.value - minWaterLevel.value
|
||||
waterVolume.value = Number((waterLevel.value * area.value).toFixed(4))
|
||||
|
||||
submerge.waterVolume = waterVolume.value
|
||||
submerge.waterLevels = waterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
}
|
||||
}
|
||||
function areaInput() {
|
||||
let dom = document.getElementById('area')
|
||||
if (minWaterLevel.value != '.') {
|
||||
if (area.value < dom.min * 1) {
|
||||
area.value = dom.min * 1
|
||||
} else if (area.value > dom.max * 1) {
|
||||
area.value = dom.max * 1
|
||||
}
|
||||
submerge.areas = area.value
|
||||
waterLevel.value = Number((waterVolume.value / area.value).toFixed(4))
|
||||
maxWaterLevel.value = minWaterLevel.value + waterLevel.value
|
||||
|
||||
submerge.waterLevels = waterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
}
|
||||
}
|
||||
function waterVolumeInput() {
|
||||
let dom = document.getElementById('waterVolume')
|
||||
if (waterVolume.value < dom.min * 1) {
|
||||
waterVolume.value = dom.min * 1
|
||||
} else if (waterVolume.value > dom.max * 1) {
|
||||
waterVolume.value = dom.max * 1
|
||||
}
|
||||
waterVolume.value = Math.floor(waterVolume.value * 10000) / 10000
|
||||
if (area.value) {
|
||||
waterLevel.value = Number((waterVolume.value / area.value).toFixed(4))
|
||||
maxWaterLevel.value = maxWaterLevel.value + waterLevel.value
|
||||
|
||||
submerge.waterLevels = waterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
}
|
||||
}
|
||||
function risingSpeedInput() {
|
||||
let dom = document.getElementById('risingSpeed')
|
||||
if (risingSpeed.value != '.') {
|
||||
if (risingSpeed.value < dom.min * 1) {
|
||||
risingSpeed.value = dom.min * 1
|
||||
} else if (risingSpeed.value > dom.max * 1) {
|
||||
risingSpeed.value = dom.max * 1
|
||||
}
|
||||
submerge.risingSpeed = risingSpeed.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.label {
|
||||
width: 75px;
|
||||
}
|
||||
input:read-only {
|
||||
background-color: rgba(204, 204, 204, 0.2) !important;
|
||||
}
|
||||
|
||||
// .mask {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// background-color: rgba(204, 204, 204, 0.2); /* 半透明白色背景 */
|
||||
// z-index: 2; /* 确保蒙层位于输入框之上 */
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// pointer-events: none; /* 允许蒙层下的内容被点击 */
|
||||
// border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
// }
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="地形开挖" left="180px" top="100px" :closeCallback="closeCallBack">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 70px">挖掘高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
id="height"
|
||||
title=""
|
||||
min="0"
|
||||
max="5000000"
|
||||
v-model="height"
|
||||
@input="heightInput"
|
||||
@change="changeHeight"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">绘制开挖区域</span>
|
||||
<button class="start-excavation" @click="draw">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>绘制
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">清除开挖区域</span>
|
||||
<button class="clean-excavation" @click="clear">
|
||||
<svg class="icon-close"><use xlink:href="#yj-icon-close"></use></svg>清除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
|
||||
var height: any = ref(10)
|
||||
|
||||
var excavation: any = reactive([])
|
||||
eventBus.on('terrainExcavationDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
|
||||
excavation = new YJ.Analysis.TerrainExcavation(this.sdk, { height: 10 })
|
||||
})
|
||||
|
||||
const changeHeight = () => {
|
||||
excavation.height = height.value
|
||||
}
|
||||
const heightInput = () => {
|
||||
let dom = document.getElementById('height')
|
||||
if (height.value < dom.min * 1) {
|
||||
height.value = dom.min * 1
|
||||
} else if (height.value > dom.max * 1) {
|
||||
height.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const closeCallBack = (e) => {}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
excavation.startCreate()
|
||||
}
|
||||
const clear = (e) => {
|
||||
excavation.clear()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
162
src/renderer/src/views/components/propertyBox/ViewShed.vue
Normal file
162
src/renderer/src/views/components/propertyBox/ViewShed.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="view-shed"
|
||||
title="可视域分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">位置拾取(起点、终点)</span>
|
||||
<button class="edit" @click="edit">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>拾取
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="margin-bottom: 25px">
|
||||
<div class="col">
|
||||
<span class="label">视点高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
id="viewPointHeight"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="0.1"
|
||||
v-model="viewPointHeight"
|
||||
@change="viewPointHeightInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row subtitle-box">
|
||||
<span class="subtitle">视域夹角</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="range-box">
|
||||
<div class="range-bg">
|
||||
<div class="range-process-box">
|
||||
<div class="range-process"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="range-node-box">
|
||||
<span class="range-node-text">0°</span>
|
||||
<span class="range-node-text">45°</span>
|
||||
<span class="range-node-text">90°</span>
|
||||
<span class="range-node-text">135°</span>
|
||||
<span class="range-node-text">180°</span>
|
||||
<div class="range-node-active"><span class="range-node-active-text">0°</span></div>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
max="180"
|
||||
min="0"
|
||||
step="1"
|
||||
name="horizontalViewAngle"
|
||||
v-model="horizontalViewAngle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
const viewPointHeight: any = ref(1.8)
|
||||
var horizontalViewAngle: any = ref(90)
|
||||
|
||||
var viewShed: any = reactive([])
|
||||
var timeout: any = reactive([])
|
||||
|
||||
eventBus.on('viewShedDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
viewShed && viewShed.destroy && viewShed.destroy()
|
||||
viewShed = new YJ.Analysis.ViewShed(window.earth)
|
||||
setTimeout(() => {
|
||||
let contentElm = document.getElementsByClassName('view-shed')[0]
|
||||
let e_horizontalViewAngle = contentElm.querySelector("input[name='horizontalViewAngle']")
|
||||
let rangeNodeActive = contentElm.getElementsByClassName('range-node-active')[0]
|
||||
let rangeNodeActiveText = rangeNodeActive.getElementsByClassName('range-node-active-text')[0]
|
||||
let rangeProcess = contentElm.getElementsByClassName('range-process')[0]
|
||||
let percentage = (horizontalViewAngle.value / 180) * 100
|
||||
rangeNodeActive.style.left = percentage + '%'
|
||||
rangeProcess.style.width = percentage + '%'
|
||||
rangeNodeActiveText.innerHTML = horizontalViewAngle.value + '°'
|
||||
e_horizontalViewAngle.removeEventListener('input', inputFun)
|
||||
e_horizontalViewAngle.removeEventListener('change', changeFun)
|
||||
e_horizontalViewAngle.addEventListener('input', inputFun)
|
||||
e_horizontalViewAngle.addEventListener('change', changeFun)
|
||||
})
|
||||
})
|
||||
function inputFun() {
|
||||
let contentElm = document.getElementsByClassName('view-shed')[0]
|
||||
let rangeNodeActive = contentElm.getElementsByClassName('range-node-active')[0]
|
||||
let rangeNodeActiveText = rangeNodeActive.getElementsByClassName('range-node-active-text')[0]
|
||||
let rangeProcess = contentElm.getElementsByClassName('range-process')[0]
|
||||
let percentage = (horizontalViewAngle.value / 180) * 100
|
||||
rangeNodeActive.style.left = percentage + '%'
|
||||
rangeProcess.style.width = percentage + '%'
|
||||
rangeNodeActiveText.innerHTML = horizontalViewAngle.value + '°'
|
||||
}
|
||||
function changeFun() {
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => {
|
||||
viewShed.horizontalViewAngles = horizontalViewAngle.value
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const closeCallBack = (e) => {
|
||||
viewShed.close()
|
||||
viewPointHeight.value = 1.8
|
||||
horizontalViewAngle.value = 90
|
||||
}
|
||||
function viewPointHeightInput(e) {
|
||||
let dom = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value != '.') {
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
viewShed.viewPointHeight = viewPointHeight.value
|
||||
}
|
||||
}
|
||||
function draw() {
|
||||
viewShed.draw()
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
function edit() {
|
||||
viewShed.nodeEdit()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
78
src/renderer/src/views/components/propertyBox/Visibility.vue
Normal file
78
src/renderer/src/views/components/propertyBox/Visibility.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="多点视线分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">视点高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
id="viewPointHeight"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="0.1"
|
||||
placeholder="请输入数值"
|
||||
v-model="viewPointHeight"
|
||||
@input="viewPointHeightInput"
|
||||
@change="clangeViewPointHeight"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog = ref(null)
|
||||
const eventBus = inject('bus')
|
||||
const viewPointHeight: any = ref(1.8)
|
||||
var visibility: any = reactive([])
|
||||
eventBus.on('analysisDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
})
|
||||
|
||||
const clangeViewPointHeight = () => {}
|
||||
const viewPointHeightInput = () => {
|
||||
let dom = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
viewPointHeight.value = 1.8
|
||||
YJ.Measure.SetMeasureStatus(false)
|
||||
// visibility && visibility.end()
|
||||
}
|
||||
const draw = (e) => {
|
||||
visibility && visibility.end && visibility.end()
|
||||
visibility = new YJ.Analysis.Visibility(window.earth, { viewPointHeight: viewPointHeight.value })
|
||||
// visibility.create(this)
|
||||
!window.analysisArr && (window.analysisArr = [])
|
||||
window.analysisArr.push(visibility)
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -8,6 +8,20 @@
|
||||
<firstMenu class="absolute zIndex9" ref="firstMenu"></firstMenu>
|
||||
<!--底部菜单-->
|
||||
<bottomMenu class="absolute zIndex9" ref="bottomMenu"></bottomMenu>
|
||||
<!-- 多点视线分析 -->
|
||||
<Visibility ref="visibility"></Visibility>
|
||||
<CircleViewShed ref="CircleViewShed"></CircleViewShed>
|
||||
<Submerge ref="Submerge"></Submerge>
|
||||
<Profile ref="Profile"></Profile>
|
||||
<ViewShed ref="ViewShed"></ViewShed>
|
||||
<CutFill ref="CutFill"></CutFill>
|
||||
<Contour ref="Contour"></Contour>
|
||||
<RoutePlanning ref="RoutePlanning"></RoutePlanning>
|
||||
<Graffiti ref="Graffiti"></Graffiti>
|
||||
<FlyRoam ref="FlyRoam"></FlyRoam>
|
||||
<CoorLocation ref="CoorLocation"></CoorLocation>
|
||||
<ScreenShot ref="ScreenShot"></ScreenShot>
|
||||
<TerrainExcavation ref="TerrainExcavation"></TerrainExcavation>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -17,6 +31,19 @@ import PropertyDialog from '../components/propertyBox/standText.vue'
|
||||
import addDirectory from '@/components/dialog/directory.vue'
|
||||
import firstMenu from '@/views/components/leftSide/leftSideFirst.vue'
|
||||
import bottomMenu from '@/views/components/bottomSide/bottomSide.vue'
|
||||
import Visibility from '../components/propertyBox/Visibility.vue'
|
||||
import CircleViewShed from '../components/propertyBox/CircleViewShed.vue'
|
||||
import Submerge from '../components/propertyBox/Submerge.vue'
|
||||
import Profile from '../components/propertyBox/Profile.vue'
|
||||
import ViewShed from '../components/propertyBox/ViewShed.vue'
|
||||
import CutFill from '../components/propertyBox/CutFill.vue'
|
||||
import Contour from '../components/propertyBox/Contour.vue'
|
||||
import RoutePlanning from '../components/propertyBox/RoutePlanning.vue'
|
||||
import Graffiti from '../components/propertyBox/Graffiti.vue'
|
||||
import FlyRoam from '../components/propertyBox/FlyRoam.vue'
|
||||
import CoorLocation from '../components/propertyBox/CoorLocation.vue'
|
||||
import ScreenShot from '../components/propertyBox/ScreenShot.vue'
|
||||
import TerrainExcavation from '../components/propertyBox/TerrainExcavation.vue'
|
||||
|
||||
const createEarth = () => {
|
||||
window.earth = new YJ.YJEarth('earthContainer')
|
||||
|
||||
Reference in New Issue
Block a user