[Wip 0000] 地图标记点及弹出层内容开发

src/design/color.less

@@ -163,3 +163,8 @@ html {
 @tabs-bg-not-active: #9e9e9e26;
 
 @card-bg-color: #f8f9fc;
+
+@map-popup-bg: #264471aa;
+@map-popup-board-bg: #cbddee;
+@map-popup-table-th-bg: #264471;
+@map-popup-table-theven-bg: #26447166;

src/layouts/default/feature/SimpleMap.vue

@@ -82,9 +82,7 @@
     // tileLayers.custom.layer.addTo(map);
     // tileLayers.satellite.layer.addTo(map);
 
-    // 保留之前的风险点示例
-    // L.circleMarker([39.9, 116.4], { radius: 20, color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map).bindPopup('风险值: 35');
-
+    // initMarkers();
     initGeoJSON();
   }
 
@@ -105,6 +103,69 @@
       },
     }).addTo(map);
   }
+
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  async function initMarkers() {
+    const markers = await Promise.resolve([
+      {
+        name: '太原',
+        lat: 37.857014,
+        lng: 112.549248,
+        value: 35,
+        color: 'red',
+        radius: 10,
+        type: 'marker',
+      },
+    ]);
+    // const circles = await Promise.resolve([
+    //   {
+    //     name: '西安',
+    //     lat: 34.343161,
+    //     lng: 108.915024,
+    //     value: 35,
+    //     color: 'red',
+    //     radius: 10,
+    //     type: 'circle',
+    //   },
+    // ]);
+    // circles.forEach((circle) => {
+    //   L.circleMarker([circle.lat, circle.lng], { radius: circle.radius, color: circle.color, fillColor: circle.color, fillOpacity: 0.5 })
+    //     .addTo(map)
+    //     .bindPopup(`${circle.name}: ${circle.value}`);
+    // });
+    markers.forEach((marker) => {
+      L.marker([marker.lat, marker.lng], { title: marker.name })
+        .addTo(map)
+        .bindPopup(
+          `
+            <div class="leaflet-popup-content__title">${marker.name}: ${marker.value}</div>
+            <div class="leaflet-popup-content__divider"></div>
+            <div class="leaflet-popup-content__board w-200px">
+              <div>测试字体</div>
+              <div>测试数值</div>
+            </div>
+            <table class="leaflet-popup-content__table w-full mt-10px">
+              <thead>
+                <tr>
+                  <th>name</th>
+                  <th>value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>测试数据1</td>
+                  <td>100</td>
+                </tr>
+                <tr>
+                  <td>测试数据2</td>
+                  <td>200</td>
+                </tr>
+              </tbody>
+            </table>
+          `
+        );
+    });
+  }
 </script>
 
 <style lang="less">
@@ -123,4 +184,57 @@
     filter: invert(0.1) hue-rotate(190deg) saturate(2);
     // filter: sepia(0.3) hue-rotate(180deg) saturate(1.8);
   }
+
+  .leaflet-popup {
+    color: @white;
+    &-content-wrapper {
+      background-color: @map-popup-bg;
+    }
+
+    &-tip {
+      background-color: @map-popup-bg;
+    }
+
+    .leaflet-popup-content {
+      // &__popup {
+      // }
+
+      &__divider {
+        height: 1px;
+        background-color: @white;
+        margin: 10px 5px;
+      }
+
+      &__title {
+        color: @white;
+        text-align: center;
+      }
+
+      &__board {
+        padding: 10px;
+        border-radius: 5px;
+        background-color: @map-popup-board-bg;
+        display: flex;
+        justify-content: space-between;
+      }
+
+      &__table {
+        color: @white;
+        text-align: center;
+
+        thead {
+          height: 20px;
+        }
+        tbody {
+          tr {
+            padding: 5px;
+            background-color: @map-popup-table-th-bg;
+          }
+          tr:nth-child(even) {
+            background-color: @map-popup-table-theven-bg;
+          }
+        }
+      }
+    }
+  }
 </style>