|
|
@@ -13,7 +13,24 @@
|
|
|
<li class="el-icon-close" @click="closeInster"></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div
|
|
|
+ <contSplit
|
|
|
+ v-for="(k, i) in 2"
|
|
|
+ :key="i"
|
|
|
+ v-show="active == 0 || active == 1"
|
|
|
+ :toolshow="ptaye == 'gdbh' || active == 1"
|
|
|
+ :panelshow="layers[i]"
|
|
|
+ :list="dbdata.fp"
|
|
|
+ :tname="ptaye == 'gdbh' ? 'year' : 'dlbmmc'"
|
|
|
+ @toolChick="$set(layers, i, !layers[i])"
|
|
|
+ @checkChange="(name, c, data) => clickcheck(i, name, c)"
|
|
|
+ :checkdata="ptaye == 'gdbh' ? gdjlcheck[i] : checkdata[0]"
|
|
|
+ :toolTitle="
|
|
|
+ ptaye == 'gdbh'
|
|
|
+ ? gdjlcheck[i].join(',')
|
|
|
+ : `整治${!i ? '前' : '后'}地类图斑`
|
|
|
+ "
|
|
|
+ ></contSplit>
|
|
|
+ <!-- <div
|
|
|
v-for="(k, i) in 2"
|
|
|
:key="i"
|
|
|
class="splitScreen w50"
|
|
|
@@ -23,20 +40,19 @@
|
|
|
class="sm-tool-btn sm-btn"
|
|
|
title="目录"
|
|
|
@click="$set(layers, i, !layers[i])"
|
|
|
- v-show="active == 1"
|
|
|
+ v-show="ptaye == 'gdbh' || active == 1"
|
|
|
>
|
|
|
<span class="iconfont icontuceng"></span>
|
|
|
</li>
|
|
|
<div class="ml sm-panel" v-show="layers[i]">
|
|
|
- <!-- @change="checkedChange" -->
|
|
|
<el-checkbox-group v-model="checkdata[0]" v-if="dbdata.fp.length > 1">
|
|
|
<el-checkbox
|
|
|
v-for="mli in dbdata.fp"
|
|
|
- :key="mli.dlbmmc"
|
|
|
- :label="mli.dlbmmc"
|
|
|
- @change="(c) => clickcheck(i, mli.dlbmmc, c)"
|
|
|
+ :key="mli[fpname]"
|
|
|
+ :label="mli[fpname]"
|
|
|
+ @change="(c) => clickcheck(i, mli[fpname], c)"
|
|
|
>
|
|
|
- {{ mli.dlbmmc }}
|
|
|
+ {{ mli[fpname] }}
|
|
|
<span
|
|
|
:style="`background: ${mli.dict_color}`"
|
|
|
class="lcolor"
|
|
|
@@ -44,8 +60,10 @@
|
|
|
</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
- <div class="sm-toolTitle">{{ `整治${!i ? "前" : "后"}地类图斑` }}</div>
|
|
|
- </div>
|
|
|
+ <div v-if="ptaye != 'gdbh'" lass="sm-toolTitle">
|
|
|
+ {{ `整治${!i ? "前" : "后"}地类图斑` }}
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
<AsideBottom
|
|
|
ref="aside"
|
|
|
v-show="active == 2"
|
|
|
@@ -61,15 +79,20 @@ import {
|
|
|
initroller,
|
|
|
useRoller,
|
|
|
} from "@/utils/MapHelper/map.js";
|
|
|
-import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
|
|
|
+import {
|
|
|
+ loadGeoJSON,
|
|
|
+ removeGeoJSON,
|
|
|
+ addImagery,
|
|
|
+} from "@/utils/MapHelper/help.js";
|
|
|
+import contSplit from "./contrastSplit.vue";
|
|
|
import AsideBottom from "./AsideBottom.vue";
|
|
|
import { QueryOne, QueryList } from "@/api/cockpitNew";
|
|
|
let geoSources = {};
|
|
|
export default {
|
|
|
props: {
|
|
|
- ptaye:{
|
|
|
+ ptaye: {
|
|
|
type: String,
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -77,15 +100,27 @@ export default {
|
|
|
list: ["卷帘对比", "分屏对比", "影像对比", "重置"],
|
|
|
active: 0,
|
|
|
dbdata: { id: "", fp: {} },
|
|
|
+ gdjlcheck: [[], []],
|
|
|
+ gdfpcheck: [[], []],
|
|
|
checkdata: [[], []],
|
|
|
imagelayers: {},
|
|
|
nolayer: "",
|
|
|
layersData: [],
|
|
|
};
|
|
|
},
|
|
|
- components: { AsideBottom },
|
|
|
+ components: { contSplit, AsideBottom },
|
|
|
+ computed: {
|
|
|
+ toolcheck(i) {
|
|
|
+ if (this.$props.ptaye == "gdbh") {
|
|
|
+ return this.gdjlcheck[i]; //this.active?this.gdjlcheck:this.gdfpcheck
|
|
|
+ } else {
|
|
|
+ return this.checkdata[0];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
created() {
|
|
|
- this.GetServer();
|
|
|
+ this.$props.ptaye != "gdbh" && this.GetServer();
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
@@ -94,13 +129,24 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
closeInster() {
|
|
|
+ this.layers = [false, false];
|
|
|
this.onClick(-1);
|
|
|
removeGeoJSON("fpdb");
|
|
|
this.$emit("close");
|
|
|
+ Object.keys(this.imagelayers).forEach((key) => {
|
|
|
+ viewer.imageryLayers.remove(this.imagelayers[key]);
|
|
|
+ });
|
|
|
+ this.imagelayers = {};
|
|
|
},
|
|
|
show(data) {
|
|
|
console.log(data);
|
|
|
+
|
|
|
this.dbdata = { ...this.dbdata, ...data };
|
|
|
+ if (this.$props.ptaye == "gdbh") {
|
|
|
+ this.layersData = data.fp;
|
|
|
+ this.$refs.aside.setdata(this.layersData);
|
|
|
+ }
|
|
|
+ this.active = 0;
|
|
|
this.onClick(0);
|
|
|
},
|
|
|
async GetServer() {
|
|
|
@@ -121,21 +167,90 @@ export default {
|
|
|
console.log(value);
|
|
|
},
|
|
|
clickcheck(i, name, checked) {
|
|
|
- let geodata = geoSources[`${name}${i ? "h" : "q"}`];
|
|
|
- if (geodata) {
|
|
|
- if (checked)
|
|
|
- viewer.flyTo(geodata, {
|
|
|
- offset: new Cesium.HeadingPitchRange(0, -45),
|
|
|
- });
|
|
|
- // geodata.setVisibleInViewport(i, checked);
|
|
|
- geoSources[`${name}q`].setVisibleInViewport(0, checked);
|
|
|
- geoSources[`${name}h`].setVisibleInViewport(1, checked);
|
|
|
- // geodata.show = checked;
|
|
|
+ if (this.$props.ptaye == "gdbh") {
|
|
|
+ if (this.active == 0) {
|
|
|
+ if (i == 0) {
|
|
|
+ let dobj = this.dbdata.fp.fined((d) => d.year == name);
|
|
|
+ this.setImager(dobj, checked, (layer) => {
|
|
|
+ setImageryRoller(layer);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (this.active == 1) {
|
|
|
+ let lay = this.imagelayers[name];
|
|
|
+ viewer.flyTo(lay);
|
|
|
+ lay.setVisibleInViewport(i, checked);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let geodata = geoSources[`${name}${i ? "h" : "q"}`];
|
|
|
+ if (geodata) {
|
|
|
+ if (checked)
|
|
|
+ viewer.flyTo(geodata, {
|
|
|
+ offset: new Cesium.HeadingPitchRange(0, -45),
|
|
|
+ });
|
|
|
+ // geodata.setVisibleInViewport(i, checked);
|
|
|
+ geoSources[`${name}q`].setVisibleInViewport(0, checked);
|
|
|
+ geoSources[`${name}h`].setVisibleInViewport(1, checked);
|
|
|
+ // geodata.show = checked;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
|
|
|
clickml() {},
|
|
|
- async onClick(i) {
|
|
|
+ onClick(i) {
|
|
|
+ if (this.$props.ptaye == "gdbh") {
|
|
|
+ this.onGdbhClick(i);
|
|
|
+ } else {
|
|
|
+ this.onTdzzClick(i);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async onGdbhClick(i) {
|
|
|
+ if (i == 3) {
|
|
|
+ this.reset();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.active = i;
|
|
|
+ if (this.active != 0 || this.active != 1) {
|
|
|
+ Object.keys(this.imagelayers).forEach((key) => {
|
|
|
+ this.imagelayers[key].show = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (i == 0) {
|
|
|
+
|
|
|
+ this.layers = [false, false];
|
|
|
+ this.gdjlcheck[0].push(this.dbdata.fp[0].year);
|
|
|
+ this.gdjlcheck[1].push(this.dbdata.fp[1].year);
|
|
|
+ this.setImager({ ...this.dbdata.fp[0], top: true }, true);
|
|
|
+ this.setImager({ ...this.dbdata.fp[1], top: false }, true, (layer) => {
|
|
|
+ useRoller(true, "lrRoller", "leftRoller", "", false);
|
|
|
+ setImageryRoller(layer);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ Object.keys(this.imagelayers).forEach((key) => {
|
|
|
+ hideImageryRoller(this.imagelayers[key]);
|
|
|
+ });
|
|
|
+ useRoller(false);
|
|
|
+ }
|
|
|
+ let mul = this.active == 1 ? "HORIZONTAL" : "NONE";
|
|
|
+ scene.multiViewportMode = Cesium.MultiViewportMode[mul];
|
|
|
+
|
|
|
+ if (i == 1) {
|
|
|
+ this.layers = [false, false];
|
|
|
+ this.setImager({ ...this.dbdata.fp[0] }, true, (layer) => {
|
|
|
+ layer.setVisibleInViewport(1, false);
|
|
|
+ });
|
|
|
+ this.setImager({ ...this.dbdata.fp[1] }, true, (layer) => {
|
|
|
+ layer.setVisibleInViewport(0, false);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (i == 2) {
|
|
|
+ this.$refs.aside.activeVal == 0;
|
|
|
+ this.$refs.aside.clickHandler();
|
|
|
+ } else {
|
|
|
+ this.reset();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async onTdzzClick(i) {
|
|
|
if (i == 3) {
|
|
|
this.reset();
|
|
|
return;
|
|
|
@@ -151,6 +266,7 @@ export default {
|
|
|
// useRoller(true, "lrRoller", "leftRoller", "", false);
|
|
|
// setImageryRoller(layer);
|
|
|
// });
|
|
|
+ this.layers = [false, false];
|
|
|
store.setaddNode([
|
|
|
{ id: "ttzz", url: this.dbdata.zzq, label: "土地整治对比" },
|
|
|
]);
|
|
|
@@ -183,6 +299,10 @@ export default {
|
|
|
},
|
|
|
reset() {
|
|
|
this.$emit("fly");
|
|
|
+ if (this.$props.ptaye == "gdbh") {
|
|
|
+ let dalist = this.gdjlcheck[0];
|
|
|
+ viewer.flyTo(this.imagelayers[dalist[dalist.length - 1]]);
|
|
|
+ }
|
|
|
if (this.active == 1)
|
|
|
this.checkdata[1].forEach((mc, i) => {
|
|
|
if (this.checkdata[0].indexOf(mc) == -1) {
|
|
|
@@ -215,13 +335,10 @@ export default {
|
|
|
console.log(obj.year, isshow, this.imagelayers[obj.year], "---");
|
|
|
|
|
|
if (this.imagelayers[obj.year]) this.imagelayers[obj.year].show = isshow;
|
|
|
- else if (isshow)
|
|
|
- this.imagelayers[obj.year] = viewer.imageryLayers.addImageryProvider(
|
|
|
- new Cesium.SuperMapImageryProvider({
|
|
|
- url: obj.url,
|
|
|
- name: obj.year,
|
|
|
- })
|
|
|
- );
|
|
|
+ else if (isshow) {
|
|
|
+ let { layer } = addImagery(obj);
|
|
|
+ this.imagelayers[obj.year] = layer;
|
|
|
+ }
|
|
|
if (obj.top) viewer.imageryLayers.raiseToTop(this.imagelayers[obj.year]);
|
|
|
fun && fun(this.imagelayers[obj.year]);
|
|
|
// viewer.flyTo(this.imagelayers[obj.year]);
|
|
|
@@ -262,9 +379,6 @@ export default {
|
|
|
if (this.active == 1) setImageryRoller(imageryLayer);
|
|
|
else hideImageryRoller(imageryLayer);
|
|
|
},
|
|
|
- setVisible(id, show) {
|
|
|
- imagelayer.setVisibleInViewport(id, show);
|
|
|
- },
|
|
|
},
|
|
|
watch: {
|
|
|
nolayer(newVal, oldVal) {
|
|
|
@@ -272,6 +386,9 @@ export default {
|
|
|
if (oldVal) this.setImager({ year: oldVal }, false);
|
|
|
},
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ this.closeInster();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -296,57 +413,5 @@ export default {
|
|
|
line-height: 36px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .splitScreen {
|
|
|
- float: left;
|
|
|
- height: calc(100% - 80px);
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- margin-top: 80px;
|
|
|
-
|
|
|
- .sm-btn {
|
|
|
- position: absolute;
|
|
|
- top: 10px !important;
|
|
|
- left: 20px;
|
|
|
- background-color: transparent;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
- .sm-btn1 {
|
|
|
- position: absolute;
|
|
|
- top: 40px;
|
|
|
- right: 20px;
|
|
|
- background-color: transparent;
|
|
|
- font-size: 30px;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
-
|
|
|
- .sm-panel {
|
|
|
- max-width: 300px;
|
|
|
- height: 400px; //75%;
|
|
|
- max-height: 80%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .w50 {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
- .ml {
|
|
|
- margin: 60px 0 0 30px;
|
|
|
- .el-checkbox {
|
|
|
- display: block;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .lcolor {
|
|
|
- display: inline-block;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .sm-toolTitle {
|
|
|
- top: 10px;
|
|
|
- left: 25%;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
