From a206b1c0eb88d474aa0987cff0c49dcc37df26b0 Mon Sep 17 00:00:00 2001 From: Sjh <55341701@qq.com> Date: Mon, 6 Nov 2023 14:42:49 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]gis=E6=A0=87=E6=B3=A8?= =?UTF-8?q?=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/gis-home/gis-home.component.html | 27 ++++ .../pages/gis-home/gis-home.component.scss | 2 + src/app/pages/gis-home/gis-home.component.ts | 120 +++++++++++++++++- src/assets/gismap/gis/1.png | Bin 0 -> 416 bytes src/assets/gismap/gis/2.png | Bin 0 -> 286 bytes src/assets/gismap/gis/3.png | Bin 0 -> 450 bytes src/assets/gismap/gis/4.png | Bin 0 -> 716 bytes src/assets/gismap/gis/marker.png | Bin 0 -> 2137 bytes src/styles.scss | 108 ++++++++++++---- 9 files changed, 229 insertions(+), 28 deletions(-) create mode 100644 src/assets/gismap/gis/1.png create mode 100644 src/assets/gismap/gis/2.png create mode 100644 src/assets/gismap/gis/3.png create mode 100644 src/assets/gismap/gis/4.png create mode 100644 src/assets/gismap/gis/marker.png diff --git a/src/app/pages/gis-home/gis-home.component.html b/src/app/pages/gis-home/gis-home.component.html index 3e86fe2..6ded6e1 100644 --- a/src/app/pages/gis-home/gis-home.component.html +++ b/src/app/pages/gis-home/gis-home.component.html @@ -55,4 +55,31 @@ + + \ No newline at end of file diff --git a/src/app/pages/gis-home/gis-home.component.scss b/src/app/pages/gis-home/gis-home.component.scss index 2c07209..0c4a8a1 100644 --- a/src/app/pages/gis-home/gis-home.component.scss +++ b/src/app/pages/gis-home/gis-home.component.scss @@ -137,3 +137,5 @@ left: 0; bottom: 0; } + + diff --git a/src/app/pages/gis-home/gis-home.component.ts b/src/app/pages/gis-home/gis-home.component.ts index 15a087e..d2b0320 100644 --- a/src/app/pages/gis-home/gis-home.component.ts +++ b/src/app/pages/gis-home/gis-home.component.ts @@ -802,7 +802,7 @@ export class GisHomeComponent implements OnInit { textStyle: { color: "#fff", fontSize: 22, - lineHeight: 12, + lineHeight: 8, fontWeight: "bold", textShadowBlur: 20, textShadowColor: "#fff", @@ -877,6 +877,77 @@ export class GisHomeComponent implements OnInit { }, data: this.echartright2Data, }, + { + name: "外边框", + type: "pie", + clockWise: false, //顺时加载 + hoverAnimation: false, //鼠标移入变大 + center: ["30%", "50%"], + radius: ["77%", "78%"], + label: { + normal: { + show: false, + }, + }, + data: [ + { + value: 9, + name: "", + itemStyle: { + normal: { + borderWidth: 1, + borderColor: "#435067", + }, + }, + }, + ], + }, + { + // name: "外部刻度", + type: "gauge", + center: ["30%", "50%"], + radius: "45%", + min: 0, //最小刻度 + max: 100, //最大刻度 + splitNumber: 10, //刻度数量 + startAngle: 1, + endAngle: 360, + axisLine: { + show: true, + // 仪表盘刻度线 + lineStyle: { + width: 1, + color: [[1, "red"]], + }, + }, + //仪表盘文字 + axisLabel: { + show: false, + }, //刻度标签。 + axisTick: { + show: true, + splitNumber: 5, + lineStyle: { + color: "#556075", //用颜色渐变函数不起作用 + width: 1, + }, + length: 3, + }, //刻度样式 + splitLine: { + show: true, + length: 5, + lineStyle: { + width: 1, + color: "#979EAA", //用颜色渐变函数不起作用 + }, + }, //分隔线样式 + detail: { + show: false, + }, + pointer: { + show: false, + }, + }, ], }; @@ -1050,10 +1121,55 @@ export class GisHomeComponent implements OnInit { map; zoom = 5; + + markerList = [ + { marker: null, coordinate: [98.56934, 38.93555] }, + { marker: null, coordinate: [97.0752, 32.95898] }, + { marker: null, coordinate: [103.88672, 22.89551] }, + { marker: null, coordinate: [108.41309, 29.79492] }, + ]; initMap() { this.map = new T.Map("mapDiv", { projection: "EPSG:4326", }); - this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom); + this.map.centerAndZoom(new T.LngLat(107.79785, 35.77148), this.zoom); + //创建图片对象 + var icon = new T.Icon({ + iconUrl: "../../../assets/gismap/gis/marker.png", + iconSize: new T.Point(25, 44), + iconAnchor: new T.Point(14, 40), + }); + //创建标注对象 + this.markerList.forEach((element) => { + element.marker = new T.Marker( + new T.LngLat(element.coordinate[0], element.coordinate[1]), + { + icon: icon, + } + ); + //向地图上添加标注 + this.map.addOverLay(element.marker); + + let sContent = + "
36
36
36
36
"; + // infoWin1.setContent(sContent); + // let infoWin1 = new T.InfoWindow(sContent, { + // closeButton: false, + // }); + // element.marker.openInfoWindow(infoWin1);s + let label = new T.Label({ + text: sContent, + position: element.marker.getLngLat(), + offset: new T.Point(-28, -65), + }); + this.map.addOverLay(label); + }); + this.map.addEventListener("click", (e) => { + this.MapClick(e); + }); + } + //地图点击事件 + MapClick(e) { + console.log("点击坐标:", e.lnglat.getLng() + "," + e.lnglat.getLat()); } } diff --git a/src/assets/gismap/gis/1.png b/src/assets/gismap/gis/1.png new file mode 100644 index 0000000000000000000000000000000000000000..68ce0f1948d9bcfa520cb59f72f556e196eede77 GIT binary patch literal 416 zcmV;R0bl-!P)XmUSO^v&SZFNlgnJKL8&d^r#B>tG&PuSd z2!4TWLZX%yksv0bGGS#d9G8zbYU=|7$IQ-uXZL1DL=?Lk5o^(3D-ki8IU^CV9ufB= zVxZUS87Kj~$8$WiyYAu}F5?tl;s9oFeK1pp@D8U@V}A$v6SuL5W9fT^OPIqXz6^Gf zO7I0{JN^lr$8yL2H8+~aR2SA9`Dw>@rd3f}kI^s=ZU^h9_7&X03Eb48Hu{CL+rY|Q ze$4MNJV~3W>snP+zhV12N%ydp$7w3Ke3!v;&^xzMUx%qM$5NrT5W`$ipQ+9*^0000< KMNUMnLSTZk__kI6 literal 0 HcmV?d00001 diff --git a/src/assets/gismap/gis/2.png b/src/assets/gismap/gis/2.png new file mode 100644 index 0000000000000000000000000000000000000000..96e5a5c7c8ee3959801ce264f99bf23d2047f0cb GIT binary patch literal 286 zcmV+(0pb3MP)FPHSS_0@4ihu2l+qUVFpG;4 z-^LB@Yn%_9#u(4De1-+wj>=S+#s=0qC2$#I+^Jg`LYTx+UyI!`Zg%Q~U*!IGaa}6R zykMgJ2f0VC>_=-&|?&1^cN$qD#rMVnf_P^q1&|V0mfAB{i-({ kHt-JcETwdk{zFQ~pFsI+p)&w@6#xJL07*qoM6N<$f)*isBLDyZ literal 0 HcmV?d00001 diff --git a/src/assets/gismap/gis/3.png b/src/assets/gismap/gis/3.png new file mode 100644 index 0000000000000000000000000000000000000000..ae9791105acbf780788e95b0e92c4378bb0cd4ef GIT binary patch literal 450 zcmV;z0X_bSP)1vbtT4((sFB!N*$O2;HKi=AWHDJ-SWuS6MWQThSc#2=jbdY^sM%1%#*(s- zpZtXdBh0Haom;oty=G?Pt<$~d`_6ef?{~j@B9aJD99RuX0CT{aJ8>K*_bdrnd;mmk z{?LwhpdQ!@+E5w-`T)*=XJFXImVt8MCTK(0iHx!Z#`1!S(!YQr1;+A%V!)ke{sPp5 zeV{N3%ml`p4dKc4J3nX2Z09cmra6OYjZxCOg85-<{FW-F6mQJx1=Zit%RgoNj;JtB&8&k7)VS~ zR?>{5tvnE;jHDk)X-R`N)@O=cXZyl5+#`?)vE|p5wQ1C3ZpaGY0;mGcf$suAre2M< s+gshM))a39s4WoU%KU$uj^m_%0Xgf;?y|p6RR91007*qoM6N<$g0}m~QUCw| literal 0 HcmV?d00001 diff --git a/src/assets/gismap/gis/4.png b/src/assets/gismap/gis/4.png new file mode 100644 index 0000000000000000000000000000000000000000..f9d30d93a8b5118c6243f9941fda4594f471d769 GIT binary patch literal 716 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 P00000NkvXXu0mjfEvN<6 literal 0 HcmV?d00001 diff --git a/src/styles.scss b/src/styles.scss index 3ce3d62..bfa982d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -104,8 +104,8 @@ h1 { //三维场景 .dropDown { - border: 1px solid #23D9FF; - background: linear-gradient(180deg, #000D21 0%, #006E85 100%); + border: 1px solid #23d9ff; + background: linear-gradient(180deg, #000d21 0%, #006e85 100%); li:hover { background-color: transparent; @@ -121,8 +121,8 @@ h1 { } .dropDownPlan { - background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); - box-shadow: 0px 0px 6px #2399FF; + background: linear-gradient(360deg, #000d21 0%, rgba(0, 59, 110, 0.8) 100%); + box-shadow: 0px 0px 6px #2399ff; li { color: #fff; @@ -131,10 +131,9 @@ h1 { //任务弹窗 .taskDialog { - .ant-modal-header, .ant-modal-content { - background: radial-gradient(circle, #004988 0%, #00122D 100%); + background: radial-gradient(circle, #004988 0%, #00122d 100%); } .ant-modal-header, @@ -143,26 +142,26 @@ h1 { } .ant-modal-title, - .ant-form-item-label>label, + .ant-form-item-label > label, .ant-input { - color: #C4E2FC; + color: #c4e2fc; } .ant-modal-footer .ant-btn:first-child { - color: #C4E2FC; - background: #000D21; - border: 1px solid #C4E2FC; + color: #c4e2fc; + background: #000d21; + border: 1px solid #c4e2fc; } .ant-modal-footer .ant-btn:last-child { - color: #C4E2FC; + color: #c4e2fc; background: rgba(0, 129, 255, 0.6); - border: 1px solid #36A2FF; + border: 1px solid #36a2ff; } .ant-input { background: rgba(145, 204, 255, 0.41); - border: 1px solid #91CCFF; + border: 1px solid #91ccff; } textarea { @@ -181,7 +180,11 @@ h1 { .ant-modal-body, .ant-modal-content { height: 100%; - background: radial-gradient(closest-side at 50% 55%, #004988 0%, #00122D 100%); + background: radial-gradient( + closest-side at 50% 55%, + #004988 0%, + #00122d 100% + ); } } @@ -214,7 +217,6 @@ h1 { //bbl 内置color #threeDimensional { - //可展开面板 #disposalPlan { font-size: 15px; @@ -223,7 +225,7 @@ h1 { width: 100%; height: 35px; line-height: 35px; - color: #23D9FF; + color: #23d9ff; padding: 0px; background: rgba(35, 153, 255, 0.41); border: 1px solid rgba(35, 217, 255, 0.4); @@ -235,12 +237,12 @@ h1 { .ant-collapse-content { background-color: transparent; - width: 100% + width: 100%; } } .ant-tree { - color: #C4E2FC; + color: #c4e2fc; } //tree @@ -257,7 +259,8 @@ h1 { //tree - .ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { + .ant-select-disabled.ant-select-single:not(.ant-select-customize-input) + .ant-select-selector { color: #fff; } @@ -296,9 +299,9 @@ h1 { padding-left: 5px; height: 30px; line-height: 28px; - background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); + background: linear-gradient(360deg, #000d21 0%, rgba(0, 59, 110, 0.8) 100%); border: 1px solid rgba(35, 217, 255, 0.4); - color: #23D9FF; + color: #23d9ff; .ant-collapse-arrow { left: 5px; @@ -314,13 +317,13 @@ h1 { //步骤条 - //滚动条样式 + //滚动条样式 ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { - background-image: linear-gradient(#2495f8, #1c73c2, #02233f, ); + background-image: linear-gradient(#2495f8, #1c73c2, #02233f); } ::-webkit-scrollbar-track { @@ -366,7 +369,7 @@ ul { } .btn { - color: #36A2FF; + color: #36a2ff; span { cursor: pointer; @@ -380,7 +383,6 @@ ul { margin-right: 40px; } } - } .spin { @@ -395,3 +397,57 @@ ul { left: 0; top: 0; } + +.markerInfoWin { + position: absolute; + left: 50%; + top: 50%; + z-index: 500; + display: flex; + overflow: hidden; + border-radius: 4px; + div { + display: flex; + justify-content: center; + align-items: center; + color: #fff; + } + .icon { + width: 38px; + height: 36px; + } + .icon1 { + background: linear-gradient( + 90deg, + RGBA(102, 131, 188, 1), + RGBA(102, 131, 188, 0.8) + ); + } + .icon2 { + background: linear-gradient( + 90deg, + RGBA(98, 52, 136, 1), + RGBA(98, 52, 136, 0.8) + ); + } + .icon3 { + background: linear-gradient( + 90deg, + RGBA(39, 126, 81, 1), + RGBA(39, 126, 81, 0.8) + ); + } + .icon4 { + background: linear-gradient( + 90deg, + RGBA(122, 67, 49, 1), + RGBA(122, 67, 49, 0.8) + ); + } + .num { + height: 36px; + width: 40px; + font-size: 16px; + background: RGBA(44, 60, 103, 0.9); + } +}