Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b7fba0d1 1 parent a68d83df

3D地图优化处理

Inline Side-by-side
Showing 6 changed files with 118 additions and 21 deletions
......@@ -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']
}
}
......
......@@ -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",
......
<!--
* @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) => {
$(ele).removeClass('pin--active');
})
this.clearPinShow();
$(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>
......
<!--
* @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: 公众地图主体页面
-->
......
<!--
* @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() {
......
......@@ -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:
version "4.4.0"
resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.4.0.tgz"
integrity sha512-vVIVqZTmA425cbRhzY9krBfI1myknc1Sv3Kt9f4a1D+pTTSlodUhNhyPe3zttYdKnRl2thZg940CFGt65Rr5iQ==
vant@^4.6.3:
version "4.6.3"
resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.6.3.tgz#e36a2dc2fa94253b8218094d88e9b0cd62b3437d"
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"
......