<template>
|
<div class="plotting" id="plotting">
|
<div class="tool-title">
|
<!-- <img src="@/assets/img/right/head.png" /> -->
|
<label>标绘</label>
|
</div>
|
<hr />
|
<el-row :gutter="20" v-show="active !== undefined">
|
<el-col :span="12">
|
<transition name="el-fade-in-linear">
|
<div class="plottingList">
|
<div class="plotting-point" v-if="active === 'point'">
|
<div
|
:class="
|
isOpen['label'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="plotting('label')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/wb1.png" />
|
<label>文本</label>
|
</el-button>
|
</div>
|
<div
|
:class="
|
isOpen['billboard'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="plotting('billboard')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/tb1.png" />
|
<label>图标</label>
|
</el-button>
|
</div>
|
</div>
|
<div class="plotting-point" v-if="active === 'polyline'">
|
<div @click="plotting('polyline')">
|
<el-button>
|
<img src="@/assets/img/right/bh/x.png" />
|
<label>折线</label>
|
</el-button>
|
</div>
|
</div>
|
<div class="plotting-point" v-if="active === 'polygon'">
|
<div
|
:class="
|
isOpen['rectangle'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="plotting('rectangle')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/jx1.png" />
|
<label>矩形</label>
|
</el-button>
|
</div>
|
<div
|
:class="
|
isOpen['polygon'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="plotting('polygon')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/dbx1.png" />
|
<label>多边形</label>
|
</el-button>
|
</div>
|
<div
|
:class="
|
isOpen['circle'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="plotting('circle')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/d1.png" />
|
<label>圆形</label>
|
</el-button>
|
</div>
|
<div
|
:class="
|
isOpen['Sector'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="militaryPlotting('Sector', 'polygon')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/sx1.png" />
|
<label>扇形</label>
|
</el-button>
|
</div>
|
</div>
|
<div class="plotting-point" v-if="active === 'box'">
|
<div
|
:class="
|
isOpen['cylinder'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="plotting('cylinder')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/yz3.png" />
|
<label>圆柱</label>
|
</el-button>
|
</div>
|
<div
|
:class="isOpen['cone'] ? 'active plottingTool' : 'plottingTool'"
|
@click="plotting('cone')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/yz4.png" />
|
<label>圆锥</label>
|
</el-button>
|
</div>
|
<div
|
:class="isOpen['box'] ? 'active plottingTool' : 'plottingTool'"
|
@click="plotting('box')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/lft1.png" />
|
<label>立方体</label>
|
</el-button>
|
</div>
|
<div
|
:class="
|
isOpen['polyhedron'] ? 'active plottingTool' : 'plottingTool'
|
"
|
@click="plotting('polyhedron')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/dbt1.png" />
|
<label>多边体</label>
|
</el-button>
|
</div>
|
</div>
|
<div class="plotting-point" v-if="active === 'military'">
|
<div
|
:class="
|
isOpen['StraightArrow']
|
? 'active plottingTool'
|
: 'plottingTool'
|
"
|
@click="militaryPlotting('StraightArrow', 'polygon')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/sljb1.png" />
|
<label>粗直箭头</label>
|
</el-button>
|
</div>
|
<div
|
:class="
|
isOpen['SwallowtailArrow']
|
? 'active plottingTool'
|
: 'plottingTool'
|
"
|
@click="militaryPlotting('SwallowtailArrow', 'polygon')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/sljb1.png" />
|
<label>燕尾箭头</label>
|
</el-button>
|
</div>
|
<div
|
:class="isOpen['wlyz'] ? 'active plottingTool' : 'plottingTool'"
|
@click="militaryPlotting('wlyz')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/wljb1.png" />
|
<label>纹理标绘</label>
|
</el-button>
|
</div>
|
<div
|
:class="isOpen['mxdd'] ? 'active plottingTool' : 'plottingTool'"
|
@click="militaryPlotting('mxdd')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/mxjb1.png" />
|
<label>导弹模型</label>
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</transition></el-col
|
>
|
<el-col :span="12">
|
<div class="plottingTools">
|
<div class="plottingTool1" @click="d" id="d">
|
<el-button>
|
<img src="@/assets/img/right/bh/d1.png" />
|
<label>点要素</label>
|
</el-button>
|
</div>
|
<div class="plottingTool1" @click="plotting('polyline')" id="x">
|
<el-button>
|
<img src="@/assets/img/right/bh/x1.png" />
|
<label>线要素</label>
|
</el-button>
|
</div>
|
<div class="plottingTool1" @click="m" id="m">
|
<el-button>
|
<img src="@/assets/img/right/bh/m1.png" />
|
<label>面要素</label>
|
</el-button>
|
</div>
|
<div class="plottingTool1" @click="t" id="t">
|
<el-button>
|
<img src="@/assets/img/right/bh/t1.png" />
|
<label>体要素</label>
|
</el-button>
|
</div>
|
<!-- <div class="plottingTool1" @click="js" id="js">
|
<el-button>
|
<img src="@/assets/img/right/bh/js1.png" />
|
<label>其他要素</label>
|
</el-button>
|
</div> -->
|
</div>
|
</el-col>
|
</el-row>
|
<div
|
class="plottingTools"
|
v-show="active == undefined"
|
style="margin-left: 20px"
|
>
|
<div class="plottingTool" @click="d">
|
<el-button>
|
<img src="@/assets/img/right/bh/d1.png" />
|
<label>点要素</label>
|
</el-button>
|
</div>
|
<div
|
:class="isOpen['polyline'] ? 'active plottingTool' : 'plottingTool'"
|
@click="plotting('polyline')"
|
>
|
<el-button>
|
<img src="@/assets/img/right/bh/x1.png" />
|
<label>线要素</label>
|
</el-button>
|
</div>
|
<div class="plottingTool" @click="m">
|
<el-button>
|
<img src="@/assets/img/right/bh/m1.png" />
|
<label>面要素</label>
|
</el-button>
|
</div>
|
<div class="plottingTool" @click="t">
|
<el-button>
|
<img src="@/assets/img/right/bh/t1.png" />
|
<label>体要素</label>
|
</el-button>
|
</div>
|
<!-- <div class="plottingTool" @click="js">
|
<el-button>
|
<img src="@/assets/img/right/bh/js1.png" />
|
<label>其他要素</label>
|
</el-button>
|
</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 {
|
background: transparent;
|
width: 270px;
|
}
|
.plottingList {
|
background: transparent;
|
padding-top: 10px;
|
}
|
.plottingTool {
|
padding: 5px 0;
|
padding-left: 15px;
|
}
|
.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
|
//点
|
d() {
|
this.clearSelected();
|
if (this.active === "point") {
|
this.closeList();
|
} else {
|
this.active = "point";
|
document.getElementById("d").classList.add("selected");
|
}
|
},
|
//线
|
x() {
|
this.clearSelected();
|
if (this.active === "polyline") {
|
this.closeList();
|
} else {
|
this.active = "polyline";
|
document.getElementById("x").classList.add("selected");
|
}
|
},
|
//面
|
m() {
|
this.clearSelected();
|
if (this.active === "polygon") {
|
this.closeList();
|
} else {
|
this.active = "polygon";
|
document.getElementById("m").classList.add("selected");
|
}
|
},
|
//体
|
t() {
|
this.clearSelected();
|
if (this.active === "box") {
|
this.closeList();
|
} else {
|
this.active = "box";
|
document.getElementById("t").classList.add("selected");
|
}
|
},
|
//军事
|
js() {
|
this.clearSelected();
|
if (this.active === "military") {
|
this.closeList();
|
} else {
|
this.active = "military";
|
document.getElementById("js").classList.add("selected");
|
}
|
},
|
//标绘
|
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.$parent.$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: true
|
},
|
entity => {
|
sgworld.drawObj = undefined;
|
this.isOpen[type] = false;
|
|
this.addSimpleGraphicTotree(entity);
|
}
|
);
|
},
|
militaryPlotting(type, category) {
|
this.$parent.$parent.$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 => {
|
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>
|
