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 | 133 ++++++++++++++++++++++++++------------------ 1 files changed, 78 insertions(+), 55 deletions(-) diff --git a/src/components/map/viewer.vue b/src/components/map/viewer.vue index 9a11899..af1005d 100644 --- a/src/components/map/viewer.vue +++ b/src/components/map/viewer.vue @@ -3,29 +3,53 @@ <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)"> + <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,LWLayer; +let activeLi, nLayer, LWLayer; export default { name: "viewer", components: { @@ -83,8 +107,7 @@ if (newvalue) { this.destroyImageLayer(); } - - } + }, }, mounted() { this.$nextTick(function () { @@ -93,8 +116,8 @@ window.sgworld = new SmartEarth.EarthCtrl( "sdkContainer", { - // StaticFileBaseUrl: "../../../static/CimSDK/", - StaticFileBaseUrl: "../../../SW/static/CimSDK/", + StaticFileBaseUrl: "../../../static/CimSDK/", + // StaticFileBaseUrl: "../../../SW/static/CimSDK/", }, {}, {}, @@ -209,15 +232,6 @@ }, }); - - - - - - - - - //鍒濆鍖栧脊绐椾簨浠� // that.showBottom(); that.initLayerOpen(); @@ -266,7 +280,7 @@ }, destroyImageLayer() { if (activeLi) { - activeLi.classList.remove('active'); + activeLi.classList.remove("active"); activeLi = null; } if (nLayer) { @@ -281,10 +295,10 @@ 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); }, @@ -294,8 +308,7 @@ nLayer = null; } nLayer = this.loadBJ54ImageLayer(year); - if(!LWLayer) - { + if (!LWLayer) { LWLayer = this.loadBJ54LWLayer(); } }, @@ -304,15 +317,15 @@ //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 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, @@ -323,11 +336,14 @@ }, 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; }, @@ -336,15 +352,15 @@ //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 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, @@ -355,11 +371,14 @@ }, 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, 2); return imageLayer; }, @@ -383,10 +402,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, + "" + ); }, //鍒濆鍖栧脊绐椾簨浠� @@ -588,13 +614,10 @@ position: absolute; left: 20px; top: 100px; - } .listBox .active { - background: rgba(255, 166, 0, 0.808); - } .listBox li { -- Gitblit v1.9.3