From ed62b825cf18d43d79e86b66a605b09ed266784f Mon Sep 17 00:00:00 2001 From: wangchengming <15110151257@163.com> Date: Wed, 24 Sep 2025 16:18:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AA=92=E4=BD=93=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=B7=9D=E7=AD=89?= =?UTF-8?q?=E5=B7=A5=E5=85=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/dragTool.png | Bin 0 -> 892 bytes src/assets/images/mapArea.png | Bin 0 -> 2473 bytes src/assets/images/mapAreaHover.png | Bin 0 -> 2552 bytes src/assets/images/mapCircle.png | Bin 0 -> 2040 bytes src/assets/images/mapCircleHover.png | Bin 0 -> 2062 bytes src/assets/images/mapClearAll.png | Bin 0 -> 2044 bytes src/assets/images/mapClearAllHover.png | Bin 0 -> 2060 bytes src/assets/images/mapLine.png | Bin 0 -> 1895 bytes src/assets/images/mapLineHover.png | Bin 0 -> 1895 bytes src/assets/images/mapPoint.png | Bin 0 -> 2004 bytes src/assets/images/mapPointHover.png | Bin 0 -> 2029 bytes src/assets/images/mapRanging.png | Bin 0 -> 2114 bytes src/assets/images/mapRanginghover.png | Bin 0 -> 2174 bytes src/assets/images/mapRect.png | Bin 0 -> 1890 bytes src/assets/images/mapRectHover.png | Bin 0 -> 1895 bytes src/assets/styles/ruoyi.scss | 55 +++++ src/views/mediaLibrary/index.vue | 53 ----- src/views/mediaMap/index.vue | 260 +++++++++++++++++++++--- src/views/outdoorMedia/index.vue | 269 ++++++++++++++++++++++--- 19 files changed, 534 insertions(+), 103 deletions(-) create mode 100644 src/assets/images/dragTool.png create mode 100644 src/assets/images/mapArea.png create mode 100644 src/assets/images/mapAreaHover.png create mode 100644 src/assets/images/mapCircle.png create mode 100644 src/assets/images/mapCircleHover.png create mode 100644 src/assets/images/mapClearAll.png create mode 100644 src/assets/images/mapClearAllHover.png create mode 100644 src/assets/images/mapLine.png create mode 100644 src/assets/images/mapLineHover.png create mode 100644 src/assets/images/mapPoint.png create mode 100644 src/assets/images/mapPointHover.png create mode 100644 src/assets/images/mapRanging.png create mode 100644 src/assets/images/mapRanginghover.png create mode 100644 src/assets/images/mapRect.png create mode 100644 src/assets/images/mapRectHover.png diff --git a/src/assets/images/dragTool.png b/src/assets/images/dragTool.png new file mode 100644 index 0000000000000000000000000000000000000000..a8daccd21e642d21ff5590580cb880cbf30371f2 GIT binary patch literal 892 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/mapAreaHover.png b/src/assets/images/mapAreaHover.png new file mode 100644 index 0000000000000000000000000000000000000000..76313e77e22af2f2bb5a881f5725ab594705f680 GIT binary patch literal 2552 zcmai03p7;uA0LkpMi2WJBGVu$^YonSok6yl$zw3RFy>wiX6`f(#%q@rc~jPk{8O2z z{cp-+<&jhfd2B_gl%o2RJZe{^Z0wB6?*E)R|9j58zsLD}KHv8_H{Fxwj#SlEMIaDJ zkL_e{>1rx_Rg|RPtc7}xbkPyIGK4;Gh%lPThY-#n91Nj6ILuJU8)AYn`@0}J1VUk) zO=k!hR0_a?IasC)gB5dlQZ@o%=P2eeSrL#B6%2*4x%TLprWQ1c4cepqEva}a&jku& zZ;$0eKCv`9D>i~f0@02RC_6DA72rTZCQ8hSJ$gwOknUyII5cVrB8;#{e{_mL z^+dVAdh|Jf;H;XgO*z3gCT%7 z+3k}p>B$})CKU1j94<~utb!pKbs4}(SptYAV6fM5VA*0({G8vlQ2XJI>8bk z-~qhNR=f>>$A5%UVUQgX^F=5DurU80sI>MVQ^@?kV2}lbzjVysWUiP zd;X(cKVL~_K(<{TKIvh3d?BuMX8F?Lj0&GiK_FI?dyt*!;`=>}xJVygy@lzrnZaQl zQb~oCN3Zcv!B<>y_0nwjrwnLYYTsZh1`g>}Q;-fQ z5Y$+6Be{sA6cN`{xo@U

NlP2e<2XBt;#2`gAy|**37{(c6TvS(D@M5o^`uiu7YI zT0b+ooP1iEcsR!mEgq?`b)$8x)MkdP;1&N3Z{^Nv_HWXu2hFZmDE<$GQ zN8{z>eG@KsZcs2A>nrvT-XCgtv)RN&<4tP(hpq1$X`)*RMnKG&cANY8J+!yS)DN&) zHTRkOd6$hEl(mNKG6%wXC&asRMPn+l>xhnesjm;ET}i*|oTu(`QIDeX@-=nWY18WC zmyOXjlCp*Kt7bmnor)2qhHo@a`WJu!aYvC&cj~SurlcSeHeTy!Hh$q_fcL54F#ng5E)Ossq4(kaR~ zZDv(LW`Bz~Tl@0ejx`tO6A*84b*!ngew04`udK%iUBj2*s*c6J!A!@ z1&JQQdKQVsXB+0PPcp2AuHK_LXR;7Ew#OFl=VtoT119dJ5Y4I+-_$TC-#t(^mawYb zuLj7+PEu6*`Cx5S%FFPGM8`e$0&P8o(z>-Rx3wOJbei1RwB|@DHo2qP&&|BSg z_xn<91UrYHZQJmCDtktrH$?6u<|F#2yD@CVPO1|P+&wvw9`wjs6*uA&9XI#F{}M7t zIjM;h=+^50-K~n`XU1BU9WCsP;E9I(-whiiRVwWr4qL3Z-WwKeD4EI*8Vq%aY;H|* z?Wf$mIc^-SCJsv1H(Ag>aYz%PLyhd^Q8uVPe@UFpqLP$fXFm zXN$ggG_Mft?&NZI{lV{6j-q-oZKLl~tmG>+4#s56)2}0R1h<5QS{)s?z`FqC0TlbTRYF{TM&_ zpI=rF=I>&(U0i&E*bp$`sBaHnbX-xLg~n&hr8A58nnO{r!Iz3NGD#-Vm_?X{=Rr&Xpm z3TBlpGjvu&qq!w%+ae9mGuv0vLay=s^7|a-RE9vQuj3 zYT~|oyYlqIil)OiE9|H!s>-P(Nk#;P=s`u#oqiJ&3C)|wv~6$hZC~|XqB}s?@3K?k z%sQ7$T~tg|)4pTSZglNM;rS@?wKM&-Wv?3d22<3stoc_n&K>*JkeK${`h7mxQ@nJg zHba!}9YbdG+V_6$kG5ahFDm|@Ke#}%k zdli+eX2Z+{>Kx6qhr7v|`wY&d=ez=@byS}do&?G%AxJtgKmF$iB3AY<=HW^sS8fYB F@E2)31hoJF literal 0 HcmV?d00001 diff --git a/src/assets/images/mapCircle.png b/src/assets/images/mapCircle.png new file mode 100644 index 0000000000000000000000000000000000000000..1f1e249428448313997c412cdaf60d8c91d86290 GIT binary patch literal 2040 zcmah~2~^W&94{i`fe3i(gjhPoqfHuG+D1CAf>bSFMW}*GXj14PO>I+KI-GdoH3m;m zHg6nGov6bD6qU;GKt)Bdcz{EED2k{Pgl+0vih}MvdCPmr_kDT4-~amk|H+z&u&D$4 zkLu50Fa}CPC31T8vfX|A(9iY%6ch9^k_uK(vq%+XM0GeL03+jZKuVwqxEx2Zl!XfZj3fT-qNfI2?hT)h9EzM>yeEm#XRGEZRKs=tH)`*$UOG=r58WS_4`7%hR z4Z;)Ep=KRE%N!P|G$$!V7}M`7z}JM(1_+!&0TYp|(IX}?v(qj@?`^L^CeR6?lElpS zK`CSrKoF_J0Ur*;RzeUA2t*vN50B>qO$J~HhCql9a$z>t2Z4A9R{(stn6x(?rb6VB zkPp7-lbD%EQCb89jYcEK=*=N@2_RP_5`hp5!Z4dgu=Ob#3N^7cde1Hk5?rs;skM}v z)BrY%Xgq14#7sKU_bCwCZnGNwhceLx15KzFWeN}WJV*^Sd0bjh90F(rs6;{>ju z^fZ>+jisw3lXb&CYnC9o(Rxabf6VQ(Xnkag76;|Ho;2u`w8$z?TUc5oNQa{osf#4Z zNr#G1lk!ti5s!`%niI_>} z#!;&=L z6e7WO>P0vfq9X~QQw&7ib1Z@$?S0^4J;x&KkqgqnfVTGhq+PpS(KBG%b`KwY=pJ8O zL(i;^9?np+{3$*2yQPwVNYkCmxpm<;B8FJP{f==Tj&Qm)r24{gH_uV716?-E3}8u= z4W)VDX=&=qv+tG*JXT0{)t5W=Wi>slEx1jzb9LJ!R`C01WDfUoEYf(-_p}QB!Sml_+sEAaLbqkX(@nAGgm^P=BIb4y)wTjv@ToUC&RN(KXYyxD|e4GV97D~o;8nHyFGQtlOdcw=W4?^`AZ?3a%)WLQcLQw6$hREczky2{pOCcOHIF@ zM6#nR<*DB{`_;U(aD>64>njcN*nLfJUcYfEjoPdSfUUhMYmQd!y%y7`9~af;Vzn0! zu;wjGbG2s=+UQU`I^1%u$Se8$w*m2Ber#)XO~9di*RUf;1Ai&q8S8&;e{~M)cC7ou zVbO60PhH%zLA~lSTFPEG@`Y=F*C(b7ZJPEI({c(MHE#EC;D?L32i_JAT^`yte*OFs zr^@ddOMGH9MCGGk6T%N)`9LvDm?74R)7xjv$Z7YVJM38Pc=O>yz4uZZk@0QY)2o)c zKiR^PLgLpuCl2`W;&X|cRbZqZopKlOOwEQzO1}n|;NM`&)n?ZlmI_R_Dk&;TP+(sh zaz)d$J+E&bYvh63@bRg$XKwMYimAPzhpydq;QSoK{8cmyw(uLyXv(LinFu6^j*DyIO8_$iU0A; z?5t~F?lG3sSG3Nl`=)ryNyAsGFKxPCsW?|XcWTV${r0|#_f=}|-LJ2zcdFU)II+n2 zP=&E~hQpf^t)gtzi)(|o*Vq#QrG~U=N1K}SHhND!sPZd2TtgZCKz!7p z855lA27(XfOJUEjyvlw9&bTQYtt$;~X~E+{2)lP+i=e<^U5jAOjZK~lz9|@$TR7jH zCAgXAu>bBZYkT_0h9AessIT20%C=Qs`AK&3RdkviBSx57@qA`mKij`p8XP7$5E!@Y EU!}7ab^rhX literal 0 HcmV?d00001 diff --git a/src/assets/images/mapCircleHover.png b/src/assets/images/mapCircleHover.png new file mode 100644 index 0000000000000000000000000000000000000000..7c5fc53e475274d0c961f7b9ca1948b2150c01ba GIT binary patch literal 2062 zcmah~4Nwzj8jgSzK}X@xS}eM30JW0rCM1w-iI`;Jh&9NcA}Yv|Y)F93uA7AfP_+1i zBDF$6kO~N=Lgmy}QK)ULLKP7TXs@T`j+V-(xgOSZdWVMXEKICE4HXbih9v%fCR?6+vFg#q}S~3L(R0Nia z$KaSYdusW~;T{Dm*}Bm?yfLm?1kHk2Uy#GSN& z;wBAkpcn&b1nd^E6f%>Mfo!DDQy{1*vqsa4GO-1NEEoj|_^>^t37}Rpg`+a*j0xvj z4TNXl1a4$ZELJduWvirCPr+YmmLR6kCME{|HMf_dO>x;24#nUmGLzP@BI~&JuqZ@H z;}}EIaU_{BS@9@6$&e;JNdZCuUkEIVHyE{~*|hvO1RTW}Tn4h`7xQ2#Pbi8Lh!Fvd zz>*cP1cBk_P&KJF=(1l56(Azf@1U&qT8zQ|5UkZ8I+7+ZRse&&T_MVtI^j*NMpQ-< zgBdlr3YCFuZhV75izwu<92H7fjRj(XARLxR6yb`nAf-gC6bOTr;z=$_YBKFIOmelq za^=%|ttraU(mkG&`I-wsfi4ng3LU%Hu43T@{HDp3$D|JylhsQBPvy-&6dhB*4S* z-*Qw@cnJ8H+#|qtqF}Mdl2i3SiB()@y?UeG+P0YMhTb^0IAyuZt<`}y!4H@_Th0B$ z>AFkieF$5?VerH1+@7k?{EI$Ou+!7ZW#;$R%}|!4^J-DQsP!|8 zMBy_%<}dW|ii{Zhl7r(%g(ZhCH5V7JdE3Pk=tm7s#ZKL;#9j<{h5=sr%}$54&kmOD zU;K7Tr#a|v?-Sj5U%;=}#)ICWVZgQ3;(O)4zv%qy@g$D&!kk;TxK}d5whtQ5_e%@U zdLyR??(eI4bEvBNe>=|(b{wuq3-^CA+rM$N#CaDrK^{YSB9*KY&^4f`^Ap? zmzd0xR^r&_Wzl2u<@whdfMeHz=D81?S{f_&aOW)0e{0OIq=N*O>cOi&`?+!-x7mKo z4TxXWl=MO8%^|0 zL1fya+yFT1vWM5jg>KGWX=!h%U8;vauIdO^}{V)6ge~F+#>qRYyae0 zPIt~KTR(!;Kc=Z?hvP5y=vTpa2XAK;Hh-KT>C;CKjXyZhRvvbLbNVT9>*dq_k2s$U zH$FV-2)!PEc=-MXm1F?$n+H#wsE%v!g*BZ{2`Ck|CO`%)n*cLg}_K|^PV zG;>3s2Z+ESeZz?P785rBwcOO{3C2hgA;zG9{ zdMu;TQ{Dq@!9HJ)C8N7np;fl(rN_Mo+H1C2#EYVbniJ;T<=uSu=%{x=c@4-iKMH&z zwQX)_?Wjq3?Ul$&HZZ#TqgeA{*HgX;IFwN99sJoj@tt>?=bgyOP3bM)mwe{C-s~#f zNn4)T_Jc!FsvwbkSl64k-94!bZTe29fB)y7_7f*AbkFwA<@M(G>{!=f9kD%lG~%`A z`~7gyJ!QJj^*6Rfr4rg(4ZNcvq1JV#sNMIDG?eaYTCdo6%!OJ}IxhMXx4wLyRPm&D zR;x)`cAz*Sd6v&oum5cEr*|LR)~TxbH17M9W%oRN*NQyq$_AQq6mL}QO_tx=bsM*+ zJi|&$caFb0qV~Gl^vr)XBhBeM;Fnyu`WHafu+Zbfx^Ujt1@4(^=ej3mEz#Y{j+F%y e30ro|T*yf{k~{wNnL5G#hgO9}qGuGz`Tqwe_Z$HL literal 0 HcmV?d00001 diff --git a/src/assets/images/mapClearAll.png b/src/assets/images/mapClearAll.png new file mode 100644 index 0000000000000000000000000000000000000000..4d956919cffd5295d3c06139f19e566163698305 GIT binary patch literal 2044 zcmah~3s4hx9u9>R(c%CN_@H`Wr5J={A0&`0M4A`^cm^?KBmz1l*(C(nY}hPK0OhDs z?xI+#QsoXGysQ>mF<9#(TJfk@8BVQMM+<20QL!M1NIfmq-UfxXGi7dPcK?t0zVG** zb)=>w`p%p`lf`2BCMPM>%*u1WGhSuBRnJcl%rcKo(9&sS4sFv>I7^0+dYqd~=#01; z*I~tl7x6e2%k!Q|qouW~6{vwE1UffHU?(gLo5hNYw_9|Ee4OU$aihsB1s=H00$dX& z1=2+-NM%`u=bDmAC_JqsMPn$*H%KrbeknK3jxquSPV2aKqQGoL?NVSu7iISDYY^a0 zK&9u(WH(M7?DkyNP zfihWW6KUqU6?J;Dh?WA3r!PVvEK{;(>&rAT2?Omq3kVA!cSsXJ%rJ$s6j22e#xVnk z7vKbLrmYMXp29L&QmLlkzbi`+Q)nx##(#}X!xRorT3`~)87P;NBpvx#+ zN0XF>Bnu`po|;S2q&1hca1mI5aCzw_Ge+91;lCo_3LTA00Ve$-J|y8ILJcfJVF-o9 z5s(;#pchaTiJ5YWr-8!AZ=g)=F&(Y@zhKOO=8zPjV+vq$w<~Bd8z-!(RA{oI)p@fxUnG%)=qoXFd3er&IF2f`j`-Ll- zmg{b4ccD-PPMO}uF(pM3+=*hKrs;h_rqz4N#isWqYFaMHI0L%d^H=RUdBx0tdpk9J z%wcMLaWgZs6f>MM*UnAM%(o;fWE%T7-L;u3Uzc$%Ts9wIXYc}?@)@>Qs96c8y+Ex; z$ELV(+1U9Q$I8#2NbOPZXg2Fwc8gX-TvvzquL3GF8~S$6{B(gaYzSHVSwhLJQx}_E z*M|4rd3G5;mB{J|ZI*aldEB12gXdXWF9t(7Dc+lr@~=X2$~lzgFMr;$cxm-JKwwj& zKD2-IBP<~FlE-o;7lR3mDn44*OYH9{%{eyz8G&?s@LA&0E)v9xYRzWBud`cy@c_ z=%bOd5w-qMtFwPB@?!snJ^#4Xsn>COeJdR$v5xzk`v1z)Zd{f>^=cCE`EdJz)`-!p z^i1i!ZHG^k_rwNti+eA$UDvLDCH>!zy<#Y-cPggW0Ab$nSAQLux(KFr5}?9B7FTjsK>AH=R-^DJbSe^ue~xJ#}e z$KTKsH?Pe+?p@l@(v}rFCw^bqg>UB%MqcT=&AlA_TFI5c>KnmZJKMis2RxjIZMpK= zk*58#2l5ZCd8%Er);RD%UDvm2GI%^c(pAahZI-7D;Or#ZyI%#bwhxVUmEOOZ8efsr zxlmbsyEJ2dUM-ch_^z+tzPp`!-&1b)EBUbbWN&R->DRjtZCrBHNADDSbmz@ECo#fB zkIp=-`*^PF^d0r*O%ELbKS1v}KNGAT=8WYM2l4&iRo(jHaNPhO8=uwosJx~pW#iS; zsrv??^tlaZU4cKI%E&h4&#Bt~X0{|VdAkDhsX0IE%o6UUu%NVF+4hZ{e@Hv#+_^QY zF1c}eYenVO<{x?job&ExgdjT(-T)hhW_;q|P`NU8{ZaF2yLOSWOg9JYm4CBB z_`Vv=0upyuRBi1&KAzi(k@3+9=GlRMkqRO;^Xo8gUX+g`XyoUsWob)z$L}0z1TVPG zXnj}gK0JFgCa{UUUcX?)-dVl7gH-f&v?@g#exr@kqIw>f%{nF6&^)KIbHM#SPEJTs J9F}Kq{2yJE4r%}Z literal 0 HcmV?d00001 diff --git a/src/assets/images/mapClearAllHover.png b/src/assets/images/mapClearAllHover.png new file mode 100644 index 0000000000000000000000000000000000000000..04c8da9059afc19005316285ddec68418e4ebc07 GIT binary patch literal 2060 zcmah~3slqQ9&ZK32fh$_4YezRC~K3H7HG6W9~8Nh zeUT9%3+KDdXR%ldRiO$EvwB;fxpSCz?nIN3SzPJhI68_*q|I6r%90|44&|tf+9Xti zYLV3K-RK4u%Vrphj-%t$;jo@C^0ihB-(n;gHjA|(&_ZhU$tcayp-C7n;f^$)=W;Ma z!i^QFK{Y8y4OnQJ35`mNh}Nei>%|B+a3g1f1!e?{D6QpKj43z;TO`~`U6|Qhj{z=c z5<(|SxKEvmQ%7>-gbC&N@j;#*1O*&_F(2|13jM%WI08@r0-y+h1U$$O28A%>&v|xn z8EYma5!NV_&ulSY60U)!Nf-dkW;5UH%O^}p03;TR0Z;%41Uv@8qf&8NYvJLP$CQEs zrSv9@q%i{LSQWK8Vh1hZGM+vS!AMTa;?%P=F$n`KS`vWxpf#jPAflhfkvmK&lg1G} zfTo~E6sIW$3r%C0EUDGg@E6J&jnim~)}YU0dm);NP9;%5gHpr}lb$JZqKDNj5|*1# zElrrB2_j`GIPL6(I4XNo#5~timZ; zi|bL9Lc(QY<6{^C%VYxPmI=gSNCZJjklFbK%cM#nC=Zs(Akh?8LFji_%P_@7o^yR? z+Ma)F*Qq0B2CUoZ z;bT6g#}~z!nKd!PnLhgz#mxL!l|mYA`TlaDI((Vb@v9&4##Nv4sxxwq8ysKWugfj@ zv$N1`aekqp^Jw1Dl>tkxS<0a=vkG(O=rbW*`@31I_IWF9J%`!)Pv*TW4PfnqZ1>2T z-w3<3^X5lrb20xG_i-=WU0!#6=TPI5heIttgh+$ecVdpiw-nVXFSbjCTarUquHDzG zSsld@ELBD2l6h;oj$aCLJ*dWF4qvW_>Ykeu#LAD4_6a@JZ?9M*y*@8AGyBdW+olKW zm2!#wh1(z8TPwO%jPE~rxGXt+Z^n`3v&(?4D_=-FvO3)ScbBgFUNr`SM`O3NUMd>= zbN9tX#Syjs!^fx|`^ENU5Mb{9u72-`Yj{IZ+KK^^>PoMQ58FQB5?Ihvl`K!+Z20fl zaauWizjRlf!z1~I*>!nR&QhD|U$g4jc#m(J=);9K*4v+E=k^`HQtp26Zc*gj&pM8M ze6IXvmrFvQ(!-tary5-Nq$WYuRzF_SEC_K893IFYyKvb%PSe#^w&K;F=XtLZ?)oWz z+X2;@-aMV}bGrczE>YH-roP8(Te(=Tf&Qo6C$~4 z3Hsf)GOy;{H9t7@zKQJldI+oBb>D{XB1+m+!`^sfd8q%9!7UfWQssbOy8pL` zy-vKW^!M@=H7gs}Y4@DeJ^pmyjLlHq$L4?6krl>8d%c{-qH0e!1ZAfCH?a-}K05JQ z5u4qcUHPOM+N7zyII%VdUYXx8kvi-;KWtzy{EJ}Ch_hheeuR@jCpyD9{K_LL^X5ax zz z&``?HL#zKq{^ByXt+hvqZ9T{TJiNU#wQO6=OOHF`dglcX&%Pee)MFd9k==Umy~wI% z6*dK(3tGHN3v+?|gCWFck580&#+|Z{ZfP^ol(j2de2En@a;{9n# ex9aZmv+P+#>;u??#G}7i|Ie!62t|!7A@eUc7aW}c literal 0 HcmV?d00001 diff --git a/src/assets/images/mapLine.png b/src/assets/images/mapLine.png new file mode 100644 index 0000000000000000000000000000000000000000..389f4e4ac224f2ea970cf69c2d4e760841f93cd2 GIT binary patch literal 1895 zcmah~3rrJt9BvhmfSn@X29E74sDQM+J4&UO7U+Y@!&WTaU^dG*P37x+@B9iDZ}D{U7Q5R1JQak4OikQmXq0r z3uv^dgBn#LnJ8a^s0lqAwPV;;y^&(mXo7I75mjq(5=g<*GzKAa_}D2XpuvR9gb+C> zH%jnyO;oN4kIz-8)VW$UA7h4x0Rk&R3FvVW1+03V!Higi%rRYr+S{)=OkfN`YK6?V zP9@6Y0108j0UjG!TGAO{TLKrjp9As`ol76I=bCS}cpr6NkH z?42#@BxI(Oq!Hn8EEWsf63iw{X&i{p=W{@q1H&u|!7}F%|w<-O%*xS*Y1`Pk(h9lBupxT z(2Zw2E}b9=b2?!JV2BL^{s|fbMp(=N|03X0l*ENhD*YiWkk5j-DkubjKm-h32!T{%WW+L$%D9EmoVNz|amqoqP7 z6&qWl!H`f`1oI@YgwKaUAV>y=^7#@G7Y>HS;$R*K$;P=-LY-wV!#Edv&y`NfwKufA zP>2*aX|i!lW+L>!STPXIj90yl1pjq_TGZUA1DVyU63*n`0}z8FX#22UEJiFY&RHlY{Rbm*<6| znoTv5Re9yl2a2z+Is1t_!>JK!?4vP~BLbB{-L0%zF(>hekA;)%3v3?HdDQ zlX}{s=8JAl2eeWjk;pMEWs_rXbj0kSZ6J7~T~OpMbeYGn4gF-<=|9|~=VduhiQxuB z6y6w-UAXnxs)zTFKCHeoO808N_PcD$l-PzI#kr%hm+oG=E$s7^$xrY7rL=T~G$p)# zu>g&!i&Q+Q?)Gjs3_9))t^8(L&Gxbw&-~>+SB?xFpC*2GZ=mzH+^oPS%R6oJmj$KP zuGhJ7Z#szBPFsUdr#ExoFkSLI1iQW;zJ?%t*Xws3RSDa6*WW8mYOKn4xSsRMdGYH0 zAM;Ow@wPr2?Z94#$JS35h8M1#mY5J%zayqcDJ*@cNhwB2UE9l zefZ8jeM(!-b68v7(cXv%!b%2P2=$klM1t!^Klg{i+#Q))`9Z zrTZEfVRItm6tC8H%)Y9sxb>~}Y-mIqrpz!sJI_qLbEp5QIrnd8M;BZyySDeTC&4azl$9BIs5|4>$pSKT zsLtHCKdxqA@IljxCQngqr^Yz4M{=nCxa1Adlw?d$cYmmfGdt5YJ2 zYWAx+T;)gG(2~pO*ImL68`ce8ju>!5@lnrY+Kdws>vK=EIoN-F(UA&igE+bH9}C9A AeE5t z>QE0w1oapo_!^?9Cl4o6K~8*fzNh#=@P#@YAi5L<-JRTWm;4|1ec$hW$qWsiGuGPK zn#E#`l?6%_%<5`>twuB7?03~#W^tnZBk6EbMH?}SVEN$WA_9s7V42=%UQte9Z@e0SK*;fFGQS zl!pR-Bt-xoJcz4=AOx5t=D{BB?jF!g0D%yQ4+;4&!i7Ch$Q^}e0UsZbu}0x4R3Q!c zXp1>Xz<8S0qkO*6Xyh3MJd%pz!(y?R4u8yt22B|6O%B$3Dfgo9%K$_0EjDxaQXyl$$)WO$tRW&T0%z~ z7%V)5WwIof55d1EtJMyn4YY#z6x$ckhKNKx!B-FlGJ#SuMOIBUyQN3{C<3ENDuN`J z3}!quo}@`bJgEl|n1=wa^VB+=G#X}nMj)gZO-Mi{{X#Az<|6J9un>hI6cV{XA{2r? zK;S5h4~M0kB_yz{7u#D+e|yD?a#d}n(?b0rK1#f={N?est5*_|C%OR$hZ;o+iy0)@bovd(OHvuyXZ}QFWzRQ9!!C zDkD9&>W)*9{q)k(SC^}b&*9cm6)S3buZ=Y-;+1Fe2Mi;hb^1QL(7xbZ&L1;2}F|$ zt*#_s+`F~mxMym{pJRH19nZ7fV*f6A+a%eQ&=lm~ z$M)D1*p9Z(jqOywRIXFpI}zjax@OzS{)eE|8vm4omOjnJfb(HgUxa+Sc9|%w>UK^? z&QhC|K}C;yZHd+?MTNP+d&JfgHa#FU1MLliZJz}D6QrB)>)7#ci^}&>o+YL(}2D7EtifmT}pJSH@yb=HL zu2tnLpA+YzXD@CYy;3!~)|2hGB7J24^R}!;0PfJXP@WaNzBN1FlSj5VZ(v7tBqp~Q zMr2+%Q9T}(-H&&#askFysxevT|G`e(5gMK>G<4_P^LZxLUV_cPD zzdqAusWl=K+V9!y8giw4`<$_sSr^&ayxhygMyqX>+udH~d#9><))h=^*?jB!5xM0D z>~9rTY)Cm9eY-(A5*XbnOskxoTl-X%;l#-hzBi9|v}XlVn3 zg?q3}l@y8|_-D;(G(Bho9Y%c2?Xze@c&d&7!w3VFq*pN_$Bngyr9*=B1V&T(aEeOo zu6SrXMN@`&N(b;^9v|?GAhkG^Vi^Akfj}{u5ObLF`*I->m+un}`yw!eKzK(;eTCgzlu{*GW$5POAGwlVxz>iZ3WcDA zo=hfinV!-BU1A_)@39DbwfBLG_a2L1uUwD`2DG;4C+*sO#msl^+cbHa6S58uPqN zxKerQmH1U3fAY{-bj^SjfYTqvQA<48rmd4pnrj+wPb)ci^FXUsT)Cw68^NC?>blK& zorXK^Hg3&lqJt*p$FnYy#e0@aF>Tq#9_4(3?eV>8S$rwlM!6JJ*i|JgyH~9qH++5H ze!+ux)B^b#js=p;2afA)vp3jy>N?(`vX^!n{oWSlSN{I^OK!5g*tP%894EkBUzz7K zH1~$P+oFK|7mVyd_uaQ2oSI%%vbVD~E#T7VL9^nj+oZbZkE@%SGt?QtTW94LsfDSs z)&X<5Gr>pZ?9Ap!k8#^~{CZEhD~P{G&_4ML+_`)9_2Q7crotbp*Gork64zJ9j7c5> z#m2liJCOa;g}Rv5a1dmAG&HUXjefrwj4Nebf+RWZ(e4p z$Ie$lS&j|21JfT;MfIlgfo|>Eymgq%-_7Aea;_cmJ~X)RyiAME=$dir@vIs1jou3^ z_gY3c7I!4O9rC@N-ytk%$L!TtQSL9SIAX)b^vZ|Q2PcoOO`IHi&@cOP0~z96Q&nNE zKdAGtEx%jvxO3CmxfXWix4#9lf%EFYUj$tPHgw&iO>bx8_D<|V|g`0Le1hn0^WH#-y z9qLrKKHA~RY`J;i)0-j7fGP4ZUXGWpe7(XI69Vg;V|GQIkoC!4x>-5!^t@rBa~B`E zW#!7*yD3m&ykXTYX^%YvwrKc=kK6?MFdo;hSYX z$6Up&ONT*O(e69ky_WRdT{J!61-7p3#+Ys1ulMENRkS8H)4q~e-(R@Yen NvvO$&T0AAj{4a6C3sC?7 literal 0 HcmV?d00001 diff --git a/src/assets/images/mapPointHover.png b/src/assets/images/mapPointHover.png new file mode 100644 index 0000000000000000000000000000000000000000..f9d98b59e858d1397db41f1774636dcb85bdfd82 GIT binary patch literal 2029 zcmah~2~ZPf7!86*@dQE87F+`ss3zGg36L#;5+VjAh=EE#M_sZDtgzXz*+{@aDB#f& zyjl!sDPn;_)j++#BH~eXtQP7~kD{nmKtY8S=y$teLOjWgWpRQ|UQMI+Bd1QxOVd1)*dd280qw0;a$aG%e)} z=FehT-ovAmv{D`ht4M;2m@!;Ep<&o8mVcmLgQ$`)8i>OZaJ87-UEjzCa8%5W7Ro`n zCKyY^W$6?anI0acN>5UWP1BtFEurlo9fLasRSNhBogsJhzCI&2Eoy$scA&dQET0XEJ!h}io!KC zPO1U3MI?^Y(PB0e>8lh7&9GUu_H~(gDmMzHL?rPJ_JbIa`9eNF1QZD+P)JZnus{TP2YG{{A+D5E>C7?=anUziXhg2L zq0K_UQjEe^VrU3O62PDsFg{`|{E!jtz2>4L#{!PX66dS-kj`w-Yr5h zM@QseYrl6_f5f7(w#{oyhHOjg+Kfj{&+e0vhWD0xMhCixN6n79{NTF!;KyrI8n5qg zdGOw<8~NJE$v0C1rzQ0&`V7~-9Tz{W9hd9&(Z>9$uqtWqcXyHGnDLIT7f=4IYkOq4 z*m6`~u<%Y!tku|*?5ru4yC#@yf5q?I?lCE@E+f`*l14vkFM8%_7+8PwmJxWAw`=s> zMQ|r{88bSX1hJ+2J$2#l&kBoZ{AFD9#A~;XRZjnL*$aAO>H9S=l%lU&6VCTf*m$UA zVr=P(VivK$iOxUKC0g8kIi^sP(QT>8{HbJRL)Ag)hKdbK!Yt0oX6i-t8*1jG-A~zn z8J-uF9GG5{eX%LQ@tEO~!8doC>=9uSRIP5^+p;C|=-Th&9_wz)BAdT*>B{SE44r*4 zH0y`^;C^vTmS=!auK#|s=avOe_qgl>=AGSM)>Y{e`}gd*;o#Joyv(#RX=cs|E2qx0 z_A%lfkxibRmB*7<`-${#P3R^6Ag_Tew=ZWT?peG+RuGxhB|mdR^pA(_K36-F@Q2g~ z-xZbjcig%frCh4m+HPrIC)_FUv->#^IJ2kzM8M-e)?9re9;mZf>bAA8a*Wd*tq#L= z4_i~#9bWiVti2t5xF&bp&3--37e zSevZ+X~D~DN%w!NowOvqVnSM9d2~R@zLcr-T+mcnJtJ|o-hn@#l7vUuRIX?L5jUl0AgUmj$)vA8_cLaH&bMJo{hvyA(nI literal 0 HcmV?d00001 diff --git a/src/assets/images/mapRanging.png b/src/assets/images/mapRanging.png new file mode 100644 index 0000000000000000000000000000000000000000..d44b8e9c7a8d80b40d3941ab94fec05208d0ee2b GIT binary patch literal 2114 zcmah~3s4hx9*!uKho}^E3bu5OTHrLvZX|@P2{t4ID274^k5OJpc0(4}Y`R%UK=?EgH_&VbL%7XsP-(JI3Q(gNm|nzu(Adlb zFhs;mH_>jj&n7oU;qld;2wq z3CuyLED`frP)YI_Kthlx5X1&q8W7|Hd;uE@3JeSaHv?Rd3vxgn2ja4zAQ%jUAwKZ@ zVbb16L<=jVvgf|&lZdIKCG}vdgJfdjEYdrEUaM6-Z1xlPZ?<}w1B0nB$qG1|IjRsFQAQ-0{tzwKSUdqc?OiDK#fEWsi8&IuD6F} zfF&fVq6kt+5ZUt;kI@knVbl=@fD5s?fPW&UM+lQK;CBR6s-jR4lP*7x1qxW)KqbV3 zArJey zN~PDJkx~(p&W(*>2pkM;2@RFWXpJEr1j)eAK>n8CKuM@Xz!ghCh&#`f5}F*l4D(#% zH?DY5uDzk{Lcvm$#BxzYMiMwMCkBiy9t(d_d(XMZ;;{rT%H`0(aO~~*yLO$wqG!Oq zT^K(4urR);o}O8f9!>|39{bEcjFgI%=D{xO&baF_tJ;2b`CH7UHA`Ywy+9nVNbo9c zjj98Nz0+o1emr_~|C>$IqG^XNvzRsIG#s}Ee#u6HgumYi`ndb9Crafo_w)XQQ}&AQ~lF}=GSpp zhIS_>Mb#X11EAFv`P{m~gHG%y-q#fq%ard1{N%FQX6vc0^c4>bp4pX~f6}t^m0va= z*s!kmFaxocJ*l03duGo!#>A%tHOnZTY^eQuefrKecLKdNJ7o&CUOjm4>Z*(V{A&fH z^@R1WvRiSs9pCJ`bgF15EU~W8^U8TveXXZr-$YAX1f#y^a` zR;yUq;ngK|Y*j3;?{O@1I{e|L9L#$UAr=uY9l0oxH&vS1V4ReBfS>c(?X#E^$i<-gR-!dBK2ig?H#p=WPucPNgII zZFf8&Q_}sNTl4qP-c-5(&_^=QS$%Z}62c@Afjme<&J^`FXp znAzJmFyneCZrxe!`NFE?7jD%3XqmibZfCvGrvYu@Ds5K zioNd_&+P5$_EW!qI2$_=<H;=3{p zuSm^CTZZ@i$8frH^?7|=7H{`#$)ul$%lB(7VJnt*OZ&dGULcE73NE&?0B0(00*(#v zA9ue0`a}m`T>1Ia-phi3M>f+-*M)*Ob+ymk_HK`@M=z)K zNJGY6b^VKl<@?Wf?xqpUeno2K*!Hc#oj=|WEwAkMaP3{^6JPO#+H$}0+>s{9+UPCI z@*aP?crouk`3hGYtE#POS_*UKQG>%53#E*XRgJGztq^iHs zgh%Hc`s|2puqxF(%BelU$C40u2sxG-xqokmy*?}`{vDUs z0)`!C(*}thj-L1U)e~21hstZ6s`bT3Fny=g%{mjs(!RyelFdaE8*~lHwHlc(@TGI3 c?&+FzhVHd4NvdQVv;Wm2!=k09L(>cY3yN|<K%106L z?$jHoFNL!3xlABb33*##5iX}A1`J&zSCDK9#dniNfrye(6_AKZWEh7!($GW&WMU3A z%99836oIHz7Lq}rkr`nEQAV5DXQb3NX5I`eO!IZFuL!Hru$-Uv4K?PrJgHu9YI1q>vDBwj0X(AA00vp(L$jigS3v>sVAQNPOo(zadgS=qS1BNyLA0H}d zjSwfnd~WbZTjYsDm8w(2RwX+Ib zR4F243Y84U0D~fuh^ti`D(UHm5afzESxoscO=Q9t8brZ>=%68_8K77+hf}DDlo{h< z5d%#@a2GMn*mDXzkmQd|KrAvzOqiIQPrJYBi|PXv^Us89}-Our`$WYd@)0>~4F zKp6CP1HEAo`~c}LjEsUEP|78LXMCHkQv&Qp}-_F)_6QP z6jQ1YOoWDVIaD$>x=bd91K1$M1U)_3Y{(OWfo3sgZ|B8Imq**`rdjz;X`(x&bus7C zTdOkb?^{JUZFI?euss?#kI%Ilm8Yiq*SLJ=;=U{P$0|)paZ#(yo93ItF)LQ2nvBL6 z*H4CD)R*#dcHK#OHgPhQU)Fn}b4QY|q9A|3sRy6x_vvAe*;rmau)2VfY|m(f65EzoykW#*WnEnZFQ|xs#UVo(V&Krc3PM zSN|QgjOku45blpy=&-oXZRh(2zSrYM`+L>cP1umxEuWt2y3C2XY zb-smCGna1?d~-HRF)pE=&=5kX`#Kghd^(N*)9bHN01@!5%o*jBd5vdnM#?*E7nZw+_47 zR>k$|CK8>kb0v#%k891H$6MOou6`e3A5?QM+bVMGUT=B!$;@S2UHiX``sQvyo!!FW z_@_alGg(BHx_x@vwFlew1ynuKEQ=cK%A=ZYaSgO{%N@7G&tuI}?L@X;@~PH{KsS?i zc6^cZG4I;RUB6YQY)(0PZVLm9;b?QDW3Mv-&@S<;$G%VJdtEM_)r?4%ysdmBN6tG_3F`v zJT9y0z{91-x0Ji=E&OFiakEim_K73Hha0iY!s|A_CEg4^wB_E?asVAZsyKh(rx)-^ z9kJND7g9B5rGy_fEiids_d6bJ(lE3k=~dtB7A$wa>_rW;C3mQ1U-Zt-#Igl74wIg@ pOZ|Rsf0-nN?K9o4r6oHW+fuBNN_|j*lxp}R2n`D3RtF?#{|9-6Vio`Z literal 0 HcmV?d00001 diff --git a/src/assets/images/mapRect.png b/src/assets/images/mapRect.png new file mode 100644 index 0000000000000000000000000000000000000000..8e31e3208aff148fb7acf6298398568813af33f9 GIT binary patch literal 1890 zcmah~4^T{b9N$uyoHR;>_m zkxnl3kGU`?xpXph$|-dIgu0NUh>FW~b9bH4nR^?>&1mk;y!ZPvpU?N-=lh+vJuGz5 zM5}3591drqBv>S4S2xo;ek}VnzOACzWhx_%W+Lc#CKcC^oB)DeO#%`MPatI^PUzP( zl71Y{m>#7(nu(T%U<#Vz;wB7NN2yshhvVn3Q{##xk^xqe2}+d!?5nN?0VN>-m+_>q zR4pVEmB9uL8DR*OD-1~rJ^}hK0Q__qYk(pd9MDn8DlMiHfJ1gMc5k|dKwt>MBniNG zK}Ac$03od*0Us{xseoY=n9t`TKHlCwum^y`C=9_o2thp&9}M=!komy-2V}izhhEZb>l$x5#P4(i^ngj^p^Z5{rLMZCVB0RNv6@%+MRa%!}3nEgh&?wc6 zl2!pGi}-3fg%N;kr0-Io)FWn9+V^E*3kK9f1s@P1kT|93nmm;JguQ{Rsf}`T_Lq9VaS_Qib+&j23ILaiAVsl zxp9?B0`v8PQNCEjij43OBnS@l_CbVVl!x-ffe7ry8|I2=MT$v=VJ`83i;l`QHMB`6 zOhjswYe^zVLsP(z7?^U@ScE~N+I!C>Mvny^l?$=KK&JNms9lGz*cmWwM~06*jEpa- zVrN#v4(I-4w;Sxt+ekzKa$VcCysJsJ0Zx}UdR5;erf(i!30jtd!OsHHdP^*3>VAJx zd)R@tUm7#$Z?HFf7u+KjRL)(pqD1U{7ic)6?^EQrmrtK_|H1Y6*v7i->+z`@i(dT@ z|EFu%gDvR+K>LNk(Bre>>b3c~xNHo-YJg=qeZbus3V>y5G|rm5ta#G!s4 z=V@b&^K55d@c}gPKsuWDG$gyOA?5h)mo|$Z7|w2}eXYiYclM?P7UxLJ(W)NnlLc)t ziq2QR7K|yfR3CeOq*q`Ob+&!kH#18g4qUlV)+Iat*@2?9ON$ohBky;|N)xieB8q;A zXpQP>e_}b;s9llRJhvpH(LX2Cu{A#pP#=t}UHLNVXmQi$-IsKyJ@k_{`T6dgVezBm z;OjV`BlE?nn_s>Z=^LKi*6ohD-O*4{2`@xdCnh*`JIsJX=Iz;$e7~^AfGsb~w$tpa zA3Iy=m%r=W91z$(<#Bm<*p#ZuDvlw1^Tp0~7``SiT+(bV=XXpVS96xJwc6U!THstv z-m6IudBpb%r5;HxW)*g(x$n)g+!L#sx8?wp=hXTnx5@G9OdIWQe?Lw!D|WNG7JFiR z$IrRdagO$hel7i%rVb9g8aH-~OYFkG>yzZeOU3Chw|LUPsc58c}F=JI{kJ!U{N1xq`PzS?$ z#icf5;GrwRU6z|(`PxSIQeOSdUITYpM9~S>Hp0PwzO~-#Ao-$tn?ttP-B{j!I9=SE z=@DgpiTYkrh=gyuTCASdQhN~HYAF|flhDMyg1E>t~^#&)qvL$@CBv+re zolOPCfE77`86ho8p#VNeFH}`@9o2;IwwSXeA8LPlUd#s<_3>^UaRGL^t(1dnXO&)t zlHMH4WnQ=1*PhFr6+M9}_B`WmX1#x#i&<0FU{`-f*an63s!;1UXDmYOTgE*-cx0AY zggDCe{%Kv!#rLX8cS-*+-(%K$WdN$ literal 0 HcmV?d00001 diff --git a/src/assets/images/mapRectHover.png b/src/assets/images/mapRectHover.png new file mode 100644 index 0000000000000000000000000000000000000000..9322701a6bed4e63ac1a8aa24da2f6a71cc4d032 GIT binary patch literal 1895 zcmah~3rrJt94-(kGI@z0$irJ(e{l4ETw@sWF z=U_j_o<^fN2;&7w)Ea1c?QE&jbGStdpT>6k*P;V}j;H821r%44Jk ziy)Dfk7X$1jXEsZm?)7MGi6+q5xEG6Fd&oxHAYGSgIc8_5Ce}fW*4FMmTQm!j6uju z9^<2^G?5tK<2nooVL?n81hIioE(;Ffa6+Jk02^XMAQTM3Y$hCnKpX@P1;!r+;zz+zFFj%SfP2Bq|42x{%5Sq(9sCMsc|L8=8|7Gw!&42a4maoQ}MYRow*12Gk* z#xx{BVc|(El_imA68=TAYV{QwE!Dtv4Ox;r3S_I#Qe_)m_SNmJO-8iU?#+6vN;ks7=a-K3R?h$ zArSNtD#B5vJm-s07~ur}2TIi*m6Fo`1*0-Vj_cG?ssKt$yMkJcV$7RJga|bRDb>g@ zp@7GrVq+j}gES6g|Ne;Ib@B878>sCoa_= zQ*bQ}Z7CEYz;w!N42{*{YGAAwh;nKzAye8L=b}?<37wJ)Qer?$dw$lg6Iav>ShkbH zM;#`|7t>HPtD}Z9>XCB|HS=ylLA1os-F9$Ert9)qEw}4}vIE+G>a6k#-F(h&Am*ZL zLdfa+cC2^sdpq~W!*-i!!_9@^XT{Dg2R4hpO44t3%20Oum+1R_2TK#1%%pGWQu!X6 z1EoUtg@%o5hKCg5dj&MvuIghCw;Js{Uf!>mUKo9p+Bx`I-6MUP@0)-eQjkqukoE>47~RgXG*nm%a71-*0RVWT~KzE)xNt^i~~p zF1xhz@y>zUfAY$v#aG@eAK+Pcg4Oryu)Xf*dULtQ?N4X@-QwgpoV}@a)KwpLtZ&hU zigvezWkCgg3oa4HO@jOC*wYc@c(9QSGrbgvc!1;Pl7v09{ z{E>x?XNwQDS(Vm#5c1)}HcO&wZU-1Xsi%4uH92vvi|>1F#Lo~CcY6rMIoU#ra7J^9{mxwhs- zO&x>vMD7JOSG?1)=^roR`N*1%7pn3+lh06h4c}{fKz@DhK>Lx)AFA)Iy9sr5+uiyZ z9yZS}NGow%xwgIWYIwP8{qg;IsdJel1bX#l99ElT>R|Mp)E5VoB|7d$?dhKET_7mukgy#2n zX6LOZ;Z=Q=%-n06ie$Y&{|$acbA+bZ{zc@yhpgEn&!2k^UrC5H2TljJ6e1@72w}Bt ze)o(Y4i$R_uIkr`?<8b!%4uDazPaoTk#z;8qPErZuFZ?wSG>_5ifjFA+mAhApKB>@T{Yd1VhXLHZyoY7lHA~@zt4o= zN~bDN#J9e_{7pJ(1z~lzxpO$N>MW0b+HUKoo}=Iunva{rt;k-hvi$mlixUN>W7ci{ E7r9Q%KmY&$ literal 0 HcmV?d00001 diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index 899aaa0..e69f49c 100644 --- a/src/assets/styles/ruoyi.scss +++ b/src/assets/styles/ruoyi.scss @@ -1644,4 +1644,59 @@ h6 { background-image: url('../images/time-line-icon.png'); background-size: cover; +} + +// PPT导出样式 +.my_dialog_itemHeader { + width: 100%; + height: 36px; + background: #1a75e630; + padding: 6px 20px; + font-family: Microsoft YaHei; + font-weight: 600; + font-size: 18px; + color: #000000; +} + +.chosedMediaNamsConter { + width: 100%; + min-height: 60px; + background: #ffffff; + padding: 10px 0; +} + +.checkAllChose .el-checkbox__label { + display: inline-block; + font-size: var(--el-checkbox-font-size); + line-height: 1; + padding-left: 8px; + font-family: Microsoft YaHei; + font-weight: 400; + font-size: 16px; + color: #1E1E1E; +} + +.checkAllChose .el-checkbox__input.is-checked .el-checkbox__inner, +.checkAllChose .el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: #1A75E6; + border-color: #1A75E6; +} + +.checkAllChose .el-checkbox__inner { + background: #ffffff; + border: 1px solid #ACACAC; + border-radius: 2px; + box-sizing: border-box; + display: inline-block; + height: 16px; + width: 16px; +} + +.checkAllChose .el-checkbox__inner:after { + height: 8px; + left: 5px; +} + +.checkAllChose .el-checkbox__input.is-checked+.el-checkbox__label { + color: #1E1E1E; } \ No newline at end of file diff --git a/src/views/mediaLibrary/index.vue b/src/views/mediaLibrary/index.vue index d0ac43b..4b89dce 100644 --- a/src/views/mediaLibrary/index.vue +++ b/src/views/mediaLibrary/index.vue @@ -663,57 +663,4 @@ onMounted(() => { color: #ffffff90; } -.my_dialog_itemHeader { - width: 100%; - height: 36px; - background: #1a75e630; - padding: 6px 20px; - font-family: Microsoft YaHei; - font-weight: 600; - font-size: 18px; - color: #000000; -} - -.chosedMediaNamsConter { - width: 100%; - min-height: 60px; - background: #ffffff; - padding: 10px 0; -} - -.checkAllChose .el-checkbox__label { - display: inline-block; - font-size: var(--el-checkbox-font-size); - line-height: 1; - padding-left: 8px; - font-family: Microsoft YaHei; - font-weight: 400; - font-size: 16px; - color: #1E1E1E; -} - -.checkAllChose .el-checkbox__input.is-checked .el-checkbox__inner, -.checkAllChose .el-checkbox__input.is-indeterminate .el-checkbox__inner { - background-color: #1A75E6; - border-color: #1A75E6; -} - -.checkAllChose .el-checkbox__inner { - background: #ffffff; - border: 1px solid #ACACAC; - border-radius: 2px; - box-sizing: border-box; - display: inline-block; - height: 16px; - width: 16px; -} - -.checkAllChose .el-checkbox__inner:after { - height: 8px; - left: 5px; -} - -.checkAllChose .el-checkbox__input.is-checked+.el-checkbox__label { - color: #1E1E1E; -} \ No newline at end of file diff --git a/src/views/mediaMap/index.vue b/src/views/mediaMap/index.vue index 71c0afa..86ecc58 100644 --- a/src/views/mediaMap/index.vue +++ b/src/views/mediaMap/index.vue @@ -227,6 +227,7 @@ import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图服务 import { sysMediaTypeListByPid } from "@/api/system/mediaType" import { useBackgroundStore } from '@/store/modules/background' import otherbg from '@/assets/images/otherbg.png' +import dragTool from '@/assets/images/dragTool.png' import { mediaByMap, mediaDetail } from "@/api/mediaLibrary" import { pptTemplatePage } from "@/api/system/pptTemplate" @@ -256,6 +257,8 @@ const previewImg = ref([]) const mapInstance = ref(null) const massMarks = ref(null) const centerMarker = ref(null) +// 当前激活的工具实例 +const activeTool = ref(null) // 当前地图模式（2D/3D） const mapMode = ref('2D') // 是否全屏状态 @@ -407,20 +410,20 @@ const currentSelect = (val) => { } -// 创建中心点标记 -const addCenterMark = (val) => { - if (centerMarker.value) mapInstance.value.remove(centerMarker.value); - centerMarker.value = new AMap.Marker({ - position: [val.x, val.y], - title: val.mediaName, - zIndex: 100, - draggable: false, // 是否可以拖拽 - cursor: 'move' - }); - // 将点添加到地图 - mapInstance.value.add(centerMarker.value); - mapInstance.value.setFitView(centerMarker.value); -} +// // 创建中心点标记 +// const addCenterMark = (val) => { +// if (centerMarker.value) mapInstance.value.remove(centerMarker.value); +// centerMarker.value = new AMap.Marker({ +// position: [val.x, val.y], +// title: val.mediaName, +// zIndex: 100, +// draggable: false, // 是否可以拖拽 +// cursor: 'move' +// }); +// // 将点添加到地图 +// mapInstance.value.add(centerMarker.value); +// mapInstance.value.setFitView(centerMarker.value); +// } // 创建圆形热区 const createCircle = (val) => { // 创建圆形覆盖物 @@ -459,8 +462,7 @@ const createCircleHandle = () => { position: [handlePosition.lng, handlePosition.lat], icon: new AMap.Icon({ size: new AMap.Size(20, 20), - // image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', - image: otherbg, + image: dragTool, imageSize: new AMap.Size(20, 20) }), offset: new AMap.Pixel(-10, -10), @@ -543,7 +545,7 @@ const loadMap = () => { }; AMapLoader.load({ key: apiKey, - plugins: ["AMap.PlaceSearch"], + plugins: ["AMap.PlaceSearch", "AMap.MouseTool"], version: '2.0', // 指定API版本 AMapUI: { plugins: [] @@ -596,6 +598,13 @@ const loadMap = () => { }); } +// 辅助函数：结束当前正在使用的鼠标工具 +const stopActiveTool = () => { + if (activeTool.value !== null) { + clearAll() + activeTool.value = null; // 释放引用以便垃圾回收 + } +}; // 添加自定义控件 const addCustomControls = (AMap) => { // 创建控件容器 @@ -612,8 +621,51 @@ const addCustomControls = (AMap) => { fullscreenBtn.className = isFullscreen.value === true ? 'map-control-btn map-full-screen' : 'map-control-btn map-nofull-screen'; fullscreenBtn.onclick = toggleFullscreen; + // 工具箱测距按钮 + const toolRangingBtn = document.createElement('div'); + toolRangingBtn.className = 'map-control-btn map-ranging'; + toolRangingBtn.onclick = startRuler; + + // 工具箱测面积按钮 + const toolMeasureAreaBtn = document.createElement('div'); + toolMeasureAreaBtn.className = 'map-control-btn map-measureAreaBtn'; + toolMeasureAreaBtn.onclick = startMeasureArea; + + // 工具箱添加点按钮 + const toolPointBtn = document.createElement('div'); + toolPointBtn.className = 'map-control-btn map-addPointBtn'; + toolPointBtn.onclick = startDrawMarker; + + // 工具箱添加折线按钮 + const toolLineBtn = document.createElement('div'); + toolLineBtn.className = 'map-control-btn map-addLineBtn'; + toolLineBtn.onclick = startDrawPolyline; + + // 工具箱添加圆按钮 + const toolCircleBtn = document.createElement('div'); + toolCircleBtn.className = 'map-control-btn map-addCircleBtn'; + toolCircleBtn.onclick = startDrawCircle; + + // 工具箱添加矩形按钮 + const toolRactBtn = document.createElement('div'); + toolRactBtn.className = 'map-control-btn map-addRactBtn'; + toolRactBtn.onclick = startDrawRectangle; + + // 工具箱清除按钮 + const toolClearAllBtn = document.createElement('div'); + toolClearAllBtn.className = 'map-control-btn map-clearAllBtn'; + toolClearAllBtn.onclick = clearAll; + controlContainer.appendChild(toggle2D3DBtn); controlContainer.appendChild(fullscreenBtn); + controlContainer.appendChild(toolRangingBtn); + controlContainer.appendChild(toolMeasureAreaBtn); + controlContainer.appendChild(toolPointBtn); + controlContainer.appendChild(toolLineBtn); + controlContainer.appendChild(toolCircleBtn); + controlContainer.appendChild(toolRactBtn); + controlContainer.appendChild(toolClearAllBtn); + // 添加到地图容器 document.getElementById('mapContainer').appendChild(controlContainer); @@ -665,6 +717,101 @@ const toggleFullscreen = () => { } } } +// 测距方法 +const startRuler = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.rule({ + startMarkerOptions: {//可缺省 + icon: new AMap.Icon({ + size: new AMap.Size(19, 31),//图标大小 + imageSize: new AMap.Size(19, 31), + image: "//webapi.amap.com/theme/v1.3/markers/b/start.png" + }), + offset: new AMap.Pixel(-9, -31) + }, + endMarkerOptions: {//可缺省 + icon: new AMap.Icon({ + size: new AMap.Size(19, 31),//图标大小 + imageSize: new AMap.Size(19, 31), + image: "//webapi.amap.com/theme/v1.3/markers/b/end.png" + }), + offset: new AMap.Pixel(-9, -31) + }, + midMarkerOptions: {//可缺省 + icon: new AMap.Icon({ + size: new AMap.Size(19, 31),//图标大小 + imageSize: new AMap.Size(19, 31), + image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png" + }), + offset: new AMap.Pixel(-9, -31) + }, + lineOptions: {//可缺省 + strokeStyle: "solid", + strokeColor: "#FF33FF", + strokeOpacity: 1, + strokeWeight: 2 + } + }); +} +// 测面积方法 +const startMeasureArea = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.measureArea({ + strokeColor: '#80d8ff', + fillColor: '#80d8ff', + fillOpacity: 0.3 + //同 Polygon 的 Option 设置 + }); +} +// 添加点 +const startDrawMarker = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.marker({ + //同Marker的Option设置 + }); +} +// 添加线 +const startDrawPolyline = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.polyline({ + strokeColor: '#80d8ff' + //同Polyline的Option设置 + }); +} +// 添加圆 +const startDrawCircle = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.circle({ + fillColor: '#00b0ff', + strokeColor: '#80d8ff' + //同Circle的Option设置 + }); +} +// 画矩形 +const startDrawRectangle = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.rectangle({ + fillColor: '#00b0ff', + strokeColor: '#80d8ff' + //同Polygon的Option设置 + }); +} +// 清除 +const clearAll = () => { + activeTool.value.close(true)//关闭，并清除覆盖物 +} // 监听全屏变化事件 document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) { @@ -824,7 +971,6 @@ const showContextMenu = (pixel) => { }; contextMenuVisible.value = true; } - const hideContextMenu = () => { contextMenuVisible.value = false; } @@ -887,6 +1033,7 @@ const handleCloseTag = (tag) => { multipleChoseArr.value.splice(rowIndex, 1) } onUnmounted(() => { + stopActiveTool() if (mapInstance.value) { mapInstance.value.destroy(); } @@ -1077,6 +1224,78 @@ onMounted(() => { background: url('../../assets/images/icon-map-nofull-screen-active.png'); } +.map-ranging { + width: 40px; + height: 40px; + background: url('../../assets/images/mapRanging.png'); +} + +.map-ranging:hover { + width: 40px; + height: 40px; + background: url('../../assets/images/mapRanginghover.png'); +} + +.map-measureAreaBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapArea.png'); +} + +.map-measureAreaBtn:hover { + background: url('../../assets/images/mapAreaHover.png'); +} + +.map-addPointBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapPoint.png'); +} + +.map-addPointBtn:hover { + background: url('../../assets/images/mapPointHover.png'); +} + +.map-addLineBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapLine.png'); +} + +.map-addLineBtn:hover { + background: url('../../assets/images/mapLineHover.png'); +} + +.map-addCircleBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapCircle.png'); +} + +.map-addCircleBtn:hover { + background: url('../../assets/images/mapCircleHover.png'); +} + +.map-addRactBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapRect.png'); +} + +.map-addRactBtn:hover { + background: url('../../assets/images/mapRectHover.png'); +} + +.map-clearAllBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapClearAll.png'); +} + +.map-clearAllBtn:hover { + background: url('../../assets/images/mapClearAllHover.png'); +} + /* 全屏样式 */ .mapContainer:-webkit-full-screen { width: 100% !important; @@ -1098,11 +1317,6 @@ onMounted(() => { height: 100% !important; } -// .one-text { -// height: 50px; -// padding-top: 4px; -// } - // 分割线 .splineBar { width: 100%; diff --git a/src/views/outdoorMedia/index.vue b/src/views/outdoorMedia/index.vue index 62ef073..1bdd617 100644 --- a/src/views/outdoorMedia/index.vue +++ b/src/views/outdoorMedia/index.vue @@ -212,12 +212,19 @@ const { queryParams } = toRefs(data) // map实例 const mapInstance = ref(null) const massMarks = ref(null) +// 当前激活的工具实例 +const activeTool = ref(null) // 当前地图模式（2D/3D） const mapMode = ref('2D') // 是否全屏状态 const isFullscreen = ref(false) // 地图数据点 const points = ref([]) +// 初始化变量用于存储极值 +let minLng = Infinity; // 经度的最小值（最西边） +let minLat = Infinity; // 纬度的最小值（最南边） +let maxLng = -Infinity; // 经度的最大值（最东边） +let maxLat = -Infinity; // 纬度的最大值（最北边） // 导出提交信息 const exportForm = ref({ @@ -362,16 +369,27 @@ const handleFlod = () => { const getOutMediaPageList = () => { loading.value = true outMediaPageList(queryParams.value).then(res => { - res.data.rows.forEach(element => { - element.currentImageSrc = defaultImageSrc.value; + points.value = [] + res.data.rows.forEach(itemPoint => { + itemPoint.currentImageSrc = defaultImageSrc.value; + + if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 0 }) + else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 }) + + // 同时更新极值 + const lng = itemPoint.mapX; + const lat = itemPoint.mapY; + if (lng < minLng) minLng = lng; + if (lat < minLat) minLat = lat; + if (lng > maxLng) maxLng = lng; + if (lat > maxLat) maxLat = lat; }); outdoorMediaList.value = res.data.rows total.value = res.data.total loading.value = false - + }).then(res => { // 在地图完全加载后执行点数据处理 renderMassMarks(); - }) } /** 搜索按钮操作 */ @@ -426,7 +444,8 @@ const loadMap = () => { AMapLoader.load({ key: apiKey, - plugins: ["AMap.PlaceSearch"], + plugins: ["AMap.PlaceSearch", "AMap.MouseTool"], + version: '2.0', // 指定API版本 AMapUI: { plugins: [] } @@ -480,6 +499,13 @@ const handleZoomChange = () => { return; } } +// 辅助函数：结束当前正在使用的鼠标工具 +const stopActiveTool = () => { + if (activeTool.value !== null) { + clearAll() + activeTool.value = null; // 释放引用以便垃圾回收 + } +}; // 添加自定义控件 const addCustomControls = (AMap) => { // 创建控件容器 @@ -496,8 +522,50 @@ const addCustomControls = (AMap) => { fullscreenBtn.className = isFullscreen.value === true ? 'map-control-btn map-full-screen' : 'map-control-btn map-nofull-screen'; fullscreenBtn.onclick = toggleFullscreen; + // 工具箱测距按钮 + const toolRangingBtn = document.createElement('div'); + toolRangingBtn.className = 'map-control-btn map-ranging'; + toolRangingBtn.onclick = startRuler; + + // 工具箱测面积按钮 + const toolMeasureAreaBtn = document.createElement('div'); + toolMeasureAreaBtn.className = 'map-control-btn map-measureAreaBtn'; + toolMeasureAreaBtn.onclick = startMeasureArea; + + // 工具箱添加点按钮 + const toolPointBtn = document.createElement('div'); + toolPointBtn.className = 'map-control-btn map-addPointBtn'; + toolPointBtn.onclick = startDrawMarker; + + // 工具箱添加折线按钮 + const toolLineBtn = document.createElement('div'); + toolLineBtn.className = 'map-control-btn map-addLineBtn'; + toolLineBtn.onclick = startDrawPolyline; + + // 工具箱添加圆按钮 + const toolCircleBtn = document.createElement('div'); + toolCircleBtn.className = 'map-control-btn map-addCircleBtn'; + toolCircleBtn.onclick = startDrawCircle; + + // 工具箱添加矩形按钮 + const toolRactBtn = document.createElement('div'); + toolRactBtn.className = 'map-control-btn map-addRactBtn'; + toolRactBtn.onclick = startDrawRectangle; + + // 工具箱清除按钮 + const toolClearAllBtn = document.createElement('div'); + toolClearAllBtn.className = 'map-control-btn map-clearAllBtn'; + toolClearAllBtn.onclick = clearAll; + controlContainer.appendChild(toggle2D3DBtn); controlContainer.appendChild(fullscreenBtn); + controlContainer.appendChild(toolRangingBtn); + controlContainer.appendChild(toolMeasureAreaBtn); + controlContainer.appendChild(toolPointBtn); + controlContainer.appendChild(toolLineBtn); + controlContainer.appendChild(toolCircleBtn); + controlContainer.appendChild(toolRactBtn); + controlContainer.appendChild(toolClearAllBtn); // 添加到地图容器 document.getElementById('mapContainer').appendChild(controlContainer); @@ -549,6 +617,101 @@ const toggleFullscreen = () => { } } } +// 测距方法 +const startRuler = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.rule({ + startMarkerOptions: {//可缺省 + icon: new AMap.Icon({ + size: new AMap.Size(19, 31),//图标大小 + imageSize: new AMap.Size(19, 31), + image: "//webapi.amap.com/theme/v1.3/markers/b/start.png" + }), + offset: new AMap.Pixel(-9, -31) + }, + endMarkerOptions: {//可缺省 + icon: new AMap.Icon({ + size: new AMap.Size(19, 31),//图标大小 + imageSize: new AMap.Size(19, 31), + image: "//webapi.amap.com/theme/v1.3/markers/b/end.png" + }), + offset: new AMap.Pixel(-9, -31) + }, + midMarkerOptions: {//可缺省 + icon: new AMap.Icon({ + size: new AMap.Size(19, 31),//图标大小 + imageSize: new AMap.Size(19, 31), + image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png" + }), + offset: new AMap.Pixel(-9, -31) + }, + lineOptions: {//可缺省 + strokeStyle: "solid", + strokeColor: "#FF33FF", + strokeOpacity: 1, + strokeWeight: 2 + } + }); +} +// 测面积方法 +const startMeasureArea = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.measureArea({ + strokeColor: '#80d8ff', + fillColor: '#80d8ff', + fillOpacity: 0.3 + //同 Polygon 的 Option 设置 + }); +} +// 添加点 +const startDrawMarker = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.marker({ + //同Marker的Option设置 + }); +} +// 添加线 +const startDrawPolyline = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.polyline({ + strokeColor: '#80d8ff' + //同Polyline的Option设置 + }); +} +// 添加圆 +const startDrawCircle = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.circle({ + fillColor: '#00b0ff', + strokeColor: '#80d8ff' + //同Circle的Option设置 + }); +} +// 画矩形 +const startDrawRectangle = () => { + if (!mapInstance.value) return; + stopActiveTool(); + activeTool.value = new AMap.MouseTool(mapInstance.value); + activeTool.value.rectangle({ + fillColor: '#00b0ff', + strokeColor: '#80d8ff' + //同Polygon的Option设置 + }); +} +// 清除 +const clearAll = () => { + activeTool.value.close(true)//关闭，并清除覆盖物 +} // 监听全屏变化事件 document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) { @@ -633,29 +796,8 @@ const renderMassMarks = () => { }, ]; - // 初始化变量用于存储极值 - let minLng = Infinity; // 经度的最小值（最西边） - let minLat = Infinity; // 纬度的最小值（最南边） - let maxLng = -Infinity; // 经度的最大值（最东边） - let maxLat = -Infinity; // 纬度的最大值（最北边） - - // 调用接口，获取数据点 - points.value = [] - outdoorMediaList.value.forEach(itemPoint => { - if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 0 }) - else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 }) - - // 同时更新极值 - const lng = itemPoint.mapX; - const lat = itemPoint.mapY; - if (lng < minLng) minLng = lng; - if (lat < minLat) minLat = lat; - if (lng > maxLng) maxLng = lng; - if (lat > maxLat) maxLat = lat; - }); - // 如果有点存在，则创建 MassMarks 实例 - if (points.value.length > 0) { + if (points.value.length > 0 && mapInstance.value) { // 创建MassMarks对象 massMarks.value = new AMap.MassMarks(points.value, { opacity: 1, @@ -695,6 +837,7 @@ const hideAmapLogo = () => { } onUnmounted(() => { + stopActiveTool() if (mapInstance.value) { mapInstance.value.destroy(); } @@ -782,6 +925,78 @@ onMounted(() => { background: url('../../assets/images/icon-map-nofull-screen-active.png'); } +.map-ranging { + width: 40px; + height: 40px; + background: url('../../assets/images/mapRanging.png'); +} + +.map-ranging:hover { + width: 40px; + height: 40px; + background: url('../../assets/images/mapRanginghover.png'); +} + +.map-measureAreaBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapArea.png'); +} + +.map-measureAreaBtn:hover { + background: url('../../assets/images/mapAreaHover.png'); +} + +.map-addPointBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapPoint.png'); +} + +.map-addPointBtn:hover { + background: url('../../assets/images/mapPointHover.png'); +} + +.map-addLineBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapLine.png'); +} + +.map-addLineBtn:hover { + background: url('../../assets/images/mapLineHover.png'); +} + +.map-addCircleBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapCircle.png'); +} + +.map-addCircleBtn:hover { + background: url('../../assets/images/mapCircleHover.png'); +} + +.map-addRactBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapRect.png'); +} + +.map-addRactBtn:hover { + background: url('../../assets/images/mapRectHover.png'); +} + +.map-clearAllBtn { + width: 40px; + height: 40px; + background: url('../../assets/images/mapClearAll.png'); +} + +.map-clearAllBtn:hover { + background: url('../../assets/images/mapClearAllHover.png'); +} + /* 全屏样式 */ .mapContainer:-webkit-full-screen { width: 100% !important;