样式显示修改

src/views/leaflet.vue

@@ -245,19 +245,19 @@
           <div v-if="URLParams.type == 1 || URLParams.type == 2 || URLParams.type == undefined" class="operation-button" style="padding: 0;">
               <button
                 v-if="URLParams.type == 2 || URLParams.type == undefined"
-                :class="showPlotLayer == true ? 'operation-button2 active' : 'operation-button2'"
-                @click="togglePlotLayer"
+                :class="showXZPlotLayer == true ? 'operation-button2 active' : 'operation-button2'"
+                @click="toggleXZPlotLayer"
               >
-                <img class="operation-icon" :src="showPlotLayer == false ? operationAllImg.dksx : operationAllImg.dksx_check"/>
-                <span :class="showPlotLayer == true ? 'measure-text active' : 'measure-text'">用地性质</span>
+                <img class="operation-icon" :src="showXZPlotLayer == false ? operationAllImg.dksx : operationAllImg.dksx_check"/>
+                <span :class="showXZPlotLayer == true ? 'measure-text active' : 'measure-text'">用地性质</span>
               </button>
               <button
                 v-if="URLParams.type == 2 || URLParams.type == undefined"
-                :class="showXZPlotLayer == true ? 'operation-button2 active' : 'operation-button2'"
-                @click="toggleXZPlotLayer"
+                :class="showPlotLayer == true ? 'operation-button2 active' : 'operation-button2'"
+                @click="togglePlotLayer"
               >
-                <img class="operation-icon" :src="showXZPlotLayer == false ? operationAllImg.dk : operationAllImg.dk_check"/>
-                <span :class="showXZPlotLayer == true ? 'measure-text active' : 'measure-text'">地块</span>
+                <img class="operation-icon" :src="showPlotLayer == false ? operationAllImg.dk : operationAllImg.dk_check"/>
+                <span :class="showPlotLayer == true ? 'measure-text active' : 'measure-text'">地块</span>
               </button>
               <button
                 v-if="URLParams.type == 1 || URLParams.type == undefined"
@@ -276,10 +276,8 @@
             <img class="operation-icon" :src="isClearCejuFlag == false ? operationAllImg.cj : operationAllImg.cj_check"/>
             <span :class="isClearCejuFlag == true ? 'measure-text active' : 'measure-text'">测距</span>
           </button>
-
-          <!-- <div v-if="showMeasureTip" class="measure-tip">{{ measureTipText }}</div> -->
-
         </div>
+        <div v-if="showMeasureTip" class="measure-tip">{{ measureTipText }}</div>
         <div v-show="isCheckDraw == true" class="buffTypeShow" :style="'right:'+rightX+'px'" v-on:mousemove="isCheckDraw=true" v-on:mouseout="isCheckDraw=false">
               <div v-for="(item, index) in checkedArr" :key="index"  >
                 <button
@@ -308,7 +306,7 @@
       -->
       <div class="zoom-control-group">
         <button class="zoom-btn" @click="zoomIn" title="放大地图">+</button>
-        <button class="zoom-btn" @click="zoomOut" title="缩小地图">--</button>
+        <button class="zoom-btn" @click="zoomOut" title="缩小地图">-</button>
       </div>
     </div>
   </div>
@@ -333,6 +331,7 @@ export default {
       searchStr: "",
       currentCircle: null, // 当前绘制的圆圈
       filteredLifeLayer: null, // 筛选结果图层组
+      centerPosition:null,
 
       initShow:{
         lifeDataFlag:false,
@@ -403,11 +402,11 @@ export default {
       },
       checkedArr: [
         {"name":"宜居","checked":true,"icon":require("../../public/static/image/y1.png"),"icon2":require("../../public/static/image/y1_check.png")},
-        {"name":"宜养","checked":false,"icon":require("../../public/static/image/y2.png"),"icon2":require("../../public/static/image/y2_check.png")},
-        {"name":"宜业","checked":false,"icon":require("../../public/static/image/y3.png"),"icon2":require("../../public/static/image/y3_check.png")},
-        {"name":"宜学","checked":false,"icon":require("../../public/static/image/y4.png"),"icon2":require("../../public/static/image/y4_check.png")},
-        {"name":"宜游","checked":false,"icon":require("../../public/static/image/y5.png"),"icon2":require("../../public/static/image/y5_check.png")},
-        {"name":"1+N","checked":false,"icon":require("../../public/static/image/y6.png"),"icon2":require("../../public/static/image/y6_check.png")}
+        {"name":"宜养","checked":true,"icon":require("../../public/static/image/y2.png"),"icon2":require("../../public/static/image/y2_check.png")},
+        {"name":"宜业","checked":true,"icon":require("../../public/static/image/y3.png"),"icon2":require("../../public/static/image/y3_check.png")},
+        {"name":"宜学","checked":true,"icon":require("../../public/static/image/y4.png"),"icon2":require("../../public/static/image/y4_check.png")},
+        {"name":"宜游","checked":true,"icon":require("../../public/static/image/y5.png"),"icon2":require("../../public/static/image/y5_check.png")},
+        {"name":"1+N","checked":true,"icon":require("../../public/static/image/y6.png"),"icon2":require("../../public/static/image/y6_check.png")}
       ],
 
     };
@@ -651,6 +650,7 @@ export default {
     },
 
     drawCircle(e){
+        this.centerPosition = e
         // 清除上一次的圆圈和筛选结果
         if (this.currentCircle) {
           map2DViewer.map.removeLayer(this.currentCircle);
@@ -661,9 +661,11 @@ export default {
         // console.log('[ ==== ] >', e.latlng)
         // 创建新的1500米半径圆圈
         this.currentCircle = L.circle(e.latlng, {
-          color: "#ff7800",
-          fillColor: "#ff7800",
-          fillOpacity: 0.1,
+          // color: "#ff7800",
+          // fillColor: "#ff7800",
+          color: "#007EFF",
+          fillColor: "#007EFF",
+          fillOpacity: 0.2,
           radius: 1500,
         }).addTo(map2DViewer.map);
 
@@ -716,14 +718,14 @@ export default {
       this.landDatas[markerName].properties.center = centroid;
       const customIcon = L.divIcon({
         html: `<div class="floating-marker" style="color: ${markerColor}">
-                <div class="marker-content">
+                <div class="marker-content" style="width: max-content;">
                   <div style="float: left;padding: 4px 8px 4px 8px;color: #212942;">${markerName}</div>
                   <div style="float: left;padding: 4px 8px 4px 8px;background: #E8F4FF;color: #1890ff;">${type}</div>
                 </div>
                 
               </div>`,
         className: "custom-floating-marker",
-        iconSize: [200, 40],
+        // iconSize: [200, 40],
         iconAnchor: [40, 20],
       });
 
@@ -863,7 +865,7 @@ export default {
       var myIcon = L.divIcon({
         html: `<div style='position: relative'>
            <img src='${require("@static/image/point.png")}' style='width:25px;height:25px'>
-           <span style='position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);width:10rem;text-align:center'>${name}</span>
+           <span style='position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);width:max-content;text-align:center;background: #ffffff;padding: 4px 8px;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);border: 1px solid #ddd;'>${name}</span>
          </div>`,
         className: "custom-marker",
         iconSize: [30, 45],
@@ -988,18 +990,18 @@ export default {
                     feature.properties.c_parcel_name ||
                     "未命名区域";
                   this.landDatas[markerName] = feature;
-                  this.addPolygon(feature, color, configKey, "dkModelColChName", 1,'地块');
+                  this.addPolygon(feature, color, configKey, "dkXZModelColChName", 1,'地块性质');
 
-                  this.addPolygon(feature, '#4facfe', configKey, "dkXZModelColChName", 0.15,'地块性质');
+                  this.addPolygon(feature, '#4facfe', configKey, "dkModelColChName", 0.15,'地块');
                 }
               }else{
                 const markerName =
                   feature.properties.c_parcel_name ||
                   "未命名区域";
                 this.landDatas[markerName] = feature;
-                this.addPolygon(feature, color, configKey, "dkModelColChName", 1,'地块');
+                this.addPolygon(feature, color, configKey, "dkXZModelColChName", 1,'地块性质');
 
-                this.addPolygon(feature, '#4facfe', configKey, "dkXZModelColChName", 0.15,'地块性质');
+                this.addPolygon(feature, '#4facfe', configKey, "dkModelColChName", 0.15,'地块');
               }
             }
           }
@@ -1148,6 +1150,7 @@ export default {
       if(this.isDrawType == true){
         this.isCheckDraw = false
       }else{
+        // 显示提示
         this.isCheckDraw = true
       }
       this.isDrawType = !this.isDrawType;
@@ -1167,6 +1170,11 @@ export default {
           map2DViewer.map.removeLayer(this.filteredLifeLayer);
           this.filteredLifeLayer = null; // 重置引用
         }
+        this.showMeasureTip = false;
+        this.measureTipText = "";
+      }else{
+        this.showMeasureTip = true;
+        this.measureTipText = "点击地图进行绘制十五分钟圈";
       }
     },
     togglePlotLayer() {
@@ -1183,6 +1191,9 @@ export default {
     },
     toggleCheckedArr(param){
       param.checked = ! param.checked;
+      if(this.centerPosition != null && this.isDraw == true){
+        this.drawCircle(this.centerPosition)
+      }
     },
     // 切换测距模式
     toggleMeasureMode() {
@@ -1882,11 +1893,11 @@ export default {
 }
 
 .measure-tip {
-  position: absolute;
-  top: 40px;
-  right: 0;
+  position: fixed;
+  top: 60px;
+  right: 26px;
   background-color: rgba(0, 0, 0, 0.7);
-  color: white;
+  color: white !important;
   padding: 5px 10px;
   border-radius: 4px;
   font-size: 12px;
@@ -2059,6 +2070,10 @@ export default {
     top: 140px !important;
     width: auto !important;
   }
+  .measure-tip{
+    right: auto;
+    top: 66px;
+  }
 }
 /* 分段距离标签样式 */
 .segment-measure-tooltip {