<template>
|
<div class="box">
|
<ul>
|
<li
|
style="margin-left: 20px"
|
@click="changeMeasure(item)"
|
v-for="item in itemsOne"
|
>
|
<div class="divli">
|
<div :class="item.class" class="backimge7"></div>
|
</div>
|
<div class="div_li">{{ $t(item.name) }}</div>
|
</li>
|
</ul>
|
<mapinfo ref="mapinfo" />
|
</div>
|
</template>
|
|
<script>
|
// 测量-信息弹窗
|
import mapinfo from '../Tools/mapinfo.vue';
|
export default {
|
components: { mapinfo },
|
data() {
|
return {
|
colorAll: {},
|
measureData: null,
|
itemsOne: [
|
{
|
id: '1',
|
name: 'synthesis.synthobj.m1',
|
class: 'g1',
|
},
|
{
|
id: '2',
|
name: 'synthesis.synthobj.m2',
|
class: 'g2',
|
},
|
{
|
id: '3',
|
name: 'synthesis.synthobj.m3',
|
class: 'g3',
|
},
|
{
|
id: '4',
|
name: 'synthesis.synthobj.m4',
|
class: 'g4',
|
},
|
{
|
id: '5',
|
name: 'synthesis.synthobj.m5',
|
class: 'g1',
|
},
|
{
|
id: '6',
|
name: 'synthesis.synthobj.m6',
|
class: 'g2',
|
},
|
{
|
id: '7',
|
name: 'synthesis.synthobj.m7',
|
class: 'g3',
|
},
|
{
|
id: '8',
|
name: 'synthesis.synthobj.m8',
|
class: 'g4',
|
},
|
],
|
};
|
},
|
created() {
|
var cover_Id = this.$store.state.syntiesis.menu;
|
var cover_perms = this.$store.state.permsEntity;
|
|
for (var i = 0; i < cover_perms.length; i++) {
|
if (cover_perms[i].pid == cover_Id) {
|
this.showViewMenu(cover_perms[i]);
|
}
|
}
|
},
|
methods: {
|
showViewMenu(res) {
|
if (res.cnName != '测量') return;
|
},
|
clearMeasure(id) {
|
if (id) {
|
let data = this.measureData.get(id);
|
data && data.deleteObject && data.deleteObject();
|
// 体积方量
|
data && data.cleanUp && data.cleanUp();
|
this.measureData.delete(id);
|
} else {
|
this.measureData.forEach((data) => {
|
data.deleteObject && data.deleteObject();
|
// 体积方量
|
data.cleanUp && data.cleanUp();
|
});
|
this.measureData.clear();
|
}
|
},
|
changeMeasure(res) {
|
switch (res.id) {
|
case '1':
|
var measure = window.sgworld.Command.execute(
|
0,
|
2,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('水平距离', data);
|
}
|
);
|
break;
|
case '2':
|
var measure = window.sgworld.Command.execute(
|
0,
|
10,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('空间距离', data);
|
}
|
);
|
break;
|
case '3':
|
var measure = window.sgworld.Command.execute(
|
1,
|
11,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('海拔高度', data);
|
}
|
);
|
break;
|
case '4':
|
var measure = window.sgworld.Command.execute(
|
0,
|
5,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('垂直高度', data);
|
}
|
);
|
break;
|
case '5':
|
var measure = window.sgworld.Command.execute(
|
0,
|
8,
|
{
|
...this.colorAll,
|
tin: true, // 是否显示tin三角网
|
onlyTerrain: false, // 是否只测量精细地形
|
},
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('表面面积', data);
|
}
|
);
|
break;
|
case '6':
|
var measure = window.sgworld.Command.execute(
|
0,
|
3,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('平面面积', data);
|
}
|
);
|
break;
|
case '7':
|
var volumetricMeasurementTool =
|
window.sgworld.Creator.createVolumetricMeasureTool();
|
volumetricMeasurementTool.startDrawing(
|
{ ...this.colorAll, onlyTerrain: false },
|
'auto',
|
(data) => {
|
if (volumetricMeasurementTool.popupData) {
|
volumetricMeasurementTool.popupData.value = `填方：${
|
data.volume.fill.toFixed(4) + data.unit.fill
|
}<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
|
} else {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, volumetricMeasurementTool);
|
let popupData = this.openMeasureResultInfo('体积方量', data);
|
volumetricMeasurementTool.popupData = popupData;
|
}
|
}
|
);
|
break;
|
case '8':
|
var measure = window.sgworld.Command.execute(
|
0,
|
12,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('角度', data);
|
}
|
);
|
break;
|
}
|
},
|
openMeasureResultInfo(name, data) {
|
let info = '';
|
switch (name) {
|
case '水平距离':
|
case '空间距离':
|
info = '总长度：' + data.distance[data.distance.length - 1];
|
break;
|
case '海拔高度':
|
info = '海拔：' + data.height;
|
break;
|
case '垂直高度':
|
info = `${data.gddistance}<br>${data.kjdistance}<br>${data.spdistance}`;
|
break;
|
case '表面面积':
|
case '平面面积':
|
info = data.mj;
|
break;
|
case '角度':
|
data.labels.forEach((label) => {
|
info += label.label.text.getValue() + '<br>';
|
});
|
break;
|
case '体积方量':
|
info = `填方：${
|
data.volume.fill.toFixed(4) + data.unit.fill
|
}<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
|
break;
|
}
|
return (
|
this.$refs &&
|
this.$refs.mapinfo &&
|
this.$refs.mapinfo.open(name, info, {
|
close: () => {
|
// 清除测量
|
this.clearMeasure(data.id);
|
},
|
})
|
);
|
},
|
},
|
mounted() {
|
this.measureData = new Map();
|
this.colorAll = {
|
point: Cesium.Color.fromCssColorString('#ff0000'),
|
polyline: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
|
polygon: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
|
};
|
},
|
};
|
</script>
|
|
<style>
|
.box {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
.box li {
|
list-style: none;
|
float: left;
|
height: 60px;
|
text-align: center;
|
margin: 2px;
|
position: relative;
|
cursor: pointer;
|
margin-top: 5px;
|
}
|
.box ul {
|
margin: 0px;
|
}
|
.g1 {
|
background: url('../../assets/img/synthesis/图层 31.png') no-repeat center;
|
}
|
.g2 {
|
background: url('../../assets/img/synthesis/图层 31 拷贝.png') no-repeat
|
center;
|
}
|
.g3 {
|
background: url('../../assets/img/synthesis/矩形 13 拷贝.png') no-repeat
|
center;
|
}
|
.g4 {
|
background: url('../../assets/img/synthesis/图层 18 拷贝.png') no-repeat
|
center;
|
}
|
.backimge7 {
|
width: 30px;
|
height: 30px;
|
position: absolute;
|
background-size: 100% 100%;
|
margin: 0% 30%;
|
}
|
.divli {
|
width: 100%;
|
height: 50%;
|
position: relative;
|
}
|
</style>
|
