更新

src/components/GdMap/index.vue

@@ -154,6 +154,10 @@ onMounted(() => {
   emitter.on("showSquire", (obj) => {
     mapUtil.value.zdySquire(obj);
   });
+  // 展示气泡框
+  emitter.on("makerPopup", (obj) => {
+    mapUtil.value.makerPopup(obj);
+  });
 
   // 绘制图形 - 回显区域
   emitter.on("drawShape", (res) => {
@@ -288,6 +292,7 @@ onUnmounted(() => {
   emitter.off("showPoint");
   emitter.off("deletePointArea");
   emitter.off("deletePointAreaOne");
+  emitter.off("makerPopup");
   emitter.off("drawShape");
   emitter.off("echoPlane");
   emitter.off("removeEara");

src/components/GdMap/indexww.vue

@@ -167,6 +167,11 @@ onMounted(() => {
     mapUtil.value.showPoint(obj);
   });
 
+  // 展示气泡框
+  emitter.on("makerPopup", (obj) => {
+    mapUtil.value.makerPopup(obj);
+  });
+
   // 清除覆盖物
   emitter.on("deletePointArea", (res) => {
     // 只清除与当前地图相关的覆盖物
@@ -325,6 +330,7 @@ onUnmounted(() => {
   emitter.off("setMapCenter");
   emitter.off("addPointArea");
   emitter.off("showPoint");
+  emitter.off("makerPopup");
   emitter.off("deletePointArea");
   emitter.off("deletePointAreaOne");
   emitter.off("drawShape");

src/components/GdMap/mapUtil.js

@@ -85,7 +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') //展示气泡框
+        // if (flag == 'hm') _that.makerPopup({data:item,flag:'hm_pop',type:'Custom'}) //展示气泡框
         // 确保坐标格式正确，使用对象格式传递坐标
         const marker = map.Marker(el, { lng: item.jd, lat: item.wd }, { anchor: 'bottom', offset: [0, 0] })
         el.addEventListener("click", () => {
@@ -144,34 +144,35 @@ export function MapUtil(map) {
   }
 
   // 展示气泡框  
-  MapUtil.prototype.makerPopup = (item,flag,style = 'Dark')=>{
+  MapUtil.prototype.makerPopup = (val)=>{
+    
+    let { data,flag,type = 'Dark'} = val
     // Dark   Light   Custom
     let marker;
-    let flagPop = flag+'_pop'
-    if(!_that._self[flagPop]) _that._self[flagPop] = [];
-    if(style == 'Dark' || style == 'Light') { 
-      let list = zdyContent(flag,item);// 默认的样式
-      marker = map.createPopup([item.jd,item.wd],{
+    if(!_that._self[flag]) _that._self[flag] = [];
+    if(type == 'Dark' || type == 'Light') { 
+      let list = zdyContent(flag,data);// 默认的样式
+      marker = map.createPopup([data.jd,data.wd],{
         style:style, // 气泡框样式:
         data:list,
-        title:item.ssbm,
+        title:data.ssbm,
         closeButton:false,
         anchor:'bottom',
         pixelOffset:[0,-50]
       })
     }else {
-      marker = map.createPopup([item.jd,item.wd],{
+      marker = map.createPopup([data.jd,data.wd],{
         style:'Custom', // // 自定义样式
         attrs:{
           class:'popupCustom'
         },
-        container: zdyContentHtml(flag,item),
+        container: zdyContentHtml(flag,data),
         closeButton:false,
         anchor:'bottom',
         pixelOffset:[0,-30]
       })
     }
-    _that._self[flagPop].push(marker)
+    _that._self[flag].push(marker)
   }
   // 弹窗自定义默认内容
   function zdyContent(flag,item){
@@ -187,16 +188,25 @@ export function MapUtil(map) {
   }
   // 弹窗自定义标签内容
   function zdyContentHtml(flag,item){
+    const list = [
+      { jb: "一级",sl:'5',ypl:'100%' },
+      { jb: "一级",sl:'5',ypl:'100%' },
+      { jb: "一级",sl:'5',ypl:'100%' },
+      { jb: "一级",sl:'5',ypl:'100%' }
+    ];
     let html = ''
     switch (flag) {
-      case 'hm':
+      case 'hm_pop':
         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 class="popupCustomTitle_title">
+            <span>${item.ssbm}</span>
+            <span>今日警情${item.jqsl || 0}</span>
+          </div>
+          <ul>
+            <li class="popupCustomTitle_li"><span>级别</span> <span>数量</span> <span>研判率</span> </li>
+            ${list.map(it => `<li class="popupCustomTitle_li"><span>${it.jb}</span> <span>${it.sl}</span> <span>${it.ypl}</span></li>`).join('')}
+          </ul>
         </div>
         `
       break;
@@ -797,7 +807,7 @@ export function MapUtil(map) {
   // 移除边界
 
   MapUtil.prototype.createBoundarys = (res) => {
-    let { data, color, fillColor, borderColor, label, text, labelPosition } = res
+    let { data, color, fillColor, borderColor, label, text, labelPosition, outLineWidth } = res
     if (!data) return false;
     // 使用传入的颜色参数，如果没有则使用默认值
     const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)';
@@ -807,7 +817,7 @@ export function MapUtil(map) {
     const polygon = map.createPolygon(data, {
       color: fillColorValue,
       outLineColor: borderColorValue,
-      outLineWidth: 1,
+      outLineWidth: outLineWidth || 1,
       highlightColor: highlightColorValue,
       type: 'solid',
       labelOption: {