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/sideMenu/layerMenu/layerPanel.vue | 205 +++++++++++++++++++++++++++++++++------------------
1 files changed, 133 insertions(+), 72 deletions(-)
diff --git a/src/components/sideMenu/layerMenu/layerPanel.vue b/src/components/sideMenu/layerMenu/layerPanel.vue
index 72e07c4..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: "涓夌淮妯″瀷",
@@ -304,10 +295,30 @@
},
// 浜岀淮搴曞浘閫夋嫨
handleEMapClick(result, index) {
+ let p = sgworld.Navigate.getCameraInfo();
+ let pitch;
+ if (pitch !== -90) {
+ pitch = -90;
+ sgworld.Navigate.flyToPointsInterest({
+ destination: new Cesium.Cartesian3.fromDegrees(
+ p.location.lon,
+ p.location.lat,
+ p.location.height
+ ),
+ orientation: {
+ heading: Cesium.Math.toRadians(0),
+ pitch: Cesium.Math.toRadians(pitch),
+ roll: Cesium.Math.toRadians(0),
+ },
+ });
+ }
+
// 璁剧疆鐩告満
if (result.name == "浜岀淮鍦板浘") {
+ window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
this.changeLayerView(25000, false);
} else if (result.name == "褰卞儚鍦板浘") {
+ window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
this.changeLayerView(50000, false);
}
// 鍒囨崲鍥惧眰
@@ -338,8 +349,10 @@
handleSMapClick(result, index) {
// 璁剧疆鐩告満
if (result.name == "3D鍩庡競") {
+ window.Viewer.scene.globe.maximumScreenSpaceError = 2;
this.changeLayerView(45000, true);
} else if (result.name == "涓夌淮妯″瀷") {
+ window.Viewer.scene.globe.maximumScreenSpaceError = 2;
this.changeLayerView(80000, true);
}
// 鍒囨崲鍥惧眰
@@ -477,7 +490,6 @@
handleFuncClick(index) {
if (this.curFuncIndex == index) {
store.setTdglFlag(false);
- store.setSliderShow(false);
store.setPoplayerListAction({});
divPoint3 && divPoint3.deleteObject();
store.setPoplayerShowAction(false);
@@ -488,20 +500,20 @@
this.curFuncIndex = -1;
window.clusterLayer && window.clusterLayer.clear();
if (window.tdglLayer) {
+ store.setSliderShow(false);
sgworld.Creator.DeleteObject(window.tdglLayer);
}
} else {
- // 闅愯棌搴曢儴鍥惧眰闈㈢増
+ // 闅愯棌搴曢儴鍥惧眰闈㈢増tdglLayer
store.setLayerPanelShow(false);
// 闅愯棌鍙充笂瑙掕彍鍗曢潰鏉�
store.setMenuListShow(false);
// 闅愯棌搴曢儴婕父闈㈡澘
store.setRoamPanelShow(false);
- //鏄剧ず婊戝姩鏉�
- store.setSliderShow(true);
this.curFuncIndex = index;
switch (index) {
case 0:
+ store.setSliderShow(true);
window.tdglLayer = sgworld.Creator.createImageryProvider(
layers[8].name,
"tms",
@@ -517,8 +529,7 @@
layers[8].children[0].tileType === "Geo"
? new Cesium.GeographicTilingScheme()
: new Cesium.WebMercatorTilingScheme(),
- // alpha: layers[8].children[0].alpha,
- alpha: this.alpha,
+ alpha: layers[8].children[0].alpha,
},
"0",
layers[8].children[0].zIndex,
@@ -531,6 +542,7 @@
this.curFuncIndex = -1;
store.setTdglFlag(false);
if (window.tdglLayer) {
+ store.setSliderShow(false);
sgworld.Creator.DeleteObject(window.tdglLayer);
}
store.setHistoryShow(true);
@@ -567,7 +579,7 @@
"basicMapChecked.val": {
handler: function (newVal, oldVal) {
if (newVal == "涓夌淮妯″瀷") {
- debugger
+ debugger;
this.handleSMapClick(
{
id: "swmx",
@@ -597,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;
--
Gitblit v1.9.3