From 78064c2072b8c7eb36309045a6166292917f491b Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 15 十一月 2023 14:39:10 +0800
Subject: [PATCH] 初始化、土地管理视角
---
src/components/map/viewer.vue | 256 ++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 232 insertions(+), 24 deletions(-)
diff --git a/src/components/map/viewer.vue b/src/components/map/viewer.vue
index e26d5f5..af1005d 100644
--- a/src/components/map/viewer.vue
+++ b/src/components/map/viewer.vue
@@ -1,9 +1,19 @@
<template>
<div>
<div id="sdkContainer"></div>
+ <div class="listBox" v-show="viewer1Show && !isLand">
+ <ul>
+ <li
+ v-for="(item, index) in arr"
+ :key="index"
+ @click="changeLeftMap($event, item, index)"
+ >
+ {{ item }}
+ </li>
+ </ul>
+ </div>
<layerTreeTwoScreen v-if="layerTreeTwoScreen" />
<!-- <div id="bottomInfo" v-html="bottomInfo"></div> -->
-
<div
id="switchImagerLayer"
:style="{
@@ -21,7 +31,7 @@
leave-active-class="animate__backOutRight"
appear
>
- <switchImagerLayer v-show="switchImagerLayer" />
+ <switchImagerLayer ref="switchImagerLayer" v-show="switchImagerLayer" />
</transition>
<img
@@ -55,7 +65,9 @@
import sanwei from "@/assets/img/new/sanwei.png";
import jiejing from "@/assets/img/new/jiejing.png";
import "animate.css";
+import Bus from "@tools/Bus";
+let activeLi, nLayer, LWLayer;
export default {
name: "viewer",
components: {
@@ -76,10 +88,26 @@
scale: "1",
offset: "0%",
radio: 3,
+ arr: [
+ 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
+ 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
+ ],
};
},
computed: {
- ...mapState(["layerTreeTwoScreen", "cesiumInit"]),
+ ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]),
+ },
+ watch: {
+ viewer1Show(newvalue, oldvalue) {
+ if (!newvalue) {
+ this.destroyImageLayer();
+ }
+ },
+ isLand(newvalue, oldvalue) {
+ if (newvalue) {
+ this.destroyImageLayer();
+ }
+ },
},
mounted() {
this.$nextTick(function () {
@@ -89,6 +117,7 @@
"sdkContainer",
{
StaticFileBaseUrl: "../../../static/CimSDK/",
+ // StaticFileBaseUrl: "../../../SW/static/CimSDK/",
},
{},
{},
@@ -141,26 +170,49 @@
// Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
Viewer.scene.globe.undergroundColor = undefined;
- //鏍囦細缂栬緫
+ //寮�鍚紪杈戝苟鍚敤灞炴�у脊绐�
sgworld.Creator.SimpleGraphic.setEdit(true, {
editProp: true,
editPropData: {
- offset: ["5%", Viewer.container.offsetWidth - 360 - 200 + "px"],
- // offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"],
- height: 650,
- success(layero, index) {
- let contentWindow = layero.find("iframe")[0].contentWindow;
- let layeroHeight = layero.height();
- let titleHeight = layero.find(".layui-layer-title").height();
- let htmlHeight =
- contentWindow.document.firstElementChild.offsetHeight;
- if (layeroHeight > titleHeight + htmlHeight) {
- layero.height(titleHeight + htmlHeight);
- layero.find("iframe").height(htmlHeight);
+ offset: "r",
+ height: "60%",
+ },
+ callBack: {
+ delete: function (entity) {
+ Bus.$emit("removeTreeNode", entity);
+ },
+ end: function (entity) {
+ if (entity) {
+ let style = sgworld.Creator.SimpleGraphic.getStyle(entity);
+ let data = {
+ name: entity.name,
+ style: style,
+ };
+ Bus.$emit("updataTreeNode", entity.id, data);
}
},
},
});
+ //鏍囦細缂栬緫
+ // sgworld.Creator.SimpleGraphic.setEdit(true, {
+ // editProp: true,
+ // editPropData: {
+ // offset: ["5%", Viewer.container.offsetWidth - 360 - 200 + "px"],
+ // // offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"],
+ // height: 650,
+ // success(layero, index) {
+ // let contentWindow = layero.find("iframe")[0].contentWindow;
+ // let layeroHeight = layero.height();
+ // let titleHeight = layero.find(".layui-layer-title").height();
+ // let htmlHeight =
+ // contentWindow.document.firstElementChild.offsetHeight;
+ // if (layeroHeight > titleHeight + htmlHeight) {
+ // layero.height(titleHeight + htmlHeight);
+ // layero.find("iframe").height(htmlHeight);
+ // }
+ // },
+ // },
+ // });
//鍐涙爣缂栬緫
sgworld.Creator.MilitaryPlotting.setEdit(true, {
editProp: true,
@@ -179,9 +231,10 @@
},
},
});
+
//鍒濆鍖栧脊绐椾簨浠�
+ // that.showBottom();
that.initLayerOpen();
- that.showBottom();
});
let size = this.detectZoom();
this.scale = (100 / size).toFixed(2);
@@ -189,7 +242,7 @@
this.size = size + "%";
},
methods: {
- ...mapMutations(["setCesiumInit"]),
+ ...mapMutations(["setCesiumInit", "updataTreeNode"]),
detectZoom() {
var ratio = 0,
screen = window.screen,
@@ -216,6 +269,119 @@
//this.onresize_height = ratio;
// return ratio;
},
+ changeMode(mode) {
+ this.$refs.switchImagerLayer.switchImagerLayerClick(mode);
+ },
+ setImageComparison(isStart) {
+ this.isImage = isStart;
+ if (!this.isImage) {
+ this.destroyImageLayer();
+ }
+ },
+ destroyImageLayer() {
+ if (activeLi) {
+ activeLi.classList.remove("active");
+ activeLi = null;
+ }
+ if (nLayer) {
+ Viewer.imageryLayers.remove(nLayer, true);
+ nLayer = null;
+ }
+ if (LWLayer) {
+ Viewer.imageryLayers.remove(LWLayer, true);
+ LWLayer = null;
+ }
+ },
+ changeLeftMap(event, item, index) {
+ let liObj = event.currentTarget;
+ if (activeLi) {
+ activeLi.classList.remove("active");
+ activeLi = null;
+ }
+ liObj.classList.add("active");
+ activeLi = liObj;
+ this.loadImageLayer(item);
+ },
+ loadImageLayer(year) {
+ if (nLayer) {
+ Viewer.imageryLayers.remove(nLayer, true);
+ nLayer = null;
+ }
+ nLayer = this.loadBJ54ImageLayer(year);
+ if (!LWLayer) {
+ LWLayer = this.loadBJ54LWLayer();
+ }
+ },
+ loadBJ54LWLayer() {
+ let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
+ //let url = option.url;
+ //let year = option.year;
+ let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Shiliang_Lw_2019&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
+ let minx = (113.168199 * Math.PI) / 180.0;
+ let miny = (39.230551 * Math.PI) / 180.0;
+ let maxx = (118.562362 * Math.PI) / 180.0;
+ let maxy = (41.294714 * Math.PI) / 180.0;
+ let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
+ let tilingScheme = new Cesium.GeographicTilingScheme({
+ rectangle: rectangle,
+ numberOfLevelZeroTilesX: 2,
+ numberOfLevelZeroTilesY: 1,
+ });
+ var dx = {
+ url: paramUrl,
+ tilingScheme: tilingScheme,
+ customTags: {
+ nx: function (imageryProvider, x, y, level) {
+ return (2 << (level - 1)) + x;
+ },
+ ny: function (imageryProvider, x, y, level) {
+ return (2 << (level - 1)) + y;
+ },
+ },
+ };
+ var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
+ let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
+ alpha: 1,
+ brightness: 1.0,
+ });
+ Viewer.imageryLayers.add(imageLayer, 3);
+ return imageLayer;
+ },
+ loadBJ54ImageLayer(year) {
+ let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
+ //let url = option.url;
+ //let year = option.year;
+ let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
+ let minx = (113.168199 * Math.PI) / 180.0;
+ let miny = (39.230551 * Math.PI) / 180.0;
+ let maxx = (118.562362 * Math.PI) / 180.0;
+ let maxy = (41.294714 * Math.PI) / 180.0;
+ let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
+ let tilingScheme = new Cesium.GeographicTilingScheme({
+ rectangle: rectangle,
+ numberOfLevelZeroTilesX: 2,
+ numberOfLevelZeroTilesY: 1,
+ });
+ var dx = {
+ url: paramUrl,
+ tilingScheme: tilingScheme,
+ customTags: {
+ nx: function (imageryProvider, x, y, level) {
+ return (2 << (level - 1)) + x;
+ },
+ ny: function (imageryProvider, x, y, level) {
+ return (2 << (level - 1)) + y;
+ },
+ },
+ };
+ var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
+ let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
+ alpha: 1,
+ brightness: 1.0,
+ });
+ Viewer.imageryLayers.add(imageLayer, 2);
+ return imageLayer;
+ },
changeImage(val) {
switch (val) {
case "1":
@@ -236,12 +402,20 @@
this.switchImagerLayer = !this.switchImagerLayer;
},
ArcgisImageryLayer() {
- var layer = sgworld.factory.createImageryLayer({
- sourceType: "arcgis",
- url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
- });
+ sgworld.Creator.createArcGisImageryLayer(
+ "ARCGIS",
+ {
+ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+ enablePickFeatures: false,
+ },
+ "0",
+ 1,
+ true,
+ ""
+ );
},
//鍒濆鍖栧脊绐椾簨浠�
+
initLayerOpen() {
window.layerOpen = function (name, options) {
layuiLayer.close(SmartEarthPopupData.layerProp);
@@ -373,6 +547,7 @@
},
};
</script>
+
<style scoped>
#bottomInfo {
position: absolute;
@@ -390,8 +565,8 @@
display: block;
position: absolute;
/*bottom: 120px;*/
- bottom: 13px;
- right: 46px;
+ bottom: 30px;
+ right: 80px;
/* margin-right: -105px; */
z-index: 9999;
border-radius: 10px;
@@ -427,12 +602,45 @@
border-radius: 10px;
cursor: pointer;
}
+
.bgbox {
position: absolute;
top: 0;
left: 8px;
z-index: -1;
}
+
+.listBox {
+ position: absolute;
+ left: 20px;
+ top: 100px;
+}
+
+.listBox .active {
+ background: rgba(255, 166, 0, 0.808);
+}
+
+.listBox li {
+ padding: 2px;
+ margin-top: 1px;
+ border-radius: 2px;
+ color: white;
+ background: rgba(14, 50, 143, 0.6);
+ font-size: 14px;
+ cursor: pointer;
+}
+
+/* 灞忓箷鍒嗚鲸鐜囨斁澶т负 125 */
+@media (-webkit-min-device-pixel-ratio: 1.25) {
+ .listBox li {
+ font-size: 12px;
+ }
+}
+
+.listBox li:hover {
+ background: rgba(255, 166, 0, 0.808);
+}
+
.mid {
position: absolute;
top: 50%;
--
Gitblit v1.9.3