增加类型选项

public/static/image/type.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1762408879497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1210" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 149.333H128c-23.467 0-42.667 19.2-42.667 42.667v640c0 23.467 19.2 42.667 42.667 42.667h768c23.467 0 42.667-19.2 42.667-42.667V192c0-23.467-19.2-42.667-42.667-42.667z m-567.467 563.2c-17.066 17.067-42.666 17.067-59.733 0L196.267 640 256 580.267l42.667 42.666L384 537.6l59.733 59.733-115.2 115.2z m0-256c-17.066 17.067-42.666 17.067-59.733 0L196.267 384 256 324.267l42.667 42.666L384 281.6l59.733 59.733-115.2 115.2z m482.134 226.134h-256v-85.334h256v85.334z m0-256h-256v-85.334h256v85.334z" p-id="1211"></path></svg>

src/views/leaflet.vue

@@ -30,7 +30,7 @@
             <img style="width: 20px;" src="../../public/static/image/close.svg" />
           </div>         
            <!-- title -->
-          <div class="building-information-title">
+          <div class="building-information-title" @click="sendMessageClick">
             {{ BuildingInformationProperties.c_resource_name || BuildingInformationProperties.c_parcel_number+'地块' }}
           </div>
           <div style="overflow-y: auto;overflow-x: hidden;max-height: 50vh;padding: 0px 10px;">
@@ -165,6 +165,27 @@
           <i class="mapPinSimpleArea"></i>
           <span class="measure-text">绘制</span>
         </button>
+
+        <button
+          v-if="URLParams.type == 3 || URLParams.type == undefined"
+          :class="isCheckDraw == true ? 'measure-button active' : 'measure-button'"
+          style="margin-top: 20px;"
+          @click="toggleCheckDraw"
+          :title="isCheckDraw ? '关闭' : '打开类型'"
+        >
+          <i class="mapTypeCheck"></i>
+          <span class="measure-text">类型</span>
+        </button>
+        <div v-show="isCheckDraw == true" class="checkTypeShow" 
+          >
+            <div v-for="(item, index) in checkedArr" :key="index"  >
+              <label class="layer-checkbox">
+                <input type="checkbox" v-model="item.checked"/>
+                <span class="custom-checkbox"></span>
+                <span class="checkbox-label" style="color: #4facfe">{{item.name}}</span>
+              </label>
+            </div>
+        </div>
         
         <!-- 新增图层控制复选框 -->
         <div class="layer-toggle-controls">
@@ -249,6 +270,7 @@ export default {
       // 测距相关状态
       isMeasuring: false, // 是否正在测距
       isDraw:false, //判断是否在绘制十五分钟圈
+      isCheckDraw:false,
       measurePoints: [], // 测距点集合
       measureLine: null, // 测距线对象
       measureTooltip: null, // 测距提示框
@@ -265,6 +287,13 @@ export default {
       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"),
@@ -329,6 +358,12 @@ export default {
       
   },
   methods: {
+    sendMessageClick(){
+      let that = this;
+      let info = that.BuildingInformationProperties
+      const message = { type: info.column_name, id: info.id, code: info.c_park_code || info.c_parcel_number };
+      window.parent.postMessage(message, '*');
+    },
     initIframeInfo (){
       let that = this;
       if(that.URLParams.type == undefined || that.URLParams.center == undefined) return
@@ -675,20 +710,30 @@ export default {
     },
     // 筛选并渲染圆圈内的lifeDatas对象
     renderLifeDatasInCircle(centerLatLng) {
+      let that = this;
+      let arr = [];
+      that.checkedArr.forEach(e => {
+        if(e.checked == true){
+          arr.push(e.name)
+        }
+      });
       // 遍历lifeDatas对象集合
       Object.values(this.lifeDatas).forEach((feature) => {
-        // 确保feature包含几何数据
-        if (!feature || !feature.geometry || !feature.geometry.coordinates) return;
-        // 获取对象坐标(根据数据格式调整经纬度顺序)
-        let objLatLng = L.latLng(
-          feature.geometry.coordinates[1],
-          feature.geometry.coordinates[0]
-        );
-        // 判断是否在圆圈内(使用Leaflet的距离计算)
-        const distance = centerLatLng.distanceTo(objLatLng);
-        if (distance <= this.currentCircle.getRadius()) {
-          // 在圈内，渲染到地图
-          this.addMarkers(feature);
+        //判断是否是选中的类型
+        if(arr.includes(feature.properties.type) == true){
+          // 确保feature包含几何数据
+          if (!feature || !feature.geometry || !feature.geometry.coordinates) return;
+          // 获取对象坐标(根据数据格式调整经纬度顺序)
+          let objLatLng = L.latLng(
+            feature.geometry.coordinates[1],
+            feature.geometry.coordinates[0]
+          );
+          // 判断是否在圆圈内(使用Leaflet的距离计算)
+          const distance = centerLatLng.distanceTo(objLatLng);
+          if (distance <= this.currentCircle.getRadius()) {
+            // 在圈内，渲染到地图
+            this.addMarkers(feature);
+          }
         }
       });
     },
@@ -752,15 +797,19 @@ export default {
       // get(baseUrl+"static/json/15minLifeData.geojson", "").then((geoJson) => {
         // 存放所有的点数据
         map2DViewer.groups["15分钟生活圈_label"] = L.featureGroup();
+        // let arr = []
         // geoJson.features.map((feature) => {
         bufferData.features.map((feature) => {
           let correctCordArr = JSON.parse(JSON.stringify(feature.geometry.coordinates));
           let newCorrectCoordArr = publicFun.latLngsToReverseByLngLat(correctCordArr);
           feature.geometry.coordinates = newCorrectCoordArr;
+          // arr.push(feature.properties.type)
           if (feature.properties && feature.properties.name) {
             this.lifeDatas[feature.properties.name] = feature;
           }
         });
+        // let uniqueArray = [...new Set(arr)]
+        // console.log('[ eee ] >', uniqueArray)
         that.initShow.lifeDataFlag = true
       // });
     },
@@ -936,7 +985,7 @@ export default {
     },
     // 新增结果选择方法
     selectResult(key) {
-      console.log("选中结果:", key);
+      // console.log("选中结果:", key);
       // 这里可以添加选中结果后的处理逻辑，如定位到地图位置等
       this.searchResults = []; // 选择后清空结果
       this.searchStr = key; // 可以将选中结果显示在输入框
@@ -972,6 +1021,9 @@ export default {
         });
       }, 0);
     },
+    toggleCheckDraw(){
+      this.isCheckDraw = !this.isCheckDraw;
+    },
     toggleDraw(){
       this.isDraw = !this.isDraw;
       if(this.isDraw == false){
@@ -1410,6 +1462,7 @@ export default {
       font-weight: bold;
       padding: 0.5rem;
       padding: 0.5rem 0.5rem 0 1rem;
+      cursor: pointer;
       // border-bottom: 1px solid #eee;
     }
   }
@@ -1588,6 +1641,15 @@ export default {
   background-size: contain;
 }
 
+.mapTypeCheck{
+  width: 20px;
+  height: 20px;
+  background-image: url('../../public/static/image/type.svg');
+  background-repeat: no-repeat;
+  margin-right: 6px;
+  background-size: contain;
+}
+
 .measure-text {
   font-size: 14px;
 }
@@ -1738,6 +1800,13 @@ export default {
   .mapPinSimpleArea{
      margin-right: 0;
   }
+  .mapTypeCheck{
+     margin-right: 0;
+  }
+  .checkTypeShow{
+    right: 6px !important;
+    top: 292px !important;
+  }
 }
 /* 分段距离标签样式 */
 .segment-measure-tooltip {
@@ -1814,4 +1883,15 @@ export default {
   font-size: 16px;
   font-weight: bold;
 }
+
+.checkTypeShow{
+  background: #fff;
+  position: absolute;
+  border-radius: 5px;
+  right: 116px;
+  z-index: 9;
+  padding: 10px;
+  top: 0px;
+}
+
 </style>