From aa2b55ac013ad47aafca2d8f4f90fd4f025608fd Mon Sep 17 00:00:00 2001 From: zhangquan <2523589960@qq.com> Date: Fri, 30 May 2025 17:27:47 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=B7=BB=E5=8A=A0=E6=A0=B7=E5=BC=8F=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E4=B8=9A=E5=8A=A1=E9=80=BB=E8=BE=91=EF=BC=8C=E6=9C=AA?= =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E6=8E=A5=E5=8F=A3=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/gisManagement/configStyle.js | 85 ++ src/assets/icons/example/analysis_around.png | Bin 0 -> 1689 bytes .../analysis_coordination_location.png | Bin 0 -> 1214 bytes .../icons/example/analysis_map_location.png | Bin 0 -> 1276 bytes src/assets/icons/example/analysis_sandbox.png | Bin 0 -> 1296 bytes src/assets/icons/example/analysis_spread.png | Bin 0 -> 1276 bytes src/assets/icons/example/check_point.png | Bin 0 -> 1546 bytes .../icons/example/sandbox_explosive.png | Bin 0 -> 1601 bytes src/assets/icons/example/sandbox_fire.png | Bin 0 -> 1348 bytes .../icons/example/sandbox_firefighter.png | Bin 0 -> 1378 bytes .../icons/example/sandbox_firepoint.png | Bin 0 -> 1482 bytes src/assets/icons/example/sandbox_flame.png | Bin 0 -> 1250 bytes src/assets/icons/example/sandbox_trapped.png | Bin 0 -> 1156 bytes src/assets/icons/example/sandbox_water.png | Bin 0 -> 866 bytes src/components/CesiumMap/index.vue | 7 + src/components/CesiumMap/utils/calcFn.js | 32 + src/components/CesiumMap/utils/layerFn.js | 167 ++++ src/components/CesiumMap/utils/styleFn.js | 330 ++++++++ src/router/index.js | 6 + .../gisManagement/configStyle/iconDialog.vue | 170 ++++ .../configStyle/imageLibrary.vue | 234 ++++++ src/views/gisManagement/configStyle/index.vue | 155 ++++ .../gisManagement/configStyle/styleDialog.vue | 728 ++++++++++++++++++ 23 files changed, 1914 insertions(+) create mode 100644 src/api/gisManagement/configStyle.js create mode 100644 src/assets/icons/example/analysis_around.png create mode 100644 src/assets/icons/example/analysis_coordination_location.png create mode 100644 src/assets/icons/example/analysis_map_location.png create mode 100644 src/assets/icons/example/analysis_sandbox.png create mode 100644 src/assets/icons/example/analysis_spread.png create mode 100644 src/assets/icons/example/check_point.png create mode 100644 src/assets/icons/example/sandbox_explosive.png create mode 100644 src/assets/icons/example/sandbox_fire.png create mode 100644 src/assets/icons/example/sandbox_firefighter.png create mode 100644 src/assets/icons/example/sandbox_firepoint.png create mode 100644 src/assets/icons/example/sandbox_flame.png create mode 100644 src/assets/icons/example/sandbox_trapped.png create mode 100644 src/assets/icons/example/sandbox_water.png create mode 100644 src/components/CesiumMap/utils/calcFn.js create mode 100644 src/components/CesiumMap/utils/layerFn.js create mode 100644 src/components/CesiumMap/utils/styleFn.js create mode 100644 src/views/gisManagement/configStyle/iconDialog.vue create mode 100644 src/views/gisManagement/configStyle/imageLibrary.vue create mode 100644 src/views/gisManagement/configStyle/index.vue create mode 100644 src/views/gisManagement/configStyle/styleDialog.vue diff --git a/src/api/gisManagement/configStyle.js b/src/api/gisManagement/configStyle.js new file mode 100644 index 0000000..2870af0 --- /dev/null +++ b/src/api/gisManagement/configStyle.js @@ -0,0 +1,85 @@ +import request from '@/utils/request' +import { parseStrEmpty } from "@/utils/ruoyi"; +import { createUniqueString } from "@/utils/index"; + +const tempTypeList = [ + { value: 'point', label: '点' }, + { value: 'polyline', label: '线' }, + { value: 'polygon', label: '面' }, + { value: 'billboard', label: '图标' }, + { value: 'label', label: '标签' }, +] +const tempList = [] + +// 查询样式类型信息 +export function getStyleType() { + return Promise.resolve(tempTypeList) +} + +// 查询样式列表 +export function listStyle(query) { + const list = tempList.filter(item => { + if(query.styleName && item.styleName.indexOf(query.styleName) === -1) { + return false + } + if(query.styleType && item.styleType.indexOf(query.styleType) === -1) { + return false + } + return true + }) + return Promise.resolve({ + rows: list, + total: list.length, + }) +} + +// 查询样式详细 +export function getStyle(styleId) { + return Promise.resolve({ + data: tempList.find(item => item.id === parseStrEmpty(styleId)) + }) +} + +// 新增样式 +export function addStyle(data) { + data.id = createUniqueString() + tempList.push(data) + return Promise.resolve({ + code: 200, + msg: '新增成功', + data: data + }) +} + +// 修改样式 +export function updateStyle(data) { + for (const v of tempList) { + if (v.id === data.id) { + v.styleName = data.styleName + v.styleType = data.styleType + v.style = data.style + break + } + } + return Promise.resolve({ + code: 200, + msg: '修改成功', + }) +} + +// 删除样式 +export function delStyle(styleId) { + let idList = styleId + if(typeof styleId === 'string') { + idList = [styleId] + } + for (let index = tempList.length - 1; index >= 0; index--) { + if(idList.includes(tempList[index].id)) { + tempList.splice(index, 1) + } + } + return Promise.resolve({ + code: 200, + msg: '删除成功', + }) +} \ No newline at end of file diff --git a/src/assets/icons/example/analysis_around.png b/src/assets/icons/example/analysis_around.png new file mode 100644 index 0000000000000000000000000000000000000000..38feaeff901cdcad19de46ff709d9e24b1bb19a7 GIT binary patch literal 1689 zcmV;K24?w*P)v+OpN~VH#2av;RV>R4cQewW36idr%U>wNq?VuPZ`P@KRTpw z>OExOS7ls?3<^h*h4Gy9jyRMpwEhaRJyj-C96r|u>XdNrw{Uu%=n_Cmz@69JhFWgU zu#8^j#&xjEPmx)9K8}gg^ODir_hIOwkf0t5uS@wkg287o_JdXe_?Q6Z@eKQsR9w?lEkXA!y_gnkFgGeucY^*i`2m;u63jlQ` zgAocHq4R;JZ@h(^isfO)M~gC{iA9``;wQ(FdujL(bXyg2H=I(kv!#7-C1fyY<&E4< z>9xcR_}%4nT5K6Eg0rG3?A+&ijRw{-88k8!H<*BJy3k*Rvy!m}^8Tz&I+*Mu2r*q{ zfs_aNe_q!i@Vl2$c`dcqFi}>Ay@cgq$xqb#Ma_hq!aom%SA@O{j>@;y{QQe4XiVNm zCUU74BK@|m0Z6I_3P&Tm>QLC=N%usw$lr{VC$PiN;oZOf=$wfNav|q zkrFg3=SK1s^)2LlI6Nkp6RtD_LAeTJJ=qx%3*hAZp=e5(g{FpTO#Jdj_;hCGGokcG zX7`;4ES`c;(jH?yMe6y@n$0FiscLl+lUTBQ*>JAXPnrg~RCjpZ4cqd%{-wMh8E7B_ zcf|tm71c97!-@KPqMjbvR5XXwF}XMfw4|b0>x-783)V??^LsEqS*%N`57P(YqSlI_ zxN0(hISk7eQMS&~);*kGVR`rO0D!0=(s+tfJjH#HO(j_ndY!rlf|!ZCim%~!tztgB zZaFcNTe9!xRIF#lM*!PJCNei3k78gK8Q@Kd69k~TWF!Z?u1j2GEcFKDR4RI+!tgs) z$I;0_Zp>Ggi?4VVz0RRd2qL%@j_O*-GCTZ@f2mTG*h@f@V(j?KdI6W+uq9WwxAh1B zpNm(g7|LV{!I|C*qAb$uOlR9nV{NP8-1J6_;r5BwwVsDqqNb8;<&doeBN~980J0UI zQk%wd+tq=Eom^*b7}v3!&V>9S_H@N_xwP4m)sm@#M9w>gfbCK|Xac}yUYF0r7zh-m zqs?eC#`P@!!%d9G7*CzjF>b#$?Pu;!;@)%Ut2r^E+$_azGvIYa05I!dCmYcTL_>Y( z=tjFE$ZM<^K2&V|nKvJion+Mu?D`aT%6)Nu>k7xjw0BD(ItkkW1g)3N4$?Ry&QQQL z10nGZlWZ&Sz=m^iI$qZT0%LfTcRw8IqgY*Si5RFsD8C5W0V5>Vi%0H8tL=G=F0YSs z(wV?tIsmfGc>k$~Cr{o0X`c{&Ep^R+tl>p5A4eDWhi2cRK|HD&f)QgOwln4*#+7Kh zL0@q`6&JD+o@QR8TH<Ryo513D8sV`(FG-)#)Cw1;pKEK{kiPk!Z1pM}VroM~$uMEf-;=hi}2oN9=X%FCG^6W5U>1w_-T->&sQyNttH;LWm#c z?*_$|mk-yK>XDLQBz_M>8<0=h5EwFv7vEGmnamUOLXnI&{QUoKvf*clcEY)l&#&%{ jo&o5d%^qppb^!kax^RL&X?#eG00000NkvXXu0mjfDQqSS literal 0 HcmV?d00001 diff --git a/src/assets/icons/example/analysis_coordination_location.png b/src/assets/icons/example/analysis_coordination_location.png new file mode 100644 index 0000000000000000000000000000000000000000..b7cdf38ace7a7cf76567ae5f50c83bdd0c380a2f GIT binary patch literal 1214 zcmV;v1VQ_WP)0IA;E627^|!6?#y|6zBB)`XU?1*g$@iebH49=p67eM z_kGWI6#nN+&6|IyGlI0S1CXZ~+m?$TgrR=mz0VMi4bBJCw}3^d-49HqgK-4#oI8Pr z5*WZ2b|BMDzFEJ3k$o#LJ3G$B8n6k&4d!McKF{W+kKF2A-6M(|IHSfc+H3G*qJqZ7FfNw33(53b)^ z0U9k~b&>g~D{wyj6+G*{GSsjvXLAtQ90O0u!;^t5O9H(2PoF!H-Lb2~E zXL^_6(4PB{R%@Br8=2W1&Z>lONJ_1Aq124yB)i5rN&dcw8FdLu9Dd$&ubZY>-6`lIY$~knkf&DJWSV5N-Ed9QGwi-U=&JsNH=C z7NL>VT9BAU81;w3Fw)SSbGC_@m9$y38R<;7d+yuwp6l*9+ugl)S3-gg+_C%qe(&>p ze$VgYT!G8{h|3%w|4{-m;zxI1H5{o!h$)cLLSS$|3b&n`sG<{7;ON>J7#e(mK^_Cd zbZ;Do z-uQ7gB(fvWRksK+-#!NOGtg!@vDZ+(^|U9z$@(ey(|L*nHuGE~sii1u*prDwW&(EY zG)Ui30Z}M{=Mao;N(*Wk4^fHt=raI+ycoqzJ?Z?jAYg1_HqQ{GnZZLIu#Wn+EEs*P9j)_3jP2fk5ioi_C~qekilqW z(#JGD;fSt)&?=$7c{n!$wo%FeHnZEw>>hSO>_{GD{}~4FMLq-1KQ#br)>jO68_AZS zys10k7v4bP5oq!IQQEXCHv(OC1#o=76X;7SaE}WjBO2^JjvjgtY@EmJB`jk%6rR`YIqZUodV%lMvuXF?RrgdQ1mfvoTc{QDr;Fqlx=uZn>>5DZkh z%_vFBHjdGD9h|%XDz*$<3W42o z!}C_&A<^-l%wy=5K_jpjgoqVEZ#kQUGmUxh%PTk?mRky!%t{}7;s6OOB!PQLVDH2U z*tN3|_pAAxl(;Ob33xY2Y)7!+(R6^6{zW$KOQh3FziqBB_aZUcxSl&l-%YK+@Cc2G zL>wXSg5LCXN)lalH?V0<+VU6_7+FoKOed(u+{^@yJUtb@3##+gsI5v~@QD%vwva(T z)!=M5{Okd9$FuJM?QBG6C*tDm5xcgLCAuZmP8h3z9a;&gedNj)j6UfNVzf|RzHsD0 zOgpm}McdE+qaPAu2e}t|!4l7EwnDY6Lo-QigdSy6k33@unBi7Bu1eWJCu%0+?DTJG z4>Hhh?t$elRN@8nKF>PgRNah<)!wmFJtckWrF4vUZXBP0k}=-@2Lr^Q_g<57hugLD zIdb0+B*1{rv(|^;;0xa2J#E35(hNs4jdm)u$g`|y^D1D6m$UY2ZSJ7_HRE=>8CpoN z{j}%vqq6nGCvHVa^w79>Y=c`-uuO6Tr{U#cKQ93@{4Oay!pxRYs!zuSQwBSs|s@_$?kh!S4Tz zP6soE_tPPk$!WA*$T`HWamTo;)tRg0kgk0S+%YB mZTP*A`E8gzbWWcC6ZjkR2fHw_YJj2u0000t literal 0 HcmV?d00001 diff --git a/src/assets/icons/example/analysis_sandbox.png b/src/assets/icons/example/analysis_sandbox.png new file mode 100644 index 0000000000000000000000000000000000000000..0e6d138c028df2f03a590f319749052c5444a08b GIT binary patch literal 1296 zcmV+r1@HQaP)O^EwQm8RKb##>_!pd4=FAx7DTjU zBbJ~T5kc96)>sukv8ALHN=eLaqN%k}r1onY#2B+_cCKgM?&jqs``V=#`a=hneQ(~K zIp>~x=iX7c%tKvfeEbIqe805{D$s&}?!Zm$Clm(44^fBL7>Xqj^(5-s-kYzmG$f;? zah=)+rEUXc7z^#yhQMhO_zG(3Hwc*lZejL*cc^ zpog1Rz+z779E{*E%9JA0C9q_I|8WxBjdc18+}d%zXfns2s>GP4!nlR|bs`jd0wbHt zFkbO2g1^6%Jq3x#4v1`}3X5RzJx?N!B9eiUvkIz`Qdn=}{E-6Ug)+(iP%=YTs)rH3(RrS&gpE`fpO zjSRv2RKPAO86jh^^jd-p`*=?9nhh5#U@n1VILKa*oCYsY4?KD({V+o9afa?|62IG7 zmtP~Yht;zIi8Jd^|Hj@6Iph*Jyd_|jm!`GFlQ6pwIXigZ&mvU482zc0R;fCo^Y+zV%d-q}%`OD1-$XL?I7xLl;mGKN zsBbsN(|33aPa?9NF1FIuEB*2DCGQOP@N_B+MxJH`>}8ibs6?n;0cn=M0Djg6f%-TxaMZ;^Ka!|1qLI_8RKCW z*;@z9+X73kZ(VWq-e_WUovrjHw#f~gE}hFZS4{+;pgwlLp9)?A61AAUrlXZ*dtss0 zz#M=Y<;QAwQ)Z@O&^>KWf6L{cL#!PrpInS(yG|D(;YBc4CY}0$A*{_B&#r{#2$<}e z`Na@&y1U7WQ+ysGlN%fhQNQs0Ml@Gn?-vG_fLT5e?qx$X7eE{Vcf$Nsb%oJ_N5B%3mn_Vq5I|G=Tk<^v7V2)fG$jhX&2vr zMG=Ssa6D(KF}Yl0Apna2yr`QMHv#?crU7s~)5g3pW)VP^8t@_za{gaMfB{gHL#T+2 zHK2G#Bp!iUxq>E9W>UD7wJ{V=EWwCyJq^ea*7(sbmg2Pzr8shXEDh(%td9P2BwPLZ zDY6@di3`kc0>H*1jP(NBQ%ZUk)CnLmEb7H@>Z>RKkd}t-VJhLMW*x8zfYR*P4ITF^ z_JUShFNgt%#=zWcTfG<<{Q>on4~Xi~1W_)roOUU|TxpOM^B^Zqac&;6`U|X{n^=u{ z-8zCL?z=yXxep+2+0UGe?!)cX1!~|!YT%I&K>UCQz~6Ab)Pt6F3p4dPY*F8$ck~al zH2?e!*!{+DNdR%z%>Cp+U+PD3`g=!&7DX85cX+_?Eb^brdIFrBI*dscA#C_u~T&Dx=6UGWtObOn&a{ zQ9RUM+!c=yQZU*?=%rz#&ML?mJ}~aaT=@_^d^1UrG}y$pwHuLD*m|D>A_>5|A+XV= z0igyW;GDg-E~06ZQ(2%p*9HKB9;F9hS?_Ruk68<(BR?X4eP0TIh`?l-b>JlHK*vJl z7M0r2IFwzAL~V(dPP0_*q~iDDn?t*l?l~t=+uNi@-Gl&A+Sd+k_b(TZ84)Hbp~zth z?*wW5nHTSJdyZU&&g9UoyO;rgA~$x?7_FD5sMG_>R$B}m7M*O#`yC?ScP$TVLIaWL ztm+50?P$(6E_eSLdXKkJ7=O0SQy0L{R%M-85&a4O+Uc&#g;Wg$7wATihCIMR5*4W4 zL*X^Z@!5#MLDF(E0YEAls7e#H@-&@)#$<aZ8G2Beim;rLGp5b;{U2$F&qy#U1O zk)enq)(aBJVxhp-(C=!^`c4$Ky4sRUOu?6MQN4wSCRXwFkv>?>16+B9A?opf&Jz5c z8;dX&fdl}-XH@;Y>;d;ctB;^GLBxtxQjznp?7dD;@BqY8FM42I3cQU974rTX=0@&- zZp}cco6Wl-(YZ|PW*VxeP#80*YXGD_p}C`*BD^)F5JiD1z7=xS87vH5gO%-NTDpto mvZS$}W*p03@_RgDSr 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 literal 0 HcmV?d00001 diff --git a/src/assets/icons/example/sandbox_firefighter.png b/src/assets/icons/example/sandbox_firefighter.png new file mode 100644 index 0000000000000000000000000000000000000000..95e05e1c5eb76ec036fe0ea3bb09e569364bb891 GIT binary patch literal 1378 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 literal 0 HcmV?d00001 diff --git a/src/assets/icons/example/sandbox_trapped.png b/src/assets/icons/example/sandbox_trapped.png new file mode 100644 index 0000000000000000000000000000000000000000..7ec3f366133eae5b1785b274b662c5bd734e6758 GIT binary patch literal 1156 zcmV-~1bh35P)(EYPwOO3qep26hx^D1L86ix@hU5 zP^en8E-G;o=%y4z#UI+LnKV!(??+>r48i5doy$I`T6cS z=bm#e!Zr`wX8q6x;QE*|V}Twvpziapv{`gPi^1y6h!Ff!sl&CHA^~8O+XAkd1v5#l z|DK{EqGSku(}jQyg#gkpQ>}Z~V_hMeJMPT!K;rVbwp0nZSK`Ov;9n5#6@mw6UQ5EfdsPl65$XINmAEg&Nc zfKmyC^g@!!|*r_%BQuIUuWb9myc9+Yb=2B z0v{L9%Htq}&;`rm_UppZHSoj;pXs*%#oqL0IjOwNN#(P?09YL4#!jgq&vn7_xI835 z{ieWvpBWDe?LSLm;2fb|=WknR_-d-*A1_jF*86ZlcaXSc=OaS8h(JGtDU|dF2za|v z^H24oG)?oc02-+2Ig;=#9|BXGZVm`3`I)9>u z4*_X{5RZl$iB7Tw-rSUS6UZ!IZPc3LOh}@157A#Dpxf+%=ZSEMlh9BYfJ9dS>;)q4 zZUSUS(5$*}qZhDZ3#5vXiBghcnEidawd>0qcnb*PQ+CB;aluY2)0`D$;Ezo;;qNRE z#Q-{THEEobw)i-%@kI0spgx8q-{9v#0iv`~|D!T3z}q#s1~<0^0620#D0tThOPUQ$ z3I&`O0UYPtFyeunMbf@N_>Na@@sSK0nyhh^H#m?{?Ar4HC!$ary8tB3a@~I~7M5;+ z*cuD+K767}aDpQuG6cdC4$#}X)`Cm97BJMbQEj^t5l218n3_W&_i^Ss)+LPSd(Qm_ zm@!x>TkjBxg%Cn`c<7!~{`8&()I0e$9Rn!E5ch>=+Xc}bEAVG_H=!2KbF#X~%3q91 z5hKy~TBYuvd1L^xp%#O(a}5zD!@Uu4FGh!|wO}bN+!QKr$o@tmP8*tkmA`kk3GTxK zNcqTp5=N|&^@`GBkQ4FZo~Hj(mVbZU2|HxTeszfaOXWJOKJqDG|IQ0;O5-*^OQ2~> z^VU0ggb>`6!aU~|j=^3{DRNtGd|A+a_c&?Mbj+JCBO?{_#e{>Y=Q++*nk=>sYxu}O zzyZamK5Q}A}A=@ z6~s(s5Qw;tu$jl`A}DGk=nD%1ZJc*c=go{YHZ$*Q1POZEd(Z#;&N=^gF2XE-ILrCr z-v{uAs3ll~kKA@LuMRYYsa*h_C89gQ8fCW|2zLNP!mr6|2zcmsQljoajdIW_gew3w ztlt8_JsHU)bp~pc<4zzP1NcMwWklp8lJkg+Ttv8oJ#o)2gd+gIMy;q*PnNvt`C^mB zSlhb-N9;h@22ew^j)3~O`T_t-YG-ePaT0|RtPd>5&sGq&0Myqs7se^VV&$fSX+ZpE z^zfgtZ)O0(`dv2NPAjo#=Ukc&y6>r{@R?bhWe2uu)WFpYI!X@khVL)oK@9}GqA@Q3 ze^@?b%9g~^PL19QhP`qTC7v+MN&?pgt1)K*<{h98p@uttaPktXr0M5u)HR8&u{ue* zz+O0&E8Y~qr%{DM`ulAEdrlyNcL6U}sv5`OuSHPbG%BELQko(eqX1UtI$<4bwsqr?)InWD22xrpIx; z0`d$X9!m}790Q%s>o+uln>0Eg__@t4#Iqprg_B4KSNU^5PWEWzfXnR*MR68gflNg?WDQ`Y6E>L&r-h$?V0QiU-)zOh`z ze~a+LR77L2fr_C~kSylb*KzAd5Jca%`S4_*0>|wnp1R{0z=^n>yS4z-2(6Y9>bc@- zZgCX{mE{(vQ9=EV(?w>!3B$A>h|crO7ucyLdFPKQ6I+s?f1beY_dOWR zreO-utWl#brH?o27DU)+A0l~^0i-UdTalvuu@}c21EdES4->yE9$vFmtXrBBMu;fi s8J?H}LoX_E!V21!2dqT$IsXsv3mwoQFb%%#a{vGU07*qoM6N<$g5O_+761SM literal 0 HcmV?d00001 diff --git a/src/components/CesiumMap/index.vue b/src/components/CesiumMap/index.vue index da6368a..9306a77 100644 --- a/src/components/CesiumMap/index.vue +++ b/src/components/CesiumMap/index.vue @@ -16,6 +16,7 @@ const props = defineProps({ } } }) +const emits = defineEmits(['init']) let viewer = null; @@ -91,6 +92,8 @@ const initMap = async () => { // 取消左键双击 viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); + + emits('init', viewer); } // 设置初始值 @@ -177,6 +180,10 @@ const mapSetView = (options) => { // 设置模型 const setModel = async (options) => { + if (!options.modelList || options.modelList.length === 0) { + return; + } + // 3d模型参数 const tilesetOption = { maximumScreenSpaceError: 1, // 应对大疆一键生成的模型问题；如模型能正常显示但文件加载太过频繁，可增大数值 diff --git a/src/components/CesiumMap/utils/calcFn.js b/src/components/CesiumMap/utils/calcFn.js new file mode 100644 index 0000000..edec970 --- /dev/null +++ b/src/components/CesiumMap/utils/calcFn.js @@ -0,0 +1,32 @@ +import * as Cesium from "cesium"; + +const getCenterPosition = (positions) => { + if(positions.length === 0) { + console.warn("positions is empty"); + return Cesium.Cartesian3.ZERO; + } + + let maxX = Cesium.Math.toRadians(-180), + minX = Cesium.Math.toRadians(180); + let maxY = Cesium.Math.toRadians(-90), + minY = Cesium.Math.toRadians(90); + + for (let i = 0; i < positions.length; i++) { + const cartographic = Cesium.Cartographic.fromCartesian(positions[i]); + if (cartographic.longitude < minX) { + minX = cartographic.longitude; + } else if (cartographic.longitude > maxX) { + maxX = cartographic.longitude; + } + if (cartographic.latitude < minY) { + minY = cartographic.latitude; + } else if (cartographic.latitude > maxY) { + maxY = cartographic.latitude; + } + } + return Cesium.Cartesian3.fromRadians((minX + maxX) / 2, (minY + maxY) / 2) +}; + +export { + getCenterPosition +} diff --git a/src/components/CesiumMap/utils/layerFn.js b/src/components/CesiumMap/utils/layerFn.js new file mode 100644 index 0000000..6b451cb --- /dev/null +++ b/src/components/CesiumMap/utils/layerFn.js @@ -0,0 +1,167 @@ +import * as Cesium from "cesium"; +import { getCenterPosition } from "./calcFn"; + +const createFeature = (style, position, text, layer) => { + if (!style) { + return null; + } + + switch (style.properties?.type) { + case "point": + case "billboard": + case "label": + return createPointFeature(style, position, text, layer); + case "polyline": + return createPolylineFeature(style, position, text, layer); + case "polygon": + return createPolygonFeature(style, position, text, layer); + default: + return null; + } +}; + +/** + * 生成点要素 + * 目前图标、标签没有额外操作，故共享该方法 + * @param {Object} style 处理后的样式对象 + * @param {Cesium.Cartesian3} position 点位置 + * @param {String} text 标签文本，可选 + * @param {Cesium.DataSource} layer 图层 + * @returns {Cesium.Entity} 点对象 + */ +const createPointFeature = (style, position, text, layer) => { + if (!position) { + return null; + } + + const entity = new Cesium.Entity({ + position: position, + ...cloneStyle(style), + }); + // 添加标签文本 + // if(text !== null && text !== undefined) { + // if(Cesium.defined(entity.label)) { + // entity.label.text = new Cesium.ConstantProperty(text) + // } else { + // entity.label = new Cesium.LabelGraphics({ + // text, + // font: '16px sans-serif', + // }) + // } + // } + if (Cesium.defined(entity.label) && text !== null && text !== undefined) { + entity.label.text = new Cesium.ConstantProperty(text); + } + // 加入图层 + if (layer) { + layer.entities.add(entity); + } + return entity; +}; + +/** + * 生成线要素 + * @param {Object} style 处理后的样式对象 + * @param {Array} position 位置数组 + * @param {String} text 标签文本，可选 + * @param {Cesium.DataSource} layer 图层 + * @returns {Cesium.Entity} 线对象 + */ +const createPolylineFeature = (style, position, text, layer) => { + if (!position || position.length < 2) { + return null; + } + + const entity = new Cesium.Entity(cloneStyle(style)); + // 添加线坐标 + if (Cesium.defined(style.polyline)) { + entity.polyline.positions = new Cesium.ConstantProperty( + style.properties.closed ? [...position, position[0]] : position + ); + } else { + entity.polyline = new Cesium.PolylineGraphics({ + positions: position, + }); + } + // 添加标签文本 + if (Cesium.defined(entity.label) && text !== null && text !== undefined) { + entity.label.text = new Cesium.ConstantProperty(text) + // 添加label坐标 + entity.position = getCenterPosition(position) + } + // 加入图层 + if (layer) { + layer.entities.add(entity); + } + return entity; +}; + +/** + * 生成面要素 + * @param {Object} style 处理后的样式对象 + * @param {Array} position 位置数组 + * @param {String} text 标签文本，可选 + * @param {Cesium.DataSource} layer 图层 + * @returns {Cesium.Entity} 面对象 + */ +const createPolygonFeature = (style, position, text, layer) => { + if (!position || position.length < 3) { + return null; + } + + const entity = new Cesium.Entity(cloneStyle(style)); + // 添加面坐标 + if (Cesium.defined(style.polygon)) { + entity.polygon.hierarchy = new Cesium.PolygonHierarchy(position); + } else { + entity.polyline = new Cesium.PolygonGraphics({ + hierarchy: new Cesium.PolygonHierarchy(position), + }); + } + // 添加轮廓线坐标 + // 这里消极的判断，仅当存在polyline时才添加，且必定是闭合线 + if (Cesium.defined(style.polyline)) { + entity.polyline.positions = new Cesium.ConstantProperty([ + ...position, + position[0], + ]); + } + // 添加标签文本 + if (Cesium.defined(entity.label) && text !== null && text !== undefined) { + entity.label.text = new Cesium.ConstantProperty(text) + // 添加label坐标 + entity.position = getCenterPosition(position) + } + // 加入图层 + if (layer) { + layer.entities.add(entity) + } + return entity; +}; + +const cloneStyle = (style) => { + const clone = {}; + for (let key in style) { + console.log(key); + if (key === "id") { + clone[key] = style[key]; + } else if (key === "properties") { + // 浅拷贝属性 + clone[key] = {}; + for (let prop in style[key]) { + clone[key][prop] = style[key][prop]; + } + } else { + // 用cesium提供方法拷贝 + clone[key] = style[key].clone(); + } + } + return clone; +}; + +export { + createFeature, + createPointFeature, + createPolylineFeature, + createPolygonFeature, +}; diff --git a/src/components/CesiumMap/utils/styleFn.js b/src/components/CesiumMap/utils/styleFn.js new file mode 100644 index 0000000..28fcdcb --- /dev/null +++ b/src/components/CesiumMap/utils/styleFn.js @@ -0,0 +1,330 @@ +import * as Cesium from 'cesium'; + +let _clampToGround = false; + +const getStyle = (options) => { + // 将配置项转为cesium内部类，提供复用 + const _options = {} + // 判断类型（option提供了则套用，未提供测推断） + if(options.type) { + _options.type = options.type + } else if(options.point) { + _options.type = 'point' + } else if(options.polygon) { + _options.type = 'polygon' + } else if(options.polyline) { + _options.type = 'polyline' + } else if(options.billboard) { + _options.type = 'billboard' + } else if(options.label) { + _options.type = 'label' + } else { + // 什么配置都没提供，则返回空对象 + return _options + } + + // 转通用配置 + const common = parseCommonOptions(_options.type, options.common); + // 属性配置项 + const property = options.property || {}; + property.type = _options.type; + + switch (_options.type) { + case 'point': + return parsePointOptions(options, common, property) + case 'polyline': + return parsePolylineOptions(options, common, property) + case 'polygon': + return parsePolygonOptions(options, common, property) + case 'billboard': + return parseBillboardOptions(options, common, property) + case 'label': + return parseLabelOptions(options, common, property) + default: + console.warn('不支持的样式类型:', _options.type); + return {} + } +} + +// 解析通用配置 +const parseCommonOptions = (type, options) => { + const _options = {} + if(!options) { + return _options + } + // 贴地 + if(options.clampToGround) { + _clampToGround = true; + } + // 按视距缩放 + // 线和面没有按视距缩放 + if(options.scaleByDistance && type !== 'polyline' && type !== 'polygon') { + _options.scaleByDistance = new Cesium.NearFarScalar( + options.scaleNear, + options.scaleNearValue, + options.scaleFar, + options.scaleFarValue + ); + } + return _options +} + +/** + * 解析点相关配置为对象 + * @param {Object} options 总配置项 + * @param {Object} common 通用配置对象 + * @param {Object} property 属性配置对象 + * @returns 点样式对象 + */ +const parsePointOptions = (options, common, property) => { + const style = { + point: createPointByOptions(options.point, common), + properties: property || {} + } + // 添加图标、标签 + if(options.billboard) { + style.billboard = createBillboardByOptions(options.billboard, common) + } + if(options.label) { + style.label = createLabelByOptions(options.label, common) + } + return style +} + +/** + * 解析点配置项 + * @param {Object} options 点配置项 + * @param {Object} common 通用配置对象 + * @returns cesium点对象 + */ +const createPointByOptions = (options, common) => { + if(!options) { + return undefined + } + + const _options = { + pixelSize: parseFloat(options.pixelSize) || 10, + color: Cesium.Color.fromCssColorString(options.color) || Cesium.Color.WHITE, + ...common + } + if(options.showOutline) { + _options.outlineWidth = parseFloat(options.outlineWidth) || 1 + _options.outlineColor = Cesium.Color.fromCssColorString(options.outlineColor) || Cesium.Color.BLACK + } + if(_clampToGround) { + _options.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND + } + return new Cesium.PointGraphics(_options) +} + +/** + * 解析线相关配置为对象 + * @param {Object} options 总配置项 + * @param {Object} common 通用配置对象 + * @param {Object} property 属性配置对象 + * @returns 线样式对象 + */ +const parsePolylineOptions = (options, common, property) => { + const style = { + polyline: createPolylineByOptions(options.polyline, common), + properties: property || {} + } + // 添加闭合属性 + if(options.polyline.closed) { + property.closed = true + } + // 添加标签 + if(options.label) { + style.label = createLabelByOptions(options.label, common) + } + return style +} + +/** + * 解析线配置项 + * @param {Object} options 线配置项 + * @param {Object} common 通用配置对象 + * @param {Object} property 属性配置对象 + * @returns cesium线对象 + */ +const createPolylineByOptions = (options, common) => { + if(!options) { + return undefined + } + + const _options = { + width: parseFloat(options.width) || 1, + material: Cesium.Color.fromCssColorString(options.color) || Cesium.Color.WHITE, + ...common + } + if(_clampToGround) { + _options.clampToGround = true + } + return new Cesium.PolylineGraphics(_options) +} + +/** + * 解析面相关配置为对象 + * @param {Object} options 总配置项 + * @param {Object} common 通用配置对象 + * @param {Object} property 属性配置对象 + * @returns 面样式对象 + */ +const parsePolygonOptions = (options, common, property) => { + const style = { + polygon: createPolygonByOptions(options.polygon, common), + properties: property || {} + } + // 添加面的轮廓线 + if(options.polygon.showOutline) { + property.closed = true + style.polyline = createPolygonOutlineByOptions(options.polygon, common) + } + // 添加标签 + if(options.label) { + style.label = createLabelByOptions(options.label, common) + } + return style +} + +/** + * 解析面的轮廓线配置项 + * 因面的自带相关属性不支持贴地形，所以生成cesium线对象 + * @param {Object} options 面配置项 + * @param {Object} common 通用配置对象 + * @returns cesium线对象 + */ +const createPolygonOutlineByOptions = (options, common) => { + if(!options) { + return undefined + } + + const _options = { + width: parseFloat(options.outlineWidth) ?? 1, + material: Cesium.Color.fromCssColorString(options.outlineColor) || Cesium.Color.BLACK, + ...common + } + if(_clampToGround) { + _options.clampToGround = true + } + return new Cesium.PolylineGraphics(_options) +} + +/** + * 解析面配置项 + * @param {Object} options 面配置项 + * @param {Object} common 通用配置对象 + * @returns cesium面对象 + */ +const createPolygonByOptions = (options, common) => { + if(!options) { + return undefined + } + + const _options = { + material: Cesium.Color.fromCssColorString(options.color) || Cesium.Color.WHITE, + ...common + } + if(_clampToGround) { + _options.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND + } + return new Cesium.PolygonGraphics(_options) +} + +/** + * 解析图标相关配置为对象 + * @param {Object} options 总配置项 + * @param {Object} common 通用配置对象 + * @param {Object} property 属性配置对象 + * @returns 图标样式对象 + */ +const parseBillboardOptions = (options, common, property) => { + const style = { + billboard: createBillboardByOptions(options.billboard, common), + properties: property || {} + } + // 添加标签 + if(options.label) { + style.label = createLabelByOptions(options.label, common) + } + return style +} + +/** + * 解析图标配置项 + * @param {Object} options 图标配置项 + * @param {Object} common 通用配置对象 + * @returns cesium图标对象 + */ +const createBillboardByOptions = (options, common) => { + if(!options) { + return undefined + } + + const _options = { + image: options.image, + scale: parseFloat(options.scale) ?? 1, + rotation: Cesium.Math.toRadians(parseFloat(options.rotation) || 0), + horizontalOrigin: parseInt(options.horizontalOrigin) ?? Cesium.HorizontalOrigin.CENTER, + verticalOrigin: parseInt(options.verticalOrigin) ?? Cesium.VerticalOrigin.BOTTOM, + pixelOffset: new Cesium.Cartesian2(parseFloat(options.horizontalOffset) || 0, parseFloat(options.verticalOffset) || 0), + ...common + } + if(_clampToGround) { + _options.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND + } + return new Cesium.BillboardGraphics(_options) +} + +/** + * 解析标签相关配置为对象 + * @param {Object} options 总配置项 + * @param {Object} common 通用配置对象 + * @param {Object} property 属性配置对象 + * @returns 标签样式对象 + */ +const parseLabelOptions = (options, common, property) => { + return { + label: createLabelByOptions(options.label, common), + properties: property || {} + } +} + +/** + * 解析标签配置项 + * @param {Object} options 标签配置项 + * @param {Object} common 通用配置对象 + * @returns cesium标签对象 + */ +const createLabelByOptions = (options, common) => { + if(!options) { + return undefined + } + + const _options = { + font: `${options.font ?? 16}px sans-serif`, + fillColor: Cesium.Color.fromCssColorString(options.fillColor) || Cesium.Color.WHITE, + horizontalOrigin: parseInt(options.horizontalOrigin) ?? Cesium.HorizontalOrigin.CENTER, + verticalOrigin: parseInt(options.verticalOrigin) ?? Cesium.VerticalOrigin.BOTTOM, + pixelOffset: new Cesium.Cartesian2(parseFloat(options.horizontalOffset) ?? 0, parseFloat(options.verticalOffset) ?? 0), + ...common + } + if(options.showOutline) { + _options.style = Cesium.LabelStyle.FILL_AND_OUTLINE + _options.outlineWidth = parseFloat(options.outlineWidth) || 1 + _options.outlineColor = Cesium.Color.fromCssColorString(options.outlineColor) || Cesium.Color.BLACK + } + if(options.showBackground) { + _options.showBackground = true + _options.backgroundColor = Cesium.Color.fromCssColorString(options.backgroundColor) || new Cesium.Color(0.165, 0.165, 0.165, 0.8) + _options.backgroundPadding = new Cesium.Cartesian2(parseFloat(options.horizontalPadding) ?? 7, parseFloat(options.verticalPadding) ?? 5) + } + if(_clampToGround) { + _options.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND + } + return new Cesium.LabelGraphics(_options) +} + +export { + getStyle +} diff --git a/src/router/index.js b/src/router/index.js index 4f57d6a..37a167b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -99,6 +99,12 @@ export const constantRoutes = [ component: () => import('@/views/gisManagement/configSetting/index.vue'), name: 'configSetting', meta: { title: '地图配置' } + }, + { + path: 'configStyle', + component: () => import('@/views/gisManagement/configStyle/index.vue'), + name: 'configStyle', + meta: { title: '样式配置' } } ] } diff --git a/src/views/gisManagement/configStyle/iconDialog.vue b/src/views/gisManagement/configStyle/iconDialog.vue new file mode 100644 index 0000000..5f2e7c1 --- /dev/null +++ b/src/views/gisManagement/configStyle/iconDialog.vue @@ -0,0 +1,170 @@ + + + + + \ No newline at end of file diff --git a/src/views/gisManagement/configStyle/imageLibrary.vue b/src/views/gisManagement/configStyle/imageLibrary.vue new file mode 100644 index 0000000..ef37f45 --- /dev/null +++ b/src/views/gisManagement/configStyle/imageLibrary.vue @@ -0,0 +1,234 @@ + + + + + diff --git a/src/views/gisManagement/configStyle/index.vue b/src/views/gisManagement/configStyle/index.vue new file mode 100644 index 0000000..de4afdf --- /dev/null +++ b/src/views/gisManagement/configStyle/index.vue @@ -0,0 +1,155 @@ + + + + + \ No newline at end of file diff --git a/src/views/gisManagement/configStyle/styleDialog.vue b/src/views/gisManagement/configStyle/styleDialog.vue new file mode 100644 index 0000000..48b3962 --- /dev/null +++ b/src/views/gisManagement/configStyle/styleDialog.vue @@ -0,0 +1,728 @@ + + + + + \ No newline at end of file