From 5df6240f6cd274e698d1e6358443364d543c126c Mon Sep 17 00:00:00 2001 From: Jin Lei <jinlei_182@163.com> Date: 星期六, 23 十二月 2023 10:23:27 +0800 Subject: [PATCH] [信令]添加信令相关功能 --- src/components/map/viewer.vue | 188 +++++++++++++++++++++++++++++++++++----------- 1 files changed, 143 insertions(+), 45 deletions(-) diff --git a/src/components/map/viewer.vue b/src/components/map/viewer.vue index a2875be..1a7c8e9 100644 --- a/src/components/map/viewer.vue +++ b/src/components/map/viewer.vue @@ -2,30 +2,54 @@ <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)"> + <ul id="viewer_lsyx"> + <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="{ - transform: `scale(${scale}) translate(${offset},${offset})`, - '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`, - '-moz-transform': `scale(${scale}) translate(${offset},${offset})`, - '-o-transform': `scale(${scale}) translate(${offset},${offset})`, - '-ms-transform': `scale(${scale}) translate(${offset},${offset})`, - }"> - <transition name="animate__animated animate__bounce" @click="switchImagerLayerShowOrHide" - enter-active-class="animate__backInRight" leave-active-class="animate__backOutRight" appear> + <div + id="switchImagerLayer" + :style="{ + transform: `scale(${scale}) translate(${offset},${offset})`, + '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`, + '-moz-transform': `scale(${scale}) translate(${offset},${offset})`, + '-o-transform': `scale(${scale}) translate(${offset},${offset})`, + '-ms-transform': `scale(${scale}) translate(${offset},${offset})`, + }" + > + <transition + name="animate__animated animate__bounce" + @click="switchImagerLayerShowOrHide" + enter-active-class="animate__backInRight" + leave-active-class="animate__backOutRight" + appear + > <switchImagerLayer ref="switchImagerLayer" v-show="switchImagerLayer" /> </transition> - <img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" /> + <img + class="swichImg" + @click="switchImagerLayerShowOrHide" + :src="switchImage" + /> <div class="bgbox"> - <img class="swichImg" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" /> - <img class="swichImg bgbox" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" /> + <img + class="swichImg" + @click="switchImagerLayerShowOrHide" + src="@/assets/img/new/shiliang.png" + /> + <img + class="swichImg bgbox" + @click="switchImagerLayerShowOrHide" + src="@/assets/img/new/shiliang.png" + /> </div> </div> </div> @@ -43,7 +67,7 @@ import "animate.css"; import Bus from "@tools/Bus"; -let activeLi, nLayer; +let activeLi, nLayer, LWLayer; export default { name: "viewer", components: { @@ -73,6 +97,24 @@ computed: { ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]), }, + watch: { + viewer1Show(newvalue, oldvalue) { + if (!newvalue) { + this.destroyImageLayer(); + } else { + if (!this.isLand) { + this.initLSYX(); + } + } + }, + isLand(newvalue, oldvalue) { + if (newvalue) { + this.destroyImageLayer(); + } else { + this.initLSYX(); + } + }, + }, mounted() { this.$nextTick(function () { let that = this; @@ -81,6 +123,7 @@ "sdkContainer", { StaticFileBaseUrl: "../../../static/CimSDK/", + // StaticFileBaseUrl: "../../../SW/static/CimSDK/", // StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/", }, {}, @@ -126,7 +169,9 @@ } ); window.Viewer = sgworld._Viewer; - window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer); + window.viewer = sgworld._Viewer; + sgworld._Viewer.scene.moon.show = false; + window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium); Viewer.shadows = false; //娣卞害妫�娴� sgworld.Analysis.depthTestAgainstTerrain(true); @@ -196,15 +241,6 @@ }, }); - - - - - - - - - //鍒濆鍖栧脊绐椾簨浠� // that.showBottom(); that.initLayerOpen(); @@ -251,23 +287,32 @@ this.destroyImageLayer(); } }, + initLSYX() { + let ul = document.getElementById("viewer_lsyx"); + let lis = ul.getElementsByTagName("li"); + lis[19].click(); + }, destroyImageLayer() { if (activeLi) { - activeLi.classList.remove('active'); + 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.classList.remove("active"); activeLi = null; } - liObj.classList.add('active'); + liObj.classList.add("active"); activeLi = liObj; this.loadImageLayer(item); }, @@ -277,21 +322,27 @@ nLayer = null; } nLayer = this.loadBJ54ImageLayer(year); + if (!LWLayer || Viewer.imageryLayers.indexOf(LWLayer) < 0) { + if (LWLayer) { + LWLayer.destroy(); + } + LWLayer = this.loadBJ54LWLayer(); + } }, - loadBJ54ImageLayer(year) { + 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=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 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 + numberOfLevelZeroTilesY: 1, }); var dx = { url: paramUrl, @@ -302,11 +353,49 @@ }, 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 }); + 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; }, @@ -330,10 +419,17 @@ 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, + "" + ); }, //鍒濆鍖栧脊绐椾簨浠� @@ -379,6 +475,11 @@ cancel: function () { if (cancelFn && typeof cancelFn === "function") { cancelFn(); + if (window.pickFeature && window.pickFeature.primitive) { + window.pickFeature.primitive.image = imgUrl; + window.pickFeature.primitive.scale = scale; + window.pickFeature = null; + } } }, end: function () { @@ -535,13 +636,10 @@ position: absolute; left: 20px; top: 100px; - } .listBox .active { - background: rgba(255, 166, 0, 0.808); - } .listBox li { -- Gitblit v1.9.3