3D地图优化处理

hookehuyr
Commit b7fba0d16ca91769f0dc794841a48d62c29e5cd3 b7fba0d1 1 parent a68d83df
Showing 6 changed files with 118 additions and 21 deletions
components.d.ts
package.json
src/components/Floor/index.vue
src/views/index.vue
src/views/inner.vue
yarn.lock
--- a/components.d.ts
View file @b7fba0d
+++ b/components.d.ts
View file @b7fba0d
@@ -20,9 +20,11 @@ declare module '@vue/runtime-core' {
     SvgIcon: typeof import('./src/components/Floor/svgIcon.vue')['default']
     VanCol: typeof import('vant/es')['Col']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
     VanPopup: typeof import('vant/es')['Popup']
     VanRow: typeof import('vant/es')['Row']
+    VanSearch: typeof import('vant/es')['Search']
   }
 }
--- a/package.json
View file @b7fba0d
+++ b/package.json
View file @b7fba0d
@@ -33,7 +33,7 @@
     "unplugin-vue-components": "^0.24.1",
     "uuid": "^8.3.2",
     "v-viewer": "^3.0.11",
-    "vant": "^4.0.0-alpha.3",
+    "vant": "^4.6.3",
     "vconsole": "^3.14.6",
     "video.js": "^8.3.0",
     "vite-plugin-dynamic-import": "^0.9.6",
--- a/src/components/Floor/index.vue
View file @b7fba0d
+++ b/src/components/Floor/index.vue
View file @b7fba0d
 <!--
  * @Date: 2023-07-27 11:04:04
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-28 13:42:20
+ * @LastEditTime: 2023-07-31 14:49:42
  * @FilePath: /map-demo/src/components/Floor/index.vue
  * @Description: 文件描述
 -->
@@ -18,12 +18,20 @@
 				<div @click="onCloseLevel" style="position: absolute; z-index: 100; top: 0; right: 100px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 1.5em 1em; text-align: center;">
 					关闭图层
 				</div>
+				<div v-if="level_show" style="position: absolute; z-index: 100; top: 50px; right: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 1.5em 1em; text-align: center;">
+					<span @click="switchFloor('left')"><van-icon name="arrow-left" /></span>
+					<span>&nbsp;切换&nbsp;</span>
+					<span @click="switchFloor('right')"><van-icon name="arrow" /></span>
+				</div>
+				<div @click="onSearch" style="position: absolute; z-index: 100; top: 50px; right: 100px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 1.5em 1em; text-align: center;">
+					搜索
+				</div>
         <div class="mall">
           <!-- <div class="surroundings">
             <img class="surroundings__map" src="./surroundings.svg" alt="Surroundings" />
           </div> -->
           <div class="levels">
-            <div @click="onClick(1)" class="level level--1" aria-label="Level 1">
+            <div @click="onFloorClick(1)" class="level level--1" aria-label="Level 1">
               <svg class="map map--1" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
                 <title>Map Level 1</title>
                 <polygon
@@ -185,7 +193,7 @@
               </div>
               <!-- /level__pins -->
             </div>
-						<div @click="onClick(2)" class="level level--2" aria-label="Level 2">
+						<div @click="onFloorClick(2)" class="level level--2" aria-label="Level 2">
 							<svg class="map map--2" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
 								<title>Map Level 2</title>
 								<polygon points="1035.94 787.41 1035.94 423.16 855.37 423.16 855.37 350.52 1187.28 350.52 1187.28 12.59 548.09 12.59 548.09 68.87 437.36 68.87 437.36 12.59 49.37 12.59 49.37 366.5 12.72 366.5 12.72 787.41 356.2 787.41 414.93 584.41 554.4 584.41 627.81 787.41 1035.94 787.41" class="map__ground" />
@@ -261,7 +269,7 @@
 								</a>
 							</div>
 						</div>
-						<div @click="onClick(3)" class="level level--3" aria-label="Level 3">
+						<div @click="onFloorClick(3)" class="level level--3" aria-label="Level 3">
 							<svg class="map map--3" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
 								<title>Map Level 3</title>
 								<polygon points="1035.94 787.41 1035.94 423.16 855.37 423.16 855.37 350.52 1187.28 350.52 1187.28 12.59 548.09 12.59 548.09 68.87 437.36 68.87 437.36 12.59 49.37 12.59 49.37 366.5 12.72 366.5 12.72 787.41 356.2 787.41 414.93 584.41 554.4 584.41 627.81 787.41 1035.94 787.41" class="map__ground" />
@@ -330,7 +338,7 @@
 								</a>
 							</div>
 						</div>
-						<div @click="onClick(4)" class="level level--4" aria-label="Level 4">
+						<div @click="onFloorClick(4)" class="level level--4" aria-label="Level 4">
 							<svg class="map map--4" viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
 								<title>Map Level 2</title>
 								<polygon points="1035.94 787.41 1035.94 423.16 855.37 423.16 855.37 350.52 1187.28 350.52 1187.28 12.59 548.09 12.59 548.09 68.87 437.36 68.87 437.36 12.59 49.37 12.59 49.37 366.5 12.72 366.5 12.72 787.41 356.2 787.41 414.93 584.41 554.4 584.41 627.81 787.41 1035.94 787.41" class="map__ground" />
@@ -406,16 +414,51 @@
       </div>
     </div>
-		<van-popup v-model:show="show_popup" position="bottom"  @close="onClickCloseIcon" :overlay="false" :style="{ height: '40%', background: '#FFF' }">
+		<van-popup v-model:show="show_popup" position="bottom" :overlay="false" :style="{ height: '50%', background: '#FFF' }">
 			<div @click="show_popup=false" style="text-align: right; padding: 1rem;">
 				<van-icon name="cross" size="1.5rem" />
 			</div>
       <div style="margin: 0 1rem">
-				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae officia amet eveniet labore voluptatem nisi, ullam dolores placeat nobis necessitatibus, corporis magnam quos. Officiis quam perspiciatis voluptate autem hic nobis.
+				<div style="font-size: 1.25rem; margin-bottom: 1rem;">大雄宝殿</div>
+				<div>
+					大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
+				</div>
 			</div>
     </van-popup>
 		<svg-icon></svg-icon>
+
+		<van-popup v-model:show="show_search_popup" position="right" :overlay="true" :style="{ height: '100%', width: '80%', background: '#FFF' }">
+			<div style="background-color: #F7f8fa; padding: 1rem;">
+				<van-field v-model="search_value" placeholder="请输入搜索关键词" style="border-radius: 5px; padding: 0.5rem 1rem;" />
+			</div>
+			<div class="search_box">
+				<div class="search_box_title">4-客房</div>
+				<div>
+					<van-row @click="onSearchRow(4.01)" style="color: #aaa; margin-bottom: 0.5rem;">
+						<van-col span="20">401～410室</van-col>
+						<van-col span="4" style="text-align: right;">L1</van-col>
+					</van-row>
+					<van-row @click="onSearchRow(4.02)" style="color: #aaa; margin-bottom: 0.5rem;">
+						<van-col span="20">411～419室</van-col>
+						<van-col span="4" style="text-align: right;">L1</van-col>
+					</van-row>
+				</div>
+			</div>
+			<div style="padding: 1rem;">
+				<div style="color: #000; margin-bottom: 1rem; font-size: 1.15rem;">3-客房</div>
+				<div>
+					<van-row @click="onSearchRow(3.01)" style="color: #aaa; margin-bottom: 0.5rem;">
+						<van-col span="20">301～310室</van-col>
+						<van-col span="4" style="text-align: right;">L1</van-col>
+					</van-row>
+					<van-row @click="onSearchRow(3.02)" style="color: #aaa; margin-bottom: 0.5rem;">
+						<van-col span="20">311～319室</van-col>
+						<van-col span="4" style="text-align: right;">L1</van-col>
+					</van-row>
+				</div>
+			</div>
+    </van-popup>
   </div>
 </template>
@@ -428,21 +471,26 @@ export default {
   data() {
     return {
 			level_show: '',
+			search_value: '',
 			show_popup: false,
+			show_search_popup: false,
     }
   },
   async mounted() {
 		// 绑定选择点后回调
 		$('.level__pins').children('.pin').on('click', (evt) => {
-			$('.level__pins').children('.pin').each((index, ele) => {
+			this.clearPinShow();
-				$(ele).removeClass('pin--active');
-			})
 			$(evt.currentTarget).addClass('pin--active');
 			this.show_popup = true;
 		});
   },
   methods: {
-		onClick(level) {
+		clearPinShow () {
+			$('.level__pins').children('.pin').each((index, ele) => {
+				$(ele).removeClass('pin--active');
+			})
+		},
+		onFloorClick(level) {
 			this.level_show = level;
 			$('.mall').addClass('mall--content-open');
 			$('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
@@ -457,14 +505,53 @@ export default {
 			$(`.level--${level}`).removeClass('level--current');
 			$(`.level--${level} .level__pins`).removeClass('level__pins--active');
 			this.level_show = '';
+			this.clearPinShow();
 		},
 		onClose () {
 			this.$emit('close')
 		},
 		onClickCloseIcon () {
+			this.clearPinShow();
+		},
+		switchFloor (type) { // 切换楼层
+			let level = this.level_show;
+			if (type === 'right') {
+				level = level - 1 < 1 ? 1 : level - 1;
+			}
+			if (type === 'left') {
+				level = level + 1 > 4 ?  4 : level + 1;
+			}
+			this.onCloseLevel();
+			this.onFloorClick(level);
+		},
+		onSearch () {
+			this.show_search_popup = true;
+		},
+		onSearchRow (val) {
+			// 清空图层显示
+			this.onCloseLevel();
+			this.show_popup = false;
+			// 测试锚点
+			let currentTarget = null;
+			let category = null;
 			$('.level__pins').children('.pin').each((index, ele) => {
+				let space = $(ele).data('space'); // 锚点标记
+				if (space === val) { // 匹配符合的dom节点
+					category = parseInt(space);// 获取图层标记
+					currentTarget = ele;
+				}
 				$(ele).removeClass('pin--active');
-			})
+			});
+			// 选择图层
+			this.onFloorClick(category);
+			// 选择锚点样式
+			$(currentTarget).addClass('pin--active');
+			setTimeout(() => {
+				// 打开锚点详情
+				this.show_popup = true;
+			}, 500);
+			// 关闭搜索弹框
+			this.show_search_popup = false;
 		}
   }
 }
@@ -474,4 +561,11 @@ export default {
 	.test {
 		opacity: 0;
 	}
+
+	.search_box {
+		padding: 1rem;
+		.search_box_title {
+			color: #000; margin-bottom: 1rem; font-size: 1.15rem;
+		}
+	}
 </style>
--- a/src/views/index.vue
View file @b7fba0d
+++ b/src/views/index.vue
View file @b7fba0d
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-26 06:02:36
+ * @LastEditTime: 2023-07-31 11:56:15
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 公众地图主体页面
 -->
--- a/src/views/inner.vue
View file @b7fba0d
+++ b/src/views/inner.vue
View file @b7fba0d
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-31 11:31:06
+ * @LastEditTime: 2023-07-31 11:56:35
  * @FilePath: /map-demo/src/views/inner.vue
  * @Description: 内部地图主体页面
 -->
@@ -277,7 +277,7 @@ export default {
       point_range: [ // 景区范围经纬度
         [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
       ],
-      show_floor_popup: false,
+      show_floor_popup: true,
     }
   },
   async mounted() {
--- a/yarn.lock
View file @b7fba0d
+++ b/yarn.lock
View file @b7fba0d
@@ -394,7 +394,7 @@
     "@vue/compiler-ssr" "3.3.4"
     "@vue/shared" "3.3.4"
-"@vue/shared@3.3.4":
+"@vue/shared@3.3.4", "@vue/shared@^3.0.0":
   version "3.3.4"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.3.4.tgz"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
@@ -3065,13 +3065,14 @@ v-viewer@^3.0.11:
     lodash "^4.17.21"
     viewerjs "^1.9.0"
-vant@^4.0.0-alpha.3:
+vant@^4.6.3:
-  version "4.4.0"
+  version "4.6.3"
-  resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.4.0.tgz"
+  resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.6.3.tgz#e36a2dc2fa94253b8218094d88e9b0cd62b3437d"
-  integrity sha512-vVIVqZTmA425cbRhzY9krBfI1myknc1Sv3Kt9f4a1D+pTTSlodUhNhyPe3zttYdKnRl2thZg940CFGt65Rr5iQ==
+  integrity sha512-hkiBzM1dhEj9EWSjRnyB7gd6SiVa3/+qthNZtlJdj42C+pXIN+oq0UhKz5PRHWi8fHyPfycnqRzyvEJxouT+zw==
   dependencies:
     "@vant/popperjs" "^1.3.0"
     "@vant/use" "^1.5.1"
+    "@vue/shared" "^3.0.0"
 vconsole@^3.14.6:
   version "3.15.0"