Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
35b4437c 1 parent 3ea88596

新增视频播放和样式调整

Expand all
Inline Side-by-side
Showing 6 changed files with 161 additions and 44 deletions
This diff is collapsed. Click to expand it.
......@@ -12,11 +12,13 @@
"cypress:open": "cypress open"
},
"dependencies": {
"@videojs-player/vue": "^1.0.0",
"@vitejs/plugin-legacy": "^1.8.2",
"@vueuse/core": "^8.5.0",
"animate.css": "^4.1.1",
"dayjs": "^1.11.3",
"default-passive-events": "^2.0.0",
"font-awesome": "^4.7.0",
"global": "^4.4.0",
"html2canvas": "^1.4.1",
"jquery": "^3.6.0",
......@@ -30,6 +32,7 @@
"uuid": "^8.3.2",
"vant": "^4.0.0-alpha.3",
"vconsole": "^3.14.6",
"video.js": "^8.3.0",
"vite-plugin-dynamic-import": "^0.9.6",
"vite-plugin-mp": "^1.6.1",
"vue": "^3.2.36",
......
......@@ -109,6 +109,41 @@ var spotInfo = [
position: [120.585948, 31.315095],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
},
{
name: '罗汉堂',
position: [120.58764, 31.315011],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。
西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。
从空中俯瞰，罗汉堂黛瓦覆顶，组成一个汉字的“田”字。象征在佛教里僧宝，是一切世间供养、布施、修福的无上福田，五百罗汉则是贤圣僧的代表。
除了俯瞰的“田”字，在罗汉堂地下，还有一项隐秘而巧妙的设计——西边放生池的水源经过罗汉堂地下隐秘水道弯曲绕行，流经罗汉堂，最终汇聚到大雄宝殿露台前的香花桥下。这不仅让西园寺内基础水池串联成一片活水，更重要和巧妙地解决了罗汉堂内的湿度调节问题。因五百罗汉为泥胎雕塑，过于干燥的空气将会造成古老的泥塑造像干裂、风化、剥落等一系列问题，而地下隐暗水道的设计，则有效保证罗汉堂内的湿度能控制在一定范围内。于此，不得不叹服先人的智慧。
罗汉堂原有的建筑较为低矮，不仅光线昏暗、空气浑浊，而且年深日久，梁柱有不同程度的老旧腐化。一九九七年七月，寺院对罗汉堂进行了全面整修，历时半年。在落架大修过程中，既遵照文物修旧如旧的原则，又以创新的精神，适应形势发展的需要，大胆将罗汉堂屋顶升高六十厘米，并加了斗拱，既利于文物的保护，又极大改善了罗汉堂采光环境，使整个罗汉堂显得美观大方，吸引了众多的信众前来瞻礼，使古寺焕发出崭新的光彩，成为名副其实的吴中胜地。`
},
{
name: '大雄宝殿',
position: [120.587249, 31.314722],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
东门上为“焰网庄严”匾额，出处为《药师经》第二大愿：“身善能安住，焰网庄严，过于日月”,即所谓“药师如来琉璃光,焰网庄严无等伦”，形容的是东方药师佛世界；西门上为“光寿无量”匾额，是“无量寿、无量光”的意思，意指西方阿弥陀佛光寿无量。“三个匾额”与殿内供奉的“横世三佛”内外呼应。与“西乾应迹”相呼应的中间一尊佛像是释迦摩尼佛，大迦叶尊者与阿难尊者分立两侧；与“焰网庄严”相呼应的则是药师佛，位于东侧；与“光寿无量”相呼应的则是阿弥陀佛，位于西侧。几尊佛像均是香樟木雕刻，是现存不多的清时期极具代表性的大型木雕造像。三尊佛像下莲花座、金刚须弥座雕刻精美、令人叹为观止。
大殿内有三副抱柱楹联，外侧上联为“东震涌庄严，看桥通鹤市，山近虎丘，招提久占三吴胜”；下联为“西来参本意，任侠士流芳，生公说法，照澈都归五蕴空”。“鹤市”，阖闾女亡，出殡时，鹤舞于阊门，后以鹤市代指阊门。“生公说法”，是指南北朝的高僧竺道生在虎丘山上说法，最后顽石也点头赞同的典故。后有题记：“乙丑（1925）春仲，郡人许人俊谨题”。
内侧有两副，内外上联为“宝相瞻大雄，象法禅机垂正觉”；下联为“劳生来小息，鱼音梵呗涤尘烦”；“余姚黄雨斋撰立，江东浦泳谨书”。
内中上联为“海国启琳宫，宏法利生扬正教”；下联为“灵山闻妙谛，觉迷度苦感仁王”；“弟子夏士魁长发头陀敬献，江东浦泳谨书”。
两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！`
},
];
var toiletInfo = [
......
......@@ -2,9 +2,9 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-31 12:06:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-29 22:00:37
* @FilePath: /tswj/src/main.js
* @Description:
* @LastEditTime: 2023-05-30 13:12:21
* @FilePath: /map-demo/src/main.js
* @Description:
*/
import { createApp } from 'vue';
import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search } from 'vant';
......@@ -14,6 +14,10 @@ import App from './App.vue';
import axios from '@/utils/axios';
// import 'default-passive-events'; // 解决Chrome控制台non-passive event listener输出问题
import { createPinia } from 'pinia';
import 'font-awesome/css/font-awesome.min.css';
import VueVideoPlayer from '@videojs-player/vue';
import 'video.js/dist/video-js.css';
const pinia = createPinia();
const app = createApp(App);
......@@ -22,4 +26,6 @@ app.config.globalProperties.$http = axios; // 关键语句
app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider);
app.use(VueVideoPlayer)
app.mount('#app');
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-29 18:12:10
* @LastEditTime: 2023-05-30 13:45:04
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
<template>
<div style="height: 100vh; position: relative;">
<div id="container"></div>
<div class="input-card">
<!-- <div class="input-item">
<span @click="showPublic" class="btn">显示公共设施</span>
<span @click="hidePublic" class="btn">隐藏公共设施</span>
</div> -->
<!-- <div class="input-item">
<button class="btn" @click="addLayer" style="margin-right:1rem;">添加图层</button>
<button class="btn" @click="removeLayer">删除图层</button>
</div> -->
<div class="input-item">
<!-- <button class="btn" @click="setLocation" style="margin-right:1rem;">定位服务</button>
<button class="btn" @click="addLocation" style="margin-right:1rem;">添加定位路线</button>
<button class="btn" @click="removeLocation" style="margin-right:1rem;">删除定位路线</button> -->
<button class="btn" @click="setTitleLayer" style="margin-right:1rem;">添加贴片</button>
</div>
<div class="input-item">
<button class="btn" @click="setWalkRoute" style="margin-right:1rem;">步行导航</button>
<button class="btn" @click="removeWalkRoute" style="margin-right:1rem;">移除步行导航</button>
</div>
</div>
<div class="nav-bar-wrapper">
<van-row>
<van-col span="8" :class="[isActive === 0 ? 'checked' : '', 'item']" @click="setNavLayer(0)">
<van-icon name="shop-o" size="1.25rem" /><br/>
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">景区信息</span>
</van-col>
<van-col span="8" :class="[isActive === 1 ? 'checked' : '', 'item']" @click="setNavLayer(1)">
<van-icon name="shop-o" size="1.25rem" /><br/>
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">卫生间</span>
</van-col>
<van-col span="8" :class="[isActive === 2 ? 'checked' : '', 'item']" @click="setNavLayer(2)">
<van-icon name="shop-o" size="1.25rem" /><br/>
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">活动中心</span>
</van-col>
</van-row>
......@@ -49,12 +29,42 @@
<span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
</div>
<div class="tool-bar-wrapper">
<van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
<van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
<van-icon name="aim" @click="setLocation" />
<div style="display: flex; flex-direction: column;align-items: center;justify-content: center;">
<van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
<van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
<van-icon name="aim" @click="setLocation" />
</div>
</div>
<van-popup v-model:show="show_popup" position="bottom" :overlay="false" closeable
:style="{ padding: '64px' }">内容</van-popup>
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<div class="item" @click="setTitleLayer">
<i class="fa fa-cube"></i><br />
贴片
</div>
<div v-if="show_walk_route" class="item" @click="setWalkRoute">
<i class="fa fa-eye"></i><br />
步行
</div>
<div v-else class="item" @click="removeWalkRoute">
<i class="fa fa-eye-slash"></i><br />
步行
</div>
</div>
</div>
<van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem' }">
<van-icon name="cross" @click="show_popup = false" style="float: right; color: gray;" />
<div class="popup-wrapper">
<div class="title">
{{ popup_title }}
</div>
<div class="content" v-html="popup_content">
</div>
<video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
:src="video_src"
class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
</div>
</van-popup>
<van-dialog v-model:show="dialog_show" title="温馨提示">
<div style="padding: 1rem; text-align: center;">您不在景区范围内</div>
......@@ -68,6 +78,7 @@
import coord from '@/common/tiantan_v2'
// import AMap from 'AMap'
import _ from 'lodash';
import $ from 'jquery';
const GPS = {
PI: 3.14159265358979324,
......@@ -168,7 +179,11 @@ export default {
toolBar: '',
isActive: 0,
safe_route: [],
open_safe_route: true
open_safe_route: true,
show_walk_route: true,
popup_title: '',
popup_content: '',
video_src: ''
}
},
mounted() {
......@@ -183,6 +198,17 @@ export default {
// 打开贴片地图
// this.setTitleLayer()
},
watch: {
show_popup(val) {
if (!val) {
this.$nextTick(() => {
// 弹框关闭时，暂停视频
$('.vjs-tech')[0].pause();
$('.vjs-tech')[0].currentTime = 0;
})
}
}
},
methods: {
// addMarker () {
// // axios.get('http://api.map.baidu.com/location/ip?ak=CzpAXV4bhyqCKnWpQqLRkS1i&coor=bd09ll')
......@@ -480,7 +506,11 @@ export default {
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
infoWindow.open(this.map);
// infoWindow.open(this.map);
this.show_popup = true;
this.popup_title = x.name;
this.popup_content = x.note;
this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
})
//
this.spotInfo.push(marker);
......@@ -660,7 +690,7 @@ export default {
})
});
},
setZoom (type) { // 设置放大缩小地图
setZoom(type) { // 设置放大缩小地图
const zoom = this.map.getZoom();
if (type === 'plus') {
this.map.setZoom(zoom + 1)
......@@ -718,7 +748,7 @@ export default {
var layer = new AMap.TileLayer.Flexible({
cacheSize: 30,
opacity: 1,
zIndex: 2,
zIndex: 100,
createTile: function (x, y, z, success, fail) {
// if ((x + y) % 3) {
// fail();
......@@ -827,19 +857,21 @@ export default {
console.error('步行路线数据查询失败' + result);
}
}
AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
this.walk_route = new AMap.Walking ({
AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
this.walk_route = new AMap.Walking({
map: this.map,
}); //构造步行导航类
AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
//根据起、终点坐标规划步行路线
this.walk_route.search(new AMap.LngLat(120.587799, 31.313276), new AMap.LngLat(120.587912, 31.315169));
});
this.show_walk_route = false;
},
removeWalkRoute () {
this.walk_route.clear()
removeWalkRoute() {
this.walk_route.clear();
this.show_walk_route = true;
},
setNavLayer (index) { // 选择地图图层显示
setNavLayer(index) { // 选择地图图层显示
this.isActive = index;
if (index === 0) {
this.setSpotLayer()
......@@ -851,7 +883,7 @@ export default {
this.setActivityLayer()
}
},
handleSafeRoute (status) { // 打开/关闭逃生路线线
handleSafeRoute(status) { // 打开/关闭逃生路线线
if (status) {
this.addSafeRoute()
this.open_safe_route = false;
......@@ -913,9 +945,10 @@ export default {
.tool-bar-wrapper {
position: absolute;
left: 20px;
bottom: 40px;
bottom: 8rem;
width: 20px;
}
.nav-bar-wrapper {
position: absolute;
top: 0;
......@@ -924,18 +957,58 @@ export default {
height: 3.5rem;
background-color: white;
text-align: center;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
.item {
padding-top: 0.5rem;
}
.checked {
color: red;
}
}
.safe-route-wrapper {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: white;
}
.operate-bar-wrapper {
position: absolute;
right: 20px;
top: 10%;
width: 20px;
height: auto;
.box-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.item {
text-align: center;
font-size: 0.85rem;
width: 2rem;
height: 2rem;
background-color: white;
margin-bottom: 1rem;
border-radius: 1px;
padding: 2.5px;
}
}
}
.popup-wrapper {
margin-top: 1rem;
.title {
font-size: 1.25rem;
margin-bottom: 0.85rem;
}
.content {}
}
</style>
......
This diff is collapsed. Click to expand it.