From fa05dfcce55b8589d7f76175700a92fe196dcd9b Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 13 三月 2024 17:59:52 +0800
Subject: [PATCH] 图层切换叠压

---
 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue |  130 +++++++++++++++++++++++++++++++------------
 1 files changed, 94 insertions(+), 36 deletions(-)

diff --git a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
index 7672c76..37f4ab1 100644
--- a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
+++ b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
@@ -1855,6 +1855,7 @@
         layer.item.baseLayer = true;
       }
     },
+    // 甯傛斂鏉嗕綋鑱氬悎
     initLdgCluster(treeNode) {
       if (treeNode.checked == false) {
         window.mapapi.removeLayer(window.ldgclusterLayer);
@@ -1940,7 +1941,7 @@
 
         window.mapapi.addLayer(window.ldgclusterLayer);
       } else if (treeNode.name == "璺悕鐗屾潌 ") {
-        window.tldgclusterLayer = new  ol.layer.Vector({
+        window.tldgclusterLayer = new ol.layer.Vector({
           source: clusterSource,
           style: function (feature) {
             var size = feature.get("features").length;
@@ -1999,7 +2000,20 @@
       window.mapapi.removeLayer(window.jkspclusterLayer);
       window.mapapi.removeLayer(window.qiyeclusterLayer);
       loading.close();
+      window.mapapi.getView().on("change:resolution", function (event) {
+        if (
+          window.mapapi.getView().getZoom() ==
+          window.mapapi.getView().getMaxZoom()
+        ) {
+          console.log("max");
+
+          clusterSource.setDistance(0);
+        } else {
+          clusterSource.setDistance(40);
+        }
+      });
     },
+    // 瑙嗛鐩戞帶鑱氬悎
     initCluster(treeNode) {
       if (treeNode.checked == false) {
         window.mapapi.removeLayer(window.jkspclusterLayer);
@@ -2028,7 +2042,7 @@
 
       // 鍒涘缓鑱氬悎鏄剧ず鏍峰紡
       var styleCache = {};
-      window.jkspclusterLayer = new  ol.layer.Vector({
+      window.jkspclusterLayer = new ol.layer.Vector({
         source: clusterSource,
         style: function (feature) {
           var size = feature.get("features").length;
@@ -2036,7 +2050,7 @@
             return new ol.style.Style({
               image: new ol.style.Icon({
                 anchor: [0.5, 1],
-                src: "./static/SmartEarthSDK/Workers/image/xzspj/spjk.png",
+                src: "./static/SmartEarthSDK/Workers/image/xzspj/camera.png",
               }),
             });
           }
@@ -2087,6 +2101,18 @@
       window.mapapi.removeLayer(window.qiyeclusterLayer);
       window.mapapi.addLayer(window.jkspclusterLayer);
       loading.close();
+      window.mapapi.getView().on("change:resolution", function (event) {
+        if (
+          window.mapapi.getView().getZoom() ==
+          window.mapapi.getView().getMaxZoom()
+        ) {
+          console.log("max");
+
+          clusterSource.setDistance(0);
+        } else {
+          clusterSource.setDistance(40);
+        }
+      });
       // new Cesium.GeoJsonDataSource.load(
       //   treeNode.urls +
       //     "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2244,36 +2270,8 @@
       //     loading.close();
       //   });
     },
-    testSDKcluster() {
-      let clusterLayer1 = new SmartEarth.ClusterLayer(Viewer, {
-        style: "clustering",
-      });
-      axios
-        .get(
-          window.gisBaseUrl +
-            "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
-        )
-        .then((res) => {
-          let positions = generatePosition(20000);
-          positions.forEach((item) => {
-            clusterLayer1.add(item, {
-              image: "./static/SmartEarthSDK/Workers/image/xzspj/qiye.png",
-            });
-          });
-          // res.data.features.forEach((item) => {
-          // clusterLayer1.add(
-          //   new SmartEarth.Degrees(
-          //     item.geometry.coordinates[0],
-          //     item.geometry.coordinates[1]
-          //   ),
-          //   {
-          //     name: `QY&${item.properties.ID}&${item.properties["QYMC"]}&${item.properties["DZ"]}&${item.properties["BZDZ"]}&${item.properties["XYDM"]}&${item.geometry.coordinates[0]}&${item.geometry.coordinates[1]}`,
-          //     image: SmartEarthRootUrl + "Workers/image/mark.png",
-          //   }
-          // );
-          // });
-        });
-    },
+
+    //浼佷笟淇℃伅鑱氬悎
     qiyeCluster(treeNode) {
       if (treeNode.checked == false) {
         window.mapapi.removeLayer(window.qiyeclusterLayer);
@@ -2293,8 +2291,6 @@
           "?version=1.3.0&request=GetFeature&format=json&typename=" +
           treeNode.layer,
       });
-      
-      console.log(vectorSource,'11111')
 
       // 鍒涘缓鑱氬悎灞�
       var clusterSource = new ol.source.Cluster({
@@ -2304,7 +2300,7 @@
 
       // 鍒涘缓鑱氬悎鏄剧ず鏍峰紡
       var styleCache = {};
-      window.qiyeclusterLayer = new  ol.layer.Vector({
+      window.qiyeclusterLayer = new ol.layer.Vector({
         source: clusterSource,
         style: function (feature) {
           var size = feature.get("features").length;
@@ -2385,7 +2381,38 @@
       window.mapapi.removeLayer(window.jkspclusterLayer);
       window.mapapi.addLayer(window.qiyeclusterLayer);
       loading.close();
+      window.mapapi.getView().on("change:resolution", function (event) {
+        if (
+          window.mapapi.getView().getZoom() ==
+          window.mapapi.getView().getMaxZoom()
+        ) {
+          clusterSource.setDistance(0);
+        } else {
+          clusterSource.setDistance(40);
+        }
+      }); 
+      // 鐩戝惉鍦板浘鍗曞嚮浜嬩欢
+      // window.mapapi.on("singleclick", function (e) {
+      //   var pixel = window.mapapi.getEventPixel(e.originalEvent);
+      //   var currentFeature = window.mapapi.forEachFeatureAtPixel(
+      //     pixel,
+      //     function (feature, layer) {
+      //       return feature;
+      //     }
+      //   );
+      //   if (currentFeature) {
+      //     var features = currentFeature.get("features");
+      //     if (features.length > 1) {
+      //       console.log(features);
+      //       window.alert("褰撳墠鑱氬悎鍦堜笅鍏辨湁" + features.length + "涓绱�");
+      //     }
+      //     if (features.length == 1) {
+      //       console.log(features);
 
+      //       window.alert("褰撳墠瑕佺礌鏈鑱氬悎锛屽彧鏈�" + features.length + "涓绱�");
+      //     }
+      //   }
+      // });
       // let dataSource;
       // if (treeNode.layer == "浼佷笟閾句紒涓�") {
       //   // console.log(store.qiyeJsonInfo);
@@ -2480,6 +2507,37 @@
       //     cluster.billboard.height = 40;
       //   }
       // });
+    }, 
+
+    testSDKcluster() {
+      let clusterLayer1 = new SmartEarth.ClusterLayer(Viewer, {
+        style: "clustering",
+      });
+      axios
+        .get(
+          window.gisBaseUrl +
+            "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
+        )
+        .then((res) => {
+          let positions = generatePosition(20000);
+          positions.forEach((item) => {
+            clusterLayer1.add(item, {
+              image: "./static/SmartEarthSDK/Workers/image/xzspj/qiye.png",
+            });
+          });
+          // res.data.features.forEach((item) => {
+          // clusterLayer1.add(
+          //   new SmartEarth.Degrees(
+          //     item.geometry.coordinates[0],
+          //     item.geometry.coordinates[1]
+          //   ),
+          //   {
+          //     name: `QY&${item.properties.ID}&${item.properties["QYMC"]}&${item.properties["DZ"]}&${item.properties["BZDZ"]}&${item.properties["XYDM"]}&${item.geometry.coordinates[0]}&${item.geometry.coordinates[1]}`,
+          //     image: SmartEarthRootUrl + "Workers/image/mark.png",
+          //   }
+          // );
+          // });
+        });
     },
     // initCluster(treeNode) {
     //   let that = this;

--
Gitblit v1.9.3