PageSourceSearch

https://malan-777.github.io/

html malan-777.github.io collected 2026-10-03 09:33:22 UTC 45,621 bytes, 1,084 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <meta charset="UTF-8" />
5        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7        
7<script src="./plugins/layui/layui.js"></script>
7
8        <link rel="stylesheet" href="./plugins/layui/css/layui.css" />
9        <link rel="stylesheet" href="./src/styles/page3.css" />
10
11        <link rel="stylesheet" href="./plugins/swiper/swiper-bundle.min.css" />
12        
12<script src="./plugins/swiper/swiper-bundle.min.js"></script>
12
13
14        <!-- 高德api -->
15        
15<script type="text/javascript">
16            window._AMapSecurityConfig = {
17                securityJsCode: "b8ebd424c760b6e6decfa854ba80c32a",
18            }
19        </script>
19
20        
20<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
20
21        
21<script src="https://webapi.amap.com/maps?v=2.0&key=b2665e76905530969cb6a830bf3e4c45&plugin=AMap.DistrictSearch,AMap.MouseTool"></script>
21
22
23        <title>Urban Streetscapes</title>
24
25        <style>
26            /* 1. font-face 注册  2. font-family:使用 */
27            @font-face {
28                font-family: "BigShouldersInlineText-Black", "PingFang";
29                src: url("static/BigShouldersInlineText-Black.ttf"), url("static/PingFang.ttc");
30            }
31
32            * {
33                box-sizing: border-box;
34                margin: 0;
35                padding: 0;
36            }
37
38            p {
39                display: inline;
40            }
41
42            body,
43            html {
44                height: 100%;
45                overflow: hidden;
46            }
47
48            .swiper {
49                height: 100vh;
50            }
51
52            .swiper-slide {
53                height: 100vh;
54                display: flex;
55                flex-direction: column;
56                overflow: hidden;
57            }
58
59            /* home_1页面内容 */
60
61            .home_pre {
62                width: 100%;
63                min-height: 100vh;
64                background: url("static/bg1.jpg") no-repeat center;
65                background-size: cover;
66                overflow: hidden;
67                display: flex;
68                flex-direction: column;
69                animation: bg 5s ease-in-out;
70                position: relative;
71                justify-content: center;
72            }
73
74            /* .home_pre > .content {
75                width: 100%;
76                position: absolute;
77                z-index: 1;
78                text-align: center;
79                color: rgb(250, 250, 250);
80                margin-top: -18%;
81                letter-spacing: 1px;
82                animation: title-animation 3.5s ease-in-out forwards;
83            }
84
85            .home_pre > .content > .heading {
86                font-family: "BigShouldersInlineText-Black";
87                font-weight: bolder;
88                font-size: 200px;
89                white-space: nowrap;
90                text-shadow: 4px 4px 4px #000000aa;
91            }
92
93            .home_pre::before {
94                width: 100%;
95                height: 100%;
96                content: "";
97                position: absolute;
98                animation: bg2 5s ease-in-out;
99                background: url("static/preground.png");
100                inset: 0;
101                background-repeat: no-repeat;
102                background-position: center;
103                background-size: cover;
104                overflow: hidden;
105                z-index: 2;
106            }
107
108            @media screen and (max-width: 768px) {
109                .home_pre > .content > .heading {
110                    font-size: 60px;
111                }
112            }
113
114            @media screen and (max-width: 992px) {
115                .home_pre > .content > .heading {
116                    font-size: 100px;
117                }
118            }
119
120            @media screen and (min-height: 1050px) {
121                .home_pre {
122                    font-size: 18px;
123                }
124            }
125
126            @keyframes bg {
127                0% {
128                    background-position: center -7em;
129                    opacity: 0;
130                }
131
132                50% {
133                    opacity: 1;
134                }
135
136                100% {
137                    background-position: center;
138                }
139            }
140
141            @keyframes bg2 {
142                0% {
143                    background-position: center -4em;
144                    opacity: 1;
145                }
146
147                50% {
148                    opacity: 1;
149                }
150
151                100% {
152                    background-position: center;
153                }
154            }
155
156            @keyframes title-animation {
157                from {
158                    transform: translateY(-30%);
159                }
160
161                to {
162                    transform: translateY(-10%);
163                }
164            } */
165
166            /* home_2页面内容 */
167
168            .home {
169                padding: 5px 40px 5px 50px;
170                width: 100%;
171
172                background-color: rgb(240, 240, 240);
173                background-position: right;
174                background-size: cover;
175                overflow: auto;
176
177                display: flex;
178                flex-direction: column;
179            }
180
181            .home > .intro_pic {
182                width: 100%;
183                margin-bottom: 10px;
184            }
185
186            .home > .content {
187                padding: 0 100px 0 100px;
188                width: 100%;
189            }
190
191            .home > .content ::selection {
192                background-color: rgb(207, 111, 9);
193            }
194
195            /* 嵌入文本中的容器 */
196            .content_embedded {
197                float: left;
198                margin: 0 20px 20px 0;
199                padding-top: 10px;
200            }
201
202            .content_embedded > .content_pic {
203                margin-top: -130px;
204                width: 400px;
205            }
206
207            .content_embedded > .video_area > video {
208                padding-top: 30px;
209                width: 500px;
210            }
211
212            .home > .content > .text_area_1 {
213                flex: 1;
214                /* 下外边距 */
215                /* margin-bottom: 1px; */
216                margin-top: 20px;
217                text-align: center;
218                line-height: 60px;
219                font-weight: bold;
220                font-size: 30px;
221                color: #444444;
222            }
223
224            .home > .content > .text_area_2 {
225                /* 下外边距 */
226                font-family: "HarmonyOS_Sans_Thin";
227                text-align: justify;
228                margin-top: 15px;
229                margin-bottom: 5px;
230                line-height: 30px;
231                font-weight: normal;
232                font-size: 16px;
233                color: #444444;
234            }
235
236            .home > .content > .text_area_2 > .pic_text {
237                /* 下外边距 */
238                font-family: "HarmonyOS_Sans_Thin";
239                text-align: left;
240                margin-top: 5px;
241                margin-bottom: 5px;
242                line-height: 10px;
243                font-weight: normal;
244                font-size: 13px;
245                color: #444444;
246            }
247
248            /* gallery */
249            .content_gallery {
250                display: flex;
251                width: 50%;
252                gap: 10px;
253            }
254
255            .content_gallery > .gallery_item {
256                flex: 1;
257                display: block;
258                clear: both;
259                margin-top: 10px;
260            }
261
262            .gallery_item > img {
263                width: 100%;
264            }
265
266            .home > .content > .video_area {
267                overflow: hidden;
268            }
269
270            /* 视频和文字统一设置样式 */
271            .text_area_1,
272            .text_area_2,
273            .video_area {
274                /* 圆角 */
275                border-radius: 0px;
276                /* 内边距 */
277                padding: 3px;
278            }
279
280            /*  ---------------------------------------------- 切换按钮 ------------------------------------- */
281            /* 第一页 */
282            .lang_buttons {
283                display: flex;
284                flex-direction: column;
285                justify-content: center;
286                align-items: center;
287                margin-top: auto;
288                width: 100%;
289                z-index: 3;
290            }
291
292            .lang_btn {
293                color: rgb(207, 111, 9);
294                background: #fff;
295                width: 20%;
296                height: 30px;
297                padding: 8px 20px;
298                border-radius: 3em;
299                font-weight: bold;
300                transition: all ease-in-out 0.15s;
301                display: flex;
302                justify-content: center;
303                align-items: center;
304                cursor: pointer;
305                margin-top: auto;
306                margin: auto 10px 100px 10px;
307                border: none;
308            }
309
310            .lang_btn:nth-child(1) {
311                margin-bottom: 15px;
312            }
313
314            .lang_btn:nth-child(2) {
315                margin-bottom: 100px;
316            }
317
318            .lang_btn.white {
319                color: rgb(207, 111, 9);
320            }
321
322            .lang_btn.white:hover {
323                cursor: auto;
324                color: #fff;
325                background-color: rgb(207, 111, 9);
326            }
327
328            /* --------------------第二页----------------------- */
329            .page_menu {
330                display: flex;
331                justify-content: right;
332                align-items: center;
333            }
334
335            .page_change_btn {
336                width: 15%;
337                height: 40px;
338                padding: 5px 5px;
339                border-radius: 2px;
340                border: none;
341                font-weight: light;
342                transition: all ease-in-out 0.15s;
343                display: flex;
344                justify-content: right;
345                align-items: center;
346                cursor: pointer;
347            }
348
349            /* 按钮内图标 */
350            .page_change_btn > .menu_icon {
351                color: #fff;
352                height: 1rem;
353                width: 1rem;
354                margin: 20px 10px;
355            }
356
357            /* 设置文字颜色为浅色,hover后浅色 */
358            .page_change_btn.white {
359                color: #444444;
360            }
361
362            .page_change_btn.white:hover {
363                color: rgb(207, 111, 9);
364                background-color: rgba(255, 255, 255, 0.149);
365            }
366
367            /* 图标均用向下的图标,向上设置旋转180°*/
368            .page_change_btn.pre > .menu_icon {
369                /* color: #bd1c1c; */
370                transform: rotate(180deg);
371            }
372
373            /* 设置文字颜色为深色,hover后深色 */
374
375            .page_change_btn.black {
376                color: #444444;
377            }
378
379            .page_change_btn.black:hover {
380                color: rgb(207, 111, 9);
381                /* background-color: rgba(255, 255, 255, 0.149); */
382            }
383
384            /* 图标均用向下的图标,向上设置旋转180°*/
385            .page_change_btn.pre > .menu_icon {
386                color: #444444;
387                transform: rotate(180deg);
388            }
389
390            /* --------------------第三页------------------------------ */
391            .page3_title {
392                font-family: "PingFang";
393                font-size: 25px;
394                text-align: center;
395                font-weight: lighter;
396            }
397
398            /* 滑块内部样式 */
399            .range_btn_group {
400                display: flex;
401                align-items: center;
402                justify-content: center;
403                font-family: "PingFangSC-Thin";
404                margin-bottom: 18px;
405                font-size: 4px;
406                color: #444444;
407            }
408
409            .range_item {
410                border-bottom: 1px solid rgba(0, 0, 0, 0.25);
411                padding-bottom: 10px;
412                margin-bottom: 20px;
413            }
414
415            .page_intro_1 {
416                width: 95%;
417                padding-top: 5px;
418                padding-bottom: 5px;
419                display: flex;
420                justify-content: left;
421                align-items: center;
422                line-height: 28px;
423                font-size: 15px;
424                font-family: "PingFangSC-Regular";
425                text-align: justify;
426                color: #444444;
427            }
428
429            .page_intro_2 {
430                width: 95%;
431                padding-top: 5px;
432                padding-bottom: 5px;
433                display: flex;
434                justify-content: right;
435                align-items: center;
436                line-height: 28px;
437                font-size: 15px;
438                font-family: "PingFangSC-Thin";
439                text-align: justify;
440                color: #444444;
441            }
442
443            .page3_subtitle {
444                padding-bottom: 5px;
445                align-items: center;
446                font-size: 20px;
447                text-align: center;
448                color: #444444;
449                font-family: "PingFangSC-Thin";
450            }
451
452            .page_intro_collapse.hidden {
453                display: none;
454            }
455
456            .page_intro_menu {
457				background-color: #4444442b;
458                text-align: center;
459				/* border: none; */
460				cursor: pointer;
461				transition: all ease-in-out 0.15s;
462				color: #444444;
463            }
464
465            .page_intro_menu > page_intro_menu_btn {
466                width: 100px;
467                height: 30px;
468                margin: 0 auto;
469            }
470
471			.page_intro_menu:hover {
472                color: #fff;
473				background-color: rgb(207, 111, 9);
474            }
475        </style>
476    </head>
477
478    <body>
479        <div class="swiper swiper-no-swiping">
480            <div class="swiper-wrapper">
481                <div class="swiper-slide">
482                    <div class="home_pre">
483                        <!-- <div class="content">
484                            <div class="heading">HONG KONG</div>
485                        </div> -->
486                        <div class="lang_buttons">
487                            <button id="lang-btn" class="lang_btn next white" data-lang="en">EXPLORE(Englishg)</button>
488                            <button id="lang-btn" class="lang_btn next white" data-lang="zh">探索(中文)</button>
489                        </div>
490                    </div>
491                </div>
492
493                <div class="swiper-slide">
494                    <div class="home">
495                        <div class="page_menu">
496                            <div class="page_change_btn pre black" id="pre-page">
497                                <img class="menu_icon" src="static/icon/next_black.svg" />
498                                <p lang-id="page_change_1">Last Page</p>
499                            </div>
500                        </div>
501
502                        <img class="intro_pic" src="./static/hongkong3.jpg" alt="" />
503                        <div class="content">
504                            <!-- 嵌入容器 + 图片 -->
505                            <div class="content_embedded">
506                                <img class="content_pic" lang-id="TitlePic" />
507                            </div>
508
509                            <!-- 文本内容 -->
510                            <div class="text_area_1">
511                                <p lang-id="contentTitle">基于 视觉复杂度 的 香港"城市街景索引"</p>
512                            </div>
513                            <div class="text_area_2">
514                                <p lang-id="contentText_1">正文1</p>
515                                <!-- 多张图片并排排列的图片墙 -->
516                                <div class="content_gallery">
517                                    <div class="gallery_item">
518                                        <img src="./static/page2-0a.png" />
519                                    </div>
520                                </div>
521                                <div class="pic_text">
522                                    <p lang-id="picText_0a">物质构成相似的街景却有着完全不同的视觉感受</p>
523                                </div>
524
525                                <div class="content_gallery">
526                                    <div class="gallery_item">
527                                        <img src="./static/page2-0b.png" />
528                                    </div>
529                                </div>
530                                <div class="pic_text">
531                                    <p lang-id="picText_0b"></p>
532                                </div>
533
534                                <div class="content_gallery">
535                                    <div class="gallery_item">
536                                        <img src="./static/page2-0c.png" />
537                                    </div>
538                                </div>
539                                <div class="pic_text">
540                                    <p lang-id="picText_0c"></p>
541                                </div>
542
543                                <p lang-id="contentText_2">正文2</p>
544                                <!-- 多张图片并排排列的图片墙 -->
545                                <div class="content_gallery">
546                                    <div class="gallery_item">
547                                        <img src="./static/page2-1a.png" />
548                                    </div>
549                                </div>
550                                <div class="pic_text">
551                                    <p lang-id="picText_1">“安全性”由低到高的街景</p>
552                                    <a href="https://ieeexplore.ieee.org/document/6910072/" lang-id="picText_2"> (图片来源:Nikhil Naik, et al, 2014</a>
553                                </div>
554
555                                <div class="content_gallery">
556                                    <div class="gallery_item">
557                                        <img src="./static/page2-1b.png" />
558                                    </div>
559                                </div>
560
561                                <div class="pic_text">
562                                    <p lang-id="picText_3">“视觉质量”感知由低到高的街景</p>
563                                    <a href="https://journals.sagepub.com/doi/10.1177/2399808319828734" lang-id="picText_4"> (图片来源:Yu Ye, et al, 2019)</a>
564                                </div>
565
566                                <div class="content_gallery">
567                                    <div class="gallery_item">
568                                        <img src="./static/page2-1c.png" />
569                                    </div>
570                                </div>
571
572                                <div class="pic_text">
573                                    <p lang-id="picText_5">“美观性”感知由低到高的街景</p>
574                                    <a href="https://link.springer.com/chapter/10.1007/978-3-319-46448-0_12" lang-id="picText_6"> (图片来源:Abhimanyu Dubey, et al, 2016)</a>
575                                </div>
576
577                                <div class="content_gallery">
578                                    <div class="gallery_item">
579                                        <img src="./static/page2-1d.png" />
580                                    </div>
581                                </div>
582
583                                <div class="pic_text">
584                                    <p lang-id="picText_7">“疗愈性”感知由低到高的街景</p>
585                                    <a
586                                        href="https://kns.cnki.net/kcms2/article/abstract?v=3uoqIhG8C44YLTlOAiTRKibYlV5Vjs7i8oRR1PAr7RxjuAJk4dHXoklUCXziRe4nN7iQdbUpdIjhufeCZIXbCx8HnDWJU4U9&uniplatform=NZKPT"
587                                        lang-id="picText_8"
588                                    >
589                                        (图片来源:徐磊青, 等, 2020)</a
590                                    >
591                                </div>
592
593                                <p lang-id="contentText_3">正文3</p>
594
595                                <div class="content_gallery">
596                                    <div class="gallery_item">
597                                        <img src="./static/page2-2a.png" />
598                                    </div>
599                                </div>
600                                <div class="content_gallery">
601                                    <div class="gallery_item">
602                                        <img src="./static/page2-2b.png" />
603                                    </div>
604                                </div>
605
606                                <div class="pic_text">
607                                    <p lang-id="picText_9">物质构成相似的街景却有着完全不同的视觉感受</p>
608                                </div>
609
610                                <!-- 嵌入容器 + 视频 --> 
611                                <div class="content_embedded">
612                                    <div class="video_area">
613                                        <video src="static/TRIAL_myMovie_720p.mp4" controls></video>
614                                    </div>
615                                </div>
616                                <p lang-id="contentText_4">正文3</p>
617                                <a href="https://doi.org/10.1016/j.buildenv.2023.110549" lang-id="contentText_5"> </a>
618                                <p lang-id="contentText_6">正文3</p>
619                            </div>
620                        </div>
621
622                        <div class="page_menu">
623                            <div class="page_change_btn next white" id="next-page">
624                                <img class="menu_icon" src="static/icon/next_black.svg" alt="" />
625                                <p lang-id="page_change_2">Next Page</p>
626                            </div>
627                        </div>
628                    </div>
629                </div>
630                <div class="swiper-slide">
631                    <div class="app">
632                        <div class="aside" id="aside">
633                            <!-- 侧边栏内容 -->
634                            <div class="page3_title" lang-id="indexing">
634HongKong Streetscape Indexing</div>
635                            <div class="range_container">
636                                <div class="range_item">
637                                    <div class="label_container">
638                                        <div class="range_label" id="x-label">
639                                            <p lang-id="texture">纹理:</p>
640                                            <p class="label_container_tips" lang-id="texture_tip">tips</p>
641                                        </div>
642                                    </div>
643                                    <div class="range_btn_group">
644                                        <span lang-id="range_btn_low">低</span>
645                                        <div class="range_btn" id="range-btn-x"></div>
646                                        <span lang-id="range_btn_hign">高</span>
647                                    </div>
648                                </div>
649                                <div class="range_item">
650                                    <div class="label_container">
651                                        <div class="range_label" id="y-label">
652                                            <p lang-id="shape">形状:</p>
653                                            <p class="label_container_tips" lang-id="shape_tip">tips</p>
654                                        </div>
655                                    </div>
656                                    <div class="range_btn_group">
657                                        <span lang-id="range_btn_low">低</span>
658                                        <div class="range_btn" id="range-btn-y"></div>
659                                        <span lang-id="range_btn_hign">高</span>
660                                    </div>
661                                </div>
662                                <div class="range_item">
663                                    <div class="label_container">
664                                        <div class="range_label" id="z-label">
665                                            <p lang-id="color">色彩:</p>
666                                            <p class="label_container_tips" lang-id="color_tip">tips</p>
667                                        </div>
668                                    </div>
669                                    <div class="range_btn_group">
670                                        <span lang-id="range_btn_low">低</span>
671                                        <div class="range_btn" id="range-btn-z"></div>
672                                        <span lang-id="range_btn_hign">高</span>
673                                    </div>
674                                </div>
675                                <div class="layui-btn-container">
676                                    <div class="layui-btn layui-btn-primary layui-btn-custom" id="draw-btn" lang-id="find_1">Find Geo-location</div>
677                                    <div class="layui-btn layui-btn-primary layui-btn-custom" id="init-btn" lang-id="default">DEFAULT</div>
678                                    <div class="layui-btn layui-btn-primary layui-btn-custom" id="draw-polygon" lang-id="find_2">绘制</div>
679                                    <div class="layui-btn layui-btn-primary layui-btn-custom" id="hidden-polygon" lang-id="show_hide">隐藏/显示</div>
680                                    <div class="layui-btn layui-btn-primary layui-btn-custom" id="show-color" lang-id="location_streetscape">显示颜色遮罩和颜色地图标点</div>
681                                </div>
682                            </div>
683                            <div class="page3_subtitle" lang-id="sub_title_2">
684                                <p>sub-title</p>
685                            </div>
686                            <div id="container" style="height: 500px"></div>
687                        </div>
688                        <div class="main">
689                            <!-- 侧边栏尺寸控制菜单 -->
690                            <div id="aside_menu" class="aside_menu" onclick="changeAside(event)">
691                                <svg t="1692068489288" class="icon" viewB
691ox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1446" width="200" height="200">
692                                    <path
693                                        d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"
694                                        p-id="1447"
695                                    ></path>
696                                </svg>
697                            </div>
698
699                            <div class="page_menu">
700                                <div class="page_change_btn pre black" id="pre-page">
701                                    <img class="menu_icon" src="static/icon/next_black.svg" />
702                                    <p lang-id="page_change_1">Last Page</p>
703                                </div>
704                            </div>
705                            <div class="page_intro_container">
706                                <div class="page_intro_1" lang-id="indexing_intro_1">
707                                    <p>intro_1</p>
708                                </div>
709                                <div class="page_intro_collapse hidden" id="page-intro-collapse-target">
710                                    <hr />
711                                    <div class="page_intro_1" lang-id="indexing_intro_2">
712                                        <p>intro_2</p>
713                                    </div>
714                                    <div class="page_intro_2" lang-id="indexing_intro_3">
715                                        <p>intro_3</p>
716                                    </div>
717                                    <div class="page_intro_1" lang-id="indexing_intro_4">
718                                        <p>intro_4</p>
719                                    </div>
720                                    <div class="page_intro_2" lang-id="indexing_intro_5">
721                                        <p>intro_5</p>
722                                    </div>
723									<div class="page_intro_1" lang-id="indexing_intro_6">
724                                        <p>intro_6</p>
725                                    </div>
726                                    <div class="page_intro_2" lang-id="indexing_intro_7">
727                                        <p>intro_7</p>
728                                    </div>
729                                </div>
730                                <div class="page_intro_menu">
731                                    <div class="page_intro_menu_btn" id="page-intro-collapse" lang-id="fold_unfold">折叠/展开</div>
732                                </div>
733                                <hr />
734                            </div>
735                            <div class="page3_subtitle" lang-id="sub_title_1">
736                                <p>sub-title</p>
737                            </div>
738
739                            <!-- 图片渲染容器 -->
740                            <div class="pics" id="pics"></div>
741                            <hr />
742                        </div>
743                    </div>
744                </div>
745            </div>
746        </div>
747
748        
748<script>
749            function asideChangeFunction() {
750                let asideFlex = 1
751
752                return (event) => {
753                    const target = event.target
754                    const menu = document.getElementById("aside_menu")
755                    const aside = document.getElementById("aside")
756
757                    if (asideFlex === 1) {
758                        asideFlex = 3
759                        aside.style.flex = 3
760                        menu.classList.add("open")
761                    } else {
762                        asideFlex = 1
763                        aside.style.flex = 1
764                        menu.classList.remove("open")
765                    }
766                }
767            }
768
769            const changeAside = asideChangeFunction()
770        </script>
770
771
772        
772<script type="module">
773            import resolvePictures from "./src/resolvePictures.js"
774            import pictureFunctionComponent from "./src/pictrueFunctionComponent.js"
775            import rangeFunctionComponent from "./src/rangeFunctionComponent.js"
776            import resolveJson from "./src/resolveJson.js"
777            import resolveXLSX from "./src/resolveXLSX.js"
778            import readData from "./src/readData.js"
779            import { useRangeInput, useRangeInputCallback, ranges } from "./src/useRangeInput.js"
780            import { loadMap, readCoordinate } from "./src/loadMap.js"
781            import useSwiper from "./src/useSwiper.js"
782
783            //上一页和下一页按钮
784            const prePage = document.querySelectorAll("#pre-page")
785            const nextPage = document.querySelectorAll("#next-page")
786
787            //页面滚动
788            const { slideNext, slidePrev } = useSwiper({
789                query: ".swiper",
790            })
791
792            for (let i = 0; i < prePage.length; i++) {
793                prePage[i].onclick = () => {
794                    slidePrev()
795                }
796            }
797
798            for (let i = 0; i < nextPage.length; i++) {
799                nextPage[i].onclick = () => {
800                    slideNext()
801                }
802            }
803
804            const LANGUAGE_KEY = "_lang"
805            //加载语言的内容
806            async function loadLangContent() {
807                const lang = window.localStorage.getItem(LANGUAGE_KEY) || "en" || "zh"
808                const langConfig = await import("./langConfig.js").then((res) => res.default)
809                const elementIds = Object.keys(langConfig)
810
811                const targetAndContent = []
812
813                elementIds.forEach((elementId) => {
814                    const target = document.querySelectorAll(`[lang-id=${elementId}]`)
815                    let isConnection = false
816                    let isImg = false
817
818                    if (!(target instanceof HTMLElement)) {
819                        isConnection = true
820                    }
821
822                    if (isConnection) {
823                        for (let i = 0; i < target.length; i++) {
824                            targetAndContent.push({
825                                target: target[i],
826                                content: langConfig[elementId][lang],
827                                attribute: langConfig[elementId]["attr"] ? langConfig[elementId]["attr"] : null,
828                            })
829                        }
830                    } else {
831                        targetAndContent.push({
832                            target: target[i],
833                            content: langConfig[elementId][lang],
834                            attribute: langConfig[elementId]["attr"] ? langConfig[elementId]["attr"] : null,
835                        })
836                    }
837                })
838
839                targetAndContent.forEach(({ target, content, attribute }) => {
840                    const type = target.tagName
841
842                    if (attribute !== null) {
843                        target.setAttribute(attribute, content)
844                    } else {
845                        if (type === "IMG") {
846                            target.src = content
847                        } else {
848                            target.innerHTML = content
849                        }
850                    }
851                })
852            }
853
854            //语言按钮
855            const langBtns = document.querySelectorAll("#lang-btn")
856            langBtns.forEach((btn) => {
857                btn.addEventListener("click", () => {
858                    window.localStorage.setItem(LANGUAGE_KEY, btn.dataset.lang || "en" || "zh")
859                    loadLangContent()
860                    slideNext()
861                })
862            })
863
864            // ---------------------------------加载可自定义配置文件---------------------------------------------
865            resolveJson("./config.json").then(async (config) => {
866                // ------------------------------统一获取dom元素------------------------------------------
867                const container = document.getElementById("pics")
868                const rangeContainer = document.getElementById("range-container")
869                // const load = document.getElementById("load")
870                const axisX = document.getElementById("x-label")
871                const axisY = document.getElementById("y-label")
872                const axisZ = document.getElementById("z-label")
873                const initBtn = document.getElementById("init-btn")
874                const drawBtn = document.getElementById("draw-btn")
875                const drawPolygonElement = document.getElementById("draw-polygon")
876                const hiddenPolygonElement = document.getElementById("hidden-polygon")
877                const showColorElement = document.getElementById("show-color")
878                const pageIntroCollapse = document.getElementById("page-intro-collapse")
879
880                const xyzDatas = [] //加载完的3个表格的数据
881
882                // ----------------------------侧边栏坐标范围条-----------------------------------------
883                function setPosition(targetXYZ) {
884                    const { targetX, targetY, targetZ } = targetXYZ
885                    //   axisX.innerText = `纹理 Texture:[${targetX[0]},${targetX[1]}]`;
886                    //   axisY.innerText = `形状 Shape:[${targetY[0]},${targetY[1]}]`;
887                    //   axisZ.innerText = `色彩 Color:[${targetZ[0]},${targetZ[1]}]`;
888                }
889
890                const sliders = useRangeInput(
891                    [
892                        {
893                            id: "#range-btn-x",
894                            index: "x",
895                        },
896                        {
897                            id: "#range-btn-y",
898                            index: "y",
899                        },
900                        {
901                            id: "#range-btn-z",
902                            index: "z",
903                        },
904                    ],
905                    {
906                        defaultRangeLeft: config.rangeDefaultValue[0][0],
907                        defaultRangeRight: config.rangeDefaultValue[0][1],
908                    },
909                    () => {
910                        const defaultValue = config.rangeDefaultValue[0]
911                        setPosition({
912                            targetX: defaultValue,
913                            targetY: defaultValue,
914                            targetZ: defaultValue,
915                        })
916                    }
917                )
918
919                // color.json
920                const color = await resolveJson("./data/color.json").then((res) => JSON.parse(res))
921
922                // ---------------------------------阻塞渲染图片DOM---------------------------------------------
923                const { updateSelectIdList, updateClickIdList, render, state, highlightDegree, showDegree, hideDegree, hideColorMask, showColorMask } = pictureFunctionComponent(
924                    container,
925                    color
926                )
927                await render(config.path[0], config.count[0], config.numberPerRow[0], config) //路径和需要渲染的图片数目
928
929                // ---------------------------------加载地图和标记功能等--------------------------------------------
930                // 阻塞加载坐标数据
931                const coordinate = await readCoordinate()
932
933                const { clearAndmark, drawPolygon, colorRender, hideColorMaskRender, showColorMaskRender } = loadMap("container", {
934                    markRadius: config.markRadius[0],
935                    colorObj: color,
936                })
937
938                // 实现地图标点
939                const polygonArr = []
940                function getCoorinatesPath() {
941                    return polygonArr.map((item) => {
942                        const paths = item.data.getPath()
943                        return paths.map(({ lat, lng }) => {
944                            return [lng, lat]
945                        })
946                    })
947                }
948
949                const countArr = []
950                drawPolygon((polygonObject) => {
951                    polygonArr.push({
952                        data: polygonObject,
953                    })
954
955                    const coordinatePaths = getCoorinatesPath().filter((item) => item.length > 2)
956                    countArr.splice(0)
957                    for (let i = 0; i < config.count[0]; i++) {
958                        const currentCoordinateArr = coordinate[i]
959
960                        // 筛选在其中一个多边形中的点
961                        const res = currentCoordinateArr.filter(([lat, lng]) => {
962                            let isInside = false
963                            for (let j = 0; j < coordinatePaths.length; j++) {
964                                const inside = AMap.GeometryUtil.isPointInRing([lng, lat], [...coordinatePaths[j]])
965
966                                if (inside) isInside = true
967                            }
968
969                            return isInside
970                        }).length
971                        countArr.push(res)
972                    }
973                })
974
975                pageIntroCollapse.onclick = function () {
976                    const target = document.getElementById("page-intro-collapse-target")
977                    if (target.classList.contains("hidden")) {
978                        target.classList.remove("hidden")
979                    } else {
980                        target.classList.add("hidden")
981                    }
982                }
983
984                drawPolygonElement.onclick = function () {
985                    if (countArr.length === 0) return
986                    highlightDegree([...countArr])
987                    countArr.splice(0)
988                }
989
990                hiddenPolygonElement.onclick = () => {
991                    if (state.isDegreeMaskEnable) {
992                        hideDegree()
993                        // hideColorMask()
994                    } else {
995                        showDegree()
996                        // showColorMask()
997                    }
998                }
999
1000                let isColorRender = false
1001                showColorElement.onclick = () => {
1002                    if (!isColorRender) {
1003                        colorRender(coordinate)
1004                        isColorRender = true
1005                    }
1006
1007                    showColorMaskRender()
1008                    showColorMask()
1009                }
1010
1011                function clearPolygon() {
1012                    polygonArr.forEach((item) => {
1013                        item.data.setMap(null)
1014                    })
1015                    polygonArr.splice(0)
1016                    highlightDegree([])
1017                    countArr.splice(0)
1018                }
1019
1020                // ----------------------------坐标数据-----------------------------------------
1021                const { calcIds, setXyzDatas } = rangeFunctionComponent()
1022
1023                // ---------------------------------阻塞加载表格数据---------------------------------------------
1024                await readData("./data", ["C1.xlsx", "C2.xlsx", "C3.xlsx"]).then((res) => {
1025                    const datas = Array.from({ length: config.count[0] }).map((item, index) => {
1026                        return {
1027                            x: res[0][index],
1028                            y: res[1][index],
1029                            z: res[2][index],
1030                            id: index,
1031                        }
1032                    })
1033
1034                    // load.innerText = load.getAttribute("value-success")
1035                    // load.classList.add("success")
1036                    setXyzDatas(datas)
1037                })
1038                // ----------------------------侧边栏地图-----------------------------------------
1039
1040                //手动选择滑块之后的触发更新
1041                useRangeInputCallback(() => {
1042                    // 计算处于滑块中的内容 -> 更新处于滑块中的图片的高亮状态
1043                    const targetIds = calcIds(ranges, (targetXYZ) => {
1044                        const { targetX, targetY, targetZ } = targetXYZ
1045                        setPosition(targetXYZ)
1046                    })
1047                    updateSelectIdList(targetIds)
1048                })
1049
1050                //初始化滑块
1051                function initAxisRange() {
1052                    const rangeDefaultValue = config.rangeDefaultValue[0]
1053
1054                    ;["x", "y", "z"].forEach((index) => {
1055                        ranges[index].splice(0)
1056                        ranges[index].push(rangeDefaultValue)
1057                    })
1058                    ;[0, 1, 2].forEach((index) => {
1059                        sliders[index].setValue(rangeDefaultValue[0] * Math.pow(10, 15), 0)
1060                        sliders[index].setValue(rangeDefaultValue[1] * Math.pow(10, 15), 1)
1061                    })
1062
1063                    updateClickIdList([])
1064                    updateSelectIdList([])
1065                    drawMarker()
1066                    clearPolygon()
1067                    hideColorMask()
1068                    hideColorMaskRender()
1069                }
1070
1071                // 标记点
1072                function drawMarker() {
1073                    const markIds = [...state.selectIdList.map((selectId) => parseInt(selectId)), ...state.clickIdList.map((clickId) => parseInt(clickId))]
1074
1075                    clearAndmark(coordinate, markIds)
1076                }
1077
1078                // 绑定默认加载的点击事件
1079                initBtn.onclick = initAxisRange
1080                drawBtn.onclick = drawMarker
1081            })
1082        </script>
1082
1083    </body>
1084</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.