<template>
|
<div class="container" id="moved1" v-if="ishow" @mousedown="moved">
|
<div class="top">
|
<span>模型控制</span>
|
<span class="close" @click="showtuli">X</span>
|
</div>
|
<div class="box">
|
<!-- <div>
|
<span>上海区域蓝膜</span>
|
<el-switch
|
v-model="value"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div> -->
|
<div>
|
<span>上海白模三维地图</span>
|
<el-switch
|
v-model="value1"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div>
|
<div>
|
<span>上海实景三维地图</span>
|
<el-switch
|
v-model="value2"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div>
|
<div>
|
<span>广州精模三维地图</span>
|
<el-switch
|
v-model="value6"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div>
|
<div>
|
<span>广州实景三维地图</span>
|
<el-switch
|
v-model="value7"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div>
|
<div>
|
<span>广州白膜三维地图</span>
|
<el-switch
|
v-model="value3"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div>
|
<div>
|
<span>主要建筑文字标签</span>
|
<el-switch
|
v-model="value4"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div>
|
</div>
|
<div class="bottom">
|
<div>
|
<span>光照</span>
|
<el-switch
|
v-model="light"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import bus from "../../utils/bus";
|
import { loaddian, loadBaimo } from "../../utils/work";
|
export default {
|
data() {
|
return {
|
value: false,
|
value1: true,
|
ishow: false,
|
value2: false,
|
value3: false,
|
value4: true,
|
value5: false,
|
value6: false,
|
light: false,
|
value7: false,
|
zhuji: false,
|
scale: 2.13,
|
};
|
},
|
methods: {
|
fly() {
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
113.32464417912955,
|
23.092040136439294,
|
4936.892248015968
|
),
|
orientation: {
|
heading: 0.1349372341578318,
|
pitch: -0.82222154573481174,
|
roll: 0,
|
},
|
});
|
},
|
showtuli() {
|
this.ishow = false;
|
},
|
moved(event) {
|
var drag = document.getElementById("moved1");
|
// //点击某物体时，用drag对象即可，move和up是全局区域，
|
// 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
|
var event = event || window.event; //兼容IE浏览器
|
// 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
|
var diffX = event.clientX * this.scale - drag.offsetLeft;
|
var diffY = event.clientY * this.scale - drag.offsetTop;
|
document.onmousemove = (event) => {
|
var event = event || window.event;
|
var moveX = event.clientX * this.scale - diffX;
|
var moveY = event.clientY * this.scale - diffY;
|
if (moveX < 0) {
|
moveX = 0;
|
} else if (moveX > 2304 * this.scale - drag.offsetWidth) {
|
moveX = 2304 * this.scale - drag.offsetWidth;
|
}
|
if (moveY < 0) {
|
moveY = 0;
|
} else if (moveY > 4096 * this.scale - drag.offsetHeight) {
|
moveY = 4096 * this.scale - drag.offsetHeight;
|
}
|
drag.style.left = moveX + "px";
|
drag.style.top = moveY + "px";
|
};
|
document.onmouseup = function (event) {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
};
|
},
|
removeitem() {
|
try {
|
Viewer.scene.primitives.remove(window.model2.item);
|
Viewer.scene.primitives.remove(window.model3.item);
|
Viewer.scene.primitives.remove(window.model4.item);
|
} catch (e) {}
|
},
|
//边框的显示隐藏
|
},
|
mounted() {
|
//初始取消光照
|
bus.$on("showindex", (e) => {
|
if (this.boxindex == e) {
|
this.boxindex = 0;
|
} else {
|
this.boxindex = e;
|
}
|
});
|
bus.$on("ishow", (e) => {
|
this.ishow = this.ishow ? false : true;
|
});
|
},
|
watch: {
|
value(data){
|
if (data) {
|
loadBaimo(7)
|
}else{
|
Viewer.scene.primitives.remove(window.model12.item);
|
Viewer.scene.primitives.remove(window.model13.item);
|
Viewer.scene.primitives.remove(window.model14.item);
|
Viewer.scene.primitives.remove( window.model15.item);
|
|
}
|
},
|
value1(data) {
|
if (data) {
|
loadBaimo(1)
|
}else{
|
Viewer.scene.primitives.remove(window.model1.item);
|
Viewer.scene.primitives.remove(window.model12.item);
|
}
|
},
|
value2(data) {
|
data ? loadBaimo(2) : Viewer.scene.primitives.remove(window.model8.item);
|
},
|
|
value4(data) {
|
if (data) {
|
// 上海注记
|
let urldian =
|
"http://183.162.245.49:8099/geoserver/SHP/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHP:SH_POI1&outputFormat=application%2Fjson";
|
//广州注记
|
let url =
|
"http://183.162.245.49:8099/geoserver/SHwuxiandian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHwuxiandian:1GZ_POI&outputFormat=application%2Fjson";
|
loaddian(url, "[TE_DESC]", "[height]");
|
loaddian(urldian, "[name]", "[Height]");
|
}else{
|
for (let index = 0; index < window.deleteObj.length; index++) {
|
window.deleteObj[index].deleteObject()
|
//window.deleteObj[index] =[]
|
}
|
window.deleteObj=[];
|
}
|
},
|
value6(data) {
|
if(data){
|
this.fly();
|
loadBaimo(4)
|
}else{
|
Viewer.scene.primitives.remove(window.model9.item);
|
Viewer.scene.primitives.remove(window.model10.item);
|
Viewer.scene.primitives.remove(window.model11.item);
|
}
|
},
|
value7(data) {
|
data ? loadBaimo(5) : this.removeitem();
|
data ? this.fly() : "";
|
},
|
value3(data) {
|
data ? loadBaimo(6) : Viewer.scene.primitives.remove(window.model6.item);
|
data ? this.fly() : "";
|
},
|
light(data) {
|
window.Viewer.scene.globe.enableLighting = data;
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.top {
|
width: 94%;
|
height: 100px;
|
margin: 0 auto;
|
border-bottom: 2px solid #fff;
|
color: #fff;
|
}
|
.top > span {
|
display: inline-block;
|
margin: 10px 20px;
|
font-size: 40px;
|
letter-spacing: 5px;
|
font-weight: 300;
|
line-height: 80px;
|
margin-left: 40px;
|
font-size: 42px;
|
font-family: Source Han Sans SC;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
.container {
|
width: 700px;
|
position: absolute;
|
right: 340px;
|
top: 180px;
|
z-index: 50;
|
background: url(~@/assets/image/test/22.png);
|
background-position: center;
|
background-size: 100% 100%;
|
cursor: move;
|
}
|
.box {
|
width: 96%;
|
font-weight: bold;
|
display: flex;
|
-ms-flex-wrap: wrap;
|
flex-wrap: wrap;
|
flex-direction: column;
|
-ms-flex-pack: distribute;
|
align-items: center;
|
border-bottom: 2px solid #fff;
|
margin: 30px auto;
|
}
|
.container >>> .el-switch__core {
|
width: 140px !important;
|
height: 50px;
|
margin-left: 30px;
|
border-radius: 28px;
|
}
|
.container >>> .el-switch__core:after {
|
width: 48px;
|
height: 48px;
|
margin-left: 0px;
|
top: 0px;
|
}
|
.container >>> .el-switch.is-checked .el-switch__core::after {
|
margin-left: -50px !important;
|
}
|
.box > div {
|
width: 100%;
|
height: 70px;
|
font-size: 40px;
|
line-height: 70px;
|
margin-top: 20px;
|
color: #fff;
|
margin-left: 55px;
|
}
|
.box > div > span {
|
display: inline-block;
|
width: 50%;
|
text-align: center;
|
}
|
.box > div:nth-last-child(1){
|
margin-bottom: 30px;
|
}
|
.bottom{
|
width: 100%;
|
margin-bottom: 20px;
|
}
|
.bottom > div {
|
font-weight: bold;
|
width: 100%;
|
font-size: 40px;
|
line-height: 70px;
|
margin-top: 20px;
|
color: #fff;
|
margin-left: 55px;
|
}
|
.bottom > div:nth-last-child(1) {
|
margin-bottom: 40px;
|
}
|
.bottom > div > span {
|
display: inline-block;
|
width: 50%;
|
text-align: center;
|
}
|
.close {
|
position: absolute;
|
right: 20px;
|
top: 0px;
|
cursor: pointer;
|
}
|
/* .container>div{
|
width: 100%;
|
height: 20%;
|
border: 1px solid #000;
|
} */
|
</style>
|
