<template>
|
<div class="container" id="moved">
|
<div class="top">
|
<div class="far">
|
<span @click="benear"></span>
|
<span @click="befar"></span>
|
</div>
|
<!-- <div class="size">
|
<span
|
@mousemove="changebac(index)"
|
@mouseout="returnbac(index)"
|
v-for="(item, index) in top2"
|
:key="index"
|
:style="{ background: `url(${item.img})` }"
|
></span>
|
</div> -->
|
</div>
|
<div class="bot">
|
<span
|
v-for="(item, index) in bot1"
|
:key="index"
|
@mousemove="changebac1(index)"
|
@click="remove(index)"
|
@mouseout="returnbac1(index)"
|
:style="{ background: `url(${item.img})` }"
|
></span>
|
<div
|
:class="istrue ? 'botImg1' : 'botImg'"
|
@mousemove="makebig"
|
@mouseout="makeSmall"
|
>
|
<span id="img" @click="changeMap">
|
<span class="mapinner">街道图</span>
|
</span>
|
<span id="img1" @click="changeMap1" :style="move1">
|
<span class="mapinner1">影像图</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let gdMap = null;
|
|
import { addMpt } from "../../../utils/work";
|
import bus from "../../../utils/bus";
|
export default {
|
data() {
|
return {
|
move1: {
|
transform: "translateX(-230px)",
|
"z-index": "2",
|
transition: "transform,1s",
|
},
|
// top2: [
|
// { img: require("@/assets/image/test/组 160.png") },
|
// { img: require("@/assets/image/test/组 161.png") },
|
// { img: require("@/assets/image/test/组 162.png") },
|
// ],
|
bot1: [
|
{ img: require("@/assets/image/test/组 163.png") },
|
{ img: require("@/assets/image/test/组 164.png") },
|
{ img: require("@/assets/image/test/组 165.png") },
|
],
|
isshowGD: false,
|
istrue: true,
|
};
|
},
|
methods: {
|
remove(index) {
|
if (index == 0) {
|
bus.$emit("clearEve", true);
|
window.FieldIntensity && window.FieldIntensity.deleteObject();
|
window.imageidXT && window.Viewer.entities.removeById(window.imageidXT);
|
}
|
if (index == 1) {
|
window.createTool = true;
|
}
|
},
|
makebig() {
|
this.istrue = false;
|
this.move1.transform = "translateX(0px)";
|
},
|
makeSmall() {
|
this.istrue = true;
|
this.move1.transform = "translateX(-230px)";
|
},
|
//移入移出变色
|
changebac(index) {
|
let movein = [
|
{ img: require("@/assets/image/change/组177.png") },
|
{ img: require("@/assets/image/change/组176.png") },
|
{ img: require("@/assets/image/change/组175.png") },
|
];
|
this.$set(this.top2, index, movein[index]);
|
},
|
returnbac(index) {
|
let data = [
|
{ img: require("@/assets/image/test/组 160.png") },
|
{ img: require("@/assets/image/test/组 161.png") },
|
{ img: require("@/assets/image/test/组 162.png") },
|
];
|
this.$set(this.top2, index, data[index]);
|
},
|
changebac1(index) {
|
let movein = [
|
{ img: require("@/assets/image/change/组172.png") },
|
{ img: require("@/assets/image/change/组173.png") },
|
{ img: require("@/assets/image/change/组174.png") },
|
];
|
this.$set(this.bot1, index, movein[index]);
|
},
|
returnbac1(index) {
|
let movein = [
|
{ img: require("@/assets/image/test/组 163.png") },
|
{ img: require("@/assets/image/test/组 164.png") },
|
{ img: require("@/assets/image/test/组 165.png") },
|
];
|
this.$set(this.bot1, index, movein[index]);
|
},
|
changeMap1() {
|
Viewer.imageryLayers._layers[0].show = true;
|
addMpt(true);
|
if (gdMap) {
|
gdMap.setVisibility(false);
|
this.move1["z-index"] = 2;
|
} else {
|
return;
|
}
|
},
|
changeMap() {
|
this.move1["z-index"] = 0;
|
Viewer.imageryLayers._layers[0].show = false;
|
addMpt(false);
|
if (gdMap) {
|
gdMap.setVisibility(true);
|
} else {
|
var base = {
|
url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
|
enablePickFeatures: false,
|
usePreCachedTilesIfAvailable: false, // 是否使用服务的内置的切片方案，偏移纠正需要使用如下自定义的方案
|
tilingScheme: sgworld.Core.getOffsetTilingScheme(), // 偏移纠正
|
};
|
gdMap = sgworld.Creator.createArcGisImageryLayer(
|
"街道",
|
base,
|
"0",
|
undefined,
|
true,
|
""
|
);
|
this.isshowGD = true;
|
}
|
},
|
benear() {
|
$(".navigation-control")[0].click();
|
},
|
befar() {
|
$(".navigation-control-last")[0].click();
|
},
|
//添加mpt地形影像
|
},
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
width: 0px;
|
height: 1900px;
|
margin-left: 100px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.top {
|
margin: 20px;
|
margin-top: 50px;
|
width: 100px;
|
height: 500px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
transform: translateX(-16px);
|
}
|
.far {
|
display: block;
|
width: 100%;
|
height: 36%;
|
display: flex;
|
flex-direction: column;
|
}
|
.far > span {
|
display: block;
|
width: 100%;
|
height: 49%;
|
cursor: pointer;
|
background-size: 100% 100% !important;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
}
|
.far > span:nth-child(1) {
|
background: url(../../../assets/image/test/+.png);
|
}
|
.far > span:nth-child(1):hover {
|
background: url(../../../assets/image/change/图层2.png);
|
}
|
.far > span:nth-child(2) {
|
background: url(../../../assets/image/test/-.png);
|
}
|
.far > span:nth-child(2):hover {
|
background: url(../../../assets/image/change/图层1.png);
|
}
|
.size {
|
display: block;
|
width: 100%;
|
height: 54%;
|
}
|
.size > span {
|
display: block;
|
width: 100%;
|
height: 33%;
|
background-size: 100% 100% !important;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
}
|
.bot {
|
width: 100px;
|
height: 310px;
|
}
|
.bot > span {
|
display: block;
|
width: 100%;
|
height: 29%;
|
background-size: 100% 100% !important;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
}
|
#img,
|
#img1 {
|
display: block;
|
margin: 20px 0;
|
width: 250px;
|
height: 150px;
|
}
|
#img {
|
background: url(../../../assets/image/subject/二维.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: absolute;
|
margin: 20px;
|
z-index: 1;
|
}
|
#img1 {
|
background: url(../../../assets/image/change/组182.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: absolute;
|
margin: 20px;
|
left: 350px;
|
}
|
.botImg {
|
width: 540px;
|
height: 190px;
|
background: transparent;
|
}
|
.botImg1 {
|
width: 340px;
|
height: 190px;
|
background: transparent;
|
}
|
.mapinner {
|
display: block;
|
width: 140px;
|
height: 40px;
|
font-weight: 700;
|
text-align: center;
|
font-size: 35px;
|
position: absolute;
|
right: 10px;
|
bottom: 10px;
|
}
|
.mapinner:hover {
|
background: #3385ff;
|
}
|
.mapinner1 {
|
display: block;
|
width: 140px;
|
height: 40px;
|
font-weight: 700;
|
text-align: center;
|
font-size: 35px;
|
position: absolute;
|
right: 10px;
|
bottom: 15px;
|
}
|
.mapinner1:hover {
|
background: #3385ff;
|
}
|
</style>
|
