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.