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 0000000..68ce0f1 Binary files /dev/null and b/src/assets/gismap/gis/1.png differ diff --git a/src/assets/gismap/gis/2.png b/src/assets/gismap/gis/2.png new file mode 100644 index 0000000..96e5a5c Binary files /dev/null and b/src/assets/gismap/gis/2.png differ diff --git a/src/assets/gismap/gis/3.png b/src/assets/gismap/gis/3.png new file mode 100644 index 0000000..ae97911 Binary files /dev/null and b/src/assets/gismap/gis/3.png differ diff --git a/src/assets/gismap/gis/4.png b/src/assets/gismap/gis/4.png new file mode 100644 index 0000000..f9d30d9 Binary files /dev/null and b/src/assets/gismap/gis/4.png differ diff --git a/src/assets/gismap/gis/marker.png b/src/assets/gismap/gis/marker.png new file mode 100644 index 0000000..f48063b Binary files /dev/null and b/src/assets/gismap/gis/marker.png differ 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); + } +}