风格样式重新按新要求开发

src/styles/button.css

@@ -325,15 +325,16 @@
 
 .marker-content {
   background-color: rgba(255, 255, 255, 0.9);
-  padding: 2px 8px;
+  /* padding: 2px 8px; */
   border-radius: 4px;
   border: 1px solid #ddd;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  float: left;
 
 }
 .marker-content:hover {
   font-weight: bold;
-    font-size: 14px;
+  font-size: 14px;
 }
 
 

src/views/leaflet.vue

@@ -146,7 +146,7 @@
         </div>
       </div>
       <!-- 添加测距按钮 -->
-      <div class="measure-control">
+      <!-- <div class="measure-control">
         <button
           :class="isClearCejuFlag == true ? 'measure-button active' : 'measure-button'"
           @click="toggleMeasureMode"
@@ -185,10 +185,10 @@
                 <span class="checkbox-label" style="color: #4facfe">{{item.name}}</span>
               </label>
             </div>
-        </div>
+        </div> -->
         
         <!-- 新增图层控制复选框 -->
-        <div class="layer-toggle-controls">
+        <!-- <div class="layer-toggle-controls">
           <label class="layer-checkbox" v-if="URLParams.type == 2 || URLParams.type == undefined">
             <input type="checkbox" v-model="showPlotLayer" />
             <span class="custom-checkbox"></span>
@@ -206,7 +206,96 @@
           </label>
         </div>
         <div v-if="showMeasureTip" class="measure-tip">{{ measureTipText }}</div>
+      </div> -->
+
+      <div v-if="isMobile == true" style="position:fixed; right: 0px;top:60px">
+          <button
+          v-if="URLParams.type == 3 || URLParams.type == undefined"
+          :class="isDraw == true ? 'operation-button active' : 'operation-button'"
+          :style="isDraw == true ? 'background: #3165FF;':''"
+          @click="toggleDraw"
+        >
+          <img class="operation-icon" :src="isDraw == false ? operationAllImg.buff : operationAllImg.buff_check"/>
+          <span :class="isDraw == false ? 'operation-text' : 'operation-text-check'">十五分钟生活圈</span>
+        </button>
+
+        <button
+          v-if="URLParams.type == 3 || URLParams.type == undefined"
+          class="operation-button"
+          style="right: 0px;position: absolute;top: 40px;"
+          @click="toggleDrawType"
+        >
+          <img class="operation-icon" :src="operationAllImg.type" style="margin-right: 0px;"/>
+        </button>
+      </div>
+      <div class="control">
+        <div class="operation-control" ref="control">
+          <button
+            v-if="(URLParams.type == 3 || URLParams.type == undefined) && isMobile == false"
+            :class="isDraw == true ? 'operation-button active' : 'operation-button'"
+            :style="isDraw == true ? 'background: #3165FF;':''"
+            @click="toggleDraw"
+            v-on:mousemove="buffMousemove"
+            ref="buff"
+          >
+            <img class="operation-icon" :src="isDraw == false ? operationAllImg.buff : operationAllImg.buff_check"/>
+            <span :class="isDraw == false ? 'operation-text' : 'operation-text-check'">十五分钟生活圈</span>
+          </button>
+
+          <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"
+              >
+                <img class="operation-icon" :src="showPlotLayer == false ? operationAllImg.dksx : operationAllImg.dksx_check"/>
+                <span :class="showPlotLayer == 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"
+              >
+                <img class="operation-icon" :src="showXZPlotLayer == false ? operationAllImg.dk : operationAllImg.dk_check"/>
+                <span :class="showXZPlotLayer == true ? 'measure-text active' : 'measure-text'">地块</span>
+              </button>
+              <button
+                v-if="URLParams.type == 1 || URLParams.type == undefined"
+                :class="showBuildingLayer == true ? 'operation-button2 active' : 'operation-button2'"
+                @click="toggleBuildingLayer"
+              >
+                <img class="operation-icon" :src="showBuildingLayer == false ? operationAllImg.ly : operationAllImg.ly_check"/>
+                <span :class="showBuildingLayer == true ? 'measure-text active' : 'measure-text'">楼宇</span>
+              </button>
+          </div>
+
+          <button
+            :class="isClearCejuFlag == true ? 'operation-button active' : 'operation-button'"
+            @click="toggleMeasureMode"
+          >
+            <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-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
+                :class="item.checked == true ? 'operation-button2 active' : 'operation-button2'"
+                @click="toggleCheckedArr(item)"
+                style="width: 100%;justify-content: flex-start;"
+              >
+                <img class="operation-icon" :src="item.checked == false ? item.icon : item.icon2"/>
+                <span :class="item.checked == true ? 'measure-text active' : 'measure-text'">{{item.name}}</span>
+              </button>
+
+              </div>
+          </div>
       </div>
+
+
     </div>
     <div class="attributeWindow" ref="attributeWindow">属性弹窗</div>
     <!-- 右下角功能图标组 -->
@@ -257,8 +346,9 @@ export default {
         center:'',
         industry:''
       },
+      rightX:0,
 
-      //   15分钟生活圈数据集合
+      //15分钟生活圈数据集合
       lifeDatas: {},
       landDatas: {},
       searchResults: [], // 新增搜索结果数组
@@ -270,7 +360,8 @@ export default {
       // 测距相关状态
       isMeasuring: false, // 是否正在测距
       isDraw:false, //判断是否在绘制十五分钟圈
-      isCheckDraw:false,
+      isDrawType:false,//移动端类型是否展示
+      isCheckDraw:false,//是否显示十五分钟圈的类型
       measurePoints: [], // 测距点集合
       measureLine: null, // 测距线对象
       measureTooltip: null, // 测距提示框
@@ -286,20 +377,57 @@ export default {
       localLng: null, // 存储地址栏定位参数
       currentLocationMarker: null, // 当前位置标记
       isClearCejuFlag:false,  // 是否清除测距数据
-
-      checkedArr: [
-        {"name":"宜居","checked":false},
-        {"name":"宜养","checked":false},
-        {"name":"宜业","checked":false},
-        {"name":"宜学","checked":false},
-        {"name":"宜游","checked":false},
-        {"name":"1+N","checked":false}],
       isMobile:false,
       isDataTypeFlag:0, //  0 默认无 1 楼宇  2 地块
       homeImg:require("../../public/static/image/home.png"),
       chartImg:require("../../public/static/image/chart.png"),
       buildingImg:require("../../public/static/image/building.png"),
-      areaColors:['rgba(255, 0, 0, 1)','rgba(192, 0, 0, 1)','rgba(255, 127, 0, 1)'] // 索引 0为商业 1为商办/办公/混合 2为研发
+      areaColors:['rgba(255, 0, 0, 1)','rgba(192, 0, 0, 1)','rgba(255, 127, 0, 1)'], // 索引 0为商业 1为商办/办公/混合 2为研发
+      operationAllImg:{
+        type:require("../../public/static/image/type.png"),
+
+        cj:require("../../public/static/image/cj.png"),
+        cj_check:require("../../public/static/image/cj_check.png"),
+
+        ly:require("../../public/static/image/ly.png"),
+        ly_check:require("../../public/static/image/ly_check.png"),
+
+        dk:require("../../public/static/image/dk.png"),
+        dk_check:require("../../public/static/image/dk_check.png"),
+
+        dksx:require("../../public/static/image/dksx.png"),
+        dksx_check:require("../../public/static/image/dksx_check.png"),
+
+        buff:require("../../public/static/image/buff.png"),
+        buff_check:require("../../public/static/image/buff_check.png"),
+
+        y1:require("../../public/static/image/y1.png"),
+        y1_check:require("../../public/static/image/y1_check.png"),
+
+        y2:require("../../public/static/image/y2.png"),
+        y2_check:require("../../public/static/image/y2_check.png"),
+
+        y3:require("../../public/static/image/y3.png"),
+        y3_check:require("../../public/static/image/y3_check.png"),
+
+        y4:require("../../public/static/image/y4.png"),
+        y4_check:require("../../public/static/image/y4_check.png"),
+
+        y5:require("../../public/static/image/y5.png"),
+        y5_check:require("../../public/static/image/y5_check.png"),
+
+        y6:require("../../public/static/image/y6.png"),
+        y6_check:require("../../public/static/image/y6_check.png"),
+      },
+      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")}
+      ],
+
     };
   },
   mounted() {
@@ -595,15 +723,25 @@ export default {
         feature.properties.c_resource_name ||
         feature.properties.c_parcel_name ||
         "未命名区域";
+      let type = feature.properties.column_name;
+      if(type === '楼宇表'){
+        type = "楼宇"
+      }else{
+        type = "地块"
+      }
+
       const markerColor = feature.properties.markerColor || color; // 优先使用特性中定义的颜色
       this.landDatas[markerName].properties.center = centroid;
-
       const customIcon = L.divIcon({
         html: `<div class="floating-marker" style="color: ${markerColor}">
-                <div class="marker-content">${markerName}</div>
+                <div class="marker-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: [80, 40],
+        iconSize: [200, 40],
         iconAnchor: [40, 20],
       });
 
@@ -1024,6 +1162,15 @@ export default {
     toggleCheckDraw(){
       this.isCheckDraw = !this.isCheckDraw;
     },
+    toggleDrawType(){
+      if(this.isDrawType == true){
+        this.isCheckDraw = false
+      }else{
+        this.isCheckDraw = true
+      }
+      this.isDrawType = !this.isDrawType;
+      this.rightX = 50;
+    },
     toggleDraw(){
       this.isDraw = !this.isDraw;
       if(this.isDraw == false){
@@ -1040,6 +1187,21 @@ export default {
         }
       }
     },
+    togglePlotLayer() {
+      this.showPlotLayer = !this.showPlotLayer;
+      this.toggleLayer("dkModelColChName", this.showPlotLayer);
+    },
+    toggleXZPlotLayer() {
+      this.showXZPlotLayer = !this.showXZPlotLayer;
+      this.toggleLayer("dkXZModelColChName", this.showXZPlotLayer);
+    },
+    toggleBuildingLayer() {
+      this.showBuildingLayer = !this.showBuildingLayer;
+      this.toggleLayer("lyModelColChName", this.showBuildingLayer);
+    },
+    toggleCheckedArr(param){
+      param.checked = ! param.checked;
+    },
     // 切换测距模式
     toggleMeasureMode() {
       if(this.isClearCejuFlag == true){
@@ -1049,12 +1211,13 @@ export default {
       }else{
         this.isMeasuring = !this.isMeasuring;
         const map = this.getMapInstance();
+        this.isClearCejuFlag = true
         if (this.isMeasuring && map) {
           this.startMeasuring();
         } else {
           this.stopMeasuring();
         }
-        this.isClearCejuFlag == true
+        // this.isClearCejuFlag == true
       }
       
     },
@@ -1254,7 +1417,7 @@ export default {
       }
 
       // this.clearMeasureData();
-      this.isClearCejuFlag = true
+      // this.isClearCejuFlag = true
     },
 
     // 获取地图实例并验证
@@ -1404,7 +1567,12 @@ export default {
         setTimeout(() => (this.showMeasureTip = false), 2000);
       }
     },
-
+    buffMousemove(){
+      this.isCheckDraw=true
+      const parentRect = this.$refs.buff.getBoundingClientRect();
+      const parentControl = this.$refs.control.getBoundingClientRect();
+      this.rightX = parentControl.right-parentRect.right + 16;
+    },
     // 地图放大
     zoomIn() {
       const map = this.getMapInstance();
@@ -1602,6 +1770,77 @@ export default {
   flex-wrap: wrap;
   align-items: flex-end;
 }
+//操作事项
+.operation-control{
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1000;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+}
+.operation-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-right: 10px;
+}
+
+.operation-button:hover {
+  background-color: #f5f5f5;
+}
+
+.operation-button.active {
+  color: #3165FF;
+  background: #ffffff;
+}
+
+.operation-icon {
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  margin-right: 6px;
+  margin-top: 2px;
+}
+.operation-text {
+  font-size: 14px;
+  font-weight: bold;
+  font-style: italic;
+  color: #3165FF;
+}
+.operation-text-check {
+  font-size: 14px;
+  font-weight: bold;
+  font-style: italic;
+  color: #fafafa;
+}
+
+.operation-button2{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.operation-button2:hover {
+  background-color: #f5f5f5;
+}
+.operation-button2.active {
+  color: #3165FF;
+  background: #ffffff;
+}
 
 .measure-button {
   display: flex;
@@ -1628,7 +1867,8 @@ export default {
 .measure-icon {
   width: 20px;
   height: 20px;
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="8" width="20" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="2"/><line x1="4" y1="8" x2="4" y2="6" stroke="currentColor" stroke-width="2"/><line x1="8" y1="8" x2="8" y2="6" stroke="currentColor" stroke-width="2"/><line x1="12" y1="8" x2="12" y2="6" stroke="currentColor" stroke-width="2"/><line x1="16" y1="8" x2="16" y2="6" stroke="currentColor" stroke-width="2"/><line x1="20" y1="8" x2="20" y2="6" stroke="currentColor" stroke-width="2"/><line x1="6" y1="8" x2="6" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="10" y1="8" x2="10" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="14" y1="8" x2="14" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="18" y1="8" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><text x="4" y="5" font-size="3" text-anchor="middle">0</text><text x="8" y="5" font-size="3" text-anchor="middle">1</text><text x="12" y="5" font-size="3" text-anchor="middle">2</text><text x="16" y="5" font-size="3" text-anchor="middle">3</text><text x="20" y="5" font-size="3" text-anchor="middle">4</text></svg>');
+  // background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="8" width="20" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="2"/><line x1="4" y1="8" x2="4" y2="6" stroke="currentColor" stroke-width="2"/><line x1="8" y1="8" x2="8" y2="6" stroke="currentColor" stroke-width="2"/><line x1="12" y1="8" x2="12" y2="6" stroke="currentColor" stroke-width="2"/><line x1="16" y1="8" x2="16" y2="6" stroke="currentColor" stroke-width="2"/><line x1="20" y1="8" x2="20" y2="6" stroke="currentColor" stroke-width="2"/><line x1="6" y1="8" x2="6" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="10" y1="8" x2="10" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="14" y1="8" x2="14" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="18" y1="8" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><text x="4" y="5" font-size="3" text-anchor="middle">0</text><text x="8" y="5" font-size="3" text-anchor="middle">1</text><text x="12" y="5" font-size="3" text-anchor="middle">2</text><text x="16" y="5" font-size="3" text-anchor="middle">3</text><text x="20" y="5" font-size="3" text-anchor="middle">4</text></svg>');
+  background-image: url('../../public/static/image/cj_check.png');
   background-repeat: no-repeat;
   margin-right: 6px;
 }
@@ -1652,6 +1892,11 @@ export default {
 
 .measure-text {
   font-size: 14px;
+  color: #000;
+}
+.measure-text.active {
+  font-size: 14px;
+  color: #3165FF;
 }
 
 .measure-tip {
@@ -1758,6 +2003,7 @@ export default {
   font-weight: bold;
   padding: 0;
   margin-bottom: 5px;
+  color:#000;
 }
 
 /* 图标样式 */
@@ -1791,8 +2037,14 @@ export default {
 }
 /* 移动端样式 - 仅显示图标 */
 @media (max-width: 768px) {
-  .measure-text {
-    display: none;
+  // .measure-text {
+  //   display: none;
+  // }
+  .top{
+      width: calc(100vw - 1rem);
+      .building-information{
+        width: calc(100vw - 2rem);
+      }
   }
   .measure-icon {
     margin-right: 0;
@@ -1807,6 +2059,24 @@ export default {
     right: 6px !important;
     top: 292px !important;
   }
+  .control{
+    right: 0px;
+    bottom: 20px;
+  }
+  .operation-control{
+    right: 0px;
+    bottom: 20px;
+    top: inherit;
+  }
+  .right-control-group{
+    bottom: 70px;
+    right: 10px;
+  }
+  .buffTypeShow{
+    right: 10px !important;
+    top: 140px !important;
+    width: auto !important;
+  }
 }
 /* 分段距离标签样式 */
 .segment-measure-tooltip {
@@ -1883,6 +2153,15 @@ export default {
   font-size: 16px;
   font-weight: bold;
 }
+.buffTypeShow{
+  background: #fff;
+  position: fixed;
+  border-radius: 5px;
+  z-index: 9;
+  padding: 10px;
+  top: 52px;
+  width: 124px;
+}
 
 .checkTypeShow{
   background: #fff;