YOUHAU

lixuliang

2024-03-22 5206e7a4f4c5b71c9ddeccdbbe5e7fba5b3eeb9b

 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue

@@ -69,19 +69,20 @@

import store from "@/utils/store2.js";
import axios from "axios";
import Vector from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Cluster from "ol/source/Cluster";
import Style from "ol/style/Style";
import Circle from "ol/style/Circle";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Icon from "ol/style/Icon";
import VectorLayer from "ol/layer/Vector";

import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";
import Vector from "ol/source/Vector";
// import GeoJSON from "ol/format/GeoJSON";
// import Cluster from "ol/source/Cluster";
// import Style from "ol/style/Style";
// import Circle from "ol/style/Circle";
// import Stroke from "ol/style/Stroke";
// import Fill from "ol/style/Fill";
// import Text from "ol/style/Text";
// import Icon from "ol/style/Icon";
// import VectorLayer from "ol/layer/Vector";

// import ImageWMS from "ol/source/ImageWMS";
// import Image from "ol/layer/Image";

export default {
  name: "LayerTreePanel",
@@ -1017,8 +1018,8 @@
          //   ""
          // );
          debugger;
          var layer = new Image({
            source: new ImageWMS({
          var layer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
              //不能设置为0，否则地图不展示。
              ratio: 1,
              url: "http://127.0.0.1:8080/geoserver/province/wms",
@@ -1031,7 +1032,7 @@
              serverType: "geoserver",
            }),
          });
          window.map.addLayer(layer);
          window.mapapi.addLayer(layer);
          break;
        case "wfs":
          // wfs数据
@@ -1854,10 +1855,11 @@
        layer.item.baseLayer = true;
      }
    },
    // 市政杆体聚合
    initLdgCluster(treeNode) {
      if (treeNode.checked == false) {
        window.map.removeLayer(window.ldgclusterLayer);
        window.map.removeLayer(window.tldgclusterLayer);
        window.mapapi.removeLayer(window.ldgclusterLayer);
        window.mapapi.removeLayer(window.tldgclusterLayer);
        return;
      }
      const loading = this.$loading({
@@ -1868,8 +1870,8 @@
      });

      // 加载 GeoJSON 数据
      var vectorSource = new Vector({
        format: new GeoJSON(),
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -1877,7 +1879,7 @@
      });

      // 创建聚合层
      var clusterSource = new Cluster({
      var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: vectorSource,
      });
@@ -1885,13 +1887,13 @@
      // 创建聚合显示样式
      var styleCache = {};
      if (treeNode.name == "路灯杆 ") {
        window.ldgclusterLayer = new VectorLayer({
        window.ldgclusterLayer = new ol.layer.Vector({
          source: clusterSource,
          style: function (feature) {
            var size = feature.get("features").length;
            if (size == 1) {
              return new Style({
                image: new Icon({
              return new ol.style.Style({
                image: new ol.style.Icon({
                  anchor: [0.5, 1],
                  src: treeNode.image,
                }),
@@ -1900,14 +1902,14 @@
            if (size > 1000) {
              var style = styleCache[size];
              if (!style) {
                style = new Style({
                  image: new Icon({
                style = new ol.style.Style({
                  image: new ol.style.Icon({
                    scale: 0.4,
                    src: require("@/assets/img/right/test01.png"),
                  }),
                  text: new Text({
                  text: new ol.style.Text({
                    text: size.toString(),
                    fill: new Fill({
                    fill: new ol.style.Fill({
                      color: "#fff",
                    }),
                  }),
@@ -1918,15 +1920,15 @@
            }
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.3,
                  src: require("@/assets/img/right/jh.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -1937,15 +1939,15 @@
          },
        });

        window.map.addLayer(window.ldgclusterLayer);
        window.mapapi.addLayer(window.ldgclusterLayer);
      } else if (treeNode.name == "路名牌杆 ") {
        window.tldgclusterLayer = new VectorLayer({
        window.tldgclusterLayer = new ol.layer.Vector({
          source: clusterSource,
          style: function (feature) {
            var size = feature.get("features").length;
            if (size == 1) {
              return new Style({
                image: new Icon({
              return new ol.style.Style({
                image: new ol.style.Icon({
                  anchor: [0.5, 1],
                  src: treeNode.image,
                }),
@@ -1954,14 +1956,14 @@
            if (size > 1000) {
              var style = styleCache[size];
              if (!style) {
                style = new Style({
                  image: new Icon({
                style = new ol.style.Style({
                  image: new ol.style.Icon({
                    scale: 0.4,
                    src: require("@/assets/img/right/test01.png"),
                  }),
                  text: new Text({
                  text: new ol.style.Text({
                    text: size.toString(),
                    fill: new Fill({
                    fill: new ol.style.Fill({
                      color: "#fff",
                    }),
                  }),
@@ -1972,15 +1974,15 @@
            }
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.3,
                  src: require("@/assets/img/right/jh.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -1991,17 +1993,28 @@
          },
        });

        window.map.addLayer(window.tldgclusterLayer);
        window.mapapi.addLayer(window.tldgclusterLayer);
      }

      // 将聚合层加入地图
      window.map.removeLayer(window.jkspclusterLayer);
      window.map.removeLayer(window.qiyeclusterLayer);
      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()
        ) {
          clusterSource.setDistance(0);
        } else {
          clusterSource.setDistance(40);
        }
      });
    },
    // 视频监控聚合
    initCluster(treeNode) {
      if (treeNode.checked == false) {
        window.map.removeLayer(window.jkspclusterLayer);
        window.mapapi.removeLayer(window.jkspclusterLayer);
        return;
      }
      const loading = this.$loading({
@@ -2011,8 +2024,8 @@
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 加载 GeoJSON 数据
      var vectorSource = new Vector({
        format: new GeoJSON(),
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2020,37 +2033,37 @@
      });

      // 创建聚合层
      var clusterSource = new Cluster({
      var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: vectorSource,
      });

      // 创建聚合显示样式
      var styleCache = {};
      window.jkspclusterLayer = new VectorLayer({
      window.jkspclusterLayer = new ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
          if (size == 1) {
            return new Style({
              image: new Icon({
            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",
              }),
            });
          }
          if (size > 1000) {
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.4,
                  src: require("@/assets/img/right/test01.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -2061,15 +2074,15 @@
          }
          var style = styleCache[size];
          if (!style) {
            style = new Style({
              image: new Icon({
            style = new ol.style.Style({
              image: new ol.style.Icon({
                // anchor: [0.5, 1],
                scale: 0.3,
                src: require("@/assets/img/right/jh.png"),
              }),
              text: new Text({
              text: new ol.style.Text({
                text: size.toString(),
                fill: new Fill({
                fill: new ol.style.Fill({
                  color: "#fff",
                }),
              }),
@@ -2081,11 +2094,21 @@
      });

      // 将聚合层加入地图
      window.map.removeLayer(window.ldgclusterLayer);
      window.map.removeLayer(window.tldgclusterLayer);
      window.map.removeLayer(window.qiyeclusterLayer);
      window.map.addLayer(window.jkspclusterLayer);
      window.mapapi.removeLayer(window.ldgclusterLayer);
      window.mapapi.removeLayer(window.tldgclusterLayer);
      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()
        ) {
          clusterSource.setDistance(0);
        } else {
          clusterSource.setDistance(40);
        }
      });
      // new Cesium.GeoJsonDataSource.load(
      //   treeNode.urls +
      //     "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2243,39 +2266,11 @@
      //     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.map.removeLayer(window.qiyeclusterLayer);
        window.mapapi.removeLayer(window.qiyeclusterLayer);
        return;
      }
      const loading = this.$loading({
@@ -2285,8 +2280,8 @@
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 加载 GeoJSON 数据
      var vectorSource = new Vector({
        format: new GeoJSON(),
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2294,20 +2289,20 @@
      });

      // 创建聚合层
      var clusterSource = new Cluster({
      var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: vectorSource,
      });

      // 创建聚合显示样式
      var styleCache = {};
      window.qiyeclusterLayer = new VectorLayer({
      window.qiyeclusterLayer = new ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
          if (size == 1) {
            return new Style({
              image: new Icon({
            return new ol.style.Style({
              image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: treeNode.image,
              }),
@@ -2316,15 +2311,15 @@
          if (size > 1000) {
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.4,
                  src: require("@/assets/img/right/test01.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -2335,15 +2330,15 @@
          }
          var style = styleCache[size];
          if (!style) {
            style = new Style({
              image: new Icon({
            style = new ol.style.Style({
              image: new ol.style.Icon({
                // anchor: [0.5, 1],
                scale: 0.3,
                src: require("@/assets/img/right/jh.png"),
              }),
              text: new Text({
              text: new ol.style.Text({
                text: size.toString(),
                fill: new Fill({
                fill: new ol.style.Fill({
                  color: "#fff",
                }),
              }),
@@ -2377,12 +2372,46 @@
      });

      // 将聚合层加入地图
      window.map.removeLayer(window.ldgclusterLayer);
      window.map.removeLayer(window.tldgclusterLayer);
      window.map.removeLayer(window.jkspclusterLayer);
      window.map.addLayer(window.qiyeclusterLayer);
      window.mapapi.removeLayer(window.ldgclusterLayer);
      window.mapapi.removeLayer(window.tldgclusterLayer);
      window.mapapi.removeLayer(window.jkspclusterLayer);
      window.mapapi.addLayer(window.qiyeclusterLayer);
      loading.close();
      //监听最大层级 聚合距离为0 取消聚合
      window.mapapi.getView().on("change:resolution", function (event) {
        if (
          window.mapapi.getView().getZoom() ==
          window.mapapi.getView().getMaxZoom()
        ) {
          clusterSource.setDistance(0);
          // clusterSource.getSource().clear()
          // console.log("企业");
        } 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);
@@ -2478,6 +2507,37 @@
      //   }
      // });
    },

    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;
    //   let imgUrl;