From f5233339920a59103d53e8efadc6f3f5d0b64f31 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 08 五月 2024 14:45:37 +0800
Subject: [PATCH] 移动端
---
src/components/common.vue | 68 ++--
src/components/poplayer/history2.vue | 9
src/utils/store.js | 19
src/components/leftMenu/sousuo2.vue | 8
src/components/rightMenu/layerTree.vue | 6
src/components/rightMenu/bottom copy.vue | 17
src/components/rightMenu/bottom.vue | 229 ++++++--------
src/components/leftMenu/sousuo.vue | 155 ++++++---
src/utils/map.js | 15
/dev/null | 13
src/components/viewer.vue | 20
src/components/sideMenu/layerMenu/layerPanel2.vue | 1
static/config.json | 6
src/components/sideMenu/layerMenu/layerPanel.vue | 170 ++++++----
src/components/poplayer/history.vue | 113 +++---
src/components/rightMenu/layerTree2.vue | 6
src/components/rightNavigation/NavigationBar.vue | 94 ++---
17 files changed, 497 insertions(+), 452 deletions(-)
diff --git a/src/components/common.vue b/src/components/common.vue
index e22ac63..56c9176 100644
--- a/src/components/common.vue
+++ b/src/components/common.vue
@@ -1,48 +1,48 @@
<script>
import axios from "axios";
-let username = window.sessionStorage.getItem("username"); //鐢ㄦ埛鍚�
-let password = window.sessionStorage.getItem("password"); //瀵嗙爜
-let minviewheight = window.sessionStorage.getItem("minviewheight"); //鏈�浣庤瑙掗珮搴�
-let smartearthtoken = window.sessionStorage.getItem("smartearthtoken"); //token
-let trafficserve = window.sessionStorage.getItem("trafficserve"); //瀹炴椂璺喌鏈嶅姟
-let poiserve = window.sessionStorage.getItem("poiserve"); //poi鏌ヨ鏈嶅姟
-let space_query = window.sessionStorage.getItem("space_query"); //绌洪棿鏌ヨ鏈嶅姟
+// let username = window.sessionStorage.getItem("username"); //鐢ㄦ埛鍚�
+// let password = window.sessionStorage.getItem("password"); //瀵嗙爜
+// let minviewheight = window.sessionStorage.getItem("minviewheight"); //鏈�浣庤瑙掗珮搴�
+// let smartearthtoken = window.sessionStorage.getItem("smartearthtoken"); //token
+// let trafficserve = window.sessionStorage.getItem("trafficserve"); //瀹炴椂璺喌鏈嶅姟
+// let poiserve = window.sessionStorage.getItem("poiserve"); //poi鏌ヨ鏈嶅姟
+// let space_query = window.sessionStorage.getItem("space_query"); //绌洪棿鏌ヨ鏈嶅姟
export default {
- username,
- password,
- minviewheight,
- smartearthtoken,
- trafficserve,
- poiserve,
+ // username,
+ // password,
+ // minviewheight,
+ // smartearthtoken,
+ // trafficserve,
+ // poiserve,
//"poi_search": "https://restapi.amap.com/v3/place/polygon",
- space_query,
+ // space_query,
async getServeData() {
await axios.get("./static/config.json").then(
(response) => {
let data = response.data;
- this.username = data && data.username;
- window.sessionStorage.setItem("username", this.username);
+ // this.username = data && data.username;
+ // window.sessionStorage.setItem("username", this.username);
- this.password = data && data.password;
- window.sessionStorage.setItem("password", this.password);
+ // this.password = data && data.password;
+ // window.sessionStorage.setItem("password", this.password);
- this.minviewheight = data && data.min_view_height;
- window.sessionStorage.setItem("minviewheight", this.minviewheight);
+ // this.minviewheight = data && data.min_view_height;
+ // window.sessionStorage.setItem("minviewheight", this.minviewheight);
- this.smartearthtoken = data && data.token;
- window.sessionStorage.setItem("smartearthtoken", this.smartearthtoken);
+ // this.smartearthtoken = data && data.token;
+ // window.sessionStorage.setItem("smartearthtoken", this.smartearthtoken);
- this.trafficserve = data && data.traffic;
- window.sessionStorage.setItem("trafficserve", this.trafficserve);
+ // this.trafficserve = data && data.traffic;
+ // window.sessionStorage.setItem("trafficserve", this.trafficserve);
this.poiserve = data && data.poi_search;
this.poiserve2 = data && data.poi_search2;
window.sessionStorage.setItem("poiserve", this.poiserve);
window.sessionStorage.setItem("poiserve2", this.poiserve2);
- this.space_query = data && data.space_query;
- window.sessionStorage.setItem("space_query", this.space_query);
+ // this.space_query = data && data.space_query;
+ // window.sessionStorage.setItem("space_query", this.space_query);
/**鑾峰彇gisBaseUrl */
window.gisBaseUrl = data && data.gis_base_url;
@@ -53,14 +53,14 @@
);
},
getToken(callback) {
- let token = window.sessionStorage.getItem("smartearthtoken");
- if (token) {
- callback(token);
- } else {
- this.getServeData(() => {
- callback(this.smartearthtoken);
- });
- }
+ // let token = window.sessionStorage.getItem("smartearthtoken");
+ // if (token) {
+ // callback(token);
+ // } else {
+ // this.getServeData(() => {
+ // callback(this.smartearthtoken);
+ // });
+ // }
},
};
</script>
\ No newline at end of file
diff --git a/src/components/leftMenu/sousuo.vue b/src/components/leftMenu/sousuo.vue
index 07aeca6..9e6d294 100644
--- a/src/components/leftMenu/sousuo.vue
+++ b/src/components/leftMenu/sousuo.vue
@@ -5,7 +5,10 @@
<span
@click="ssjmxs"
style="float: left; height: 100%; width: 80%; overflow: hidden"
- ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
+ ><i
+ class="el-icon-search"
+ style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
+ ></i
>{{ syssval }}</span
>
<span
@@ -25,13 +28,9 @@
right: -3px;
"
>
- <img
- src="@/assets/img/navigation/addf.png"
- style="width: 20px"
- @click.stop="AddFavorite"
- />
+ <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
</span>
- <span
+ <!-- <span
v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'"
style="float: right; height: 100%; width: 10%"
>
@@ -40,17 +39,13 @@
style="width: 20px"
@click.stop="showAddFavorite"
/>
- </span>
+ </span> -->
</div>
<!-- 鎼滅储鐣岄潰 -->
- <div class="ssjm" v-show="ssjm">
- <!-- 鎼滅储鐣岄潰椤堕儴 -->
- <div class="menutop">
- <div class="menutitle">鎼滅储</div>
- <div class="menuback" @click="cancless">鍏抽棴</div>
- </div>
+ <div class="ssjm" v-if="ssjm">
<!-- 鎼滅储妗� -->
- <div style="margin: 0.1rem 0">
+ <div class="search-container">
+ <div class="back" @click="cancless"></div>
<el-input
placeholder="杈撳叆鍏抽敭瀛楁悳绱㈠湴鍥�"
autofocus
@@ -66,11 +61,7 @@
:value="item.value"
></el-option>
</el-select>
- <el-button
- slot="append"
- icon="el-icon-search"
- @click="search"
- ></el-button>
+ <el-button slot="append" @click="search">鎼滅储</el-button>
</el-input>
</div>
<!-- 缁撴灉鏄剧ず -->
@@ -82,17 +73,12 @@
:key="index"
@click="flyTo(item)"
>
- <div style="margin: 0.05rem 0">
- <i class="el-icon-map-location"></i>{{ item.name }}
+ <div class="poiName" style="margin: 0.05rem 0">
+ <img src="@/assets/img/navigation/location.png" alt="" />
+ <span>{{ item.name }}</span>
</div>
- <div style="font-size: 0.12rem; color: black">
- <!-- <span>鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span><br />
- <span>鐢佃瘽:{{ item.telphone ? item.telphone : "鏆傛棤鑱旂郴鏂瑰紡" }}</span> -->
- <!-- <span>鍖哄煙:{{ item.area ? item.area : "鏆傛棤鍖哄煙淇℃伅" }}</span> -->
- <!-- <br /> -->
- <span
- >鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span
- >
+ <div class="addressBox">
+ <span>{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span>
</div>
</div>
</div>
@@ -104,25 +90,19 @@
</div>
</template>
<style scoped>
-/* 鎼滅储鎸夐挳鐨勬牱寮� */
-.iszd {
- position: absolute;
- left: 0.2rem;
- top: 0.3rem;
-}
/* 鎼滅储妗嗙殑鏍峰紡 */
.ssk {
position: absolute;
/* text-align: center; */
left: 2.5%;
- bottom: 0.2rem;
+ top: 0.15rem;
width: 95%;
border: 1px solid white;
height: 0.4rem;
line-height: 0.4rem;
background: #fff;
- border-radius: 0.2rem;
+ border-radius: 0.14rem;
color: black;
font-size: 0.14rem;
}
@@ -135,31 +115,109 @@
width: 100%;
height: 100%;
top: 0;
+ left: 0;
background-color: #f3f3f3;
- z-index: 99;
+ z-index: 1099;
+}
+.search-container {
+ /* background-color: #fff; */
+ background-color: #fff;
+ display: flex;
+ height: 52px;
+ align-items: center;
+}
+.back {
+ background: url("~@/assets/img/search/back.png") center center no-repeat;
+ background-size: 10px 17px;
+ height: 40px;
+ width: 50px;
+}
+
+.el-input {
+ width: 85%;
+ background-color: #eee;
+ border-radius: 13px;
+}
+.el-input /deep/ .el-input-group__append,
+.el-input /deep/ .el-input-group__prepend {
+ background-color: transparent;
+ border: none;
+}
+
+.el-input /deep/ .el-input__inner {
+ border: none;
+ font-weight: 500;
+ font-size: 0.14rem;
+ color: #3e3d3d;
}
.el-select {
- width: 80px;
+ width: 0.8rem;
+ position: relative;
+ font-size: 0.14rem;
+}
+.el-select:after {
+ content: "";
+ position: absolute;
+ right: 0;
+ height: 24px;
+ border-left: 1px solid #dcdcdc;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.el-input /deep/ .el-input-group__append {
+ width: 50px;
+ padding-right: 25px;
+}
+.el-input /deep/ .el-input-group__append .el-button {
+ font-size: 0.14rem;
+ color: #ffffff;
+ background: #2477ff;
+ border-radius: 13px;
+ padding: 10px;
}
-/* 姣忔潯鎼滅储缁撴灉 */
-.everyinfo {
- color: #409eff;
- padding: 0.05rem;
- font-size: 0.16rem;
- border-bottom: 1px solid lightgray;
+.el-scrollbar .hover {
+ background: none;
}
+/*
+ 鎼滅储缁撴灉
+*/
.ssjg {
overflow-x: hidden;
overflow-y: scroll;
/* max-height: 4rem; */
- max-height: 80vh;
+ max-height: calc(98vh - 50px);
background: white;
padding: 0.2rem;
border-radius: 0.05rem;
}
+.ssjg .everyinfo {
+ color: #409eff;
+ padding: 0.05rem;
+ font-size: 0.16rem;
+ border-bottom: 1px solid lightgray;
+}
+.ssjg .poiName {
+ display: flex;
+ align-items: center;
+ height: 20px;
+}
+.ssjg .poiName img {
+ width: 20px;
+}
+.ssjg .poiName span {
+ margin-left: 7px;
+ line-height: 20px;
+}
+.ssjg .addressBox {
+ margin-left: 27px;
+ margin-top: 5px;
+ color: #000;
+ font-weight: 500;
+ font-size: 13px;
+}
.ssjg::-webkit-scrollbar {
/*婊氬姩鏉℃暣浣撴牱寮�*/
width: 8px;
@@ -184,7 +242,6 @@
}
</style>
-
<script>
let timers = null;
import axios from "axios";
@@ -206,7 +263,7 @@
showList: false,
total: 0,
poiList: [],
- select: "鍏ㄩ儴",
+ select: "POI",
options: [
{
label: "鍏ㄩ儴",
diff --git a/src/components/leftMenu/sousuo2.vue b/src/components/leftMenu/sousuo2.vue
index a657f92..def806e 100644
--- a/src/components/leftMenu/sousuo2.vue
+++ b/src/components/leftMenu/sousuo2.vue
@@ -83,12 +83,6 @@
</div>
</template>
<style scoped>
-/* 鎼滅储鎸夐挳鐨勬牱寮� */
-.iszd {
- position: absolute;
- left: 0.2rem;
- top: 0.3rem;
-}
/* 鎼滅储妗嗙殑鏍峰紡 */
.ssk {
@@ -116,7 +110,7 @@
top: 0;
left: 0;
background-color: #f3f3f3;
- z-index: 99;
+ z-index: 1099;
}
.search-container {
/* background-color: #fff; */
diff --git a/src/components/poplayer/history.vue b/src/components/poplayer/history.vue
index 8519f2e..3d45518 100644
--- a/src/components/poplayer/history.vue
+++ b/src/components/poplayer/history.vue
@@ -1,27 +1,26 @@
<template>
<div class="historyBox">
- <div class="leftBox">
- <div id="mapContainer" class="mapLeft"></div>
- <!-- <div class="colseBtn">
- <img class="searchBtn" src="@/assets/closeinput1.png" />
- </div> -->
- <div class="listBox">
- <ul>
- <li
- v-for="(item, index) in arr"
- :key="index"
- @click="changeLeftMap(item, index)"
- :class="{ active: currentIndex1 == index }"
- >
- {{ item }}
- </li>
- </ul>
- </div>
+ <div id="mapContainer" class="mapLeft"></div>
+ <div class="closeWrapper" @click="close(false)">
+ <img class="colseBtn" src="@/assets/closeinput1.png" />
+ </div>
+ <div class="listBox">
+ <ul>
+ <li
+ v-for="(item, index) in arr"
+ :key="index"
+ @click="changeLeftMap(item, index)"
+ :class="{ active: currentIndex1 == index }"
+ >
+ {{ item }}
+ </li>
+ </ul>
</div>
</div>
</template>
<script>
+import store from "@/utils/store.js";
import mapType from "@/utils/maptype";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
@@ -109,6 +108,9 @@
this.tileLayer1.setSource(this.mapList.find((e) => e.id == item).value);
this.currentIndex1 = index;
},
+ close(val) {
+ store.setHistoryShow(val);
+ },
// changeRightMap(item, index) {
// this.tileLayer2.setSource(this.mapList.find((e) => e.id == item).value);
// this.currentIndex2 = index;
@@ -128,56 +130,55 @@
<style scoped>
.historyBox {
position: absolute;
- z-index: 2;
+ z-index: 20;
width: 100%;
height: 100%;
background-color: #fff;
- margin-top: 0.43rem;
- height: calc(100% - 0.43rem);
display: flex;
-}
-.colseBtn {
- position: absolute;
- top: 10vh;
- left: 0;
-}
-.leftBox {
- position: relative;
- width: 100%;
-}
-.rightBox {
- position: relative;
- width: 50%;
-}
-.listBox {
- position: absolute;
- right: 20px;
- bottom: 10px;
- background-color: #373737;
-}
-.listBox li {
- padding: 2px;
- border: 1px solid #000;
- color: white;
-}
-.listBox li:hover {
- background-color: #00e1ff;
}
.mapLeft {
width: 100% !important;
- float: left;
- position: absolute;
height: 100%;
background-color: #fff;
}
-.mapRight {
- width: 100% !important;
- float: right;
+.closeWrapper {
position: absolute;
- height: 100%;
- background-color: #fff;
+ top: 20px;
+ right: 9px;
}
-.active {
- background-color: #4590d7;
+.colseBtn {
+ width: 0.4rem;
+ /* height: 40px; */
+}
+
+.listBox {
+ position: absolute;
+ right: 10px;
+ bottom: 18px;
+ width: 48px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
+ border-radius: 13px;
+}
+.listBox ul {
+ margin-top: 3px;
+}
+.listBox li {
+ font-weight: bold;
+ font-size: 0.12rem;
+ line-height: 0.25rem;
+ color: #1c222f;
+ border-bottom: 1px solid #e5e5e5;
+ text-align: center;
+}
+.listBox li:last-child {
+ border: none;
+}
+.listBox li:hover {
+ color: #127dff;
+}
+
+.listBox .active {
+ color: #127dff;
}
</style>
diff --git a/src/components/poplayer/history2.vue b/src/components/poplayer/history2.vue
index 4b6fcc3..3475168 100644
--- a/src/components/poplayer/history2.vue
+++ b/src/components/poplayer/history2.vue
@@ -1,7 +1,7 @@
<template>
<div class="historyBox">
- <div class="colseBtn">
- <img class="searchBtn" @click="close" src="@/assets/closeinput1.png" />
+ <div class="closeWrapper">
+ <img class="colseBtn" @click="close" src="@/assets/closeinput1.png" />
</div>
<div class="listBox">
<ul>
@@ -66,13 +66,13 @@
};
</script>
<style scoped>
-.colseBtn {
+.closeWrapper {
position: absolute;
top: 20px;
right: 9px;
}
-.searchBtn {
+.colseBtn {
width: 0.4rem;
/* height: 40px; */
}
@@ -108,7 +108,6 @@
}
.listBox .active {
- /* background-color: #4590d7; */
color: #127dff;
}
</style>
diff --git a/src/components/rightMenu/bottom copy.vue b/src/components/rightMenu/bottom copy.vue
index 8bd6fda..c8ff836 100644
--- a/src/components/rightMenu/bottom copy.vue
+++ b/src/components/rightMenu/bottom copy.vue
@@ -2,11 +2,16 @@
<div class="bottom" id="bottom">
<div class="mapTools" v-show="show">
<div class="mapTool" v-show="test.fwval">
- <el-button class="tool-rotate" @click="flyBack" title="澶嶄綅">
- <img src="../../../static/img/image/ddrf.png" />
+ <el-button class="tool-rotate" @click="zoomIn" title="鏀惧ぇ">
+ <img src="../../../static/img/image/zoomIn.png" />
</el-button>
</div>
- <div class="mapTool">
+ <div class="mapTool" v-show="test.fwval">
+ <el-button class="tool-rotate" @click="zoomOut" title="缂╁皬">
+ <img src="../../../static/img/image/zoomOut.png" />
+ </el-button>
+ </div>
+ <!-- <div class="mapTool">
<el-button
class="tool-trueNorth"
v-show="test.zbzval"
@@ -15,8 +20,8 @@
>
<img src="../../../static/img/image/zbz.png" />
</el-button>
- </div>
- <div class="mapTool">
+ </div> -->
+ <!-- <div class="mapTool">
<el-button
class="tool-fullScreen"
v-show="test.qpval"
@@ -25,7 +30,7 @@
>
<img src="../../../static/img/image/qp.png" />
</el-button>
- </div>
+ </div> -->
</div>
</div>
</template>
diff --git a/src/components/rightMenu/bottom.vue b/src/components/rightMenu/bottom.vue
index b32c12b..cfafd63 100644
--- a/src/components/rightMenu/bottom.vue
+++ b/src/components/rightMenu/bottom.vue
@@ -1,27 +1,31 @@
<template>
- <div class="bottom" id="bottom">
- <div class="mapTools" v-show="show">
- <div class="mapTool" v-show="test.fwval">
- <el-button class="tool-rotate" @click="zoomIn" title="鏀惧ぇ">
- <img src="../../../static/img/image/zoomIn.png" />
- </el-button>
+ <div class="bottom" id="bottom" :style="customStyle" v-show="show">
+ <div class="mapTool">
+ <div class="tool-rotate" @click="flyBack" title="澶嶄綅">
+ <img src="@/assets/img/collection/recover.png" />
</div>
- <div class="mapTool" v-show="test.fwval">
- <el-button class="tool-rotate" @click="zoomOut" title="缂╁皬">
- <img src="../../../static/img/image/zoomOut.png" />
- </el-button>
+ </div>
+ <div class="mapTool2" v-show="test.fwval">
+ <div class="tool-rotate" @click="zoomIn" title="鏀惧ぇ">
+ <img src="@/assets/img/collection/add.png" />
</div>
- <!-- <div class="mapTool">
+ <div class="border"></div>
+ <div class="tool-rotate" @click="zoomOut" title="缂╁皬">
+ <img src="@/assets/img/collection/reduce.png" />
+ </div>
+ </div>
+ <!-- <div class="mapTool">
<el-button
class="tool-trueNorth"
- v-show="test.zbzval"
+ v-show="test.
+ "
@click="trueNorth"
title="姝ｅ寳"
>
<img src="../../../static/img/image/zbz.png" />
</el-button>
</div> -->
- <!-- <div class="mapTool">
+ <!-- <div class="mapTool">
<el-button
class="tool-fullScreen"
v-show="test.qpval"
@@ -31,127 +35,60 @@
<img src="../../../static/img/image/qp.png" />
</el-button>
</div> -->
- </div>
</div>
</template>
<style scoped>
-.bottom {
- position: absolute;
- bottom: 0.4rem;
- height: 0.76rem;
- right: 0.4rem;
-}
-.mapModeControl {
- position: absolute;
- right: 0.05rem;
- background: rgba(90, 90, 90, 0.5);
- bottom: 0.05rem;
- height: 0.76rem;
- width: 1.03rem;
- transition: all 1s;
-}
-.bottom .mapModeControl:hover {
- transition: all 0.6s;
- -webkit-transition: all 0.6s;
- width: 3.2rem;
-}
-.mapMode {
- display: inline-block;
-}
-.mapMode dl {
- width: 0.88rem;
- height: 0.6rem;
- border: 1px solid #494949;
- cursor: pointer;
- margin: 0.08rem;
-}
-
-.mapMode dl:hover {
- border-color: #0553b4;
-}
-
-.mapMode dl {
- position: relative;
-}
-#history {
- background: url(../../../static/img/1.png) no-repeat;
-}
-#mode-3d {
- background: url(../../../static/img/2.png) no-repeat;
-}
-#mode-2d {
- background: url(../../../static/img/4.png) no-repeat;
-}
-.mapMode dt {
- width: 100%;
- height: 0.2rem;
- line-height: 0.2rem;
- position: absolute;
- left: 0;
- bottom: 0px;
- font-size: 0.12rem;
- text-align: center;
- color: #fff;
- text-shadow: 1px 1px 2px #000;
- background: rgba(0, 0, 0, 0.5);
-}
-.mapModeActive {
- background: rgba(1, 37, 80, 0.5) !important;
-}
-
-.mapTools {
- position: absolute;
- /* bottom: 2rem; */
- bottom: 0.2rem;
- /* right: 0.1rem; */
-}
.mapTool {
- margin: 0.1rem 0;
+ width: 0.42rem;
+ /* border-radius: 10px; */
+ /* background: #ffffff; */
+ /* margin-bottom: 8px; */
}
-.mapTool .el-button {
- padding: 0 !important;
- font-size: 0.24rem;
- border: unset;
- float: unset;
- display: block;
- background: rgba(18, 126, 255, 1);
+.mapTool .tool-rotate img {
+ width: 100%;
+}
+.mapTool2 {
+ width: 0.32rem;
+ margin: auto;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.mapTool2 .tool-rotate {
+ height: 0.33rem;
+ line-height: 0.33rem;
}
-/* .button-group-vertical {
- text-align: center;
- position: relative;
-} */
-.fgx {
- position: absolute;
- width: 80%;
- height: 1px;
- height: 1px;
- border: 1px solid #dcdfe6;
- z-index: 999;
- margin: 0 10%;
+.mapTool2 .tool-rotate img {
+ width: 0.17rem;
}
-/* .button-group-vertical .el-button-group > .el-button:first-child {
- border-top-right-radius: 0.04rem !important;
- border-bottom-left-radius: 0px !important;
-}
-.button-group-vertical .el-button-group > .el-button:last-child {
- border-top-right-radius: 0;
- border-bottom-left-radius: 0.04rem !important;
-} */
-.mapTool img {
- width: 24px;
- margin: 3px;
- /* height: 0.4rem; */
+
+.border {
+ width: 100%;
+ height: 1px;
+ border: 0.005rem solid #f3f3f3;
}
</style>
<script>
import Bus from "../../js/bus.js";
+import store from "@/utils/store";
+
export default {
props: ["test"],
data() {
return {
+ customStyle: {
+ position: "absolute",
+ bottom: "0.4rem",
+ right: "0.1rem",
+ },
+ state: store.layerPanel,
show: true,
parentdata: {
fwval: false,
@@ -188,9 +125,29 @@
};
},
mounted() {
- Bus.$on("myMsg", (myMsg) => {
- this.show = myMsg;
- });
+ // Bus.$on("myMsg", (myMsg) => {
+ // this.show = myMsg;
+ // });
+ },
+ watch: {
+ "state.show": {
+ handler(newVal) {
+ if (newVal) {
+ this.customStyle = {
+ position: "absolute",
+ top: "calc(0.75rem + 40px)",
+ right: "0.1rem",
+ };
+ } else {
+ this.customStyle = {
+ position: "absolute",
+ bottom: "0.4rem",
+ right: "0.1rem",
+ };
+ }
+ },
+ immediate: true,
+ },
},
methods: {
modeClick(index, mode) {
@@ -198,20 +155,32 @@
Viewer.scene.mode = mode;
},
flyBack() {
+ const loading = this.$loading({
+ lock: true,
+ text: "闀滃ご澶嶄綅涓�...",
+ spinner: "el-icon-loading",
+ background: "rgba(0, 0, 0, 0.7)",
+ });
+
// let p = sgworld.Navigate.getDegrees();
// console.log("缁忕含搴�:", p);
- sgworld.Navigate.flyToPointsInterest({
- destination: new Cesium.Cartesian3.fromDegrees(
- this.camera.position[0],
- this.camera.position[1],
- this.camera.position[2]
- ),
- orientation: {
- heading: Cesium.Math.toRadians(this.camera.orientation.heading),
- pitch: Cesium.Math.toRadians(this.camera.orientation.pitch),
- roll: Cesium.Math.toRadians(this.camera.orientation.roll),
+ sgworld.Navigate.flyToPointsInterest(
+ {
+ destination: new Cesium.Cartesian3.fromDegrees(
+ this.camera.position[0],
+ this.camera.position[1],
+ this.camera.position[2]
+ ),
+ orientation: {
+ heading: Cesium.Math.toRadians(this.camera.orientation.heading),
+ pitch: Cesium.Math.toRadians(this.camera.orientation.pitch),
+ roll: Cesium.Math.toRadians(this.camera.orientation.roll),
+ },
},
- });
+ () => {
+ loading.close();
+ }
+ );
},
fullScreen() {
Viewer.fullscreenButton.viewModel.command(true);
diff --git a/src/components/rightMenu/layerTree.vue b/src/components/rightMenu/layerTree.vue
index ac74901..8132a76 100644
--- a/src/components/rightMenu/layerTree.vue
+++ b/src/components/rightMenu/layerTree.vue
@@ -423,9 +423,9 @@
mounted() {
window.ProjectTree = this.$refs.tree;
//鑾峰彇token骞惰姹傚姞杞藉浘灞傛暟鎹�
- common.getToken((token) => {
- this.SmartEarthToken = token;
- });
+ // common.getToken((token) => {
+ // this.SmartEarthToken = token;
+ // });
this.$nextTick(() => {
axios.get("./static/layers.json").then(
diff --git a/src/components/rightMenu/layerTree2.vue b/src/components/rightMenu/layerTree2.vue
index ac74901..8132a76 100644
--- a/src/components/rightMenu/layerTree2.vue
+++ b/src/components/rightMenu/layerTree2.vue
@@ -423,9 +423,9 @@
mounted() {
window.ProjectTree = this.$refs.tree;
//鑾峰彇token骞惰姹傚姞杞藉浘灞傛暟鎹�
- common.getToken((token) => {
- this.SmartEarthToken = token;
- });
+ // common.getToken((token) => {
+ // this.SmartEarthToken = token;
+ // });
this.$nextTick(() => {
axios.get("./static/layers.json").then(
diff --git a/src/components/rightNavigation/NavigationBar.vue b/src/components/rightNavigation/NavigationBar.vue
index 3db494c..93d5f1a 100644
--- a/src/components/rightNavigation/NavigationBar.vue
+++ b/src/components/rightNavigation/NavigationBar.vue
@@ -1,11 +1,12 @@
<template>
<div class="navigationBar">
- <div class="menuBtn">
+ <!-- <div class="menuBtn">
<el-button class="right-menuBtn" @click="handleMenuListShow">
<img src="@/assets/img/navigation/menuicon.png" />
</el-button>
- </div>
- <div class="menuList" v-show="showMenuList.show">
+ </div> -->
+ <!-- <div class="menuList" v-show="showMenuList.show"> -->
+ <div class="menuList" v-show="true">
<ul>
<li
v-for="(value, key) in menuList"
@@ -18,7 +19,7 @@
:src="showState[value.attr].show ? value.imgActive : value.img"
:class="showState[value.attr].show ? 'Active' : 'noActive'"
/>
- <span>{{ value.name }}</span>
+ <!-- <span>{{ value.name }}</span> -->
</div>
</li>
<!-- <li @click="handleMenuClick(5)" @tap="handleMenuClick(5)" v-if="resetShowState.show">
@@ -55,13 +56,13 @@
img: require("@/assets/img/navigation/tuc.png"),
imgActive: require("@/assets/img/navigation/tucA.png"),
},
- {
- id: "0002my",
- name: "婕父",
- attr: "roam",
- img: require("@/assets/img/navigation/my.png"),
- imgActive: require("@/assets/img/navigation/myA.png"),
- },
+ // {
+ // id: "0002my",
+ // name: "婕父",
+ // attr: "roam",
+ // img: require("@/assets/img/navigation/my.png"),
+ // imgActive: require("@/assets/img/navigation/myA.png"),
+ // },
// {
// id: '0003tj',
// name: '缁熻',
@@ -69,13 +70,13 @@
// img: require("@/assets/img/navigation/tj.png"),
// imgActive: require("@/assets/img/navigation/tjA.png"),
// },
- {
- id: "0004sc",
- name: "浣嶇疆",
- attr: "location",
- img: require("@/assets/img/navigation/sc.png"),
- imgActive: require("@/assets/img/navigation/scA.png"),
- },
+ // {
+ // id: "0004sc",
+ // name: "浣嶇疆",
+ // attr: "location",
+ // img: require("@/assets/img/navigation/sc.png"),
+ // imgActive: require("@/assets/img/navigation/scA.png"),
+ // },
// {
// id: '0005sz',
// name: '璁剧疆',
@@ -120,7 +121,7 @@
// 鐐瑰嚮鍙充笂瑙掕彍鍗曢」
handleMenuClick(attr) {
- // debugger;
+ console.log("鐐瑰嚮鍙充笂瑙掕彍鍗曢」");
// 娓呴櫎瀹氱偣缁曢
if (window.pointerFly) {
window.pointerFly.end && window.pointerFly.end();
@@ -223,66 +224,55 @@
<style scoped>
.navigationBar {
position: absolute;
- top: 0.55rem;
- right: 0.15rem;
+ top: 0.75rem;
+ right: 0.1rem;
+ z-index: 10;
/* width: 64px; */
}
-.menuBtn .el-button {
- padding: 0 !important;
- font-size: 0.24rem;
- border: unset;
- float: unset;
- display: block;
+.menuBtn {
+ padding: 8px;
background: rgba(18, 126, 255, 1);
+ border-radius: 10px;
}
.menuBtn img {
- width: 24px;
- margin: 3px;
-}
-/* .menuBtn {
- margin-left: 25px;
- width: 22px;
+ width: 20px;
height: 20px;
- background-image: url("~@/assets/img/navigation/menuicon.png");
- background-repeat: no-repeat;
- background-size: 100% 100%;
-} */
+}
.menuList {
+ /* background-color: red; */
+ /* padding: 0px 2px;
position: absolute;
- width: 40px;
margin-top: 0.1rem;
- right: -0.05rem;
+ right: 0;
background-color: white;
- border-radius: 10px;
+ border-radius: 10px; */
}
.menuItem {
- width: 32px;
+ width: 0.42rem;
+ /* width: 32px;
color: black;
- margin: 0px auto;
margin-top: 10px;
margin-bottom: 7px;
- /* padding-bottom: 7px; */
border-bottom: 1px solid #e8e8e9;
+ background-color: #bfa;
text-align: center;
- cursor: pointer;
- /* border-bottom: 1px solid #e8e8e9; */
- /* pointer-events:none */
+ cursor: pointer; */
}
li:last-child .menuItem {
border: none;
}
-img {
- width: 24px;
- /* height: 24px; */
- text-align: center;
+.menuItem img {
+ width: 100%;
+ /* text-align: center; */
}
-.menuItem span {
+/* .menuItem span {
display: block;
text-align: center;
-}
+ margin-top: 2px;
+} */
</style>
diff --git a/src/components/sideMenu/layerMenu/layerPanel.vue b/src/components/sideMenu/layerMenu/layerPanel.vue
index 10bb101..2e43905 100644
--- a/src/components/sideMenu/layerMenu/layerPanel.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel.vue
@@ -1,7 +1,7 @@
<template>
<div class="layerPanel">
<div class="mapMode">
- <div class="title" style="margin-top: 0px">鍦板浘妯″紡</div>
+ <div class="title">鍦板浘妯″紡</div>
<div class="container">
<div
class="layerItem"
@@ -33,32 +33,9 @@
</div>
</div>
</div>
- <!-- <div class="areaType" style="margin-top: 10px">
- <div class="title">
- 涓撻鍥惧眰
- <span class="more" @click.stop="showLayerTree"
- >鏇村鍥惧眰<i class="el-icon-arrow-right"></i
- ></span>
- </div>
- <div class="container">
- <div
- class="layerItem"
- :key="value1.id"
- v-for="(value1, index1) in areaTypeList"
- @click.stop="handleAreaClick(value1, index1)"
- >
- <img
- :src="value1.src"
- :class="{ active: curAreaTypeIndex == index1 }"
- />
- <span :class="{ spanActive: curAreaTypeIndex == index1 }">{{
- value1.name
- }}</span>
- </div>
- </div>
- </div> -->
- <div class="areaType" style="margin-top: 10px">
- <div class="title">
+
+ <div class="areaType">
+ <div class="title ZTtitle">
涓撻搴旂敤
<!-- 涓嶆樉绀烘洿澶氬浘灞� -->
<span class="more" v-show="false" @click.stop="showLayerTree"
@@ -77,9 +54,6 @@
ZTValue.name
}}</span>
</div>
- </div>
- <div class="title2"></div>
- <div class="container">
<div
class="layerItem"
v-for="(funcValue, funcIndex) in FuncList"
@@ -94,7 +68,24 @@
funcValue.name
}}</span>
</div>
+ <!-- <div style="height: 0" class="layerItem" v-for="n in 3" :key="n"></div> -->
</div>
+ <!-- <div class="container">
+ <div
+ class="layerItem"
+ v-for="(funcValue, funcIndex) in FuncList"
+ :key="funcValue.id"
+ @click.stop="handleFuncClick(funcIndex)"
+ >
+ <img
+ :src="funcValue.src"
+ :class="{ active: curFuncIndex == funcIndex }"
+ />
+ <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
+ funcValue.name
+ }}</span>
+ </div>
+ </div> -->
</div>
<!-- <div class="yjsxt">
@@ -154,13 +145,13 @@
},
],
sMapModelList: [
- {
- id: "3Dcs",
- name: "3D鍩庡競",
- active: false,
- type: "san",
- src: require("@/assets/img/layer/3Dcs.png"),
- },
+ // {
+ // id: "3Dcs",
+ // name: "3D鍩庡競",
+ // active: false,
+ // type: "san",
+ // src: require("@/assets/img/layer/3Dcs.png"),
+ // },
{
id: "swmx",
name: "涓夌淮妯″瀷",
@@ -618,67 +609,116 @@
},
};
</script>
-
<style scoped>
.layerPanel {
width: 100%;
+ /* height: 396px; */
position: absolute;
bottom: 0px;
align-items: center;
- padding: 0.1rem;
- background: white;
- z-index: 1000;
- padding-left: 0.25rem;
+ /* padding: 0.1rem; */
+ background: #ffffff;
+ /* z-index: 1000; */
+ /* padding-left: 0.25rem; */
+ border-radius: 15px 15px 0px 0px;
+}
+.mapMode {
+ width: 100%;
+ margin-top: 24px;
+ padding-left: 28px;
}
+@font-face {
+ font-family: "YouSheBiaoTiHei";
+ src: url("../../../../static/YouSheBiaoTiHei.ttf");
+}
.title {
- height: 25px;
- font-size: 16px;
- font-family: Source Han Sans SC;
- font-weight: 700;
- color: #181818;
- line-height: 25px;
- margin: 10px 0px 10px 0;
+ width: 72px;
+ height: 14px;
+ font-family: "YouSheBiaoTiHei";
+ font-weight: 400;
+ font-size: 19px;
+ color: #2e2e2e;
+ line-height: 15px;
+ margin-bottom: 18px;
}
-.title2 {
- height: 15px;
-}
-.container {
+.mapMode .container {
display: flex;
align-items: center;
text-align: center;
+ flex-wrap: wrap;
}
.layerItem {
/* font-size: 14px; */
- font-family: Source Han Sans SC;
+ font-family: "寰蒋闆呴粦";
font-weight: 400;
- margin-right: 30px;
cursor: pointer;
+ text-align: center;
}
-
-.active {
- color: #4187ff;
- border: 2px solid #4187ff;
+.mapMode .layerItem {
+ width: 0.8rem;
+ margin-right: 24px;
+}
+.mapMode img {
+ display: block;
+ width: 100%;
+ border-radius: 11px;
+ border: 1px dashed #127dff;
+ margin-bottom: 11px;
+}
+span {
+ font-family: "寰蒋闆呴粦";
+ font-size: 0.12rem;
+ color: #6e6969;
+ line-height: 12px;
+}
+.mapMode .active,
+.areaType .active {
+ color: #127dff;
+ border: 2px solid #127dff;
border-radius: 10px;
}
.spanActive {
- color: #4187ff;
+ color: #127dff;
+}
+.areaType {
+ width: 100%;
+ margin-top: 30px;
}
-img {
+.areaType .ZTtitle {
+ margin-left: 28px;
+ margin-bottom: 3px;
+}
+.areaType .container {
+ margin-top: 18px;
+ padding: 0 4%;
+ display: grid;
+ justify-items: center;
+ grid-template-columns: repeat(4, 1fr);
+ overflow: hidden;
+}
+.areaType .layerItem {
+ margin-bottom: 15px;
+}
+
+.areaType img {
+ margin: 0 auto;
+ /* background-color: green; */
display: block;
- width: 60px;
- height: 40px;
- margin-bottom: 5px;
+ width: 0.5rem;
+ border-radius: 11px;
+ box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%);
+ margin-bottom: 11px;
}
.more {
float: right;
margin-right: 20px;
font-size: 0.12rem;
- color: #4187ff;
+ color: #127dff;
line-height: 25px;
font-weight: 500;
font-family: unset;
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index 274089c..76a7c60 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -33,6 +33,7 @@
</div>
</div>
</div>
+
<div class="areaType">
<div class="title ZTtitle">
涓撻搴旂敤
diff --git a/src/components/viewer.vue b/src/components/viewer.vue
index 277feaa..4050d89 100644
--- a/src/components/viewer.vue
+++ b/src/components/viewer.vue
@@ -4,15 +4,15 @@
<div id="sdkContainer" @click="clicktoclose"></div>
<!-- 椤甸潰鏍囬 -->
- <div class="titleBg">
+ <!-- <div class="titleBg">
<img src="@/assets/img/title/title.png" />
- </div>
+ </div> -->
<!-- 鍘嗗彶褰卞儚 -->
<my-history v-if="state.show"></my-history>
<!-- 鍘嗗彶褰卞儚鍏抽棴鎸夐挳 -->
- <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
+ <!-- <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
<img class="searchBtn" src="@/assets/closeinput1.png" />
- </div>
+ </div> -->
<!-- 鍙充晶瀵艰埅妗� -->
<my-navigation-bar></my-navigation-bar>
<!-- 鎼滅储妗� -->
@@ -24,7 +24,7 @@
<!-- 鍘熷乏涓嬭彍鍗� -->
<!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
<!-- 宸︿笅蹇嵎鍖哄煙锛堝浣嶃�佹寚鍖楃瓑锛� -->
- <my-left-bottom :test="childrendata"></my-left-bottom>
+ <!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
<!-- 鍙充笅蹇嵎鍖哄煙锛堟斁澶х缉灏忥級 -->
<my-right-bottom :test="childrendata"></my-right-bottom>
@@ -34,7 +34,7 @@
<!-- 浣嶇疆闈㈡澘 -->
<my-collection-panel></my-collection-panel>
<!-- 鎸囧寳閽堥潰鏉� -->
- <my-direction-panel></my-direction-panel>
+ <!-- <my-direction-panel></my-direction-panel> -->
<!-- 鏂板鏀惰棌闈㈡澘 -->
<my-add-collection-panel></my-add-collection-panel>
<!-- 绐ㄤ簳銆佹憚鍍忓ご缁熻闈㈡澘 -->
@@ -52,6 +52,7 @@
<!-- 鍦熷湴绠＄悊寮圭獥 -->
<my-land-admin-info></my-land-admin-info>
<my-slider></my-slider>
+ <my-poplayer></my-poplayer>
</div>
</template>
<script>
@@ -77,6 +78,7 @@
import layerTreePanel from "./sideMenu/layerTreePanel/main.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
+import mainPoplayer from "./poplayer/poplayer.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
import Axios from "axios";
@@ -102,6 +104,7 @@
"my-history": history,
"my-land-admin-info": landAdminInfo,
"my-slider": sliderAlpha,
+ "my-poplayer": mainPoplayer,
},
data() {
return {
@@ -399,7 +402,8 @@
width: 100%;
height: 100%;
background: black;
- position: absolute !important;
+ /* position: absolute !important; */
+ z-index: 0;
}
.titleBg {
@@ -423,12 +427,14 @@
.bottomLeft {
display: none;
}
+
.colseBtn {
position: absolute;
z-index: 2;
top: 0.55rem;
left: 0.2rem;
}
+
.colseBtn img {
width: 30px;
}
diff --git a/src/utils/map.js b/src/utils/map.js
index 7d68ecb..9cdb6e0 100644
--- a/src/utils/map.js
+++ b/src/utils/map.js
@@ -437,15 +437,12 @@
window.clickPOI = sgworld.Navigate.getMouseDegrees(event);
// console.log(window.clickPOI);
if (window.clickPOI) {
- // // 闅愯棌涓夌淮鐣岄潰鍏抽棴鎸夐挳
- // let flag = store.tDCloseBtn.show
- // store.set3DCloseBtnShow(!flag);
- // // 闅愯棌搴曢儴鍥惧眰闈㈢増
- // store.setLayerPanelShow(false);
- // // 闅愯棌鍙充笂瑙掕彍鍗曢潰鏉�
- // store.setMenuListShow(false);
- // // 闅愯棌搴曢儴婕父闈㈡澘
- // store.setRoamPanelShow(false);
+ // 闅愯棌搴曢儴鍥惧眰闈㈢増
+ store.setLayerPanelShow(false);
+ // 闅愯棌鍙充笂瑙掕彍鍗曢潰鏉�
+ store.setMenuListShow(false);
+ // 闅愯棌搴曢儴婕父闈㈡澘
+ store.setRoamPanelShow(false);
}
// 鍦熷湴绠＄悊
diff --git a/src/utils/store.js b/src/utils/store.js
index 5034651..0d5e62b 100644
--- a/src/utils/store.js
+++ b/src/utils/store.js
@@ -1,4 +1,16 @@
const store = {
+ navigator: {
+ show: true,
+ },
+ setNavigatorShow(val) {
+ this.navigator.show = val
+ },
+ mapTools: {
+ show: true,
+ },
+ setMapToolShow(val) {
+ this.mapTools.show = val
+ },
/**鍦板潃椤甸潰 */
locationCollection: {
show: false
@@ -47,13 +59,6 @@
},
setLayerPanelShow(val) {
this.layerPanel.show = val;
- },
- /**涓夌淮鍏抽棴鎸夐挳 */
- tDCloseBtn: {
- show: true
- },
- set3DCloseBtnShow(val) {
- this.tDCloseBtn.show = val;
},
/**婕父闈㈡澘 */
roamPanel: {
diff --git a/static/config copy.json b/static/config copy.json
deleted file mode 100644
index af2e525..0000000
--- a/static/config copy.json
+++ /dev/null
@@ -1,13 +0,0 @@
-锘縶
- "username": "zjchy",
- "password": "admin123",
- "min_view_height": 40,
- "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjEyMyJ9.K8V0sPO_Y1CUunw4vGe6S899lDpsPixZ0b70KhP6O5M",
- "traffic": "http://www.map.zj.cn:8899/geoserver/zjplatform/wms",
- "poi_search11": "http://10.10.4.116:8085/yzAdapter/Navigation",
- "poi_search22": "http://10.10.4.115:8022/poisearch/qgpoi/POIQuery",
- "poi_search": "https://skyzt.bda.gov.cn/yzAdapter/Navigation",
- "poi_search2": "https://skyzt.bda.gov.cn/yzxncsApi/poisearch/qgpoi/POIQuery",
- "space_query": "http://10.20.55.133:3866/zjchys/query/list",
- "gis_base_url": "https://skyzt.bda.gov.cn/"
-}
\ No newline at end of file
diff --git a/static/config.json b/static/config.json
index 7bf4d55..8eb3bb6 100644
--- a/static/config.json
+++ b/static/config.json
@@ -1,13 +1,7 @@
锘縶
- "username": "zjchy",
- "password": "admin123",
- "min_view_height": 40,
- "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjEyMyJ9.K8V0sPO_Y1CUunw4vGe6S899lDpsPixZ0b70KhP6O5M",
- "traffic": "http://www.map.zj.cn:8899/geoserver/zjplatform/wms",
"poi_search11": "http://10.10.4.116:8085/yzAdapter/Navigation",
"poi_search22": "http://10.10.4.115:8022/poisearch/qgpoi/POIQuery",
"poi_search": "https://skyzt.bda.gov.cn/service/NavigationService",
"poi_search2": "https://skyzt.bda.gov.cn/yzxncsApi/poisearch/qgpoi/POIQuery",
- "space_query": "http://10.20.55.133:3866/zjchys/query/list",
"gis_base_url": "https://skyzt.bda.gov.cn/"
}
\ No newline at end of file
--
Gitblit v1.9.3