From d46ebfb71da0148dcc2724024cf7b053d784f299 Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期二, 05 三月 2024 18:35:10 +0800
Subject: [PATCH] youhua
---
src/components/viewer2.vue | 17 +
src/components/rightMenu/bottom2.vue | 210 ++++++++---------------------
src/components/poplayer/history2.vue | 10 +
src/components/leftMenu/sousuo2.vue | 10
src/utils/tool.js | 78 ++++++++++
src/assets/img/collection/reduce.png | 0
src/assets/img/collection/recover.png | 0
src/router/index.js | 2
src/utils/store2.js | 12 +
src/components/sideMenu/layerTreePanel/layerTreePanel2.vue | 2
src/assets/img/collection/add.png | 0
src/assets/GLOBAL2.vue | 5
src/assets/img/collection/mark.png | 0
src/components/sideMenu/layerMenu/layerPanel2.vue | 1
src/components/rightNavigation/NavigationBar2.vue | 50 ++----
src/utils/map2.js | 5
16 files changed, 200 insertions(+), 202 deletions(-)
diff --git a/src/assets/GLOBAL2.vue b/src/assets/GLOBAL2.vue
index f19df4a..7c4fb01 100644
--- a/src/assets/GLOBAL2.vue
+++ b/src/assets/GLOBAL2.vue
@@ -8,6 +8,8 @@
const hexin = null;
const yzxcgh = null;
const historyLayer = null;
+const rotate = null;
+
export default {
layers, //鏀堕泦鍣�
alpha,
@@ -17,6 +19,7 @@
annotation,
hexin,
yzxcgh,
- historyLayer
+ historyLayer,
+ rotate
};
</script>
\ No newline at end of file
diff --git a/src/assets/img/collection/add.png b/src/assets/img/collection/add.png
new file mode 100644
index 0000000..1cffb52
--- /dev/null
+++ b/src/assets/img/collection/add.png
Binary files differ
diff --git a/src/assets/img/collection/mark.png b/src/assets/img/collection/mark.png
new file mode 100644
index 0000000..f3dc8f9
--- /dev/null
+++ b/src/assets/img/collection/mark.png
Binary files differ
diff --git a/src/assets/img/collection/recover.png b/src/assets/img/collection/recover.png
new file mode 100644
index 0000000..688b86b
--- /dev/null
+++ b/src/assets/img/collection/recover.png
Binary files differ
diff --git a/src/assets/img/collection/reduce.png b/src/assets/img/collection/reduce.png
new file mode 100644
index 0000000..ba0569d
--- /dev/null
+++ b/src/assets/img/collection/reduce.png
Binary files differ
diff --git a/src/components/leftMenu/sousuo2.vue b/src/components/leftMenu/sousuo2.vue
index 0186aeb..e592b06 100644
--- a/src/components/leftMenu/sousuo2.vue
+++ b/src/components/leftMenu/sousuo2.vue
@@ -14,11 +14,11 @@
top: -1px;
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 v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" style="float: right; height: 100%; width: 10%">
+ <!-- <span v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" style="float: right; height: 100%; width: 10%">
<img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="showAddFavorite" />
- </span>
+ </span> -->
</div>
<!-- 鎼滅储鐣岄潰 -->
<div class="ssjm" v-show="ssjm">
@@ -72,13 +72,13 @@
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.15rem;
color: black;
font-size: 0.14rem;
}
diff --git a/src/components/poplayer/history2.vue b/src/components/poplayer/history2.vue
index 641ad0c..584f496 100644
--- a/src/components/poplayer/history2.vue
+++ b/src/components/poplayer/history2.vue
@@ -34,6 +34,8 @@
};
},
mounted() {
+ store.setNavigatorShow(false);
+ store.setMapToolShow(false);
window.mapapi.getView().setCenter([4.606512, 2.621472]);
addHistoryLayer(this.currentValue);
},
@@ -44,6 +46,10 @@
},
close() {
store.setHistoryShow(false);
+ window.mapapi.removeLayer(this.$global.historyLayer);
+ window.mapapi.getView().setCenter([116.505348, 39.795592]);
+ store.setNavigatorShow(true);
+ store.setMapToolShow(true);
},
},
};
@@ -51,7 +57,7 @@
<style scoped>
.colseBtn {
position: absolute;
- top: 5vh;
+ top: 3vh;
right: 20px;
}
@@ -63,7 +69,7 @@
.listBox {
position: absolute;
right: 20px;
- bottom: 10px;
+ bottom: 0.5rem;
background-color: #373737;
}
diff --git a/src/components/rightMenu/bottom2.vue b/src/components/rightMenu/bottom2.vue
index a8f7553..2517718 100644
--- a/src/components/rightMenu/bottom2.vue
+++ b/src/components/rightMenu/bottom2.vue
@@ -1,182 +1,84 @@
<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-if="state1.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="mapTool" v-show="test.fwval">
+ <div class="tool-rotate" @click="zoomIn" title="鏀惧ぇ">
+ <img src="@/assets/img/collection/add.png" />
+ </div>
+ <div class="border"></div>
+ <div class="tool-rotate" @click="zoomOut" title="缂╁皬">
+ <img src="@/assets/img/collection/reduce.png" />
</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;
-}
-.mapTool .el-button {
- padding: 0 !important;
- font-size: 0.24rem;
- border: unset;
- float: unset;
- display: block;
- background: rgba(18, 126, 255, 1);
+ border-radius: 10px;
+ background: #ffffff;
+ margin-bottom: 8px;
}
-/* .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%;
+.border {
+ border: 0.5px solid #efecec;
}
-/* .button-group-vertical .el-button-group > .el-button:first-child {
- border-top-right-radius: 0.04rem !important;
- border-bottom-left-radius: 0px !important;
+
+.tool-rotate {
+ padding: 8px;
}
-.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; */
+
+.tool-rotate img {
+ width: 20px;
+ height: 20px;
}
</style>
<script>
import Bus from "../../js/bus.js";
+import store from "@/utils/store2";
export default {
props: ["test"],
data() {
return {
- show: true,
- parentdata: {
- fwval: false,
- zbzval: false,
- qpval: false,
- zymlval: false,
- kjcxval: false,
- dxmsval: false,
- snmsval: false,
- ssval: false,
+ state1:store.mapTools,
+ state: store.layerPanel,
+ customStyle: {
+ position: "absolute",
+ bottom: "0.4rem",
+ right: "0.1rem",
},
- clickIndex: 0,
- // isShowHistory: false,
- camera: {
- position: [116.52217697339846, 39.75979421847914, 17045.47005612415],
- orientation: {
- heading: 0,
- pitch: -90,
- roll: 0,
- },
- },
- modes: [
- {
- id: "mode-3d",
- name: "3D",
- mode: 3,
- },
- {
- id: "mode-2d",
- name: "2D",
- mode: 2,
- },
- ],
};
},
- mounted() {
- Bus.$on("myMsg", (myMsg) => {
- this.show = myMsg;
- });
+ mounted() {},
+ watch: {
+ "state.show": {
+ handler(newVal) {
+ if (newVal) {
+ this.customStyle = {
+ position: "absolute",
+ top: "2rem",
+ right: "0.1rem",
+ };
+ } else {
+ this.customStyle = {
+ position: "absolute",
+ bottom: "0.4rem",
+ right: "0.1rem",
+ };
+ }
+ },
+ immediate: true,
+ },
},
methods: {
zoomIn() {
const view = window.mapapi.getView();
const zoom = view.getZoom();
-
window.mapapi.getView().animate({
// 鍙缃渶瑕佺殑灞炴�у嵆鍙�
center: window.mapapi.getView().getCenter(), // 涓績鐐�
@@ -188,7 +90,6 @@
zoomOut() {
const view = window.mapapi.getView();
const zoom = view.getZoom();
-
window.mapapi.getView().animate({
// 鍙缃渶瑕佺殑灞炴�у嵆鍙�
center: window.mapapi.getView().getCenter(), // 涓績鐐�
@@ -197,6 +98,15 @@
duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
});
},
+ flyBack() {
+ window.mapapi.getView().animate({
+ // 鍙缃渶瑕佺殑灞炴�у嵆鍙�
+ center: [116.52217697339846, 39.75979421847914], // 涓績鐐�
+ zoom: 12, // 缂╂斁绾у埆
+ rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害
+ duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃�
+ });
+ },
},
};
</script>
\ No newline at end of file
diff --git a/src/components/rightNavigation/NavigationBar2.vue b/src/components/rightNavigation/NavigationBar2.vue
index ca59b90..b1b4b64 100644
--- a/src/components/rightNavigation/NavigationBar2.vue
+++ b/src/components/rightNavigation/NavigationBar2.vue
@@ -1,9 +1,7 @@
<template>
- <div class="navigationBar">
- <div class="menuBtn">
- <el-button class="right-menuBtn" @click="handleMenuListShow">
- <img src="@/assets/img/navigation/menuicon.png" />
- </el-button>
+ <div class="navigationBar" v-if="state.show">
+ <div class="menuBtn" @click="handleMenuListShow">
+ <img src="@/assets/img/navigation/menuicon.png" />
</div>
<div class="menuList" v-show="showMenuList.show">
<ul>
@@ -21,7 +19,6 @@
<span>{{ value.name }}</span>
</div>
</li>
-
</ul>
</div>
</div>
@@ -33,6 +30,7 @@
name: "NavigationBar",
data() {
return {
+ state:store.navigator,
showMenuList: store.MenuList,
resetShowState: store.resetLink,
favoriteShowState: store.favorite,
@@ -109,7 +107,7 @@
// 鐐瑰嚮鍙充笂瑙掕彍鍗曢」
handleMenuClick(attr) {
- console.log('鐐瑰嚮鍙充笂瑙掕彍鍗曢」');
+ console.log("鐐瑰嚮鍙充笂瑙掕彍鍗曢」");
//娓呴櫎鎼滅储鐐�
flyPoint && Viewer.entities.remove(flyPoint);
flyPoint = undefined;
@@ -207,36 +205,26 @@
<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 {
+ padding: 0px 2px;
position: absolute;
- width: 40px;
margin-top: 0.1rem;
- right: -0.05rem;
+ right: 0;
background-color: white;
border-radius: 10px;
}
@@ -244,29 +232,25 @@
.menuItem {
width: 32px;
color: black;
- margin: 0px auto;
margin-top: 10px;
margin-bottom: 7px;
- /* padding-bottom: 7px; */
border-bottom: 1px solid #e8e8e9;
text-align: center;
cursor: pointer;
- /* border-bottom: 1px solid #e8e8e9; */
- /* pointer-events:none */
}
li:last-child .menuItem {
border: none;
}
-img {
+.menuItem img {
width: 24px;
- /* height: 24px; */
text-align: center;
}
.menuItem span {
display: block;
text-align: center;
+ margin-top: 2px;
}
</style>
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index db3a36f..266415e 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -539,6 +539,7 @@
background: white;
z-index: 1000;
padding-left: 0.25rem;
+ border-radius: 15px 15px 0px 0px;
}
.title {
diff --git a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
index 6dc7871..023b178 100644
--- a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
+++ b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
@@ -103,7 +103,7 @@
mounted() {
axios.get("./static/json/layers.json").then(
(res) => {
- // console.log("layers.json", res);
+ console.log("layers.json", res);
//鑾峰彇榛樿閫変腑鏁版嵁鐨刬d
this.parseJson(res.data.children);
diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue
index dbd4d81..36f3865 100644
--- a/src/components/viewer2.vue
+++ b/src/components/viewer2.vue
@@ -4,9 +4,9 @@
<div id="openlayerContainer" @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>
<!-- 鍘嗗彶褰卞儚鍏抽棴鎸夐挳 -->
@@ -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>
<!-- 绐ㄤ簳銆佹憚鍍忓ご缁熻闈㈡澘 -->
@@ -87,7 +87,8 @@
addHxLayer,
addYzLayer,
loadBaseMap,
- getCurrentPosition,
+ listenDirection,
+ getCurrentPosition
} from "@/utils/tool";
// import Map from "ol/Map.js";
// import TileLayer from "ol/layer/Tile.js";
@@ -260,8 +261,8 @@
projection: "EPSG:4326",
zoom: 12,
minZoom: 9.5,
+ enableRotation: false,
}),
- // events: ["singleclick", "pointermove"],
});
window.mapapi = map;
@@ -272,7 +273,11 @@
addYzLayer();
setClick(true);
+
getCurrentPosition();
+ listenDirection();
+
+
// leftClick()
window.layerOpen = function (name, options) {
diff --git a/src/router/index.js b/src/router/index.js
index b65022e..5885cff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,7 +10,7 @@
const routes = [
{
path: '/',
- redirect: "login",
+ redirect: "home",
// redirect: "index",
},
{
diff --git a/src/utils/map2.js b/src/utils/map2.js
index 2cb9b64..a5e99db 100644
--- a/src/utils/map2.js
+++ b/src/utils/map2.js
@@ -2481,4 +2481,7 @@
zoom: 15,
duration: 1500
})
-}
\ No newline at end of file
+}
+
+
+
diff --git a/src/utils/store2.js b/src/utils/store2.js
index b563186..b821e9c 100644
--- a/src/utils/store2.js
+++ b/src/utils/store2.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
diff --git a/src/utils/tool.js b/src/utils/tool.js
index 7cea36d..bb7973b 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -1,6 +1,7 @@
import _GLOBAL from '@/assets/GLOBAL2'
import gcj02Mecator from '@/utils/transform'
+import { ceil } from 'lodash';
//娓呴櫎
export function clearAll() {
if (_GLOBAL.ImageLayer) {
@@ -128,18 +129,91 @@
//鑾峰彇褰撳墠瀹氫綅
+var _rotate = 90;
+var _marker = null;
+var points = [];
+
+export function randomPoint() {
+ let t = 116.505348;
+ let e = 39.795592;
+ t += .01 * Math.random();
+ e += .01 * Math.random();
+ points.push([t, e]);
+}
export function getCurrentPosition() {
+ // setInterval(() => {
+ // randomPoint();
+ // }, 1000)
+
+ // console.log(points, '鐐逛綅娴嬭瘯')
+ // _marker = createGPSMarker(points, _rotate);
+ // window.mapapi.addLayer(_marker)
+
if (navigator.geolocation) {
- navigator.geolocation.getCurrentPosition((res) => {
- console.log(res);//杩欓噷浼氳繑鍥炵粡绾害锛岀劧鍚庤繕瑕侀�氳繃缁忕含搴﹁浆鎹㈠湴鍖哄悕绉�
+ navigator.geolocation.watchPosition((res) => {
+ let lat = res.coords.latitude;
+ let lon = res.coords.longitude;
+ _marker = createGPSMarker([lon, lat], _rotate);
+ window.mapapi.addLayer(_marker)
});
}
}
+export function createGPSMarker(position, rotate) {
+ const GPSMarkerLayer = new ol.layer.Vector({
+ id: 'LocationPoint',
+ name: '瀹氫綅鐐�',
+ source: new ol.source.Vector({
+ features: [new ol.Feature({
+ geometry: new ol.geom.Point(position),
+ })]
+ }),
+ style: new ol.style.Style({
+ image: new ol.style.Icon({
+ src: require('@/assets/img/collection/mark.png'),
+ anchorOrigin: "top-left",
+ anchorXUnits: "fraction",
+ anchorYUnits: "fraction",
+ offsetOrigin: "bottom-right",
+ scale: 0.6,
+ rotation: rotate,
+ opacity: 1,
+ })
+ }),
+ zIndex: 9999,
+ });
+
+ return GPSMarkerLayer
+};
+
+
+export function listenDirection() {
+ window.addEventListener('deviceorientation', function (e) {
+ if (_marker) {
+ _rotate = e.alpha * (Math.PI / -180);
+ _marker.setStyle(
+ new ol.style.Style({
+ image: new ol.style.Icon({
+ anchor: [0.5, 0.5],
+ anchorOrigin: 'top-left',
+ src: require('@/assets/img/collection/mark.png'),
+ rotation: _rotate,
+ anchorXUnits: "fraction",
+ anchorYUnits: "fraction",
+ scale: 0.5,
+ opacity: 1
+ })
+ })
+ )
+ }
+ }, false);
+};
+
+
--
Gitblit v1.9.3