修改浏览器无痕操作

public/index.html

@@ -21,7 +21,7 @@
     <script src="./static/plugins/heatmap/heatmap.js"></script>
     <script src="./static/plugins/Heatmap.js"></script>
 
-    <script src="./static/data/area.js"></script>
+    <!-- <script src="./static/data/area.js"></script> -->
   </head>
   <script>
     // 百度统计访问量

src/views/HomeView.vue

@@ -300,7 +300,7 @@
               :modal="false"
               modal-class="mask-layer"
             >
-            <el-button :type="item.btnType" round v-for="(item, index) in heatmapList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 150px;"  @click="judgeLayerType($event, item)">{{item.name}}</el-button>
+            <el-button :type="item.btnType" round v-for="(item, index) in heatmapList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 100%;"  @click="judgeLayerType($event, item)">{{item.name}}</el-button>
          </el-drawer>
     </div>
 
@@ -327,7 +327,7 @@
               :modal="false"
               modal-class="mask-layer"
             >
-            <el-button :type="item.btnType" round v-for="(item, index) in layerList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 150px;"  @click="judgeLayerType($event, item)">{{item.name}}</el-button>
+            <el-button :type="item.btnType" round v-for="(item, index) in layerList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 100%;"  @click="judgeLayerType($event, item)">{{item.name}}</el-button>
          </el-drawer>
     </div>
 
@@ -354,7 +354,7 @@
               :modal="false"
               modal-class="mask-layer"
             >
-            <el-button :type="item.btnType" round v-for="(item, index) in kdwlList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 150px;"  @click="drawLayerType($event, item)">{{item.name}}</el-button>
+            <el-button :type="item.btnType" round v-for="(item, index) in kdwlList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 100%;"  @click="drawLayerType($event, item)">{{item.name}}</el-button>
          </el-drawer>
     </div>
 
@@ -482,6 +482,8 @@ export default {
       pointBlueItemArr:[],
       areaDataItemArr:[],
       kdwlPointTCHandle:1,
+      layerRequesting: {},
+      layerAbortControllers: {},
 
       yhfkForm: {
         name: "",
@@ -839,8 +841,8 @@ export default {
         arr.push(str)
         return obj; // 返回一个对象，代表一行数据的JSON表示
       });
-      console.log(arr); // 输出或使用转换后的JSON数据
-      console.log(customJson); // 输出或使用转换后的JSON数据
+      // console.log(arr); // 输出或使用转换后的JSON数据
+      // console.log(customJson); // 输出或使用转换后的JSON数据
     },
 
     // 沿街店铺
@@ -941,7 +943,7 @@ export default {
             result=result.features.filter(person => 
               person.properties['店铺名称'] == '空'
             );
-            console.log('[ ddd ] >', result)
+            // console.log('[ ddd ] >', result)
             that.pointKZDPArr = result.map(function (pointInfo) {
               return viewer.entities.add(new SkyScenery.Entity({
                 position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1], 0.5),
@@ -1189,7 +1191,20 @@ export default {
         params.btnType = ''
         judge = false
       }
-      console.log("params====",params)
+      // console.log("drawLayerType====",params, judge)
+      
+      if (!judge) {
+        this.cancelLayerRequest(params.name);
+        this.removeKdwlLayer(params.name);
+        return;
+      }
+      
+      if (this.layerRequesting[params.name]) {
+        return;
+      }
+      
+      this.layerRequesting[params.name] = true;
+      
       if(params.name == "奶粉快递分布"){
           this.getNFPointData(judge, params)
       }else if(params.name == "化妆品快递分布"){
@@ -1197,7 +1212,7 @@ export default {
       }else {
         this.getxqAreaData(judge, params)
       }
-      if(this.kdwlPointTCHandle == 1){ //
+      if(this.kdwlPointTCHandle == 1){
         this.pointTCHandle();
       }
       this.kdwlPointTCHandle = 2;
@@ -1251,6 +1266,9 @@ export default {
               });
             });
           })
+          .finally(() => {
+            delete that.layerRequesting[params.name];
+          });
       } else {
         this.areaDataItemArr.map(function (polygon) {
           viewer.entities.remove(polygon)
@@ -1262,7 +1280,6 @@ export default {
     getNFPointData(judge, params){
       let that = this;
       if (judge) {
-        // 添加
         fetch(params.url)
           .then(response => response.json())
           .then(function (result) {
@@ -1271,8 +1288,10 @@ export default {
             let itemImag = "./static/image/itemPoint.png"
             that.pointRedItemArr =  that.getPointInfo(result,itemType,itemImag)
           })
+          .finally(() => {
+            delete that.layerRequesting[params.name];
+          });
       } else {
-        // 删除
         this.pointRedItemArr.map(function (point) {
           viewer.entities.remove(point)
         })
@@ -1284,7 +1303,6 @@ export default {
     getHzpPointData(judge, params){
       let that = this;
       if (judge) {
-        // 添加
         fetch(params.url)
           .then(response => response.json())
           .then(function (result) {
@@ -1293,8 +1311,10 @@ export default {
               let itemImag = "./static/image/itembluePoint.png"
               that.pointBlueItemArr =  that.getPointInfo(result,itemType,itemImag)
           })
+          .finally(() => {
+            delete that.layerRequesting[params.name];
+          });
       } else {
-        // 删除
         this.pointBlueItemArr.map(function (point) {
           viewer.entities.remove(point)
         })
@@ -1345,12 +1365,71 @@ export default {
         params.btnType = ''
         judge = false
       }
+      // console.log("judgeLayerType====",params, judge)
+      
+      if (!judge) {
+        this.cancelLayerRequest(params.name);
+        if (params.type == "heatmap") {
+          this.removeHeatMapLayer(params.name);
+        } else {
+          this.removeWMSLayer(params.name);
+        }
+        return;
+      }
+      
+      if (this.layerRequesting[params.name]) {
+        return;
+      }
+      
+      this.layerRequesting[params.name] = true;
+      
       if (params.type == "heatmap") {
         this.addHeatMapLayer(judge, params);
       } else {
         this.addWMSLayer(judge, params);
       }
     },
+    cancelLayerRequest(layerName) {
+      if (this.layerAbortControllers[layerName]) {
+        this.layerAbortControllers[layerName].abort();
+        delete this.layerAbortControllers[layerName];
+      }
+    },
+    removeHeatMapLayer(layerName) {
+      if (Object.keys(toRaw(this.heatmapLayer)).length > 0 && this.heatmapLayer[layerName]) {
+        this.heatmapLayer[layerName].destroy();
+        delete this.heatmapLayer[layerName];
+      }
+      delete this.layerRequesting[layerName];
+    },
+    removeWMSLayer(layerName) {
+      if (this.wmslayer[layerName]) {
+        viewer.imageryLayers.remove(toRaw(this.wmslayer[layerName]));
+        delete this.wmslayer[layerName];
+      }
+      delete this.layerRequesting[layerName];
+    },
+    removeKdwlLayer(layerName) {
+      if (layerName == "奶粉快递分布") {
+        this.pointRedItemArr.map(function (point) {
+          viewer.entities.remove(point)
+        })
+        this.pointRedItemArr = []
+      } else if (layerName == "化妆品快递分布") {
+        this.pointBlueItemArr.map(function (point) {
+          viewer.entities.remove(point)
+        })
+        this.pointBlueItemArr = []
+      } else {
+        this.areaDataItemArr.map(function (polygon) {
+          viewer.entities.remove(polygon)
+        })
+        this.areaDataItemArr = []
+      }
+      this.kdwlInfoDialogShow = false;
+      this.nowPoint = null;
+      delete this.layerRequesting[layerName];
+    },
     // 加载wms服务
     addWMSLayer(judge, params) {
       if (judge) {
@@ -1382,20 +1461,60 @@ export default {
           url = params.url;
           type = 2; //单个数据
         }
-        // console.log("addHeatMapLayer=====",url)
-        // fetch(params.url)
-        fetch(url)
-          .then(response => response.json())
-          .then(function (result) {
-            // 过滤空店铺数据
-            result=result.features
-            if(params.alias == "化妆品"){
-              // 创建一个空数组来存储位于多边形内的点
+        
+        const abortController = new AbortController();
+        this.layerAbortControllers[params.name] = abortController;
+        
+        const loadAreaData = () => {
+          return fetch("./static/data/area.geojson", { signal: abortController.signal })
+            .then(response => response.json())
+            .then(areaResult => {
+              return areaResult.features;
+            })
+            .catch(err => {
+              if (err.name === 'AbortError') {
+                console.log("热力图请求已取消:", params.name);
+                throw err;
+              }
+              console.error("加载小区数据失败:", err);
+              return [];
+            });
+        };
+
+        Promise.all([fetch(url, { signal: abortController.signal }).then(r => r.json()), loadAreaData()])
+          .then(function ([dataResult, areaFeatures]) {
+            let result = dataResult.features;
+            
+            if(params.alias == "化妆品" && areaFeatures.length > 0){
               const pointsInside = [];
-              // 遍历点数据，使用 turf.inside 检查每个点是否在多边形内
               result.forEach(point => {
-                if (turf.inside(point, areaData.features[0])) {
-                  pointsInside.push(point); // 如果点在多边形内，则添加到结果数组中
+                let isInside = false;
+                for (let i = 0; i < areaFeatures.length; i++) {
+                  const areaData = areaFeatures[i];
+                  if (areaData.geometry && areaData.geometry.type === 'Polygon') {
+                    if (turf.inside(point, areaData)) {
+                      isInside = true;
+                      break;
+                    }
+                  } else if (areaData.geometry && areaData.geometry.type === 'MultiPolygon') {
+                    const coordinates = areaData.geometry.coordinates;
+                    for (let p = 0; p < coordinates.length; p++) {
+                      const polygon = {
+                        type: 'Feature',
+                        geometry: {
+                          type: 'Polygon',
+                          coordinates: coordinates[p]
+                        }
+                      };
+                      if (turf.inside(point, polygon)) {
+                        isInside = true;
+                        break;
+                      }
+                    }
+                  }
+                }
+                if (isInside) {
+                  pointsInside.push(point);
                 }
               });
               result = pointsInside;
@@ -1419,11 +1538,6 @@ export default {
               flyTo: false,
               height: 0,
               heatStyle: {
-                // blur: 0.7,
-                // gradient: { 0.3: 'blue', 0.6: 'green', 0.8: 'yellow', 0.9: 'red' },
-                // maxOpacity: 1,
-                // minOpacity: 0.3,
-
                 radius: 1.5,
                 maxOpacity: 0.8,
                 minOpacity: 0,
@@ -1439,11 +1553,21 @@ export default {
               },
             }, SkyScenery)
           })
+          .catch(err => {
+            if (err.name !== 'AbortError') {
+              console.error("加载热力图失败:", err);
+            }
+          })
+          .finally(() => {
+            delete that.layerAbortControllers[params.name];
+            delete that.layerRequesting[params.name];
+          });
       } else {
         if (Object.keys(toRaw(this.heatmapLayer)).length > 0) {
           this.heatmapLayer[params.name].destroy();
           delete this.heatmapLayer[params.name]
         }
+        delete this.layerRequesting[params.name];
       }
     },
     handleCloseheatDrawer(){
@@ -1818,7 +1942,7 @@ export default {
     .layerPanel {
       position: absolute;
       right: 130px;
-      top: 80px;
+      top: 130px;
       // background: #01346f99;
       background: #1656b4;
       border-radius: 5px;
@@ -2069,7 +2193,7 @@ export default {
     .kdwlPanel {
       position: absolute;
       right: 130px;
-      top: 80px;
+      top: 200px;
       // background: #01346f99;
       background: #1656b4;
       border-radius: 5px;
@@ -2077,7 +2201,7 @@ export default {
       height: fit-content;
       overflow: hidden;
       overflow-y: auto;
-      height: 240px;
+      max-height: 240px;
 
       ul {
         margin: 0 0;

vue.config.js

@@ -1,5 +1,13 @@
 const { defineConfig } = require('@vue/cli-service')
 
+// 解决 MaxListenersExceededWarning 警告
+require('events').EventEmitter.defaultMaxListeners = 20;
+
+// 解决 util._extend 已弃用警告
+const util = require('util');
+// 直接覆盖而不是条件检查，确保修复生效
+util._extend = Object.assign;
+
 const path = require('path')
 const webpack = require('webpack')
 const CompressionWebpackPlugin = require("compression-webpack-plugin");