|
|
@@ -2,11 +2,12 @@
|
|
|
<div class="ghzc">
|
|
|
<div class="btn" v-if="splitScreen">
|
|
|
<span class="sx jcbh">前后影像对比:{{ detailObj.jcbh }}</span>
|
|
|
+ <span class="sx tc" @click="outSce">退出</span>
|
|
|
<!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
|
|
|
<span class="sx qsx">前时相:{{ detailObj.qsx }}</span>
|
|
|
<span class="sx hsx">后时相:{{ detailObj.hsx }}</span>
|
|
|
</div>
|
|
|
- <div class="sm-panel sm-function-module-query" v-drag>
|
|
|
+ <div class="sm-panel sm-function-module-query" v-drag v-if="!splitScreen">
|
|
|
<div class="sm-panel-header">
|
|
|
<span>图斑详情</span>
|
|
|
<i class="el-icon-close" @click="closeBox"></i>
|
|
|
@@ -46,6 +47,8 @@ import {
|
|
|
useRoller,
|
|
|
} from "@/utils/MapHelper/map.js";
|
|
|
import { getTiffPath } from "@/api/ghss/jctb.js";
|
|
|
+import { loadGeoJSON } from "@/utils/MapHelper/help.js";
|
|
|
+let layerSources = {};
|
|
|
export default {
|
|
|
props: {
|
|
|
detailObj: {
|
|
|
@@ -75,6 +78,7 @@ export default {
|
|
|
closeBox() {
|
|
|
if (this.splitScreen) {
|
|
|
this.splitScreen = false;
|
|
|
+
|
|
|
// this.onClick(false);
|
|
|
}
|
|
|
viewer.entities.removeAll();
|
|
|
@@ -82,6 +86,13 @@ export default {
|
|
|
this.$emit("updateParent", "emitImgIndex", -1);
|
|
|
this.$emit("updateParent", "allShow", true);
|
|
|
},
|
|
|
+ outSce() {
|
|
|
+ let mul = "NONE";
|
|
|
+ scene.multiViewportMode = Cesium.MultiViewportMode[mul];
|
|
|
+ this.remove();
|
|
|
+ this.splitScreen = false;
|
|
|
+ this.$emit("updateParent", "allShow", true);
|
|
|
+ },
|
|
|
onClickjl(show) {
|
|
|
if (show) {
|
|
|
let jl = {
|
|
|
@@ -137,34 +148,34 @@ export default {
|
|
|
},
|
|
|
clickOpen() {
|
|
|
getTiffPath(this.detailObj.qsxtif).then((res) => {
|
|
|
- this.remove();
|
|
|
- console.log(res.data,'res.data')
|
|
|
+ // this.remove();
|
|
|
+ if (res.data.pngenvelope) {
|
|
|
+ this.getEntities(
|
|
|
+ this.detailObj.jcbh,
|
|
|
+ res.data.pngpath,
|
|
|
+ res.data.pngenvelope,
|
|
|
+ 0
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ getTiffPath(this.detailObj.hsxtif).then((res) => {
|
|
|
if (res.data.pngenvelope) {
|
|
|
this.getEntities(
|
|
|
this.detailObj.jcbh,
|
|
|
res.data.pngpath,
|
|
|
- res.data.pngenvelope
|
|
|
+ res.data.pngenvelope,
|
|
|
+ 1
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
- // getTiffPath(this.detailObj.hsxtif).then((res) => {
|
|
|
- // this.remove();
|
|
|
- // if (res.data.pngenvelope) {
|
|
|
- // this.getEntities(
|
|
|
- // this.detailObj.jcbh,
|
|
|
- // res.data.pngpath,
|
|
|
- // res.data.pngenvelope
|
|
|
- // );
|
|
|
- // }
|
|
|
- // });
|
|
|
|
|
|
this.$emit("updateParent", "allShow", false);
|
|
|
this.splitScreen = true;
|
|
|
},
|
|
|
|
|
|
- getEntities(id, url, position) {
|
|
|
- // let mul = "HORIZONTAL";
|
|
|
- // viewer.scene.multiViewportMode = Cesium.MultiViewportMode[mul];
|
|
|
+ getEntities(id, url, position, type) {
|
|
|
+ let mul = "HORIZONTAL";
|
|
|
+ scene.multiViewportMode = Cesium.MultiViewportMode[mul];
|
|
|
let imageUrl = "";
|
|
|
let posArr = position;
|
|
|
imageUrl = window.axiosURI + "/file/upload/attachment" + url;
|
|
|
@@ -174,30 +185,33 @@ export default {
|
|
|
repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制图像重复，这里设置为不重复
|
|
|
transparent: true, // 如果图像有透明通道，设置为true
|
|
|
});
|
|
|
-
|
|
|
- // 创建一个矩形实体并应用材质
|
|
|
- const rectangleEntity = viewer.entities.add({
|
|
|
- name: "Image Overlay",
|
|
|
- id: id,
|
|
|
- rectangle: {
|
|
|
- coordinates: Cesium.Rectangle.fromDegrees(
|
|
|
- posArr[0],
|
|
|
- posArr[1],
|
|
|
- posArr[2],
|
|
|
- posArr[3]
|
|
|
- ), // 设置矩形的经纬度范围
|
|
|
- material: imageMaterial,
|
|
|
- },
|
|
|
+ loadGeoJSON(this.detailObj.geom, "#ff0000", { isfly: true }, (data) => {
|
|
|
+ data.entities.add({
|
|
|
+ name: "Image Overlay",
|
|
|
+ id: id + type,
|
|
|
+ rectangle: {
|
|
|
+ coordinates: Cesium.Rectangle.fromDegrees(
|
|
|
+ posArr[0],
|
|
|
+ posArr[1],
|
|
|
+ posArr[2],
|
|
|
+ posArr[3]
|
|
|
+ ), // 设置矩形的经纬度范围
|
|
|
+ material: imageMaterial,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ layerSources[id + type] = data;
|
|
|
+ if (type == 0) {
|
|
|
+ data.setVisibleInViewport(1, false);
|
|
|
+ } else {
|
|
|
+ data.setVisibleInViewport(0, false);
|
|
|
+ }
|
|
|
});
|
|
|
- this.idArr.push(rectangleEntity.id);
|
|
|
- // rectangleEntity.setVisibleInViewport(1, false);
|
|
|
- // 调整视图以查看实体
|
|
|
- viewer.zoomTo(rectangleEntity);
|
|
|
+ this.idArr.push(id + type);
|
|
|
},
|
|
|
remove() {
|
|
|
if (this.idArr.length != 0) {
|
|
|
this.idArr.forEach((item) => {
|
|
|
- viewer.entities.removeById(item);
|
|
|
+ viewer.dataSources.remove(layerSources[item]);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
@@ -207,11 +221,13 @@ export default {
|
|
|
this.$emit("updateParent", "imgIndex", val);
|
|
|
this.$emit("updateParent", "imgList", this.emitImgList);
|
|
|
},
|
|
|
- splitScreen(val) {
|
|
|
- this.onClick(val);
|
|
|
- },
|
|
|
+ // splitScreen(val) {
|
|
|
+ // this.onClick(val);
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.remove();
|
|
|
},
|
|
|
- beforeDestroy() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -274,6 +290,9 @@ export default {
|
|
|
.jcbh {
|
|
|
left: 3vw;
|
|
|
}
|
|
|
+ .tc {
|
|
|
+ left: 21.5vw;
|
|
|
+ }
|
|
|
}
|
|
|
.dbBtn {
|
|
|
width: 136px;
|
