数据过滤

src/views/sys/exception/Exception.vue

@@ -22,6 +22,7 @@
       />
       <statisticalType
         id="statisticalType"
+        @handlerChangePolygonType="handlerChangePolygonType"
         :style="{
           position: 'absolute',
           top: '700px',
@@ -58,15 +59,23 @@ import Map from "./LargeScreenMap/index.vue"
     MapboxComponent.value.handlerChangeLayerVisible("historyLayerLine",data);
     MapboxComponent.value.handlerChangeLayerVisible("historyLayerFill",data);
   }
+
   // 控制热力图显示
   function layerbutton_2(data) {
     MapboxComponent.value.handlerChangeLayerVisible("heatLayer",data);
   }
 
   // 选择区县
+  const currentCounty = ref({name:"",code:""});
+
   function countyClick(data) {
-    let county = {name:data['name'],code:data['id']}
-    MapboxComponent.value.handlerChangeCounty(county);
+    currentCounty.value = {name:data['name'],code:data['id']}
+    MapboxComponent.value.handlerChangeCounty(currentCounty.value);
+  }
+
+  // 图例点击
+  function handlerChangePolygonType(data){
+    MapboxComponent.value.handlerChangeCounty(currentCounty.value,data);
   }
 </script>
 

src/views/sys/exception/LargeScreenMap/index.vue

@@ -67,8 +67,29 @@ function handlerLoadPolygon(code="",filter=""){
     }else{
         sql_filter=""
     }
-    if(map.getSource("historyLayerLine")){
 
+    let map_filter;
+    switch(filter){
+        case "合法":
+            map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
+            break;
+        case "违法":
+            map_filter = ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]];
+            break;
+        case "其他":
+            map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
+            break;
+        case "补办手续":
+            map_filter = ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]];
+            break;
+        case "拆除复耕":
+            map_filter = ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]];
+            break;
+        default:
+            map_filter = ["!=", ["get", "gid"], 0];
+    }
+    console.log(map_filter,sql_filter);
+    if(map.getSource("historyLayerLine")){
         map.removeLayer("historyLayerLine")
         map.removeLayer("historyLayerFill")
         map.removeSource("historyLayerLine")
@@ -91,7 +112,7 @@ function handlerLoadPolygon(code="",filter=""){
             'line-join': 'round',
             'line-cap': 'round'
           },
-        //   'filter':['==','handle_status_id',0],
+          'filter':map_filter,
           'paint': {
             'line-color': [
               "case",
@@ -122,6 +143,7 @@ function handlerLoadPolygon(code="",filter=""){
             maxzoom: 20
           },
           "source-layer": "view_drone_shp_data",
+          'filter':map_filter,
           'paint': {
             'fill-color': [
                 "case",
@@ -143,12 +165,14 @@ function handlerLoadPolygon(code="",filter=""){
     })
 
     map.on("click","historyLayerFill",(e)=>{
-        console.log('eee123',e,e.features[0].properties)
+        console.log('eee123',e.features[0].properties)
     })
 
+    if(map.getLayer('heatLayer')){
+        map.moveLayer('heatLayer', 'historyLayerLine');
+        map.moveLayer('heatLayer', 'historyLayerFill');
+    }
 
-    map.moveLayer('heatLayer', 'historyLayerLine');
-    map.moveLayer('heatLayer', 'historyLayerFill');
 }
 
 // 获取和处理图斑点数据
@@ -339,9 +363,9 @@ function handlerChangeLayerVisible(layerName,checked){
 }
 
 // 切换县区
-function handlerChangeCounty(county){
+function handlerChangeCounty(county,type=""){
     handlerDealCountry(county.name);
-    handlerLoadPolygon(county.code);
+    handlerLoadPolygon(county.code,type);
     handlerDealPoint(county.code);
 }
 

src/views/sys/exception/mapComponent/left_statisticalType.vue

@@ -8,27 +8,27 @@
     />
     <div class="statistical_div">
       <a-row>
-        <a-col :span="10">
+        <a-col :span="10" @click="handlerChangePolygonType('违法');">
           <span class="statistical_div_dot" style="background:#FDA1A1;" />
           <span class="statistical_div_span">违法</span>
         </a-col>
-        <a-col :span="10">
+        <a-col :span="10" @click="handlerChangePolygonType('补办手续');">
           <span class="statistical_div_dot" style="background:#ABFCFF;" />
           <span class="statistical_div_span">补办手续</span>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
+        <a-col :span="10" @click="handlerChangePolygonType('合法');">
           <span class="statistical_div_dot" style="background:#FFECB9;"/>
           <span class="statistical_div_span">合法</span>
         </a-col>
-        <a-col :span="10">
+        <a-col :span="10" @click="handlerChangePolygonType('拆除复耕');">
           <span class="statistical_div_dot" style="background:#C2B3FB;" />
           <span class="statistical_div_span">拆除复耕</span>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
+        <a-col :span="10" @click="handlerChangePolygonType('其他');">
           <span class="statistical_div_dot" style="background:#C7FFBC;" />
           <span class="statistical_div_span">其他</span>
         </a-col>
@@ -37,7 +37,15 @@
   </div>
 </template>
 
-<script lang="ts"></script>
+<script setup lang="ts">
+
+import {defineEmits} from "vue"
+const emits = defineEmits(["handlerChangePolygonType"])
+
+function handlerChangePolygonType(type:String):void{
+  emits("handlerChangePolygonType",type);
+}
+</script>
 
 <style lang="less" scoped>
   .statistical {