<template>
|
<div class="switchImagerLayer">
|
<ul>
|
<!-- <li>
|
<img
|
@click="switchImagerLayerClick('街景')"
|
src="@/assets/img/new/jiejing.png"
|
/>
|
</li>-->
|
<li>
|
<img @click="switchImagerLayerClick('影像底图')" src="@/assets/img/new/yingxiang.png" />
|
</li>
|
<li>
|
<div class="radiogroup" @change="switchImagerLayerClick('二维底图')">
|
<el-radio-group v-model="radio">
|
<el-radio :label="2">标准白</el-radio>
|
<el-radio :label="1">科技蓝</el-radio>
|
<el-radio :label="0">暗夜黑</el-radio>
|
</el-radio-group>
|
<img src="@/assets/img/new/shiliang.png" />
|
</div>
|
</li>
|
<li>
|
<img @click="switchImagerLayerClick('实景模型')" src="@/assets/img/new/sanwei.png" />
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<style scoped>
|
.switchImagerLayer {
|
width: 395px;
|
height: 88px;
|
position: absolute;
|
right: 78px;
|
top: -90px;
|
}
|
.switchImagerLayer ul {
|
width: 100%;
|
list-style: none;
|
display: flex;
|
justify-content: space-between;
|
}
|
li {
|
cursor: pointer;
|
width: 124px;
|
height: 89px;
|
}
|
li img {
|
width: 100%;
|
}
|
li:hover {
|
background-color: rgb(0, 136, 255, 0.4);
|
}
|
.switchImagerLayer li .radiogroup {
|
position: absolute;
|
}
|
.switchImagerLayer li .el-radio-group {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
height: 50px;
|
position: absolute;
|
left: 10px;
|
top: 5px;
|
z-index: 10;
|
}
|
.el-radio {
|
color: #fff;
|
text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 0px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000,
|
-1px 0px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 0px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000,
|
-1px 0px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 0px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000,
|
-1px 0px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
|
-1px 1px 0 #000, 1px 0px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000,
|
-1px 0px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, 0px -1px 0 #000,
|
0px 1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, 0px -1px 0 #000,
|
0px 1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, 0px -1px 0 #000,
|
0px 1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, 0px -1px 0 #000,
|
0px 1px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000,
|
0px 0px 0 #000, 0 0 0 #000;
|
}
|
</style>
|
|
<script>
|
import Bus from "../tools/Bus";
|
import baseVuex from "@mixin/baseVuex";
|
export default {
|
name: "switchImagerLayer",
|
components: {},
|
data() {
|
return {
|
radio: null,
|
camera: {
|
position: [116.501508, 39.787361, 700],
|
orientation: {
|
heading: 0,
|
pitch: -45,
|
roll: 0
|
}
|
}
|
};
|
},
|
mounted() {
|
Bus.$on("switchImagerLayerClick", data => {
|
if (data) {
|
this.switchImagerLayerClick(data);
|
}
|
});
|
},
|
mixins: [baseVuex],
|
methods: {
|
clearLayer() {},
|
switchImagerLayerClick(type) {
|
console.log(type);
|
switch (type) {
|
case "影像底图":
|
this.radio = null;
|
this.changeLayer("2d"); //添加相机范围限制
|
this.clearSwitchImagerLayerClick();
|
Bus.$emit("switchImage");
|
this.$parent.changeImage("1");
|
break;
|
case "二维底图":
|
this.changeLayer("2d"); //添加相机范围限制
|
this.clearSwitchImagerLayerClick();
|
if (this.radio == 0) {
|
Bus.$emit("heijin2D");
|
} else if (this.radio == 1) {
|
Bus.$emit("shenlan2D");
|
} else {
|
Bus.$emit("baise2D");
|
}
|
// Bus.$emit("switch2D");
|
this.$parent.changeImage("2");
|
break;
|
case "实景模型":
|
this.radio = null;
|
this.changeLayer("3d"); //删除相机范围限制
|
this.clearSwitchImagerLayerClick();
|
Bus.$emit("switch3D");
|
this.$parent.changeImage("3");
|
break;
|
case "街景":
|
this.radio = null;
|
this.changeLayer("jj"); //删除相机范围限制
|
this.clearSwitchImagerLayerClick();
|
Bus.$emit("jjHandle");
|
this.$parent.changeImage("4");
|
break;
|
}
|
this.$parent.switchImagerLayer = false;
|
},
|
|
changeLayer(type) {
|
let p = sgworld.Navigate.getCameraInfo();
|
// console.log(p);
|
let pitch;
|
if (type == "2d") {
|
pitch = -90;
|
sgworld.Navigate.flyToPointsInterest({
|
destination: new Cesium.Cartesian3.fromDegrees(
|
p.location.lon,
|
p.location.lat,
|
p.location.height
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(pitch),
|
roll: Cesium.Math.toRadians(0)
|
}
|
});
|
// window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 45000;
|
// window.Viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500;
|
} else if (type == "3d") {
|
pitch = -45;
|
sgworld.Navigate.flyToPointsInterest({
|
destination: new Cesium.Cartesian3.fromDegrees(
|
p.location.lon,
|
p.location.lat,
|
p.location.height
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(pitch),
|
roll: Cesium.Math.toRadians(0)
|
}
|
});
|
// window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 8000000;
|
// window.Viewer.scene.screenSpaceCameraController.minimumZoomDistance = 40;
|
} else {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.55341,
|
39.72163,
|
40000.83
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(-90),
|
roll: Cesium.Math.toRadians(0.0)
|
}
|
});
|
}
|
},
|
clearSwitchImagerLayerClick() {
|
if (window.switchImagerLayerErweilayer) {
|
window.switchImagerLayerErweilayer.deleteObject();
|
}
|
|
try {
|
if (window.panoramaLayer) window.panoramaLayer.deleteObject();
|
} catch (e) {}
|
if (window.panoramaHandler) window.panoramaHandler.destroy();
|
if (window.panoramaHandler) window.panoramaHandler = undefined;
|
}
|
}
|
};
|
</script>
|
