<template>
|
<div class="measure" id="measure">
|
<div class="measureTools">
|
<div class="measureTool" @click="flame">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="火焰"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/tx/hy.png" />
|
</el-button>
|
</el-tooltip>
|
</div>
|
<div class="measureTool" @click="smog">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="烟雾"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/tx/yw.png" /> </el-button
|
></el-tooltip>
|
</div>
|
<div class="measureTool" @click="fountain">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="喷泉"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/tx/pq.png" /> </el-button
|
></el-tooltip>
|
</div>
|
<div class="measureTool" @click="fireworks">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="烟花"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/tx/yh.png" /> </el-button
|
></el-tooltip>
|
</div>
|
<div class="measureTool" @click="TrailLine_Line">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="流动线"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/tx/ldx.png" /> </el-button
|
></el-tooltip>
|
</div>
|
<div class="measureTool" @click="TrailLine_Wall">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="流动墙"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/tx/ldq.png" /> </el-button
|
></el-tooltip>
|
</div>
|
<div class="measureTool" @click="link">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="链路"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/tx/ll.png" /> </el-button
|
></el-tooltip>
|
</div>
|
<div class="measureTool" @click="clearTX">
|
<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: 460px;
|
}
|
.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 particleHandel;
|
let TrailLine = [],
|
KS = [],
|
LD = [],
|
linkData = [];
|
|
export default {
|
name: "measure",
|
data() {
|
return {
|
status: false,
|
isOpen: {
|
flame: false, //特效
|
smog: false,
|
fountain: false,
|
fireworks: false,
|
TrailLine_Line: false,
|
TrailLine_Wall: false,
|
link: false,
|
},
|
};
|
},
|
mounted() {},
|
methods: {
|
// 清除高亮
|
clearActive() {
|
this.isOpen.flame = false;
|
this.isOpen.smog = false;
|
this.isOpen.fountain = false;
|
this.isOpen.fireworks = false;
|
this.isOpen.TrailLine_Line = false;
|
this.isOpen.TrailLine_Wall = false;
|
this.isOpen.link = false;
|
},
|
//关闭窗口
|
close() {
|
// this.$parent.isShowMeasure = false;
|
// this.$parent.isShow = false;
|
},
|
//火焰
|
flame() {
|
// this.$parent.closeAllHighLight("tx");
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.isOpen["flame"]) {
|
this.isOpen["flame"] = false;
|
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
// this.clearActive();
|
//结束之前操作
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["flame"] = true;
|
|
let tooltip = sgworld.Core.CreateTooltip();
|
particleHandel && particleHandel.destroy();
|
sgworld._core.mouse(
|
Viewer.container,
|
1,
|
window.SmartEarthRootUrl + "Workers/image/cursor/draw.cur"
|
);
|
particleHandel = sgworld.AttachEvent(
|
"OnLButtonClk",
|
(movement, degrees) => {
|
particleHandel.destroy();
|
tooltip.show(false);
|
sgworld._core.mouse(Viewer.container, 0);
|
this.isOpen["flame"] = false;
|
|
//var degrees = sgworld.Navigate.getMouseDegrees(movement);
|
sgworld.Analysis.createParticleEffect(
|
"flame",
|
{
|
x: degrees.lon,
|
y: degrees.lat,
|
z: degrees.height,
|
},
|
{
|
translation: Cesium.Cartesian3.fromElements(0, 0, 0), //平移
|
},
|
function (data) {}
|
);
|
}
|
);
|
particleHandel.setInputAction((event) => {
|
tooltip.showAt(event.endPosition, "点击绘制火焰");
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
sgworld.drawObj = {
|
drawHandler: particleHandel,
|
end: function () {
|
sgworld._core.mouse(Viewer.container, 0);
|
tooltip.show(false);
|
particleHandel && particleHandel.destroy();
|
},
|
};
|
},
|
//烟雾
|
smog() {
|
// this.$parent.closeAllHighLight("tx");
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.isOpen["smog"]) {
|
this.isOpen["smog"] = false;
|
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
// this.clearActive();
|
//结束之前操作
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["smog"] = true;
|
|
let tooltip = sgworld.Core.CreateTooltip();
|
particleHandel && particleHandel.destroy();
|
|
sgworld._core.mouse(
|
Viewer.container,
|
1,
|
window.SmartEarthRootUrl + "Workers/image/cursor/draw.cur"
|
);
|
|
particleHandel = sgworld.AttachEvent(
|
"OnLButtonClk",
|
(movement, degrees) => {
|
particleHandel.destroy();
|
tooltip.show(false);
|
sgworld._core.mouse(Viewer.container, 0);
|
|
this.isOpen["smog"] = false;
|
//var degrees = sgworld.Navigate.getMouseDegrees(movement);
|
sgworld.Analysis.createParticleEffect(
|
"smog",
|
{
|
x: degrees.lon,
|
y: degrees.lat,
|
z: degrees.height,
|
},
|
{
|
translation: Cesium.Cartesian3.fromElements(0, 0, 0), //平移
|
},
|
function (data) {}
|
);
|
}
|
);
|
particleHandel.setInputAction((event) => {
|
tooltip.showAt(event.endPosition, "点击绘制烟雾");
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
sgworld.drawObj = {
|
drawHandler: particleHandel,
|
end: function () {
|
sgworld._core.mouse(Viewer.container, 0);
|
tooltip.show(false);
|
particleHandel && particleHandel.destroy();
|
},
|
};
|
},
|
//喷泉
|
fountain() {
|
// this.$parent.closeAllHighLight("tx");
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.isOpen["fountain"]) {
|
this.isOpen["fountain"] = false;
|
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
|
// 清除所有的高亮状态
|
// this.clearActive();
|
//结束之前操作
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["fountain"] = true;
|
|
let tooltip = sgworld.Core.CreateTooltip();
|
particleHandel && particleHandel.destroy();
|
sgworld._core.mouse(
|
Viewer.container,
|
1,
|
window.SmartEarthRootUrl + "Workers/image/cursor/draw.cur"
|
);
|
|
particleHandel = sgworld.AttachEvent(
|
"OnLButtonClk",
|
(movement, degrees) => {
|
particleHandel.destroy();
|
tooltip.show(false);
|
sgworld._core.mouse(Viewer.container, 0);
|
this.isOpen["fountain"] = false;
|
|
//var degrees = sgworld.Navigate.getMouseDegrees(movement);
|
sgworld.Analysis.createParticleEffect(
|
"fountain",
|
{
|
x: degrees.lon,
|
y: degrees.lat,
|
z: degrees.height,
|
},
|
{
|
translation: Cesium.Cartesian3.fromElements(0, 0, 0), //平移
|
},
|
function (data) {}
|
);
|
}
|
);
|
particleHandel.setInputAction((event) => {
|
tooltip.showAt(event.endPosition, "点击绘制喷泉");
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
sgworld.drawObj = {
|
drawHandler: particleHandel,
|
end: function () {
|
sgworld._core.mouse(Viewer.container, 0);
|
tooltip.show(false);
|
particleHandel && particleHandel.destroy();
|
},
|
};
|
},
|
//烟花
|
fireworks() {
|
// this.$parent.closeAllHighLight("tx");
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.isOpen["fireworks"]) {
|
this.isOpen["fireworks"] = false;
|
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
// this.clearActive();
|
//结束之前操作
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["fireworks"] = true;
|
|
let tooltip = sgworld.Core.CreateTooltip();
|
particleHandel && particleHandel.destroy();
|
sgworld._core.mouse(
|
Viewer.container,
|
1,
|
window.SmartEarthRootUrl + "Workers/image/cursor/draw.cur"
|
);
|
|
particleHandel = sgworld.AttachEvent(
|
"OnLButtonClk",
|
(movement, degrees) => {
|
particleHandel.destroy();
|
tooltip.show(false);
|
sgworld._core.mouse(Viewer.container, 0);
|
this.isOpen["fireworks"] = false;
|
|
//var degrees = sgworld.Navigate.getMouseDegrees(movement);
|
sgworld.Analysis.createParticleEffect(
|
"fireworks",
|
{
|
x: degrees.lon,
|
y: degrees.lat,
|
z: degrees.height,
|
},
|
{},
|
function (data) {}
|
);
|
}
|
);
|
particleHandel.setInputAction((event) => {
|
tooltip.showAt(event.endPosition, "点击绘制烟花");
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
sgworld.drawObj = {
|
drawHandler: particleHandel,
|
end: function () {
|
sgworld._core.mouse(Viewer.container, 0);
|
tooltip.show(false);
|
particleHandel && particleHandel.destroy();
|
},
|
};
|
},
|
//清除特效
|
clearTX() {
|
//收缩面板
|
// this.close();
|
|
let type = ["fireworks", "fountain", "flame", "smog"];
|
type.forEach((item) => {
|
sgworld.Analysis.removeParticleEffect(item);
|
});
|
particleHandel && particleHandel.destroy();
|
|
TrailLine.forEach((item) => {
|
item.clear();
|
});
|
TrailLine = [];
|
|
KS.forEach((item) => {
|
item.remove();
|
});
|
KS = [];
|
|
LD.forEach((item) => {
|
item.deleteObject();
|
});
|
LD = [];
|
|
linkData.forEach((item) => {
|
Viewer.entities.remove(item.item);
|
});
|
},
|
//流动线
|
TrailLine_Line() {
|
// this.$parent.closeAllHighLight("tx");
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.isOpen["TrailLine_Line"]) {
|
this.isOpen["TrailLine_Line"] = false;
|
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
// this.clearActive();
|
|
//结束之前操作
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["TrailLine_Line"] = true;
|
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
"polyline",
|
{ clampToGround: true },
|
(entity) => {
|
sgworld.drawObj = undefined;
|
this.isOpen["TrailLine_Line"] = false;
|
if (entity) {
|
let _TrailLine = sgworld.Creator.createTrailLine(
|
entity.polyline.positions.getValue(),
|
{
|
//time: 3000, //时间(可选)
|
width: 5, //线宽(可选)
|
color: "#0000ff", //线颜色(可选)
|
//url: 'http://36.7.136.132:1988/sdkdemo/src/static/image/TrailLine.png', //渐变图片链接(可选)
|
clampToGround: true, //是否贴地(可选)
|
}
|
);
|
sgworld.Creator.SimpleGraphic.remove(entity.id);
|
TrailLine.push(_TrailLine);
|
}
|
}
|
);
|
},
|
//流动墙
|
TrailLine_Wall() {
|
// this.$parent.closeAllHighLight("tx");
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.isOpen["TrailLine_Wall"]) {
|
this.isOpen["TrailLine_Wall"] = false;
|
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
// this.clearActive();
|
// 根据当前的高亮状态,决定当前操作是否要显示高亮
|
|
//结束之前操作
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["TrailLine_Wall"] = true;
|
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
"polyline",
|
{ clampToGround: true },
|
(entity) => {
|
sgworld.drawObj = undefined;
|
this.isOpen["TrailLine_Wall"] = false;
|
if (entity) {
|
let positions = entity.polyline.positions.getValue();
|
addWall(positions, [entity]);
|
|
sgworld.Creator.SimpleGraphic.remove(entity.id);
|
}
|
}
|
);
|
async function addWall(positions, objectsToExclude) {
|
let LineInterpolation = sgworld.Core.LineInterpolation(Viewer, {
|
positions: positions,
|
num: 50,
|
getHeight: true,
|
});
|
let min = LineInterpolation.height;
|
let max = min.map((item) => {
|
return item + 50;
|
});
|
|
let _TrailLine = sgworld.Creator.createTrailLineWall(
|
LineInterpolation.positions,
|
{
|
maximumHeights: max,
|
minimumHeights: Array(max.length).fill(0),
|
color: "#ffffff", //线颜色(可选)
|
url: SmartEarthRootUrl + "Workers/image/colors.png",
|
}
|
);
|
TrailLine.push(_TrailLine);
|
}
|
},
|
//链路
|
link() {
|
// this.$parent.closeAllHighLight("tx");
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.isOpen["link"]) {
|
this.isOpen["link"] = false;
|
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
// this.clearActive();
|
|
//结束之前操作
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["link"] = true;
|
|
let _linkData = (sgworld.drawObj = sgworld.Creator.createLinkPros(() => {
|
this.isOpen["link"] = false;
|
}));
|
linkData.push(_linkData);
|
},
|
},
|
beforeDestroy() {
|
//this.clearMeasure();
|
},
|
};
|
</script>
|