<template>
|
<div class="measure" id="measure">
|
<div class="measureTools">
|
<div class="measureTool" @click="jl">
|
<el-tooltip class="item" effect="dark" content="距离" placement="top-start" popper-class="item_tooltip">
|
<el-button>
|
<img src="@/assets/img/right/ls/jl1.png" />
|
</el-button>
|
</el-tooltip>
|
</div>
|
<div class="measureTool" @click="bmjl">
|
<el-tooltip class="item" effect="dark" content="表面距离" placement="top-start" popper-class="item_tooltip">
|
<el-button>
|
<img src="@/assets/img/right/ls/bmjl1.png" /> </el-button></el-tooltip>
|
</div>
|
<div class="measureTool" @click="mj">
|
<el-tooltip class="item" effect="dark" content="面积" placement="top-start" popper-class="item_tooltip">
|
<el-button>
|
<img src="@/assets/img/right/ls/mj1.png" /> </el-button></el-tooltip>
|
</div>
|
<div class="measureTool" @click="bmmj">
|
<el-tooltip class="item" effect="dark" content="表面面积" placement="top-start" popper-class="item_tooltip">
|
<el-button>
|
<img src="@/assets/img/right/ls/bmmj1.png" /> </el-button></el-tooltip>
|
</div>
|
<div class="measureTool" @click="height">
|
<el-tooltip class="item" effect="dark" content="垂直高度" placement="top-start" popper-class="item_tooltip">
|
<el-button>
|
<img src="@/assets/img/right/ls/gd1.png" /> </el-button></el-tooltip>
|
</div>
|
<!-- <div
|
:class="isOpen['tj'] ? 'measureTool active' : 'measureTool'"
|
@click="tj"
|
>
|
<el-button>
|
<img src="@/assets/img/right/ls/tj1.png" />
|
<label>体积</label>
|
</el-button>
|
</div> -->
|
<div class="measureTool" @click="zb">
|
<el-tooltip class="item" effect="dark" content="坐标" placement="top-start" popper-class="item_tooltip">
|
<el-button>
|
<img src="@/assets/img/right/ls/jd1.png" /> </el-button></el-tooltip>
|
</div>
|
<div class="measureTool" @click="clearMeasure">
|
<el-tooltip class="item" effect="dark" content="清除" placement="top-start" popper-class="item_tooltip">
|
<el-button>
|
<img src="@/assets/img/right/ls/qc-s.png" /> </el-button></el-tooltip>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
hr {
|
margin: 10px 0;
|
width: 111%;
|
margin-left: -15px;
|
}
|
|
.el-button:focus,
|
.el-button:hover {
|
background: transparent;
|
}
|
|
.measure {
|
position: absolute;
|
left: 65px;
|
bottom: 6px;
|
height: 50px;
|
/* border-radius: 30px; */
|
box-shadow: 0px 0px 10px rgba(101, 180, 253, 0.8) inset;
|
background-color: rgba(5, 39, 126, 0.7);
|
width: 410px;
|
}
|
|
.measureTools {
|
margin-left: 20px;
|
overflow: hidden;
|
}
|
|
.measureTool {
|
border: 1px solid #999;
|
border-radius: 5px;
|
float: left;
|
width: 40px;
|
height: 40px;
|
margin: 5px;
|
}
|
|
.measureTool img {
|
margin: 4px;
|
}
|
|
.measureTools::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
.measureTools::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
.measureTools::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
|
.measureTool:hover {
|
background: rgba(0, 168, 255, 0.16);
|
}
|
|
.tool-title {
|
margin: 1px 10px;
|
}
|
|
.tool-title label {
|
vertical-align: top;
|
}
|
|
.measure label {
|
margin-left: 10px;
|
font-size: 17px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
/* color: #3d3d3d; */
|
color: white;
|
}
|
|
.el-button {
|
padding: 0 !important;
|
font-size: 24px;
|
border: unset;
|
float: unset;
|
display: block;
|
background: rgba(0, 0, 0, 0);
|
}
|
|
.el-button label {
|
font-size: 14px;
|
}
|
|
.closeTool {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
|
.active {
|
background: rgba(0, 168, 255, 0.16);
|
}
|
</style>
|
|
<script>
|
let measureData = [];
|
let volumetricMeasurementTool = undefined;
|
let colorAll = {
|
point: Cesium.Color.fromCssColorString("#ff0000"),
|
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
|
polygon: Cesium.Color.fromCssColorString("#ffff0050")
|
};
|
|
export default {
|
name: "measure",
|
data() {
|
return {
|
status: false,
|
isOpen: {
|
jl: false,
|
bmjl: false,
|
mj: false,
|
bmmj: false,
|
tj: false,
|
czgd: false,
|
jd: false
|
}
|
};
|
},
|
mounted() { },
|
methods: {
|
// 清除高亮
|
clearActive() {
|
this.isOpen.jl = false;
|
this.isOpen.bmjl = false;
|
this.isOpen.mj = false;
|
this.isOpen.bmmj = false;
|
this.isOpen.tj = false;
|
this.isOpen.czgd = false;
|
this.isOpen.jd = false;
|
},
|
//关闭窗口
|
close() {
|
this.$parent.isShowMeasure = false;
|
this.$parent.isShow = false;
|
},
|
|
|
zb(){
|
this.$store.state.isMeasureFlag= true;
|
},
|
//清除测量
|
clearMeasure() {
|
// 关闭当前的操作界面
|
//this.$parent.closeAll();
|
measureData.forEach(item => {
|
item.deleteObject();
|
});
|
measureData = [];
|
this.$store.state.isShowMeasureCoord = false
|
this.$store.state.isMeasureFlag = false
|
this.$store.state.measureCoordObj = false
|
volumetricMeasurementTool && volumetricMeasurementTool.cleanUp();
|
},
|
// 距离量算
|
jl() {
|
this.$parent.closeAllHighLight("measure");
|
if (this.isOpen["jl"]) {
|
this.isOpen["jl"] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
this.clearActive();
|
|
// 关闭当前的操作界面
|
//this.$parent.closeAll();
|
//结束上一次操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
// 根据当前的高亮状态，决定当前操作是否要显示高亮
|
this.isOpen["jl"] = true;
|
let m = sgworld.Command.execute(0, 10, colorAll, () => {
|
sgworld.drawObj = undefined;
|
this.isOpen["jl"] = false;
|
});
|
sgworld.drawObj = m;
|
measureData.push(m);
|
},
|
// 表面距离
|
bmjl: function () {
|
this.$parent.closeAllHighLight("measure");
|
if (this.isOpen["bmjl"]) {
|
this.isOpen["bmjl"] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
//this.clearActive();
|
// 根据当前的高亮状态，决定当前操作是否要显示高亮
|
// 关闭当前的操作界面
|
//this.$parent.closeAll();
|
//结束上一次操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["bmjl"] = true;
|
|
let m = sgworld.Command.execute(0, 2, colorAll, () => {
|
sgworld.drawObj = undefined;
|
this.isOpen["bmjl"] = false;
|
});
|
sgworld.drawObj = m;
|
measureData.push(m);
|
},
|
// 表面面积
|
bmmj: function () {
|
this.$parent.closeAllHighLight("measure");
|
if (this.isOpen["bmmj"]) {
|
this.isOpen["bmmj"] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
this.clearActive();
|
|
// 关闭当前的操作界面
|
//this.$parent.closeAll();
|
//结束上一次操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["bmmj"] = true;
|
let m = sgworld.Command.execute(0, 8, colorAll, () => {
|
sgworld.drawObj = undefined;
|
this.isOpen["bmmj"] = false;
|
});
|
sgworld.drawObj = m;
|
measureData.push(m);
|
},
|
// 面积
|
mj: function () {
|
this.$parent.closeAllHighLight("measure");
|
if (this.isOpen["mj"]) {
|
this.isOpen["mj"] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
this.clearActive();
|
// 根据当前的高亮状态，决定当前操作是否要显示高亮
|
// 关闭当前的操作界面
|
//this.$parent.closeAll();
|
//结束上一次操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["mj"] = true;
|
|
let m = sgworld.Command.execute(0, 3, colorAll, () => {
|
sgworld.drawObj = undefined;
|
this.isOpen["mj"] = false;
|
});
|
sgworld.drawObj = m;
|
measureData.push(m);
|
},
|
// 角度量算
|
jd() {
|
//this.$parent.closeAll();
|
|
if (this.isOpen["jd"]) {
|
this.isOpen["jd"] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
this.clearActive();
|
// 根据当前的高亮状态，决定当前操作是否要显示高亮
|
// 关闭当前的操作界面
|
//结束上一次操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["jd"] = true;
|
|
let m = sgworld.Command.execute(0, 12, colorAll, () => {
|
sgworld.drawObj = undefined;
|
this.isOpen["jd"] = false;
|
});
|
sgworld.drawObj = m;
|
measureData.push(m);
|
},
|
height() {
|
this.$parent.closeAllHighLight("measure");
|
if (this.isOpen["czgd"]) {
|
this.isOpen["czgd"] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
this.clearActive();
|
// 根据当前的高亮状态，决定当前操作是否要显示高亮
|
// 关闭当前的操作界面
|
//this.$parent.closeAll();
|
//结束上一次操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["czgd"] = true;
|
|
let m = sgworld.Command.execute(0, 5, colorAll, () => {
|
sgworld.drawObj = undefined;
|
this.isOpen["czgd"] = false;
|
});
|
sgworld.drawObj = m;
|
measureData.push(m);
|
},
|
// 体积
|
tj() {
|
this.$parent.closeAllHighLight("measure");
|
if (this.isOpen["tj"]) {
|
this.isOpen["tj"] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
this.clearActive();
|
// 根据当前的高亮状态，决定当前操作是否要显示高亮
|
// 关闭当前的操作界面
|
//this.$parent.closeAll();
|
//结束上一次操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["tj"] = true;
|
|
//体积方量
|
function Volumetric(spacing, callback) {
|
if (!volumetricMeasurementTool) {
|
volumetricMeasurementTool = sgworld.Creator.createVolumetricMeasureTool();
|
}
|
|
sgworld.drawObj = volumetricMeasurementTool.startDrawing(
|
null,
|
spacing,
|
function (data) {
|
callback &&
|
typeof callback === "function" &&
|
callback({ height: data.minHeight, spacing: data.spacing });
|
}
|
);
|
}
|
|
Volumetric("auto", data => {
|
this.isOpen["tj"] = false;
|
});
|
}
|
},
|
beforeDestroy() {
|
//this.clearMeasure();
|
}
|
};
|
</script>
|
