[新增]gis标注点

src/app/pages/gis-home/gis-home.component.html

@@ -55,4 +55,31 @@
             </div>
         </div>
     </div>
+
+    <!-- <div class="markerInfoWin">
+        <div class="icon icon1">
+            <img src="../../../assets/gismap/gis/1.png" alt="">
+        </div>
+        <div class="num">
+            36
+        </div>
+        <div class="icon icon2">
+            <img src="../../../assets/gismap/gis/2.png" alt="">
+        </div>
+        <div class="num">
+            36
+        </div>
+        <div class="icon icon3">
+            <img src="../../../assets/gismap/gis/3.png" alt="">
+        </div>
+        <div class="num">
+            36
+        </div>
+        <div class="icon icon4">
+            <img src="../../../assets/gismap/gis/4.png" alt="">
+        </div>
+        <div class="num">
+            36
+        </div>
+    </div> -->
 </div>

src/app/pages/gis-home/gis-home.component.scss

@@ -137,3 +137,5 @@
   left: 0;
   bottom: 0;
 }
+
+

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 =
+        "<div class='markerInfoWin'><div class='icon icon1'><img src='../../../assets/gismap/gis/1.png' alt=''></div><div class='num'> 36 </div><div class='icon icon2'><img src='../../../assets/gismap/gis/2.png' alt=''></div><div class='num'> 36 </div><div class='icon icon3'><img src='../../../assets/gismap/gis/3.png' alt=''></div><div class='num'> 36 </div><div class='icon icon4'><img src='../../../assets/gismap/gis/4.png' alt=''></div><div class='num'> 36 </div></div>";
+      // 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());
   }
 }

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);
+  }
+}