update 对接底部数据，添加地图公共less

2023-12-08 18:16:52 +08:00
parent 190d69573f
commit b7e84b89a9
12 changed files with 269 additions and 95 deletions
@@ -0,0 +1,59 @@
+//高德信息弹窗
+.amap-info-contentContainer {
+  .amap-content-body {
+    background: #00152B;
+    border: 1px solid #129BFF;
+
+    .amap-lib-infowindow {
+      background: #00152B;
+
+      .amap-lib-infowindow-title {
+        color: #fff;
+        border-bottom: 1px solid #129BFF;
+        padding: 4px 0;
+      }
+
+      .amap-lib-infowindow-content {
+        color: #fff;
+        padding: 4px 0;
+      }
+    }
+  }
+}
+
+
+/*地图元素样式---start*/
+//marker
+.amap-marker-label {
+  padding: 0;
+}
+
+.alarm-content {
+  background-color: #263d5e;
+  color: red;
+  font-size: 14px;
+  padding: 7px 10px;
+  border: 1px solid #1b7ef2;
+  position: relative;
+
+  .close-btn {
+    position: absolute;
+    top: -6px;
+    right: -8px;
+    width: 15px;
+    height: 15px;
+    font-size: 12px;
+    background: #ccc;
+    border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    line-height: 15px;
+    box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
+  }
+
+  .close-btn:hover {
+    background: #666;
+  }
+}
+
+/*地图元素样式---end*/
@@ -1,3 +1,5 @@
+@import "./amap-item";
+
 .type-time {
  padding-right: 4%;
  padding-top: 3%;
@@ -107,25 +109,3 @@
  margin-bottom: 4px;
 }

-//高德信息弹窗
-.amap-info-contentContainer {
-  .amap-content-body {
-    background: #00152B;
-    border: 1px solid #129BFF;
-
-    .amap-lib-infowindow {
-      background: #00152B;
-
-      .amap-lib-infowindow-title {
-        color: #fff;
-        border-bottom: 1px solid #129BFF;
-        padding: 4px 0;
-      }
-
-      .amap-lib-infowindow-content {
-        color: #fff;
-        padding: 4px 0;
-      }
-    }
-  }
-}
@@ -45,7 +45,6 @@ export function createCircle(option) {
        radius: 100000, //半径
        borderWeight: 3,
        strokeColor: '#FF33FF',
-        strokeOpacity: 1,
        // strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
@@ -56,4 +55,4 @@ export function createCircle(option) {
        zIndex: 50,
        ...option,
    });
-}
+}
@@ -36,10 +36,9 @@ export const Map = {
            this.drawInnerLine();
            this.drawOutLine();
        });
-    },
-    /**
+    } /**
     * @desc 中国外层边界线
-     */
+     */,
    drawOutLine() {
        let geojson = new AMap.GeoJSON({
            geoJSON: china,
@@ -56,10 +55,9 @@ export const Map = {
            },
        });
        this.map.add(geojson);
-    },
-    /**
+    } /**
     * @desc 中国内层边界线
-     */
+     */,
    drawInnerLine() {
        let geojson = new AMap.GeoJSON({
            geoJSON: chinaInner,
@@ -72,20 +70,19 @@ export const Map = {
            },
        });
        this.map.add(geojson);
-    },
-    // 清空当前地图上除了边界线的覆盖物
+    }, // 清空当前地图上除了边界线的覆盖物
    removeOverlayGroup() {
        this.clearAircraft();
        this.clearOverlay();
        this.clearAirRange();
+        this.clearMarker(); //
        if (this.airMarkerList.length > 0) {
            for (let i = 0; i < this.airMarkerList.length; i++) {
                this.airMarkerList[i].setMap(null);
            }
        }
        // this.map.remove(this.airMarkerList);
-    },
-    //
+    }, //
    /**
     * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
     * @param result
@@ -95,17 +92,17 @@ export const Map = {
        this.overlayGroup = new AMap.OverlayGroup();
        for (let i = 0; i < result.length; i++) {
            let { type, lon, lat } = result[i];
+            if (!lon || !lat || !type) {
+                continue;
+            }
            // 创建一个 Icon
            let startIcon = typeToIcon(type);
            // 将 icon 传入 marker
            let startMarker = new AMap.Marker({
                // 点的坐标
-                position: [lon, lat],
-                // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
-                icon: startIcon,
-                //启用点击事件 如果需要点击事件，必须开启
-                clickable: true,
-                //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
+                position: [lon, lat], // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
+                icon: startIcon, //启用点击事件 如果需要点击事件，必须开启
+                clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
                extData: result[i],
            });
            // 可以调用setExtData（）设置自定义属性
@@ -174,11 +171,10 @@ export const Map = {
            this.map.remove(this.cluster);
            this.cluster = null;
        }
-    },
-    /**
+    } /**
     * @desc 飞机范围
     * @param list
-     */
+     */,
    createAirRange(list) {
        this.removeOverlayGroup();
        this.circleGroup = new AMap.OverlayGroup();
@@ -193,20 +189,15 @@ export const Map = {
            this.map.remove(this.circleGroup);
            this.circleGroup = null;
        }
-    },
-    /**
+    } /**
     * @desc 地方医院医疗点显示
     * @param cityCode 城市code
     * @param keywords 搜索名称
-     */
+     */,
    createActiveHospital(cityCode: string, keywords = '医院') {
        this.removeOverlayGroup();
        this.clearActiveHospital();
        if (!cityCode) return;
-        // AMap.plugin(['AMap.PlaceSearch'], () => {
-        //     //构造地点查询类
-        //
-        // });
        this.placeSearch = new AMap.PlaceSearch({
            pageSize: 30, // 单页显示结果条数
            pageIndex: 1, // 页码
@@ -226,7 +217,7 @@ export const Map = {
            this.placeSearch = null;
        }
    },
-    createMarker(option) {
+    createMarker(option, callbck: () => {}) {
        this.clearMarker();
        let { lon, lat, zoom = 12 } = option;
        const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] });
@@ -234,17 +225,21 @@ export const Map = {
            position: [lon, lat],
            icon: icon,
            offset: new AMap.Pixel(0, 0), //设置偏移量
-            // label: {
-            //     content: labelContent,
-            //     offset: labelOffset,
-            // },
+            label: {
+                content: `<div class="alarm-content" > 
+                                <div>${option?.realName},${option?.eventType_dictText}</div>
+                           </div>`,
+                offset: new AMap.Pixel(0, -9),
+                direction: 'top',
+            },
        });
        this.map.add(this.marker);
        this.map.setZoomAndCenter(zoom, [lon, lat]);
+        this.marker.on('click', callbck);
    },
    clearMarker() {
        if (this.marker) {
-            this.marker.setMap(null);
+            this.marker?.setMap(null);
            this.marker = null;
        }
    },