From c7187e038c284acc051a439c5eda16582bdb9b7a Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期六, 14 九月 2024 10:16:13 +0800 Subject: [PATCH] 更新 --- src/components/map/viewer.vue | 128 ++++++++++++++++++++++-------------------- 1 files changed, 68 insertions(+), 60 deletions(-) diff --git a/src/components/map/viewer.vue b/src/components/map/viewer.vue index 7118128..a392f84 100644 --- a/src/components/map/viewer.vue +++ b/src/components/map/viewer.vue @@ -2,16 +2,13 @@ <div> <div id="sdkContainer"></div> - <div class="listBox" v-show="viewer1Show && !isLand"> <ul id="viewer_lsyx"> <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)" - > - {{ item }} - </li> + >{{ item }}</li> </ul> </div> @@ -37,11 +34,7 @@ <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" @@ -59,7 +52,6 @@ </template> <script> -import common from "@/components/common"; import layerTreeTwoScreen from "@/components/left/layerTreeTwoScreen"; import switchImagerLayer from "@/components/right/switchImagerLayer"; import { mapState, mapMutations } from "vuex"; @@ -69,17 +61,14 @@ import jiejing from "@/assets/img/new/jiejing.png"; import "animate.css"; import Bus from "@tools/Bus"; - -import mapData from "../../../static/mapData"; import mapMsg from "../../assets/js/mapMsg"; -import vueEvents from "@/utils/vueEvent.js"; let activeLi, nLayer, LWLayer; export default { name: "viewer", components: { switchImagerLayer, - layerTreeTwoScreen, + layerTreeTwoScreen }, data() { return { @@ -96,14 +85,32 @@ 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, - ], + 2001, + 2002, + 2003, + 2004, + 2005, + 2006, + 2007, + 2008, + 2009, + 2010, + 2011, + 2012, + 2013, + 2014, + 2015, + 2016, + 2017, + 2018, + 2019, + 2020, + 2021 + ] }; }, computed: { - ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]), - + ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]) }, watch: { viewer1Show(newvalue, oldvalue) { @@ -121,7 +128,7 @@ } else { this.initLSYX(); } - }, + } }, mounted() { let pathName = window.location.pathname.split("/"); @@ -131,13 +138,12 @@ } else { StaticFileBaseUrl = `../../../static/CimSDK/`; } - this.$nextTick(function () { + this.$nextTick(function() { let that = this; - //*********鍖椾含sdk************ window.sgworld = new SmartEarth.EarthCtrl( "sdkContainer", { - StaticFileBaseUrl: StaticFileBaseUrl, + StaticFileBaseUrl: StaticFileBaseUrl }, {}, {}, @@ -150,7 +156,7 @@ 39.744945, 50000 ), - duration: 7, //椋炶鏃堕棿8s + duration: 7 //椋炶鏃堕棿8s }); //鍐嶉鍒版湞鏋楀ぇ鍘� setTimeout(() => { @@ -160,7 +166,7 @@ 39.791361, 5000 ), - duration: 5, //椋炶鏃堕棿8s + duration: 5 //椋炶鏃堕棿8s }); }, 8000); setTimeout(() => { @@ -173,9 +179,9 @@ orientation: { heading: Cesium.Math.toRadians(328.5), pitch: Cesium.Math.toRadians(-27.5), - roll: Cesium.Math.toRadians(0.0), + roll: Cesium.Math.toRadians(0.0) }, - duration: 5, //椋炶鏃堕棿8s + duration: 5 //椋炶鏃堕棿8s }); // console.log("鍔犺浇瀹屾垚"); }, 14000); @@ -202,23 +208,23 @@ editProp: true, editPropData: { offset: "r", - height: "60%", + height: "60%" }, callBack: { - delete: function (entity) { + delete: function(entity) { Bus.$emit("removeTreeNode", entity); }, - end: function (entity) { + end: function(entity) { if (entity) { let style = sgworld.Creator.SimpleGraphic.getStyle(entity); let data = { name: entity.name, - style: style, + style: style }; Bus.$emit("updataTreeNode", entity.id, data); } - }, - }, + } + } }); //鏍囦細缂栬緫 // sgworld.Creator.SimpleGraphic.setEdit(true, { @@ -255,8 +261,8 @@ if (layeroHeight >= titleHeight + htmlHeight) { layero.height(titleHeight + htmlHeight); } - }, - }, + } + } }); //鍒濆鍖栧脊绐椾簨浠� @@ -360,24 +366,24 @@ let tilingScheme = new Cesium.GeographicTilingScheme({ rectangle: rectangle, numberOfLevelZeroTilesX: 2, - numberOfLevelZeroTilesY: 1, + numberOfLevelZeroTilesY: 1 }); var dx = { url: paramUrl, tilingScheme: tilingScheme, customTags: { - nx: function (imageryProvider, x, y, level) { + nx: function(imageryProvider, x, y, level) { return (2 << (level - 1)) + x; }, - ny: function (imageryProvider, x, y, level) { + 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, + brightness: 1.0 }); Viewer.imageryLayers.add(imageLayer, 3); return imageLayer; @@ -395,24 +401,24 @@ let tilingScheme = new Cesium.GeographicTilingScheme({ rectangle: rectangle, numberOfLevelZeroTilesX: 2, - numberOfLevelZeroTilesY: 1, + numberOfLevelZeroTilesY: 1 }); var dx = { url: paramUrl, tilingScheme: tilingScheme, customTags: { - nx: function (imageryProvider, x, y, level) { + nx: function(imageryProvider, x, y, level) { return (2 << (level - 1)) + x; }, - ny: function (imageryProvider, x, y, level) { + 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, + brightness: 1.0 }); Viewer.imageryLayers.add(imageLayer, 2); return imageLayer; @@ -437,22 +443,24 @@ this.switchImagerLayer = !this.switchImagerLayer; }, ArcgisImageryLayer() { - sgworld.Creator.createArcGisImageryLayer( + let InitMap = sgworld.Creator.createArcGisImageryLayer( "ARCGIS", { - url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", - enablePickFeatures: false, + url: + "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", + enablePickFeatures: false }, "0", 1, true, "" ); + console.log(InitMap); }, //鍒濆鍖栧脊绐椾簨浠� initLayerOpen() { - window.layerOpen = function (name, options) { + window.layerOpen = function(name, options) { layuiLayer.close(SmartEarthPopupData.layerProp); let width = options.width; @@ -479,18 +487,18 @@ offset: options.offset || undefined, area: [ typeof width === "number" ? width + "px" : width, - typeof height === "number" ? height + "px" : height, + typeof height === "number" ? height + "px" : height ], content: options.url, - success: function (layero, index) { + success: function(layero, index) { layero.css({ - "border-radius": "8px", + "border-radius": "8px" }); if (successFn && typeof successFn === "function") { successFn(layero, index); } }, - cancel: function () { + cancel: function() { if (cancelFn && typeof cancelFn === "function") { cancelFn(); if (window.pickFeature && window.pickFeature.primitive) { @@ -500,11 +508,11 @@ } } }, - end: function () { + end: function() { if (endFn && typeof endFn === "function") { endFn(); } - }, + } }); }; }, @@ -514,7 +522,7 @@ "<div style='color: #FFFFFF;float: left;height: 28px;line-height: 28px;'></div>"; let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); - handler3D.setInputAction((wheelment) => { + handler3D.setInputAction(wheelment => { // 婊氬姩婊氳酱锛屽緱鍒板綋鍓嶇殑瑙嗙偣楂樺害 // 鍗曚綅鎹㈢畻锛屽綋澶т簬1000绫崇殑鏃跺�欐樉绀衡�滃崈绫斥�濓紝灏忎簬1000绫崇殑鏃跺�欐樉绀哄崟浣嶄负鈥滅背鈥� var cHeightM = Viewer.camera.positionCartographic.height; @@ -583,8 +591,8 @@ // "</span>"; // } // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); - }, - }, + } + } }; </script> -- Gitblit v1.9.3