From 04dae190af26730e8e0dcfb7cb4ec066400422f3 Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期一, 14 八月 2023 16:43:25 +0800 Subject: [PATCH] 生产环境加载高德地图显示空白修改 --- src/components/Screen/bottom.vue | 280 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 232 insertions(+), 48 deletions(-) diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue index 2e2d4e7..a9327a1 100644 --- a/src/components/Screen/bottom.vue +++ b/src/components/Screen/bottom.vue @@ -28,7 +28,10 @@ v-model="searchName" @change="handleSearchChange(item)" > - <el-button slot="append" icon="el-icon-search"></el-button> + <el-button + slot="append" + icon="el-icon-search" + ></el-button> </el-input> </div> <div class="popover-content__list"> @@ -56,8 +59,24 @@ </div> </div> <div class="bottom13"> - <img :src="yxImg" @click="ChangeBaseLayer('yx')" title="褰卞儚鍥�" /> - <img :src="xrImg" @click="ChangeBaseLayer('xr')" title="鏅曟覆鍥�" /> + <div + class="bottom13-wrapper" + :class="isExpand ? 'expend' : 'fold'" + @mouseover="handleMouseOver" + @mouseout="handleMouseOut" + > + <div + v-for="item in yxList" + yxList + :class="item.name == currYX && isExpand ? [item.key, 'active'] : item.key" + @click="ChangeBaseLayer(item.name)" + :title="item.name" + ></div> + + <!-- <transition name="slide-fade"> + <p v-if="show">hello</p> + </transition> --> + </div> </div> </div> <div class="bottom2"> @@ -169,12 +188,30 @@ }, ], showTree: false, + currYX: "褰卞儚鍥�", + yxList: [ + { + name: "褰卞儚鍥�", + key: "yingxiang", + }, + { + name: "娉ㄨ鍥�", + key: "zhuji", + }, + { + name: "鏅曟覆鍥�", + key: "yunxuan", + }, + ], + isExpand: false } }, computed: { currMenuList() { + const menu = this.menuList.find(item => item.menuName == this.currMenu) const filterChildren = [] + const value = this.searchName menu.children.forEach(item => { if (item.name && item.name.includes(value)) { @@ -189,49 +226,90 @@ this.getCountProjectTour() }, methods: { - ChangeBaseLayer(parm) { - if (parm == "yx") { - if (this.YXState) { - //this.yxImg = require("../../assets/img/Screen/bdimg.png") - //鍔犺浇鐧惧害褰卞儚 - Viewer.imageryLayers._layers[1].show = true - Viewer.imageryLayers._layers[2].show = false - Viewer.imageryLayers._layers[3].show = false - } else { - //this.yxImg = require("../../assets/img/Screen/yximg.png") - Viewer.imageryLayers._layers[1].show = false - Viewer.imageryLayers._layers[2].show = true - Viewer.imageryLayers._layers[3].show = true - } - this.YXState = !this.YXState + ChangeBaseLayer(name) { + this.currYX = name + + if (is_production) { + Viewer.imageryLayers._layers[2].show = false + Viewer.imageryLayers._layers[1].show = false + } else { + Viewer.imageryLayers._layers[1].show = false + } - if (parm == "xr") { - if (yunxuanLayer == null) { - var urls = "https://tiles3.geovisearth.com/base/v1/ter" - // 鏄熷浘鍦扮悆鍦板舰鏅曟覆 - yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider( - "鏄熷浘鍦扮悆鍦板舰鏅曟覆", - { - url: - urls + - "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405", - }, - "0", - undefined, - true, - "" - ) - } - if (this.XRState) { - yunxuanLayer.item.show = true - } else { - yunxuanLayer.item.show = false - } - this.XRState = !this.XRState + if (yunxuanLayer) { + Viewer.imageryLayers.remove(yunxuanLayer); + yunxuanLayer = null + } + + switch (name) { + case "鏅曟覆鍥�": + if (yunxuanLayer == null) { + // var urls = "https://tiles3.geovisearth.com/base/v1/ter" + // // 鏄熷浘鍦扮悆鍦板舰鏅曟覆 + // yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider( + // "鏄熷浘鍦扮悆鍦板舰鏅曟覆", + // { + // url: + // urls + + // "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405", + // }, + // "0", + // undefined, + // true, + // "" + // ) + var urls = "http://t0.tianditu.com/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="; + var tokne = "94a34772eb88317fcbf8428e10448561" + if (is_production) { + var baseUrl_yx = window.sceneConfig.baseUrl_yx; + if (baseUrl_yx.indexOf('{host}') > -1) { + baseUrl_yx = baseUrl_yx.replace("{host}", iisHost) + } + + yunxuanLayer = Viewer.imageryLayers.addImageryProvider( + new Cesium.UrlTemplateImageryProvider({ + url: baseUrl_yx, + maximumLevel: 22, + }) + ); + } else { + yunxuanLayer = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ + url: urls + tokne, + layer: "tdtImgLayer", + style: "default", + format: "image/jpeg", + tileMatrixSetID: "GoogleMapsCompatible", + })) + } + + + Viewer.imageryLayers.lowerToBottom(yunxuanLayer);//灏嗗浘灞傜Щ鍒版渶搴曞眰 + Viewer.imageryLayers.raise(yunxuanLayer);//灏嗗浘灞備笂绉讳竴灞� + } + + + + break + case "褰卞儚鍥�": + + if (is_production) { + Viewer.imageryLayers._layers[1].show = true + } + break + case "娉ㄨ鍥�": + if (is_production) { + Viewer.imageryLayers._layers[2].show = true + } else { + Viewer.imageryLayers._layers[1].show = true + } + break + default: + break } }, handleMenuClick(menu) { + this.currMenu = menu.menuName }, handlePopoverClick(child) { @@ -242,12 +320,13 @@ this.showPathLine(child) break case "椤圭洰灞曠ず": - // this.DisplayCurrentProject(child) + this.$bus.$emit("changeProjectLayer", child.id) + this.DisplayCurrentProject(child) this.changeProject(child) this.$bus.$emit("changeProjectCode", child.id) - break case "涓撻灞曠ず": + this.$bus.$emit("changeProjectLayer", child.id) this.changeProject(child) break @@ -258,6 +337,9 @@ //宸ョ▼宸¤ async showPathLine(params) { + + this.$bus.$emit("closeLeftAndRightMenu", true) + const line = wktToGeoJSON(params.wkt) const position = line.coordinates[0] const result = [] @@ -266,7 +348,7 @@ pos.push(1000) result.push(...pos) }) - // console.log("line", position) + window.sgworld.Creator.getFlyData(result, data => { data.showPoint = false @@ -278,6 +360,7 @@ window.PathAnimationData = { flyData: data, } + var that = this window.PathAnimationData.winIndex = layer.open({ type: 2, title: "宸ョ▼宸¤", @@ -288,6 +371,7 @@ content: SmartEarthRootUrl + "Workers/path/ProjectPath.html", end: function () { PathAnimationData.fly && PathAnimationData.fly.exit() + that.$bus.$emit("closeLeftAndRightMenu", false) }, }) }) @@ -322,7 +406,7 @@ return menu.children // return menu.children.filter(item => item.name.indexOf(searchName) > -1) }, - handleSearchChange(currMenu) {}, + handleSearchChange(currMenu) { }, async getCountProjectDisplay() { // const res = await countProjectLocation() // if (res.code === 200) { @@ -351,7 +435,9 @@ async getCountProjectTour() { const res = await countProjectTour() if (res.code === 200) { + const menu = this.menuList.find(item => item.menuName == "宸ョ▼宸¤") + menu.children = res.result.map(item => { return { name: item.projname, @@ -364,11 +450,42 @@ //涓撻灞曠ず changeProject(params) { this.$bus.$emit("changeProject", params.name) + var lon, lat, height; + if (params.name.indexOf("鍏ㄥ浗") != -1) { + height = 20000000; + lon = 110; + lat = 32; + window.viewer.camera.flyTo({ + destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height), + orientation: { + heading: Cesium.Math.toRadians(0), + pitch: Cesium.Math.toRadians(-90), + }, + }) + } else if (params.name.indexOf("鍏ㄧ悆") != -1) { + lon = 85; + lat = 25; + height = 30000000; + window.viewer.camera.flyTo({ + destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height), + orientation: { + heading: Cesium.Math.toRadians(0), + pitch: Cesium.Math.toRadians(-90), + }, + }) + } + }, handleTree(params) { this.showTree = !this.showTree this.$bus.$emit("changeTree", this.showTree) }, + handleMouseOver() { + this.isExpand = true + }, + handleMouseOut() { + this.isExpand = false + } }, } </script> @@ -399,16 +516,83 @@ align-items: center; justify-content: space-around; } - .bottom13 { + display: flex; + flex-direction: row-reverse; + } + -webkit-transition-property: width; + .expend { + transition-property: width; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + width: 320px !important; + } + .fold { + -webkit-transition-property: width; + transition-property: width; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + width: 100px !important; + } + .bottom13-wrapper { + height: 80px; + width: 100px; + -webkit-transition-property: width; + transition-property: width; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; + position: relative; + overflow: hidden; + &:hover { + .zhuji { + right: 100px; + } + .yunxuan { + right: 200px; + } + } + .yingxiang, + .zhuji, + .yunxuan { + margin-right: 10px; + width: 92px; + height: 61px; + background: url(~@/assets/img/Screen/yximg.png); + background-size: 100% 100%; + background-position: 0 0; + position: absolute; + z-index: 3; + right: 0; + -webkit-transition-property: right; + transition-property: right; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .zhuji { + z-index: 2; + background-position: 0px -61px; + right: 5px; + background: url(~@/assets/img/Screen/bdimg.png); + background-size: 100% 100%; + } + .yunxuan { + z-index: 1; + background-position: 0 -122px; + right: 10px; + background: url(~@/assets/img/Screen/geovisearth-ter.png); + background-size: 100% 100%; + } + .active { + border: 1px solid #409eff; + } img { cursor: pointer; - margin-right: 30px; + margin-right: 10px; width: 92px; height: 61px; } @@ -420,7 +604,7 @@ background: url(~@/assets/img/Screen/centerbtn.png); background-size: 100% 100%; background-repeat: no-repeat; - font-size: 1rem; + font-size: 16px; display: flex; align-items: center; justify-content: center; -- Gitblit v1.9.3