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 | 740 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 606 insertions(+), 134 deletions(-)
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index 7c4a3bb..a9327a1 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -3,7 +3,13 @@
<div class="bottom1">
<div class="bottom11"></div>
<div class="bottom12">
- <div class="bottombtn">
+ <div
+ :class="currMenu == item.menuName ? 'active' : ''"
+ v-for="item in menuList"
+ :key="item.menuName"
+ class="bottombtn"
+ @click="handleMenuClick(item)"
+ >
<el-popover
popper-class="popover"
placement="top"
@@ -11,68 +17,66 @@
trigger="click"
>
<!-- 鍐呭 -->
- <span slot="reference">椤圭洰灞曠ず</span>
+ <span slot="reference">{{ item.menuName }}</span>
<div class="popover-content">
<div class="popover-content__header">椤圭洰淇℃伅</div>
- <div class="popover-content__list">
- <div
- class="popover-content__list__item"
- v-for="item in projectInfoList"
- :key="item.id"
- :class="currProject == item.name ? 'active' : ''"
- >
- {{ item.name }}
- </div>
- </div>
- </div>
- </el-popover>
- </div>
- <div class="bottombtn">
- <el-popover placement="top" width="100" trigger="click">
- <!-- 鍐呭 -->
- <span slot="reference">宸ョ▼灞曠ず</span>
- <div class="popover-content">
- <div class="popover-content__header">椤圭洰淇℃伅</div>
- <div class="popover-content__list">
- <div
- class="popover-content__list__item"
- v-for="item in displayProject"
- :key="item.id"
- :class="currProject == item.name ? 'active' : ''"
- :title="item.name"
- @click="DisplayCurrentProject(item.name)"
- >
- {{ item.name.length>8?item.name.substring(0,8):item.name }}
- </div>
- </div>
- </div>
- </el-popover>
- </div>
- <div class="bottombtn">
- <el-popover placement="top" width="100" trigger="click">
- <!-- 鍐呭 -->
- <span slot="reference">宸ョ▼宸¤</span>
- <div class="popover-content">
- <div class="popover-content__header">椤圭洰淇℃伅</div>
- <div class="popover-content__list">
- <div
- class="popover-content__list__item"
- v-for="item in FlyProject"
- :key="item.id"
- :class="currProject == item.name ? 'active' : ''"
- :title="item.name"
- @click="FlyCurrentProject(item.name)"
- >
- {{ item.name.length>8?item.name.substring(0,8):item.name }}
- </div>
- </div>
- </div>
+ <div class="popover-content__search">
+ <el-input
+ size="mini"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="searchName"
+ @change="handleSearchChange(item)"
+ >
+ <el-button
+ slot="append"
+ icon="el-icon-search"
+ ></el-button>
+ </el-input>
+ </div>
+ <div class="popover-content__list">
+ <div
+ class="popover-content__list__item"
+ v-for="(child, i) in currMenuList"
+ :key="child.id + i"
+ :class="currProject == child.name ? 'active' : ''"
+ @click="handlePopoverClick(child)"
+ :title="child.name"
+ >
+ {{ child.name.slice(0, 8) }}
+ </div>
+ </div>
+ </div>
</el-popover>
+ </div>
+
+ <div
+ class="bottombtn"
+ :class="showTree ? 'active' : ''"
+ @click="handleTree"
+ >
+ 鍥惧眰绠＄悊
</div>
</div>
<div class="bottom13">
- <img :src="yxImg" @click="ChangeBaseLayer" />
+ <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">
@@ -81,108 +85,407 @@
</div>
</template>
<script>
+let yunxuanLayer = null
+import PipeLine from "@/assets/json/pipeline.json"
+import {
+ countProjectTour,
+ countProjectDisplay,
+ countProjectLocation,
+ selectProjectFileList,
+} from "@/api/screen.js"
+import { wktToGeoJSON } from "@terraformer/wkt"
+
export default {
data() {
return {
YXState: true,
+ XRState: true,
+ yunxuanLayer: null, //鍏ㄧ悆鐪╂檿鍥�
yxImg: require("../../assets/img/Screen/yximg.png"),
- currProject: "鍏ㄧ悆绠＄綉鍥�",
- projectInfoList: [
+ xrImg: require("../../assets/img/Screen/bdimg.png"),
+ currMenu: "涓撻灞曠ず",
+ currProject: "",
+ searchName: "",
+ menuList: [
{
- name: "鍏ㄥ浗绠＄綉鍥�",
- id: "qggwt",
+ menuName: "涓撻灞曠ず",
+ children: [
+ {
+ name: "鍏ㄥ浗绠＄綉鍥�",
+ id: "qggwt",
+ },
+ {
+ name: "鍏ㄧ悆绠＄綉鍥�",
+ id: "qqgwt",
+ },
+ {
+ name: "鍏ㄥ浗椤圭洰",
+ id: "qgxm",
+ },
+ {
+ name: "鍏ㄧ悆椤圭洰",
+ id: "qqxm",
+ },
+ ],
},
{
- name: "鍏ㄧ悆绠＄綉鍥�",
- id: "qqgwt",
+ menuName: "椤圭洰灞曠ず",
+ children: [
+ {
+ name: "涓縿涓滅嚎绠￠亾宸ョ▼",
+ id: "zedx",
+ },
+ {
+ name: "瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
+ id: "xqds",
+ },
+ {
+ name: "涓紖澶╃劧姘旂閬撳伐绋�",
+ id: "zmtrq",
+ },
+ {
+ name: "灞变笢瀹樼綉鏂板共绾�",
+ id: "sdxgx",
+ },
+ ],
},
{
- name: "鍏ㄥ浗椤圭洰",
- id: "qgxm",
- },
- {
- name: "鍏ㄧ悆椤圭洰",
- id: "qqxm",
+ menuName: "宸ョ▼宸¤",
+ children: [
+ {
+ name: "涓縿涓滅嚎绠￠亾宸ョ▼",
+ id: "zedx",
+ },
+ {
+ name: "瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
+ id: "xqds",
+ },
+ {
+ name: "涓紖澶╃劧姘旂閬撳伐绋�",
+ id: "zmtrq",
+ },
+ {
+ name: "灞变笢瀹樼綉鏂板共绾�",
+ id: "sdxgx",
+ },
+ {
+ name: "涓縿涓滅嚎绠￠亾宸ョ▼",
+ id: "zedx",
+ },
+ {
+ name: "瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
+ id: "xqds",
+ },
+ {
+ name: "涓紖澶╃劧姘旂閬撳伐绋�",
+ id: "zmtrq",
+ },
+ {
+ name: "灞变笢瀹樼綉鏂板共绾�",
+ id: "sdxgx",
+ },
+ ],
},
],
-
- displayProject:[
+ showTree: false,
+ currYX: "褰卞儚鍥�",
+ yxList: [
{
- name:"涓縿涓滅嚎绠￠亾宸ョ▼",
- id:"zedx"
+ name: "褰卞儚鍥�",
+ key: "yingxiang",
},
{
- name:"瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
- id:"xqds"
+ name: "娉ㄨ鍥�",
+ key: "zhuji",
},
{
- name:"涓紖澶╃劧姘旂閬撳伐绋�",
- id:"zmtrq"
- },
- {
- name:"灞变笢瀹樼綉鏂板共绾�",
- id:"sdxgx"
+ name: "鏅曟覆鍥�",
+ key: "yunxuan",
},
],
- FlyProject:[
- {
- name:"涓縿涓滅嚎绠￠亾宸ョ▼",
- id:"zedx"
- },
- {
- name:"瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
- id:"xqds"
- },
- {
- name:"涓紖澶╃劧姘旂閬撳伐绋�",
- id:"zmtrq"
- },
- {
- name:"灞变笢瀹樼綉鏂板共绾�",
- id:"sdxgx"
- },
- ]
-
-
-
-
+ 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)) {
+ filterChildren.push(item)
+ }
+ })
+ return filterChildren
+ },
+ },
+ created() {
+ this.getCountProjectDisplay()
+ this.getCountProjectTour()
+ },
methods: {
- ChangeBaseLayer() {
- if (this.YXState) {
- this.yxImg = require("../../assets/img/Screen/bdimg.png")
- //鍔犺浇鐧惧害褰卞儚
- Viewer.imageryLayers._layers[1].show = true
+ ChangeBaseLayer(name) {
+ this.currYX = name
+
+ if (is_production) {
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
+ } else {
+ Viewer.imageryLayers._layers[1].show = false
+
}
- this.YXState = !this.YXState
+
+ 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) {
+ this.currProject = child.name
+ const currMenu = this.currMenu
+ switch (currMenu) {
+ case "宸ョ▼宸¤":
+ this.showPathLine(child)
+ break
+ case "椤圭洰灞曠ず":
+ 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
+
+ default:
+ break
+ }
+ },
+
+ //宸ョ▼宸¤
+ async showPathLine(params) {
+
+ this.$bus.$emit("closeLeftAndRightMenu", true)
+
+ const line = wktToGeoJSON(params.wkt)
+ const position = line.coordinates[0]
+ const result = []
+ position.forEach(pos => {
+ // 娣诲姞婕父楂樺害锛屽悗缁慨鏀筍DK婧愮爜鍙互閫傞厤涓哄湴闈㈤珮绋�
+ pos.push(1000)
+ result.push(...pos)
+ })
+
+
+ window.sgworld.Creator.getFlyData(result, data => {
+ data.showPoint = false
+ data.showLine = true
+ data.mode = 0
+ data.height = 5000
+
+ // 寮圭獥鏁版嵁
+ window.PathAnimationData = {
+ flyData: data,
+ }
+ var that = this
+ window.PathAnimationData.winIndex = layer.open({
+ type: 2,
+ title: "宸ョ▼宸¤",
+ shade: false,
+ area: ["352px", "690px"],
+ offset: "r",
+ skin: "other-class",
+ content: SmartEarthRootUrl + "Workers/path/ProjectPath.html",
+ end: function () {
+ PathAnimationData.fly && PathAnimationData.fly.exit()
+ that.$bus.$emit("closeLeftAndRightMenu", false)
+ },
+ })
+ })
},
//椤圭洰灞曠ず
- DisplayCurrentProject(parm){
- console.log(parm);
+ DisplayCurrentProject(params) {
//鎵撳紑鎴栬�呭姞杞藉浘灞�
//椋炲埌鎸囧畾浣嶇疆
+ const point = wktToGeoJSON(params.wkt)
+ const position = point.coordinates
+
+ Viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(...position, 7000),
+ })
},
//宸ョ▼婕父椋炶
- FlyCurrentProject(parm){
- console.log(parm);
+ FlyCurrentProject(prams) {
+ console.log(prams)
//鎵撳紑鎴栬�呭姞杞藉浘灞�
//寮�濮嬮琛�
+ },
+ filterChildList(menuName) {
+ const menuList = this.menuList
+ const searchName = this.searchName
+
+ // console.log(menuList.find(item => item.menuName == menuName));
+ const menu = menuList.find(item => item.menuName == menuName)
+ return menu.children
+ // return menu.children.filter(item => item.name.indexOf(searchName) > -1)
+ },
+ handleSearchChange(currMenu) { },
+ async getCountProjectDisplay() {
+ // const res = await countProjectLocation()
+ // if (res.code === 200) {
+ // const menu = this.menuList.find(item => item.menuName == "椤圭洰灞曠ず")
+ // menu.children = res.result.map(item => {
+ // return {
+ // name: item.projname,
+ // id: item.projname,
+ // wkt: item.wkt,
+ // }
+ // })
+ // }
+ const res = await selectProjectFileList()
+ if (res.code === 200) {
+ const menu = this.menuList.find(item => item.menuName == "椤圭洰灞曠ず")
+ menu.children = res.result.map(item => {
+ return {
+ name: item.name,
+ id: item.code,
+ wkt: item.wkt,
+ }
+ })
+ }
+ selectProjectFileList
+ },
+ 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,
+ id: item.projname,
+ wkt: item.wkt,
+ }
+ })
+ }
+ },
+ //涓撻灞曠ず
+ 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>
@@ -213,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;
}
@@ -231,21 +601,26 @@
.bottombtn {
height: 36px;
width: 147px;
- background: url(../../assets/img/Screen/centerbtn.png);
+ 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;
color: #fff;
font-weight: 600;
cursor: pointer;
+
+ &.active {
+ background: url(~@/assets/img/Screen/centerbtnc.png);
+ background-size: 100% 100%;
+ }
}
}
.bottom2 {
- height: 36px;
+ height: 57px;
width: 100%;
display: flex;
align-items: center;
@@ -257,29 +632,126 @@
}
}
}
+
.popover {
- background-color: aqua;
+ display: flex;
+ justify-content: center;
+ width: 163px;
+ height: 218px;
+ background: url(~@/assets/img/Screen/centerTooltipBg.png);
+ background-size: 100% 100%;
+ border: none;
+
+ .popper__arrow {
+ display: none;
+ }
.popover-content {
&__header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ width: 100%;
+ height: 30px;
+ font-size: 18px;
+ color: #fff;
+
&::before,
&::after {
+ margin: 0 5px;
content: "";
display: inline-block;
- background-color: aqua;
+ background-color: #466c99;
border-radius: 50%;
- width: 10px;
- height: 10px;
+ width: 8px;
+ height: 8px;
}
}
- &__list {
- &__item {
- background-color: orange;
- &.active {
- background-color: aqua;
+
+ &__search {
+ margin-top: 8px;
+ width: 145px;
+ text-align: center;
+
+ .el-input {
+ width: 125px;
+ height: 21px;
+ background: rgba(0, 48, 111, 0.2);
+ border: 0.25px solid #2a80a9;
+
+ &__inner {
+ background: rgba(0, 48, 111, 0.2);
+ border-radius: inherit;
+ border: 0.25px solid #2a80a9;
+ padding: 0 5px;
+ color: #fff;
+ }
+
+ .el-input-group__append {
+ width: 32px;
+ border: none;
+ border-radius: inherit;
+ height: 20px;
+ padding: 0;
+ text-align: center;
+ background: #3a93c7;
+ color: #fff;
}
}
}
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ // justify-content: space-evenly;
+ align-items: center;
+ width: 145px;
+ height: 155px;
+ overflow-x: hidden;
+
+ &__item {
+ margin-top: 8px;
+ color: #fff;
+ width: 130px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ // background-color: orange;
+ cursor: pointer;
+ background: url(~@/assets/img/Screen/btnbg.png);
+ background-size: 100% 100%;
+
+ &.active {
+ // background-color: aqua;
+ background: url(~@/assets/img/Screen/btnc.png);
+ background-size: 100% 100%;
+ }
+ }
+ }
+ }
+
+ ::-webkit-scrollbar {
+ width: 2px;
+ height: 2px;
+ background: rgba(81, 205, 255, 0.9) 0%;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: rgba(76, 104, 135, 0.8);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: #409eff;
+ border-radius: 5px;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: #409eff;
+ }
+
+ ::-webkit-scrollbar-corner {
+ background: #409eff;
}
}
</style>
--
Gitblit v1.9.3