Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d3e1cb96 1 parent b32505c7

调整数据结构

Inline Side-by-side
Showing 2 changed files with 534 additions and 261 deletions
/*
* @Date: 2023-06-30 16:48:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-30 17:09:30
* @FilePath: /map-demo/src/common/max.js
* @Description: 文件描述
*/
const testInfo = [
{
key: 'spot',
name: '景点',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E6%99%AF%E7%82%B901@2x.png',
'https://cdn.ipadbiz.cn/xys/map/%E6%99%AF%E7%82%B902@2x.png',
],
entity_info: [
{
name: '照壁',
position: [120.587882, 31.312884],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '照壁',
note: '完善和谐的道场是从照壁开始的。修建、落成于2005年的照壁矗立在枫桥路上塘河边，黄墙黛瓦、双龙盘绕，犹如西园的屏障，正面写着“戒幢律寺”四个大字，告诉你，一个以戒为本、以律为宗的律宗道场到了。在照壁的另一面，写着“自觉觉他”，这是原中国佛教协会副会长茗山长老的墨宝。这四个字提醒我们，佛是觉悟的意思，走进佛门、学习佛法，不仅要自己觉悟，还要帮助他人，乃至引领一切众生走向觉悟，从无尽的烦恼与痛苦中解脱出来。',
url: 'https://mp.weixin.qq.com/s/foNpXIQ6LkPVI195EAL5UQ',
},
],
// zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
window_type: 'normal',
path: [
[120.587902, 31.31277],
[120.587516, 31.312766],
[120.587621, 31.313067],
[120.587677, 31.31334],
],
},
{
name: '福德智慧二桥',
position: [120.588164, 31.31305],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '福慧双桥',
note: '完善和谐的道场是从照壁开始的。修建、落成于2005年的照壁矗立在枫桥路上塘河边，黄墙黛瓦、双龙盘绕，犹如西园的屏障，正面写着“戒幢律寺”四个大字，告诉你，一个以戒为本、以律为宗的律宗道场到了。在照壁的另一面，写着“自觉觉他”，这是原中国佛教协会副会长茗山长老的墨宝。这四个字提醒我们，佛是觉悟的意思，走进佛门、学习佛法，不仅要自己觉悟，还要帮助他人，乃至引领一切众生走向觉悟，从无尽的烦恼与痛苦中解脱出来。',
url: 'https://mp.weixin.qq.com/s/foNpXIQ6LkPVI195EAL5UQ',
},
],
// zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
window_type: 'normal',
path: [
[120.588148, 31.312993],
[120.588049, 31.313374],
],
},
{
name: '御赐牌楼',
position: [120.587823, 31.313276],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '御赐牌楼',
note: '西园寺山门外的牌楼，始建于清朝光绪年间，四柱挺立，均为石质，柱下有埋头，前后有夹榫，坚固非凡。四柱隔成三门，中门高阔，左、右边门较低窄，既对称又有起伏，参差有致。上部为木枋楼，皆以单额枋上置平板枋，承斗拱托楼顶。正中置明楼，形状为单檐宫殿式顶。牌楼左右两侧为边楼，三楼楼顶戗角，翘起来高过屋脊，如展翅欲飞之势，煞是好看。西园寺山门的结构与气派，在江南亦不多见。',
url: 'https://mp.weixin.qq.com/s/PgQzpKmtKzb9feuKRuJIpg',
},
],
// zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
window_type: 'normal',
path: [
[120.587829, 31.313185],
[120.587681, 31.313343],
],
},
{
name: '山门殿',
position: [120.587811, 31.313508],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '山门',
note: '山门殿与双桥、照壁均是在2003年至2005年新建的，自此，寺院也恢复了从正门（南门）进入的传统。',
url: 'https://mp.weixin.qq.com/s/XzSqtH5RPaRSAihQGZJ8hg',
},
],
// zoom: { 17: 1, 18: 1, 19: 1, 20: 0 },
window_type: 'normal',
path: [
[120.587698, 31.313342],
[120.58794, 31.313358],
],
},
{
name: '钟楼',
position: [120.587985, 31.31411],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '钟楼',
note: '穿过山门 进入第一进院落 展现在眼前的是宽广的“菩提大道” 大道两侧绿树成荫 树下芳草碧绿青青 左右两侧的黄墙上 还有长长的宣传栏 介绍着佛教的一些基本常识 及寺院的发展情况 仔细阅读 会有意想不到的收获',
url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
},
],
window_type: 'normal',
path: [
[120.587874, 31.31401],
[120.58774, 31.31401],
[120.58781, 31.313449],
],
},
{
name: '鼓楼',
position: [120.5875, 31.31407],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '鼓楼',
note: '穿过山门 进入第一进院落 展现在眼前的是宽广的“菩提大道” 大道两侧绿树成荫 树下芳草碧绿青青 左右两侧的黄墙上 还有长长的宣传栏 介绍着佛教的一些基本常识 及寺院的发展情况 仔细阅读 会有意想不到的收获',
url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
},
],
window_type: 'normal',
path: [
[120.587517, 31.313986],
[120.587743, 31.313999],
[120.587818, 31.313453],
],
},
{
name: '天王殿',
position: [120.58769, 31.314535],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '弥勒菩萨',
note: '走过钟鼓楼，映入眼帘的是黄墙黛瓦、气势恢宏的天王殿。它坐北朝南，为重檐歇山建筑，顶势平坦，飞檐翘角，显得庄重肃穆，拱形山檐下高悬由赵朴老题写的“天王殿”匾额。',
url: 'https://mp.weixin.qq.com/s/LJh_8B7JQtTxz8Chq1EJSQ',
audio: 'https://cdn.ipadbiz.cn/xys/audio/%E5%A4%A7%E9%9B%84%E5%AE%9D%E6%AE%BF.mp3',
},
{
name: '韦陀菩萨​',
note: '走到天王殿后门处 与大雄宝殿相对的便是韦陀菩萨 天王殿内弥勒菩萨面向山门 以慈悲相接引众生走入佛门 韦陀菩萨面向大雄宝殿 以威严相守护伽蓝护持佛法 韦陀菩萨 头戴凤翅兜鍪（móu）盔 足穿乌云皂履 身披黄金锁子甲 手持降魔杵 现将军形象',
url: 'https://mp.weixin.qq.com/s/ruG6rAb714nIrMc2IS_V_g',
},
{
name: '四大天王​',
note: '天王殿内东西两侧是四尊高大的塑像，这就是四大天王，屋顶四角也分别塑有四天王的小身立像，上下呼应，气势威武。',
url: 'https://mp.weixin.qq.com/s/7t_jrhWGCCotx2erQNK2Mw',
},
],
window_type: 'normal',
path: [
[120.5877, 31.314391],
[120.587812, 31.313437],
],
},
{
name: '大雄宝殿',
position: [120.587621, 31.31513],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '大雄宝殿',
note: '大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。',
url: 'https://mp.weixin.qq.com/s/jpG4kmRH6LiW67EuMmc3OA',
},
{
name: '主佛像​',
note: '大雄宝殿内迎面是三尊高大的塑像：释迦如来居中，东面是药师如来，西面是阿弥陀如来。',
url: 'https://mp.weixin.qq.com/s/oMSBDmlo2fvHs2E1AukOQA',
},
{
name: '观音济群生​',
note: '在大雄宝殿三佛背面的后壁，有一组影壁群塑，宽铺三间，上齐殿顶。如此大规模的塑壁实不多见。在内容上以佛教为主题，同时吸收了汉化的内容，反映了佛教契机应化的趋向。',
url: 'https://mp.weixin.qq.com/s/WqlgVXjgu1tDGtsFrLTsyw',
},
{
name: '智行菩萨​',
note: '大雄宝殿后壁东有大智文殊菩萨，西有大行普贤菩萨，这是法身佛的胁侍菩萨。这两尊菩萨为香樟木涂金，典型的汉传清代式样造像，慈眉善目宁静庄严。此外，这两位菩萨和后影壁的南海观音（大悲观音菩萨）、及端坐大钟之下超拔恶道众生的大愿地藏菩萨，被尊为“悲智行愿”四大菩萨。',
url: 'https://mp.weixin.qq.com/s/WkEwZwXa0mEPzKCBohhY2Q',
},
],
window_type: 'normal',
path: [
[120.587644, 31.314826],
[120.587652, 31.314771],
[120.587705, 31.314363],
[120.587815, 31.313442],
],
},
{
name: '罗汉堂',
position: [120.587176, 31.314839],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '罗汉堂',
note: '与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。 西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。',
url: 'https://mp.weixin.qq.com/s/s5-uk-I-FDblNF4scMQHsg',
},
{
name: '千手观音​',
note: '西园戒幢律寺的罗汉堂，是中国四大罗汉堂之一。一进门，正中就是一尊四面千手千眼观音。 这尊金身立相的观音妙相庄严，身穿天衣，腰束飘巾，折式衣裙，犹如轻纱；头戴天冠，天冠中雕有化佛；胸前双手合十，其腰间双手置腹下作禅定印，肩上双手伸过冠顶，似托头顶放光化佛之状，其余两手持法器；身分四面，总具千手，掌心各刻一眼，以示千手千眼。',
url: 'https://mp.weixin.qq.com/s/GeFu3Ux-CcI_axsdeMbqJw',
},
{
name: '众圣僧',
note: '罗汉堂中主要供奉的是五百罗汉。佛陀在世时已证得无学果之五百声闻弟子，这五百弟子即后世的五百罗汉。佛灭度后，以大迦叶为首的五百罗汉在王舍城结集法藏。 罗汉又称阿罗汉，是僧人精进修行，断尽一切烦恼，证得阿罗汉果位而受世间大供养的圣者。罗汉就是圣僧，所以罗汉像均现出家形像。我国从北宋以来有罗汉堂之设，一方面为僧人树立楷模，另一方面向世人展示：人人都有佛性，罗汉就是从实实在在的僧人修炼而成的。',
url: 'https://mp.weixin.qq.com/s/GJGA24G-fXI_ahPodjgR4Q',
},
{
name: '四大名山​',
note: '罗汉堂的中心位置是佛教四大名山塑座，以此为中心，整个罗汉堂呈田字形布局。四大名山分别为四大菩萨成道的应化道场：普陀山为观音菩萨应化道场；五台山是文殊菩萨应化道场，骑狮子；九华山是地藏菩萨道场；峨眉山是普贤菩萨应化道场，骑白象。',
url: 'https://mp.weixin.qq.com/s/hXsuEuBsBWYZEPzfnlXxSg',
},
{
name: '疯僧济公​',
note: '罗汉堂中还有两尊特别的“罗汉”像，位于四大名山塑座南北两向。 北面是疯僧立像，他一手掮扫帚，一手拿吹火筒，貌似疯颠而不落俗套。此像原型取材于民间“疯僧扫秦”的故事：岳飞遇害后，一日秦桧到寺院烧香，一疯僧当众揭发其罪行并羞辱之。后人敬仰疯僧羞辱权奸的胆识和痛斥国贼的凛然正气，在寺庙中塑像供养之。后来人们逐渐将疯僧和济公和尚的形象融合。',
url: 'https://mp.weixin.qq.com/s/OwqYLL61YplHYPCvHdXakg',
},
],
window_type: 'normal',
path: [
[120.587182, 31.314786],
[120.587464, 31.314773],
[120.587652, 31.314764],
[120.587818, 31.313451],
],
},
{
name: '观音殿',
position: [120.58791, 31.314799],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
details: [
{
name: '观音殿',
note: '观音菩萨的全称是观世音菩萨，凡遇难众生只需诵念其名号，菩萨即时观其音声前往拯救，故称观世音，略称观音，也叫观自在。',
url: 'https://mp.weixin.qq.com/s/-b29FEPxZyE3Lu1KucmPcw',
audio: '',
},
],
window_type: 'normal',
path: [
[120.58788, 31.31466],
[120.58789, 31.314594],
[120.587686, 31.314482],
[120.587815, 31.313439],
],
},
// {
// name: '藏经楼',
// position: [120.587481, 31.316285],
// icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
// details: [
// {
// name: '藏经楼',
// note: '',
// url: '',
// },
// ],
// window_type: 'normal',
// path: [],
// },
{
name: '西花园湖心亭',
position: [120.58653, 31.315118],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
details: [
{
name: '湖心亭',
note: '在放生池中有湖心亭一座，顾名思义，亭建在湖心，环水萦回，犹如岛屿，仿佛蓬莱。亭为六角，砖木结构，楼阁形式，双重飞檐，轻盈多姿，造型优美。亭以粉墙分间内外，东西两面各设大门，通过九曲石桥与两岸连接。',
url: 'https://www.jcedu.org/202012/17340.html',
},
],
window_type: 'normal',
path: [
[120.586531, 31.314978],
[120.586811, 31.314982],
[120.587297, 31.314951],
[120.587339, 31.314938],
[120.587352, 31.314823],
[120.58765, 31.314773],
[120.587811, 31.313439],
],
},
{
name: '四百岁神龟',
position: [120.586157, 31.315011],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
details: [
{
name: '四百岁神鼋',
note: '放生池全名为“广仁放生园池”，大门本在天王殿的西侧，现改为游览西花园后的出口。',
url: 'https://www.jcedu.org/202012/17293.html',
},
],
window_type: 'normal',
path: [
[120.586154, 31.314984],
[120.586531, 31.314978],
[120.586811, 31.314982],
[120.587297, 31.314951],
[120.587339, 31.314938],
[120.587352, 31.314823],
[120.58765, 31.314773],
[120.587811, 31.313439],
],
},
],
},
{
key: 'activity',
name: '餐饮',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE01@2x.png',
'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE02@2x.png',
],
entity_info: [
{
name: '素食馆',
position: [120.587352, 31.314496],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
path: [
[120.587482, 31.314518],
[120.587677, 31.314555],
[120.587809, 31.31348],
],
},
{
name: '包子铺',
position: [120.586912, 31.314195],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
path: [
[120.586928, 31.314122],
[120.58773, 31.31418],
[120.587805, 31.313467],
],
},
{
name: '开水房',
position: [120.586812, 31.314049],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
path: [
[120.586928, 31.314122],
[120.58773, 31.31418],
[120.587805, 31.313467],
],
},
{
name: '茶室',
position: [120.58681, 31.314981],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
path: [
[120.58692, 31.314924],
[120.587333, 31.314947],
[120.587355, 31.314812],
[120.587642, 31.314775],
[120.587808, 31.313462],
],
},
],
},
{
key: 'public',
name: '出入口',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E8%BF%9B%E5%87%BA%E5%8F%A301@2x.png',
'https://cdn.ipadbiz.cn/xys/map/%E8%BF%9B%E5%87%BA%E5%8F%A302@2x.png',
],
entity_info: [
{
name: '南门',
position: [120.587811, 31.313508],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
path: [
[120.587701, 31.313342],
[120.587935, 31.313367],
],
},
{
name: '东门',
position: [120.588272, 31.31435],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
path: [
[120.588198, 31.314374],
[120.587712, 31.31431],
[120.587801, 31.313455],
],
},
],
},
{
key: 'toilet',
name: '卫生间',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E5%8D%AB%E7%94%9F%E9%97%B401@2x.png',
'https://cdn.ipadbiz.cn/xys/map/%E5%8D%AB%E7%94%9F%E9%97%B402@2x.png',
],
entity_info: [
{
name: '卫生间',
position: [120.587103, 31.314234],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
path: [
[120.587109, 31.314146],
[120.587733, 31.31418],
[120.587811, 31.313453],
],
},
],
},
{
key: 'warn',
name: '预警',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
],
entity_info: [
{
name: '预警演示',
position: [120.58704, 31.313773],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
window_type: 'lite',
},
],
},
];
export default testInfo;
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-29 11:33:19
* @LastEditTime: 2023-06-30 17:33:58
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -27,7 +27,7 @@
<van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
:style="{ padding: '1rem', bottom: '4.5rem' }">
<div style="text-align: left;">
<div v-for="(item, index) in navList[navName]" :key="index" @click="handleNavMarker(item)"
<div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
style="margin-bottom: 1rem; font-size: 1.15rem;">
<van-icon name="fire-o" color="#965f13" />&nbsp;&nbsp;<span style="color: #000;">{{ item.name }}</span>
</div>
......@@ -91,6 +91,7 @@
<script>
// import { mapState } from 'vuex'
import coord from '@/common/map_data'
import map_max from '@/common/max'
import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
......@@ -186,11 +187,6 @@ export default {
current_lng: '',
current_lat: '',
current_route: '',
spotInfo: [], // 景点信息实体
toiletInfo: [], // 厕所信息实体
activityInfo: [], // 活动场所信息实体
publicInfo: [], // 公共设施信息实体
warnInfo: [], // 预警信息实体
show_popup: false,
dialog_show: false,
dialog_text: '',
......@@ -216,31 +212,14 @@ export default {
navBarList: [],
rect: {},
navList: [],
navName: 'spotInfo',
navKey: '',
markerSum: [], // marker合集
}
},
mounted() {
this.navBarList = [{
key: 'spot',
name: '景点',
icon: ['https://cdn.ipadbiz.cn/xys/map/%E6%99%AF%E7%82%B901@2x.png', 'https://cdn.ipadbiz.cn/xys/map/%E6%99%AF%E7%82%B902@2x.png']
}, {
key: 'activity',
name: '餐饮',
icon: ['https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE01@2x.png', 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE02@2x.png']
}, {
key: 'public',
name: '出入口',
icon: ['https://cdn.ipadbiz.cn/xys/map/%E8%BF%9B%E5%87%BA%E5%8F%A301@2x.png', 'https://cdn.ipadbiz.cn/xys/map/%E8%BF%9B%E5%87%BA%E5%8F%A302@2x.png']
}, {
key: 'toilet',
name: '卫生间',
icon: ['https://cdn.ipadbiz.cn/xys/map/%E5%8D%AB%E7%94%9F%E9%97%B401@2x.png', 'https://cdn.ipadbiz.cn/xys/map/%E5%8D%AB%E7%94%9F%E9%97%B402@2x.png']
}, {
key: 'warn',
name: '预警',
icon: ['https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png', 'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png']
}]
this.navBarList = map_max; // 底部导航条
this.navKey = map_max[0]['key']; // 默认选中 第一个 key
this.navList = map_max.filter(item => item.key === this.navKey)[0]['entity_info']; // 返回默认选中项的实体信息
// 初始化地图
this.initMap();
// this.setMapBoundary();
......@@ -248,7 +227,6 @@ export default {
this.getLocation()
// 打开贴片地图
this.setTitleLayer()
this.navList = coord;
},
watch: {
show_popup(val) {
......@@ -307,20 +285,35 @@ export default {
});
// 添加地图点击事件
this.map.on("click", this.showInfoClick);
// 加载景点图层
this.loadMaker(this.navKey);
//
this.setSpotLayer()
//
this.map.setRotation(6, true)
this.map.setRotation(6, true);
},
loadSpotMaker() { // 加载景点标记
setNavLayer({ key }, index) { // 选择地图图层显示
this.isActive = index;
this.removeLayer();
this.loadMaker(key);
this.closeInfoWindow();
setTimeout(() => {
// 地图zooms调整
this.map.setZoom(18);
// this.map.setZoomAndCenter(18, [this.xys_lng, this.xys_lat]);
this.map.setZoomAndCenter(18, [120.587382, 31.313900]);
}, 100);
this.removeNavRoute()
},
loadMaker (key) {
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.spotInfo, (x, i) => {
const entity_info = this.navBarList.filter(item => item.key === key)[0]['entity_info'];
this.markerSum = [];
_.each(entity_info, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.spotInfo[i].position,
position: entity_info[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: coord.spotInfo[i].icon,
img: entity_info[i].icon,
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
......@@ -329,7 +322,7 @@ export default {
minScale: 0.8 // 最小放大比例
},
label: {
content: coord.spotInfo[i].name,
content: entity_info[i].name,
position: 'TM',
// position: 'BM',
// offset: new AMap.Pixel(0, 10),
......@@ -339,167 +332,27 @@ export default {
icon: {},
label: {}
}],
zoomStyleMapping: coord.spotInfo[i].zoom ? coord.spotInfo[i].zoom : zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.positionMarker(coord.spotInfo[i]);
})
//
this.spotInfo.push(marker);
})
this.map.add(this.spotInfo);
},
loadToiletMaker() { // 加载厕所标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.toiletInfo, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.toiletInfo[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: coord.toiletInfo[i].icon,
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
},
label: {
content: coord.toiletInfo[i].name,
position: 'TM',
minZoom: 18
}
}],
zoomStyleMapping
zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.positionLiteMarker(coord.toiletInfo[i]);
})
//
this.toiletInfo.push(marker);
})
this.map.add(this.toiletInfo);
},
loadWarnMaker() { // 加载预警标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.warnInfo, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.warnInfo[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: coord.warnInfo[i].icon,
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
},
label: {
content: coord.warnInfo[i].name,
position: 'TM',
minZoom: 18
}
}],
zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.positionWarnMarker(coord.warnInfo[i]);
})
//
this.warnInfo.push(marker);
})
this.map.add(this.warnInfo);
},
loadActivityMaker() { // 加载活动标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.activityInfo, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.activityInfo[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: coord.activityInfo[i].icon,
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
},
label: {
content: coord.activityInfo[i].name,
position: 'TM',
minZoom: 18
}
}],
zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.positionLiteMarker(coord.activityInfo[i]);
// 不同弹框类型
if (entity_info[i].window_type === 'normal') {
this.positionMarker(entity_info[i])
} else {
this.positionLiteMarker(entity_info[i])
}
})
//
this.activityInfo.push(marker);
// marker合集
this.markerSum.push(marker);
})
this.map.add(this.activityInfo);
this.map.add(this.markerSum);
},
loadPublicMaker() { // 加载公共设施标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.publicInfo, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.publicInfo[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: coord.publicInfo[i].icon,
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 18, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
},
label: {
content: coord.publicInfo[i].name,
position: 'TM',
minZoom: 18
}
}],
zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.positionLiteMarker(coord.publicInfo[i]);
})
//
this.publicInfo.push(marker);
})
this.map.add(this.publicInfo);
removeLayer () {
this.map.remove(this.markerSum);
},
setMapBoundary() { // 地图描边
new AMap.Polygon({
......@@ -788,46 +641,6 @@ export default {
// this.lockMapBounds()
},
handleLayer (key) { // 构建图层显示结构
const arr = ['Toilet', 'Activity', 'Public', 'Spot', 'Warn'];
const filteredArr = arr.filter(item => item !== key);
// 删除其他图层
filteredArr.forEach(element => {
this[`remove${element}Layer`]()
});
// 加载地图标记
this[`load${key}Maker`]();
},
setSpotLayer() { // 设置景点图层
this.handleLayer('Spot')
},
setToiletLayer() { // 设置卫生间图层
this.handleLayer('Toilet')
},
setActivityLayer() { // 设置活动图层
this.handleLayer('Activity')
},
setPublicLayer() { // 设置公共图层
this.handleLayer('Public')
},
setWarnLayer() { // 设置预警图层
this.handleLayer('Warn')
},
removeSpotLayer() { // 删除景点标记
this.map.remove(this.spotInfo);
},
removeToiletLayer() { // 删除景点标记
this.map.remove(this.toiletInfo);
},
removeActivityLayer() { // 删除活动标记
this.map.remove(this.activityInfo);
},
removePublicLayer() { // 删除公共标记
this.map.remove(this.publicInfo);
},
removeWarnLayer() { // 删除预警标记
this.map.remove(this.warnInfo);
},
// 限制地图范围
lockMapBounds() {
// var bounds = this.map.getBounds();
......@@ -903,37 +716,6 @@ export default {
this.dialog_text = '内部设施';
}
},
setNavLayer({ key }, index) { // 选择地图图层显示
this.isActive = index;
if (key === 'spot') {
this.navName = 'spotInfo'
this.setSpotLayer()
}
if (key === 'toilet') {
this.navName = 'toiletInfo'
this.setToiletLayer()
}
if (key === 'activity') {
this.navName = 'activityInfo'
this.setActivityLayer()
}
if (key === 'public') {
this.navName = 'publicInfo'
this.setPublicLayer()
}
if (key === 'warn') {
this.navName = 'warnInfo'
this.setWarnLayer()
}
this.closeInfoWindow();
setTimeout(() => {
// 地图zooms调整
this.map.setZoom(18);
// this.map.setZoomAndCenter(18, [this.xys_lng, this.xys_lat]);
this.map.setZoomAndCenter(18, [120.587382, 31.313900]);
}, 100);
this.removeNavRoute()
},
handleSafeRoute(status) { // 打开/关闭逃生路线线
if (status) {
this.addSafeRoute()
......