| | |
| | | <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> |
| | |
| | | import "animate.css"; |
| | | import Bus from "@tools/Bus"; |
| | | |
| | | let activeLi, nLayer,LWLayer; |
| | | let activeLi, nLayer, LWLayer; |
| | | export default { |
| | | name: "viewer", |
| | | components: { |
| | |
| | | if (newvalue) { |
| | | this.destroyImageLayer(); |
| | | } |
| | | |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.$nextTick(function () { |
| | |
| | | window.sgworld = new SmartEarth.EarthCtrl( |
| | | "sdkContainer", |
| | | { |
| | | // StaticFileBaseUrl: "../../../static/CimSDK/", |
| | | StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/", |
| | | StaticFileBaseUrl: "../../../static/CimSDK/", |
| | | // StaticFileBaseUrl: "../../../SW/static/CimSDK/", |
| | | }, |
| | | {}, |
| | | {}, |
| | |
| | | }, |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | //初始化弹窗事件 |
| | | // that.showBottom(); |
| | | that.initLayerOpen(); |
| | |
| | | }, |
| | | destroyImageLayer() { |
| | | if (activeLi) { |
| | | activeLi.classList.remove('active'); |
| | | activeLi.classList.remove("active"); |
| | | activeLi = null; |
| | | } |
| | | if (nLayer) { |
| | |
| | | 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); |
| | | }, |
| | |
| | | nLayer = null; |
| | | } |
| | | nLayer = this.loadBJ54ImageLayer(year); |
| | | if(!LWLayer) |
| | | { |
| | | if (!LWLayer) { |
| | | LWLayer = this.loadBJ54LWLayer(); |
| | | } |
| | | }, |
| | |
| | | //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, |
| | |
| | | }, |
| | | 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; |
| | | }, |
| | |
| | | //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, |
| | |
| | | }, |
| | | 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; |
| | | }, |
| | |
| | | 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, |
| | | "" |
| | | ); |
| | | }, |
| | | //初始化弹窗事件 |
| | | |
| | |
| | | position: absolute; |
| | | left: 20px; |
| | | top: 100px; |
| | | |
| | | } |
| | | |
| | | .listBox .active { |
| | | |
| | | background: rgba(255, 166, 0, 0.808); |
| | | |
| | | } |
| | | |
| | | .listBox li { |