<template>
|
<div class="roamPanel">
|
<div class="functionModule">
|
<div class="title" style="margin-top: 0px">功能</div>
|
<div class="container">
|
<div class="roamItem" @click.stop="handleAroundClick">
|
<div class="roamAround">
|
<img src="@/assets/img/layer/ddrf.png" />
|
</div>
|
<span>定点绕飞</span>
|
</div>
|
</div>
|
</div>
|
<div class="classifyModule">
|
<div class="title">分类</div>
|
<div class="container">
|
<div
|
:class="[value1.active ? 'active' : '', 'roamItem']"
|
v-for="value1 in classifyModuleList"
|
:key="value1.id"
|
@click.stop="handleRoamClick(value1)"
|
>
|
<img :src="value1.src" />
|
<span>{{ value1.name }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
window.PathAnimationData = {
|
isFly: false,
|
};
|
window.currentOperator = null;
|
import store from "@/utils/store.js";
|
import { roman } from "../../../../static/json/roam.js";
|
export default {
|
name: "LayerPanel",
|
data() {
|
return {
|
classifyModuleList: [
|
{
|
id: "zchx",
|
name: "主城核心",
|
active: false,
|
src: require("@/assets/img/layer/zchx.png"),
|
},
|
{
|
id: "jgld",
|
name: "景观绿地",
|
active: false,
|
src: require("@/assets/img/layer/jgld.png"),
|
},
|
// {
|
// id: 'cyjq',
|
// name: '产业集群',
|
// active: false,
|
// src: require("@/assets/img/layer/cyjq.png")
|
// },
|
{
|
id: "zwck",
|
name: "政务窗口",
|
active: false,
|
src: require("@/assets/img/layer/zwck.png"),
|
},
|
],
|
};
|
},
|
methods: {
|
// 定点绕飞
|
handleAroundClick() {
|
this.closeCurrentOperator();
|
store.setRoamPanelShow(false);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end &&
|
((window.PathAnimationData.isFly = true),
|
sgworld.drawObj.end(),
|
(window.PathAnimationData.isFly = false)));
|
|
// if (window.PathAnimationData.isFly) {
|
// //结束路径漫游
|
// this.ljmy();
|
// }
|
window.pointerFly=sgworld.drawObj = window.currentOperator = sgworld.Analysis.setPointFly();
|
},
|
// 结束顶点绕飞
|
setClearPointFly() {
|
if (this.pointerFly) {
|
this.pointerFly && this.pointerFly.end();
|
this.pointerFly = null;
|
}
|
},
|
// 漫游
|
handleRoamClick(result) {
|
store.setBasicMap("三维模型");
|
store.setRoamPanelShow(false);
|
store.setSearchPanelShow(false);
|
const val = roman.filter((res) => {
|
if (res.name == result.name) {
|
return res;
|
}
|
});
|
const degreesArr = val[0].value;
|
sgworld.Creator.getFlyData(degreesArr, (data) => {
|
data.showPoint = false;
|
data.showLine = true;
|
data.mode = 1;
|
// 弹窗数据
|
window.PathAnimationData = {
|
flyData: data,
|
};
|
window.PathAnimationData.winIndex = layer.open({
|
type: 2,
|
title: result.name,
|
shade: false,
|
area: ["100%", "210px"],
|
offset: "r",
|
skin: "other-class",
|
content: SmartEarthRootUrl + "Workers/path/Path.html",
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
store.setSearchPanelShow(true);
|
},
|
});
|
});
|
},
|
closeCurrentOperator() {
|
if (window.currentOperator) {
|
try {
|
window.currentOperator.forceEndHanlder();
|
window.currentOperator = undefined;
|
} catch (ex) {}
|
}
|
try {
|
parent.clearnViewshed();
|
} catch (ex) {}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.roamPanel {
|
width: 100%;
|
position: absolute;
|
bottom: 0px;
|
align-items: center;
|
padding: 0.1rem;
|
background: white;
|
z-index: 3001;
|
padding-left: 0.25rem;
|
}
|
|
.title {
|
height: 25px;
|
font-size: 16px;
|
font-family: Source Han Sans SC;
|
font-weight: 700;
|
color: #181818;
|
line-height: 25px;
|
margin: 10px 0px 2px 0;
|
}
|
|
.container {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
}
|
|
.roamItem {
|
/* font-size: 14px; */
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
margin-right: 30px;
|
cursor: pointer;
|
}
|
|
.roamAround {
|
width: 40px;
|
height: 40px;
|
background-color: #e6e6e6;
|
border-radius: 10px;
|
text-align: center;
|
padding-top: 5px;
|
}
|
|
.roamAround img {
|
display: block;
|
margin: 0 auto;
|
width: 30px;
|
height: 30px;
|
}
|
|
.active {
|
color: #4187ff;
|
border: 1px solid #4187ff;
|
border-radius: 10px;
|
}
|
|
img {
|
display: block;
|
width: 60px;
|
height: 40px;
|
margin-bottom: 5px;
|
}
|
</style>
|
