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 533 additions and 260 deletions
1 +/*
2 + * @Date: 2023-06-30 16:48:58
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-06-30 17:09:30
5 + * @FilePath: /map-demo/src/common/max.js
6 + * @Description: 文件描述
7 + */
8 +const testInfo = [
9 + {
10 + key: 'spot',
11 + name: '景点',
12 + icon: [
13 + 'https://cdn.ipadbiz.cn/xys/map/%E6%99%AF%E7%82%B901@2x.png',
14 + 'https://cdn.ipadbiz.cn/xys/map/%E6%99%AF%E7%82%B902@2x.png',
15 + ],
16 + entity_info: [
17 + {
18 + name: '照壁',
19 + position: [120.587882, 31.312884],
20 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
21 + details: [
22 + {
23 + name: '照壁',
24 + note: '完善和谐的道场是从照壁开始的。修建、落成于2005年的照壁矗立在枫桥路上塘河边，黄墙黛瓦、双龙盘绕，犹如西园的屏障，正面写着“戒幢律寺”四个大字，告诉你，一个以戒为本、以律为宗的律宗道场到了。在照壁的另一面，写着“自觉觉他”，这是原中国佛教协会副会长茗山长老的墨宝。这四个字提醒我们，佛是觉悟的意思，走进佛门、学习佛法，不仅要自己觉悟，还要帮助他人，乃至引领一切众生走向觉悟，从无尽的烦恼与痛苦中解脱出来。',
25 + url: 'https://mp.weixin.qq.com/s/foNpXIQ6LkPVI195EAL5UQ',
26 + },
27 + ],
28 + // zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
29 + window_type: 'normal',
30 + path: [
31 + [120.587902, 31.31277],
32 + [120.587516, 31.312766],
33 + [120.587621, 31.313067],
34 + [120.587677, 31.31334],
35 + ],
36 + },
37 + {
38 + name: '福德智慧二桥',
39 + position: [120.588164, 31.31305],
40 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
41 + details: [
42 + {
43 + name: '福慧双桥',
44 + note: '完善和谐的道场是从照壁开始的。修建、落成于2005年的照壁矗立在枫桥路上塘河边，黄墙黛瓦、双龙盘绕，犹如西园的屏障，正面写着“戒幢律寺”四个大字，告诉你，一个以戒为本、以律为宗的律宗道场到了。在照壁的另一面，写着“自觉觉他”，这是原中国佛教协会副会长茗山长老的墨宝。这四个字提醒我们，佛是觉悟的意思，走进佛门、学习佛法，不仅要自己觉悟，还要帮助他人，乃至引领一切众生走向觉悟，从无尽的烦恼与痛苦中解脱出来。',
45 + url: 'https://mp.weixin.qq.com/s/foNpXIQ6LkPVI195EAL5UQ',
46 + },
47 + ],
48 + // zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
49 + window_type: 'normal',
50 + path: [
51 + [120.588148, 31.312993],
52 + [120.588049, 31.313374],
53 + ],
54 + },
55 + {
56 + name: '御赐牌楼',
57 + position: [120.587823, 31.313276],
58 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
59 + details: [
60 + {
61 + name: '御赐牌楼',
62 + note: '西园寺山门外的牌楼，始建于清朝光绪年间，四柱挺立，均为石质，柱下有埋头，前后有夹榫，坚固非凡。四柱隔成三门，中门高阔，左、右边门较低窄，既对称又有起伏，参差有致。上部为木枋楼，皆以单额枋上置平板枋，承斗拱托楼顶。正中置明楼，形状为单檐宫殿式顶。牌楼左右两侧为边楼，三楼楼顶戗角，翘起来高过屋脊，如展翅欲飞之势，煞是好看。西园寺山门的结构与气派，在江南亦不多见。',
63 + url: 'https://mp.weixin.qq.com/s/PgQzpKmtKzb9feuKRuJIpg',
64 + },
65 + ],
66 + // zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
67 + window_type: 'normal',
68 + path: [
69 + [120.587829, 31.313185],
70 + [120.587681, 31.313343],
71 + ],
72 + },
73 + {
74 + name: '山门殿',
75 + position: [120.587811, 31.313508],
76 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
77 + details: [
78 + {
79 + name: '山门',
80 + note: '山门殿与双桥、照壁均是在2003年至2005年新建的，自此，寺院也恢复了从正门（南门）进入的传统。',
81 + url: 'https://mp.weixin.qq.com/s/XzSqtH5RPaRSAihQGZJ8hg',
82 + },
83 + ],
84 + // zoom: { 17: 1, 18: 1, 19: 1, 20: 0 },
85 + window_type: 'normal',
86 + path: [
87 + [120.587698, 31.313342],
88 + [120.58794, 31.313358],
89 + ],
90 + },
91 + {
92 + name: '钟楼',
93 + position: [120.587985, 31.31411],
94 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
95 + details: [
96 + {
97 + name: '钟楼',
98 + note: '穿过山门 进入第一进院落 展现在眼前的是宽广的“菩提大道” 大道两侧绿树成荫 树下芳草碧绿青青 左右两侧的黄墙上 还有长长的宣传栏 介绍着佛教的一些基本常识 及寺院的发展情况 仔细阅读 会有意想不到的收获',
99 + url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
100 + },
101 + ],
102 + window_type: 'normal',
103 + path: [
104 + [120.587874, 31.31401],
105 + [120.58774, 31.31401],
106 + [120.58781, 31.313449],
107 + ],
108 + },
109 + {
110 + name: '鼓楼',
111 + position: [120.5875, 31.31407],
112 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
113 + details: [
114 + {
115 + name: '鼓楼',
116 + note: '穿过山门 进入第一进院落 展现在眼前的是宽广的“菩提大道” 大道两侧绿树成荫 树下芳草碧绿青青 左右两侧的黄墙上 还有长长的宣传栏 介绍着佛教的一些基本常识 及寺院的发展情况 仔细阅读 会有意想不到的收获',
117 + url: 'https://mp.weixin.qq.com/s/bBwxIpK8L1h7JqENxMg6dg',
118 + },
119 + ],
120 + window_type: 'normal',
121 + path: [
122 + [120.587517, 31.313986],
123 + [120.587743, 31.313999],
124 + [120.587818, 31.313453],
125 + ],
126 + },
127 + {
128 + name: '天王殿',
129 + position: [120.58769, 31.314535],
130 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
131 + details: [
132 + {
133 + name: '弥勒菩萨',
134 + note: '走过钟鼓楼，映入眼帘的是黄墙黛瓦、气势恢宏的天王殿。它坐北朝南，为重檐歇山建筑，顶势平坦，飞檐翘角，显得庄重肃穆，拱形山檐下高悬由赵朴老题写的“天王殿”匾额。',
135 + url: 'https://mp.weixin.qq.com/s/LJh_8B7JQtTxz8Chq1EJSQ',
136 + audio: 'https://cdn.ipadbiz.cn/xys/audio/%E5%A4%A7%E9%9B%84%E5%AE%9D%E6%AE%BF.mp3',
137 + },
138 + {
139 + name: '韦陀菩萨​',
140 + note: '走到天王殿后门处 与大雄宝殿相对的便是韦陀菩萨 天王殿内弥勒菩萨面向山门 以慈悲相接引众生走入佛门 韦陀菩萨面向大雄宝殿 以威严相守护伽蓝护持佛法 韦陀菩萨 头戴凤翅兜鍪（móu）盔 足穿乌云皂履 身披黄金锁子甲 手持降魔杵 现将军形象',
141 + url: 'https://mp.weixin.qq.com/s/ruG6rAb714nIrMc2IS_V_g',
142 + },
143 + {
144 + name: '四大天王​',
145 + note: '天王殿内东西两侧是四尊高大的塑像，这就是四大天王，屋顶四角也分别塑有四天王的小身立像，上下呼应，气势威武。',
146 + url: 'https://mp.weixin.qq.com/s/7t_jrhWGCCotx2erQNK2Mw',
147 + },
148 + ],
149 + window_type: 'normal',
150 + path: [
151 + [120.5877, 31.314391],
152 + [120.587812, 31.313437],
153 + ],
154 + },
155 + {
156 + name: '大雄宝殿',
157 + position: [120.587621, 31.31513],
158 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
159 + details: [
160 + {
161 + name: '大雄宝殿',
162 + note: '大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。',
163 + url: 'https://mp.weixin.qq.com/s/jpG4kmRH6LiW67EuMmc3OA',
164 + },
165 + {
166 + name: '主佛像​',
167 + note: '大雄宝殿内迎面是三尊高大的塑像：释迦如来居中，东面是药师如来，西面是阿弥陀如来。',
168 + url: 'https://mp.weixin.qq.com/s/oMSBDmlo2fvHs2E1AukOQA',
169 + },
170 + {
171 + name: '观音济群生​',
172 + note: '在大雄宝殿三佛背面的后壁，有一组影壁群塑，宽铺三间，上齐殿顶。如此大规模的塑壁实不多见。在内容上以佛教为主题，同时吸收了汉化的内容，反映了佛教契机应化的趋向。',
173 + url: 'https://mp.weixin.qq.com/s/WqlgVXjgu1tDGtsFrLTsyw',
174 + },
175 + {
176 + name: '智行菩萨​',
177 + note: '大雄宝殿后壁东有大智文殊菩萨，西有大行普贤菩萨，这是法身佛的胁侍菩萨。这两尊菩萨为香樟木涂金，典型的汉传清代式样造像，慈眉善目宁静庄严。此外，这两位菩萨和后影壁的南海观音（大悲观音菩萨）、及端坐大钟之下超拔恶道众生的大愿地藏菩萨，被尊为“悲智行愿”四大菩萨。',
178 + url: 'https://mp.weixin.qq.com/s/WkEwZwXa0mEPzKCBohhY2Q',
179 + },
180 + ],
181 + window_type: 'normal',
182 + path: [
183 + [120.587644, 31.314826],
184 + [120.587652, 31.314771],
185 + [120.587705, 31.314363],
186 + [120.587815, 31.313442],
187 + ],
188 + },
189 + {
190 + name: '罗汉堂',
191 + position: [120.587176, 31.314839],
192 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
193 + details: [
194 + {
195 + name: '罗汉堂',
196 + note: '与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。 西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。',
197 + url: 'https://mp.weixin.qq.com/s/s5-uk-I-FDblNF4scMQHsg',
198 + },
199 + {
200 + name: '千手观音​',
201 + note: '西园戒幢律寺的罗汉堂，是中国四大罗汉堂之一。一进门，正中就是一尊四面千手千眼观音。 这尊金身立相的观音妙相庄严，身穿天衣，腰束飘巾，折式衣裙，犹如轻纱；头戴天冠，天冠中雕有化佛；胸前双手合十，其腰间双手置腹下作禅定印，肩上双手伸过冠顶，似托头顶放光化佛之状，其余两手持法器；身分四面，总具千手，掌心各刻一眼，以示千手千眼。',
202 + url: 'https://mp.weixin.qq.com/s/GeFu3Ux-CcI_axsdeMbqJw',
203 + },
204 + {
205 + name: '众圣僧',
206 + note: '罗汉堂中主要供奉的是五百罗汉。佛陀在世时已证得无学果之五百声闻弟子，这五百弟子即后世的五百罗汉。佛灭度后，以大迦叶为首的五百罗汉在王舍城结集法藏。 罗汉又称阿罗汉，是僧人精进修行，断尽一切烦恼，证得阿罗汉果位而受世间大供养的圣者。罗汉就是圣僧，所以罗汉像均现出家形像。我国从北宋以来有罗汉堂之设，一方面为僧人树立楷模，另一方面向世人展示：人人都有佛性，罗汉就是从实实在在的僧人修炼而成的。',
207 + url: 'https://mp.weixin.qq.com/s/GJGA24G-fXI_ahPodjgR4Q',
208 + },
209 + {
210 + name: '四大名山​',
211 + note: '罗汉堂的中心位置是佛教四大名山塑座，以此为中心，整个罗汉堂呈田字形布局。四大名山分别为四大菩萨成道的应化道场：普陀山为观音菩萨应化道场；五台山是文殊菩萨应化道场，骑狮子；九华山是地藏菩萨道场；峨眉山是普贤菩萨应化道场，骑白象。',
212 + url: 'https://mp.weixin.qq.com/s/hXsuEuBsBWYZEPzfnlXxSg',
213 + },
214 + {
215 + name: '疯僧济公​',
216 + note: '罗汉堂中还有两尊特别的“罗汉”像，位于四大名山塑座南北两向。 北面是疯僧立像，他一手掮扫帚，一手拿吹火筒，貌似疯颠而不落俗套。此像原型取材于民间“疯僧扫秦”的故事：岳飞遇害后，一日秦桧到寺院烧香，一疯僧当众揭发其罪行并羞辱之。后人敬仰疯僧羞辱权奸的胆识和痛斥国贼的凛然正气，在寺庙中塑像供养之。后来人们逐渐将疯僧和济公和尚的形象融合。',
217 + url: 'https://mp.weixin.qq.com/s/OwqYLL61YplHYPCvHdXakg',
218 + },
219 + ],
220 + window_type: 'normal',
221 + path: [
222 + [120.587182, 31.314786],
223 + [120.587464, 31.314773],
224 + [120.587652, 31.314764],
225 + [120.587818, 31.313451],
226 + ],
227 + },
228 + {
229 + name: '观音殿',
230 + position: [120.58791, 31.314799],
231 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
232 + details: [
233 + {
234 + name: '观音殿',
235 + note: '观音菩萨的全称是观世音菩萨，凡遇难众生只需诵念其名号，菩萨即时观其音声前往拯救，故称观世音，略称观音，也叫观自在。',
236 + url: 'https://mp.weixin.qq.com/s/-b29FEPxZyE3Lu1KucmPcw',
237 + audio: '',
238 + },
239 + ],
240 + window_type: 'normal',
241 + path: [
242 + [120.58788, 31.31466],
243 + [120.58789, 31.314594],
244 + [120.587686, 31.314482],
245 + [120.587815, 31.313439],
246 + ],
247 + },
248 + // {
249 + // name: '藏经楼',
250 + // position: [120.587481, 31.316285],
251 + // icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
252 + // details: [
253 + // {
254 + // name: '藏经楼',
255 + // note: '',
256 + // url: '',
257 + // },
258 + // ],
259 + // window_type: 'normal',
260 + // path: [],
261 + // },
262 + {
263 + name: '西花园湖心亭',
264 + position: [120.58653, 31.315118],
265 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
266 + details: [
267 + {
268 + name: '湖心亭',
269 + note: '在放生池中有湖心亭一座，顾名思义，亭建在湖心，环水萦回，犹如岛屿，仿佛蓬莱。亭为六角，砖木结构，楼阁形式，双重飞檐，轻盈多姿，造型优美。亭以粉墙分间内外，东西两面各设大门，通过九曲石桥与两岸连接。',
270 + url: 'https://www.jcedu.org/202012/17340.html',
271 + },
272 + ],
273 + window_type: 'normal',
274 + path: [
275 + [120.586531, 31.314978],
276 + [120.586811, 31.314982],
277 + [120.587297, 31.314951],
278 + [120.587339, 31.314938],
279 + [120.587352, 31.314823],
280 + [120.58765, 31.314773],
281 + [120.587811, 31.313439],
282 + ],
283 + },
284 + {
285 + name: '四百岁神龟',
286 + position: [120.586157, 31.315011],
287 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
288 + details: [
289 + {
290 + name: '四百岁神鼋',
291 + note: '放生池全名为“广仁放生园池”，大门本在天王殿的西侧，现改为游览西花园后的出口。',
292 + url: 'https://www.jcedu.org/202012/17293.html',
293 + },
294 + ],
295 + window_type: 'normal',
296 + path: [
297 + [120.586154, 31.314984],
298 + [120.586531, 31.314978],
299 + [120.586811, 31.314982],
300 + [120.587297, 31.314951],
301 + [120.587339, 31.314938],
302 + [120.587352, 31.314823],
303 + [120.58765, 31.314773],
304 + [120.587811, 31.313439],
305 + ],
306 + },
307 + ],
308 + },
309 + {
310 + key: 'activity',
311 + name: '餐饮',
312 + icon: [
313 + 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE01@2x.png',
314 + 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE02@2x.png',
315 + ],
316 + entity_info: [
317 + {
318 + name: '素食馆',
319 + position: [120.587352, 31.314496],
320 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
321 + details: [
322 + {
323 + name: '',
324 + note: '',
325 + url: '',
326 + },
327 + ],
328 + window_type: 'lite',
329 + path: [
330 + [120.587482, 31.314518],
331 + [120.587677, 31.314555],
332 + [120.587809, 31.31348],
333 + ],
334 + },
335 + {
336 + name: '包子铺',
337 + position: [120.586912, 31.314195],
338 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
339 + details: [
340 + {
341 + name: '',
342 + note: '',
343 + url: '',
344 + },
345 + ],
346 + window_type: 'lite',
347 + path: [
348 + [120.586928, 31.314122],
349 + [120.58773, 31.31418],
350 + [120.587805, 31.313467],
351 + ],
352 + },
353 + {
354 + name: '开水房',
355 + position: [120.586812, 31.314049],
356 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
357 + details: [
358 + {
359 + name: '',
360 + note: '',
361 + url: '',
362 + },
363 + ],
364 + window_type: 'lite',
365 + path: [
366 + [120.586928, 31.314122],
367 + [120.58773, 31.31418],
368 + [120.587805, 31.313467],
369 + ],
370 + },
371 + {
372 + name: '茶室',
373 + position: [120.58681, 31.314981],
374 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
375 + details: [
376 + {
377 + name: '',
378 + note: '',
379 + url: '',
380 + },
381 + ],
382 + window_type: 'lite',
383 + path: [
384 + [120.58692, 31.314924],
385 + [120.587333, 31.314947],
386 + [120.587355, 31.314812],
387 + [120.587642, 31.314775],
388 + [120.587808, 31.313462],
389 + ],
390 + },
391 + ],
392 + },
393 + {
394 + key: 'public',
395 + name: '出入口',
396 + icon: [
397 + 'https://cdn.ipadbiz.cn/xys/map/%E8%BF%9B%E5%87%BA%E5%8F%A301@2x.png',
398 + 'https://cdn.ipadbiz.cn/xys/map/%E8%BF%9B%E5%87%BA%E5%8F%A302@2x.png',
399 + ],
400 + entity_info: [
401 + {
402 + name: '南门',
403 + position: [120.587811, 31.313508],
404 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
405 + details: [
406 + {
407 + name: '',
408 + note: '',
409 + url: '',
410 + },
411 + ],
412 + window_type: 'lite',
413 + path: [
414 + [120.587701, 31.313342],
415 + [120.587935, 31.313367],
416 + ],
417 + },
418 + {
419 + name: '东门',
420 + position: [120.588272, 31.31435],
421 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
422 + details: [
423 + {
424 + name: '',
425 + note: '',
426 + url: '',
427 + },
428 + ],
429 + window_type: 'lite',
430 + path: [
431 + [120.588198, 31.314374],
432 + [120.587712, 31.31431],
433 + [120.587801, 31.313455],
434 + ],
435 + },
436 + ],
437 + },
438 + {
439 + key: 'toilet',
440 + name: '卫生间',
441 + icon: [
442 + 'https://cdn.ipadbiz.cn/xys/map/%E5%8D%AB%E7%94%9F%E9%97%B401@2x.png',
443 + 'https://cdn.ipadbiz.cn/xys/map/%E5%8D%AB%E7%94%9F%E9%97%B402@2x.png',
444 + ],
445 + entity_info: [
446 + {
447 + name: '卫生间',
448 + position: [120.587103, 31.314234],
449 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png',
450 + details: [
451 + {
452 + name: '',
453 + note: '',
454 + url: '',
455 + },
456 + ],
457 + window_type: 'lite',
458 + path: [
459 + [120.587109, 31.314146],
460 + [120.587733, 31.31418],
461 + [120.587811, 31.313453],
462 + ],
463 + },
464 + ],
465 + },
466 + {
467 + key: 'warn',
468 + name: '预警',
469 + icon: [
470 + 'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
471 + 'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
472 + ],
473 + entity_info: [
474 + {
475 + name: '预警演示',
476 + position: [120.58704, 31.313773],
477 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
478 + details: [
479 + {
480 + name: '',
481 + note: '',
482 + url: '',
483 + },
484 + ],
485 + window_type: 'lite',
486 + },
487 + ],
488 + },
489 +];
490 +
491 +export default testInfo;
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-06-29 11:33:19 4 + * @LastEditTime: 2023-06-30 17:33:58
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false" 27 <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
28 :style="{ padding: '1rem', bottom: '4.5rem' }"> 28 :style="{ padding: '1rem', bottom: '4.5rem' }">
29 <div style="text-align: left;"> 29 <div style="text-align: left;">
30 - <div v-for="(item, index) in navList[navName]" :key="index" @click="handleNavMarker(item)" 30 + <div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
31 style="margin-bottom: 1rem; font-size: 1.15rem;"> 31 style="margin-bottom: 1rem; font-size: 1.15rem;">
32 <van-icon name="fire-o" color="#965f13" />&nbsp;&nbsp;<span style="color: #000;">{{ item.name }}</span> 32 <van-icon name="fire-o" color="#965f13" />&nbsp;&nbsp;<span style="color: #000;">{{ item.name }}</span>
33 </div> 33 </div>
...@@ -91,6 +91,7 @@ ...@@ -91,6 +91,7 @@
91 <script> 91 <script>
92 // import { mapState } from 'vuex' 92 // import { mapState } from 'vuex'
93 import coord from '@/common/map_data' 93 import coord from '@/common/map_data'
94 +import map_max from '@/common/max'
94 import _ from 'lodash'; 95 import _ from 'lodash';
95 import $ from 'jquery'; 96 import $ from 'jquery';
96 //引入定义的信息窗组件 97 //引入定义的信息窗组件
...@@ -186,11 +187,6 @@ export default { ...@@ -186,11 +187,6 @@ export default {
186 current_lng: '', 187 current_lng: '',
187 current_lat: '', 188 current_lat: '',
188 current_route: '', 189 current_route: '',
189 - spotInfo: [], // 景点信息实体
190 - toiletInfo: [], // 厕所信息实体
191 - activityInfo: [], // 活动场所信息实体
192 - publicInfo: [], // 公共设施信息实体
193 - warnInfo: [], // 预警信息实体
194 show_popup: false, 190 show_popup: false,
195 dialog_show: false, 191 dialog_show: false,
196 dialog_text: '', 192 dialog_text: '',
...@@ -216,31 +212,14 @@ export default { ...@@ -216,31 +212,14 @@ export default {
216 navBarList: [], 212 navBarList: [],
217 rect: {}, 213 rect: {},
218 navList: [], 214 navList: [],
219 - navName: 'spotInfo', 215 + navKey: '',
216 + markerSum: [], // marker合集
220 } 217 }
221 }, 218 },
222 mounted() { 219 mounted() {
223 - this.navBarList = [{ 220 + this.navBarList = map_max; // 底部导航条
224 - key: 'spot', 221 + this.navKey = map_max[0]['key']; // 默认选中 第一个 key
225 - name: '景点', 222 + this.navList = map_max.filter(item => item.key === this.navKey)[0]['entity_info']; // 返回默认选中项的实体信息
226 - 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']
227 - }, {
228 - key: 'activity',
229 - name: '餐饮',
230 - 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']
231 - }, {
232 - key: 'public',
233 - name: '出入口',
234 - 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']
235 - }, {
236 - key: 'toilet',
237 - name: '卫生间',
238 - 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']
239 - }, {
240 - key: 'warn',
241 - name: '预警',
242 - 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']
243 - }]
244 // 初始化地图 223 // 初始化地图
245 this.initMap(); 224 this.initMap();
246 // this.setMapBoundary(); 225 // this.setMapBoundary();
...@@ -248,7 +227,6 @@ export default { ...@@ -248,7 +227,6 @@ export default {
248 this.getLocation() 227 this.getLocation()
249 // 打开贴片地图 228 // 打开贴片地图
250 this.setTitleLayer() 229 this.setTitleLayer()
251 - this.navList = coord;
252 }, 230 },
253 watch: { 231 watch: {
254 show_popup(val) { 232 show_popup(val) {
...@@ -307,20 +285,35 @@ export default { ...@@ -307,20 +285,35 @@ export default {
307 }); 285 });
308 // 添加地图点击事件 286 // 添加地图点击事件
309 this.map.on("click", this.showInfoClick); 287 this.map.on("click", this.showInfoClick);
288 + // 加载景点图层
289 + this.loadMaker(this.navKey);
310 // 290 //
311 - this.setSpotLayer() 291 + this.map.setRotation(6, true);
312 - // 292 + },
313 - this.map.setRotation(6, true) 293 + setNavLayer({ key }, index) { // 选择地图图层显示
294 + this.isActive = index;
295 + this.removeLayer();
296 + this.loadMaker(key);
297 + this.closeInfoWindow();
298 + setTimeout(() => {
299 + // 地图zooms调整
300 + this.map.setZoom(18);
301 + // this.map.setZoomAndCenter(18, [this.xys_lng, this.xys_lat]);
302 + this.map.setZoomAndCenter(18, [120.587382, 31.313900]);
303 + }, 100);
304 + this.removeNavRoute()
314 }, 305 },
315 - loadSpotMaker() { // 加载景点标记 306 + loadMaker (key) {
316 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 307 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
317 - _.each(coord.spotInfo, (x, i) => { 308 + const entity_info = this.navBarList.filter(item => item.key === key)[0]['entity_info'];
309 + this.markerSum = [];
310 + _.each(entity_info, (x, i) => {
318 var marker = new AMap.ElasticMarker({ 311 var marker = new AMap.ElasticMarker({
319 - position: coord.spotInfo[i].position, 312 + position: entity_info[i].position,
320 zooms: [17, 19], 313 zooms: [17, 19],
321 styles: [{ 314 styles: [{
322 icon: { 315 icon: {
323 - img: coord.spotInfo[i].icon, 316 + img: entity_info[i].icon,
324 size: [28, 28], // 可见区域的大小 317 size: [28, 28], // 可见区域的大小
325 anchor: 'bottom-center', // 锚点 318 anchor: 'bottom-center', // 锚点
326 fitZoom: 14, // 最合适的级别 319 fitZoom: 14, // 最合适的级别
...@@ -329,7 +322,7 @@ export default { ...@@ -329,7 +322,7 @@ export default {
329 minScale: 0.8 // 最小放大比例 322 minScale: 0.8 // 最小放大比例
330 }, 323 },
331 label: { 324 label: {
332 - content: coord.spotInfo[i].name, 325 + content: entity_info[i].name,
333 position: 'TM', 326 position: 'TM',
334 // position: 'BM', 327 // position: 'BM',
335 // offset: new AMap.Pixel(0, 10), 328 // offset: new AMap.Pixel(0, 10),
...@@ -339,167 +332,27 @@ export default { ...@@ -339,167 +332,27 @@ export default {
339 icon: {}, 332 icon: {},
340 label: {} 333 label: {}
341 }], 334 }],
342 - zoomStyleMapping: coord.spotInfo[i].zoom ? coord.spotInfo[i].zoom : zoomStyleMapping 335 + zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
343 - });
344 - if (clickListener) {
345 - marker.off('click', clickListener)
346 - }
347 - // 绑定景点的点击事件 - 文字出现才能触发
348 - var clickListener = marker.on('click', (e) => {
349 - this.positionMarker(coord.spotInfo[i]);
350 - })
351 - //
352 - this.spotInfo.push(marker);
353 - })
354 - this.map.add(this.spotInfo);
355 - },
356 - loadToiletMaker() { // 加载厕所标记
357 - var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
358 - _.each(coord.toiletInfo, (x, i) => {
359 - var marker = new AMap.ElasticMarker({
360 - position: coord.toiletInfo[i].position,
361 - zooms: [17, 19],
362 - styles: [{
363 - icon: {
364 - img: coord.toiletInfo[i].icon,
365 - size: [28, 28], // 可见区域的大小
366 - anchor: 'bottom-center', // 锚点
367 - fitZoom: 14, // 最合适的级别
368 - scaleFactor: 2, // 地图放大一级的缩放比例系数
369 - maxScale: 1.4, // 最大放大比例
370 - minScale: 0.8 // 最小放大比例
371 - },
372 - label: {
373 - content: coord.toiletInfo[i].name,
374 - position: 'TM',
375 - minZoom: 18
376 - }
377 - }],
378 - zoomStyleMapping
379 }); 336 });
380 if (clickListener) { 337 if (clickListener) {
381 marker.off('click', clickListener) 338 marker.off('click', clickListener)
382 } 339 }
383 // 绑定景点的点击事件 - 文字出现才能触发 340 // 绑定景点的点击事件 - 文字出现才能触发
384 var clickListener = marker.on('click', (e) => { 341 var clickListener = marker.on('click', (e) => {
385 - this.positionLiteMarker(coord.toiletInfo[i]); 342 + // 不同弹框类型
386 - }) 343 + if (entity_info[i].window_type === 'normal') {
387 - // 344 + this.positionMarker(entity_info[i])
388 - this.toiletInfo.push(marker); 345 + } else {
389 - 346 + this.positionLiteMarker(entity_info[i])
390 - })
391 - this.map.add(this.toiletInfo);
392 - },
393 - loadWarnMaker() { // 加载预警标记
394 - var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
395 - _.each(coord.warnInfo, (x, i) => {
396 - var marker = new AMap.ElasticMarker({
397 - position: coord.warnInfo[i].position,
398 - zooms: [17, 19],
399 - styles: [{
400 - icon: {
401 - img: coord.warnInfo[i].icon,
402 - size: [28, 28], // 可见区域的大小
403 - anchor: 'bottom-center', // 锚点
404 - fitZoom: 14, // 最合适的级别
405 - scaleFactor: 2, // 地图放大一级的缩放比例系数
406 - maxScale: 1.4, // 最大放大比例
407 - minScale: 0.8 // 最小放大比例
408 - },
409 - label: {
410 - content: coord.warnInfo[i].name,
411 - position: 'TM',
412 - minZoom: 18
413 - }
414 - }],
415 - zoomStyleMapping
416 - });
417 - if (clickListener) {
418 - marker.off('click', clickListener)
419 - }
420 - // 绑定景点的点击事件 - 文字出现才能触发
421 - var clickListener = marker.on('click', (e) => {
422 - this.positionWarnMarker(coord.warnInfo[i]);
423 - })
424 - //
425 - this.warnInfo.push(marker);
426 -
427 - })
428 - this.map.add(this.warnInfo);
429 - },
430 - loadActivityMaker() { // 加载活动标记
431 - var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
432 - _.each(coord.activityInfo, (x, i) => {
433 - var marker = new AMap.ElasticMarker({
434 - position: coord.activityInfo[i].position,
435 - zooms: [17, 19],
436 - styles: [{
437 - icon: {
438 - img: coord.activityInfo[i].icon,
439 - size: [28, 28], // 可见区域的大小
440 - anchor: 'bottom-center', // 锚点
441 - fitZoom: 14, // 最合适的级别
442 - scaleFactor: 2, // 地图放大一级的缩放比例系数
443 - maxScale: 1.4, // 最大放大比例
444 - minScale: 0.8 // 最小放大比例
445 - },
446 - label: {
447 - content: coord.activityInfo[i].name,
448 - position: 'TM',
449 - minZoom: 18
450 - }
451 - }],
452 - zoomStyleMapping
453 - });
454 - if (clickListener) {
455 - marker.off('click', clickListener)
456 } 347 }
457 - // 绑定景点的点击事件 - 文字出现才能触发
458 - var clickListener = marker.on('click', (e) => {
459 - this.positionLiteMarker(coord.activityInfo[i]);
460 }) 348 })
461 - // 349 + // marker合集
462 - this.activityInfo.push(marker); 350 + this.markerSum.push(marker);
463 -
464 }) 351 })
465 - this.map.add(this.activityInfo); 352 + this.map.add(this.markerSum);
466 }, 353 },
467 - loadPublicMaker() { // 加载公共设施标记 354 + removeLayer () {
468 - var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 355 + this.map.remove(this.markerSum);
469 - _.each(coord.publicInfo, (x, i) => {
470 - var marker = new AMap.ElasticMarker({
471 - position: coord.publicInfo[i].position,
472 - zooms: [17, 19],
473 - styles: [{
474 - icon: {
475 - img: coord.publicInfo[i].icon,
476 - size: [28, 28], // 可见区域的大小
477 - anchor: 'bottom-center', // 锚点
478 - fitZoom: 18, // 最合适的级别
479 - scaleFactor: 2, // 地图放大一级的缩放比例系数
480 - maxScale: 1.4, // 最大放大比例
481 - minScale: 0.8 // 最小放大比例
482 - },
483 - label: {
484 - content: coord.publicInfo[i].name,
485 - position: 'TM',
486 - minZoom: 18
487 - }
488 - }],
489 - zoomStyleMapping
490 - });
491 - if (clickListener) {
492 - marker.off('click', clickListener)
493 - }
494 - // 绑定景点的点击事件 - 文字出现才能触发
495 - var clickListener = marker.on('click', (e) => {
496 - this.positionLiteMarker(coord.publicInfo[i]);
497 - })
498 - //
499 - this.publicInfo.push(marker);
500 -
501 - })
502 - this.map.add(this.publicInfo);
503 }, 356 },
504 setMapBoundary() { // 地图描边 357 setMapBoundary() { // 地图描边
505 new AMap.Polygon({ 358 new AMap.Polygon({
...@@ -788,46 +641,6 @@ export default { ...@@ -788,46 +641,6 @@ export default {
788 // this.lockMapBounds() 641 // this.lockMapBounds()
789 642
790 }, 643 },
791 - handleLayer (key) { // 构建图层显示结构
792 - const arr = ['Toilet', 'Activity', 'Public', 'Spot', 'Warn'];
793 - const filteredArr = arr.filter(item => item !== key);
794 - // 删除其他图层
795 - filteredArr.forEach(element => {
796 - this[`remove${element}Layer`]()
797 - });
798 - // 加载地图标记
799 - this[`load${key}Maker`]();
800 - },
801 - setSpotLayer() { // 设置景点图层
802 - this.handleLayer('Spot')
803 - },
804 - setToiletLayer() { // 设置卫生间图层
805 - this.handleLayer('Toilet')
806 - },
807 - setActivityLayer() { // 设置活动图层
808 - this.handleLayer('Activity')
809 - },
810 - setPublicLayer() { // 设置公共图层
811 - this.handleLayer('Public')
812 - },
813 - setWarnLayer() { // 设置预警图层
814 - this.handleLayer('Warn')
815 - },
816 - removeSpotLayer() { // 删除景点标记
817 - this.map.remove(this.spotInfo);
818 - },
819 - removeToiletLayer() { // 删除景点标记
820 - this.map.remove(this.toiletInfo);
821 - },
822 - removeActivityLayer() { // 删除活动标记
823 - this.map.remove(this.activityInfo);
824 - },
825 - removePublicLayer() { // 删除公共标记
826 - this.map.remove(this.publicInfo);
827 - },
828 - removeWarnLayer() { // 删除预警标记
829 - this.map.remove(this.warnInfo);
830 - },
831 // 限制地图范围 644 // 限制地图范围
832 lockMapBounds() { 645 lockMapBounds() {
833 // var bounds = this.map.getBounds(); 646 // var bounds = this.map.getBounds();
...@@ -903,37 +716,6 @@ export default { ...@@ -903,37 +716,6 @@ export default {
903 this.dialog_text = '内部设施'; 716 this.dialog_text = '内部设施';
904 } 717 }
905 }, 718 },
906 - setNavLayer({ key }, index) { // 选择地图图层显示
907 - this.isActive = index;
908 - if (key === 'spot') {
909 - this.navName = 'spotInfo'
910 - this.setSpotLayer()
911 - }
912 - if (key === 'toilet') {
913 - this.navName = 'toiletInfo'
914 - this.setToiletLayer()
915 - }
916 - if (key === 'activity') {
917 - this.navName = 'activityInfo'
918 - this.setActivityLayer()
919 - }
920 - if (key === 'public') {
921 - this.navName = 'publicInfo'
922 - this.setPublicLayer()
923 - }
924 - if (key === 'warn') {
925 - this.navName = 'warnInfo'
926 - this.setWarnLayer()
927 - }
928 - this.closeInfoWindow();
929 - setTimeout(() => {
930 - // 地图zooms调整
931 - this.map.setZoom(18);
932 - // this.map.setZoomAndCenter(18, [this.xys_lng, this.xys_lat]);
933 - this.map.setZoomAndCenter(18, [120.587382, 31.313900]);
934 - }, 100);
935 - this.removeNavRoute()
936 - },
937 handleSafeRoute(status) { // 打开/关闭逃生路线线 719 handleSafeRoute(status) { // 打开/关闭逃生路线线
938 if (status) { 720 if (status) {
939 this.addSafeRoute() 721 this.addSafeRoute()
......