新增预警积分排名

src/components/GdMap/mapUtil.js

@@ -1,4 +1,5 @@
 import emitter from "@/utils/eventBus.js";
+import { ElContainer } from "element-plus";
 
 export function MapUtil(map) {
   let _that = this;
@@ -84,6 +85,7 @@ export function MapUtil(map) {
         el.style.width = size ? size : "25px";
         if (flag.includes('jczMap_')) el.style.width = '45px';
         if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag, '', offset) //展示标题
+        if (flag == 'hm') _that.makerPopup(item, flag, 'Custom') //展示气泡框
         // 确保坐标格式正确，使用对象格式传递坐标
         const marker = map.Marker(el, { lng: item.jd, lat: item.wd }, { anchor: 'bottom', offset: [0, 0] })
         el.addEventListener("click", () => {
@@ -141,24 +143,63 @@ export function MapUtil(map) {
     });
   }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+  // 展示气泡框  
+  MapUtil.prototype.makerPopup = (item,flag,style = 'Dark')=>{
+    // Dark   Light   Custom
+    if(style == 'Dark' || style == 'Light') { 
+      let list = zdyContent(flag,item);// 默认的样式
+      map.createPopup([item.jd,item.wd],{
+        style:style, // 气泡框样式:
+        data:list,
+        title:item.ssbm,
+        closeButton:false,
+        anchor:'bottom',
+        pixelOffset:[0,-50]
+      })
+    }else {
+      map.createPopup([item.jd,item.wd],{
+        style:'Custom', // // 自定义样式
+        attrs:{
+          class:'popupCustom'
+        },
+        container: zdyContentHtml(flag,item),
+        closeButton:false,
+        anchor:'bottom',
+        pixelOffset:[0,-30]
+      })
+    }
+  }
+  // 弹窗自定义默认内容
+  function zdyContent(flag,item){
+    switch (flag) {
+      case 'hm':
+        return [
+          { label:'临安码线索数量',value:item.lamsx },
+          { label:'布控预警数量',value:item.bkyj },
+          { label:'红色预警数量',value:item.hsyj },
+          { label:'信息采集数量',value:item.xxcjsl },
+        ]
+    }
+  }
+  // 弹窗自定义标签内容
+  function zdyContentHtml(flag,item){
+    let html = ''
+    switch (flag) {
+      case 'hm':
+        html = `
+        <div class="popupCustomBox">
+          <div class="popupCustomTitle_title">${item.ssbm}</div>
+          <div>临安码线索数量：${item.lamsx}</div>
+          <div>布控预警数量：${item.bkyj}</div>
+          <div>红色预警数量：${item.hsyj}</div>
+          <div>信息采集数量：${item.xxcjsl}</div>
+        </div>
+        `
+      break;
+    }
+    return html;
+  }
+   
   // 信息框展示
   MapUtil.prototype.makerShowTitle = (item, points, flag, text, offset) => {
 
@@ -174,6 +215,7 @@ export function MapUtil(map) {
     // 设置样式
     const el = document.createElement('div');
     if (flag == 'hm') {
+      textTitle = item.ssbm;
       // 直接设置元素样式属性，避免对象赋值的兼容性问题
       el.style.fontSize = '12px';
       el.style.color = '#ffffffff';
@@ -565,10 +607,6 @@ export function MapUtil(map) {
     _that._self[flag].push(line)
   }
 
-
-
-
-
   /**
    * 回显平面- 圆 - 多边形 - 矩形
    * @param {*} type 回显形状