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 155 additions and 38 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,8 +2,8 @@
* @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
* @LastEditTime: 2023-05-30 13:12:21
* @FilePath: /map-demo/src/main.js
* @Description:
*/
import { createApp } from 'vue';
......@@ -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">
<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>
<van-popup v-model:show="show_popup" position="bottom" :overlay="false" closeable
:style="{ padding: '64px' }">内容</van-popup>
</div>
<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();
......@@ -828,18 +858,20 @@ export default {
}
}
AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
this.walk_route = new 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;
......@@ -925,17 +958,57 @@ export default {
background-color: white;
text-align: center;
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.