<template>
|
<div
|
class="plotting"
|
id="plotting"
|
>
|
<div class="plottingTools">
|
<div
|
class="plottingTool"
|
@click="plotting('label')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="文本"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/wb1.png" />
|
</el-button>
|
</el-tooltip>
|
</div>
|
<div
|
class="plottingTool"
|
@click="plotting('billboard')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="图标"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/tb1.png" />
|
</el-button>
|
</el-tooltip>
|
</div>
|
|
<div
|
class="plottingTool"
|
@click="plotting('polyline')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="线"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/x1.png" />
|
</el-button>
|
</el-tooltip>
|
</div>
|
|
<div
|
class="plottingTool"
|
@click="plotting('rectangle')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="矩形"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/jx1.png" />
|
</el-button>
|
</el-tooltip>
|
</div>
|
<div
|
class="plottingTool"
|
@click="plotting('polygon')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="多边形"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/dbx1.png" />
|
</el-button>
|
</el-tooltip>
|
</div>
|
<!-- <div
|
class="plottingTool"
|
@click="plotting('circle')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="圆形"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/d1.png" />
|
</el-button>
|
</el-tooltip>
|
</div> -->
|
<!-- <div class="plottingTool" @click="militaryPlotting('Sector', 'polygon')">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="扇形"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/sx1.png" />
|
</el-button>
|
</el-tooltip>
|
</div> -->
|
|
<!-- <div
|
class="plottingTool"
|
@click="plotting('cylinder')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="圆柱"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/bh/yz3.png" /> </el-button></el-tooltip>
|
</div>
|
<div
|
class="plottingTool"
|
@click="plotting('cone')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="圆锥"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/bh/yz4.png" /> </el-button></el-tooltip>
|
</div>
|
<div
|
class="plottingTool"
|
@click="plotting('box')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="立方体"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/bh/lft1.png" /> </el-button></el-tooltip>
|
</div>
|
<div
|
class="plottingTool"
|
@click="plotting('polyhedron')"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="多边体"
|
placement="top-start"
|
popper-class="item_tooltip"
|
>
|
<el-button> <img src="@/assets/img/right/bh/dbt1.png" /> </el-button></el-tooltip>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
hr {
|
margin: 10px 0;
|
width: 111%;
|
margin-left: -15px;
|
}
|
/* .el-button {
|
width: 200px;
|
} */
|
|
.el-button:focus,
|
.el-button:hover {
|
background: transparent;
|
}
|
.plotting {
|
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: 300px;
|
}
|
.plottingList {
|
background: transparent;
|
padding-top: 10px;
|
}
|
.plottingTools {
|
margin-left: 20px;
|
}
|
.plottingTool {
|
border: 1px solid #999;
|
border-radius: 5px;
|
float: left;
|
width: 40px;
|
height: 40px;
|
margin: 5px;
|
}
|
.plottingTool img {
|
margin: 4px;
|
}
|
.plottingTool1 {
|
padding: 5px 0;
|
}
|
|
.plottingTool:hover {
|
background: rgba(0, 168, 255, 0.16);
|
}
|
.plottingTool1:hover {
|
background: rgba(0, 168, 255, 0.16);
|
}
|
|
.tool-title {
|
margin: 1px 10px;
|
}
|
.tool-title label {
|
vertical-align: top;
|
}
|
.plotting 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: transparent;
|
/* background: rgba(0, 0, 0, .8); */
|
}
|
.el-button label {
|
font-size: 14px;
|
}
|
.closeTool {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
.selected,
|
.active {
|
background: rgba(0, 168, 255, 0.16);
|
/* background: skyblue; */
|
/* border-radius: 5px; */
|
}
|
</style>
|
|
<script>
|
import Bus from "@tools/Bus";
|
export default {
|
name: "plotting",
|
data() {
|
return {
|
status: false,
|
isOpen: {
|
label: false,
|
billboard: false,
|
rectangle: false,
|
polyline: false,
|
polygon: false,
|
circle: false,
|
cylinder: false,
|
cone: false,
|
box: false,
|
polyhedron: false,
|
Sector: false,
|
StraightArrow: false,
|
SwallowtailArrow: false,
|
wlyz: false,
|
mxdd: false
|
},
|
active: undefined
|
};
|
},
|
mounted() { },
|
methods: {
|
addSimpleGraphicTotree(entity) {
|
let style = sgworld.Creator.SimpleGraphic.getStyle(entity);
|
let data = {
|
id: entity.id,
|
name: entity.name,
|
sourceType: "SimpleGraphic",
|
class: style.type,
|
item: entity,
|
style: style
|
};
|
Bus.$emit("addOtherData", "对象", data);
|
|
},
|
// // 清除所有高亮
|
// clearHighLight() {
|
// this.closeList();
|
// //this.clearActive();
|
// this.clearSelected();
|
// },
|
// // yhadd
|
// // 清除一级的选中状态
|
// clearSelected() {
|
// var a = document.getElementsByClassName("selected")[0];
|
// if (a) {
|
// a.classList.remove("selected");
|
// }
|
// },
|
// // 清除二级的选中状态
|
// clearActive() {
|
// for (var item in this.isOpen) {
|
// this.isOpen[item] = false;
|
// }
|
// },
|
// // yhadd
|
// //点
|
|
//标绘
|
plotting(type) {
|
if (this.active !== undefined && type == "polyline") {
|
if (this.isOpen["polyline"]) {
|
this.isOpen["polyline"] = false;
|
sgworld.drawObj &&
|
sgworld.drawObj.end &&
|
sgworld.drawObj.end("cancel");
|
return;
|
}
|
}
|
else {
|
// this.$parent.closeAllHighLight("plotting");
|
if (this.isOpen[type]) {
|
this.isOpen[type] = false;
|
sgworld.drawObj &&
|
sgworld.drawObj.end &&
|
sgworld.drawObj.end("cancel");
|
return;
|
}
|
}
|
//this.clearActive();
|
//this.$parent.$parent.$parent.closeAll();
|
//type === "polyline" && this.closeList();
|
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
// this.isOpen[type] = true;
|
// this.isOpen["polyline"] = true;
|
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
type,
|
{
|
// clampToGround: false
|
},
|
entity => {
|
//关闭我的资源弹窗
|
Bus.$emit('closeMyResourcePop', true);
|
//关闭地块信息弹窗
|
Bus.$emit('closeLandInfoPop', true);
|
//关闭右侧信息弹窗
|
Bus.$emit('closeRightPop', true);
|
sgworld.drawObj = undefined;
|
this.isOpen[type] = false;
|
|
this.addSimpleGraphicTotree(entity);
|
}
|
);
|
},
|
militaryPlotting(type, category) {
|
// this.$parent.closeAllHighLight("plotting");
|
if (this.isOpen[type]) {
|
this.isOpen[type] = false;
|
sgworld.drawObj && sgworld.drawObj.end && sgworld.drawObj.end("cancel");
|
return;
|
}
|
// 清除所有的高亮状态
|
//this.clearActive();
|
// 根据当前的高亮状态，决定当前操作是否要显示高亮
|
//this.$parent.$parent.$parent.closeAll();
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen[type] = true;
|
|
if (type === "wlyz") {
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
"billboard",
|
{
|
width: 48,
|
height: 48,
|
image: SmartEarthRootUrl + "Workers/image/yz.png"
|
// image: "./static/img/yz.png",
|
},
|
entity => {
|
sgworld.drawObj = undefined;
|
this.isOpen[type] = false;
|
}
|
);
|
return;
|
}
|
else if (type === "wl-sfr") {
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
"billboard",
|
{
|
width: 48,
|
height: 48,
|
image: SmartEarthRootUrl + "Workers/image/sa5.gltf"
|
},
|
entity => {
|
sgworld.drawObj = undefined;
|
this.isOpen[type] = false;
|
}
|
);
|
return;
|
}
|
else if (type === "mx-cl") {
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
"model",
|
{
|
url: SmartEarthRootUrl + "Workers/image/s3501.gltf",
|
scale: 0.1
|
},
|
entity => {
|
sgworld.drawObj = undefined;
|
this.isOpen[type] = false;
|
}
|
);
|
return;
|
}
|
else if (type === "mxdd") {
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
"model",
|
{
|
url: SmartEarthRootUrl + "Workers/image/sa5.gltf",
|
scale: 0.1
|
},
|
entity => {
|
sgworld.drawObj = undefined;
|
this.isOpen[type] = false;
|
}
|
);
|
return;
|
}
|
|
sgworld.drawObj = sgworld.Creator.militaryPlotting(
|
type,
|
category,
|
entity => {
|
//关闭我的资源弹窗
|
Bus.$emit('closeMyResourcePop', true);
|
//关闭地块信息弹窗
|
Bus.$emit('closeLandInfoPop', true);
|
//关闭右侧信息弹窗
|
Bus.$emit('closeRightPop', true);
|
sgworld.drawObj = undefined;
|
this.isOpen[type] = false;
|
}
|
);
|
|
// sgworld.drawObj = sgworld.Creator.militaryPlotting(
|
// type,
|
// category,
|
// entity => {
|
// sgworld.drawObj = undefined;
|
// this.isOpen[type] = false;
|
// }
|
// );
|
},
|
clear() {
|
// // this.$parent.closeAll();
|
// this.$parent.$parent.$parent.closeAll();
|
// this.closeList();
|
// sgworld.Creator.SimpleGraphic.clear();
|
// sgworld.Creator.MilitaryPlotting.clear();
|
},
|
close() {
|
// this.$parent.isShowPlotting = false;
|
},
|
closeList() {
|
// this.active = undefined;
|
}
|
}
|
};
|
</script>
|
