11

少年

2024-02-07 8e303795664e31320d681bee93479dbc45b3e49b

 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数据
@@ -1856,8 +1857,8 @@
    },
    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 +1869,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 +1878,7 @@
      });

      // 创建聚合层
      var clusterSource = new Cluster({
      var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: vectorSource,
      });
@@ -1885,13 +1886,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 +1901,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 +1919,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 +1938,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 +1955,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 +1973,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 +1992,17 @@
          },
        });

        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();
    },
    initCluster(treeNode) {
      if (treeNode.checked == false) {
        window.map.removeLayer(window.jkspclusterLayer);
        window.mapapi.removeLayer(window.jkspclusterLayer);
        return;
      }
      const loading = this.$loading({
@@ -2011,8 +2012,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,20 +2021,20 @@
      });

      // 创建聚合层
      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",
              }),
@@ -2042,15 +2043,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",
                  }),
                }),
@@ -2061,15 +2062,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,10 +2082,10 @@
      });

      // 将聚合层加入地图
      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();
      // new Cesium.GeoJsonDataSource.load(
      //   treeNode.urls +
@@ -2275,7 +2276,7 @@
    },
    qiyeCluster(treeNode) {
      if (treeNode.checked == false) {
        window.map.removeLayer(window.qiyeclusterLayer);
        window.mapapi.removeLayer(window.qiyeclusterLayer);
        return;
      }
      const loading = this.$loading({
@@ -2285,29 +2286,31 @@
        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=" +
          treeNode.layer,
      });
      
      console.log(vectorSource,'11111')

      // 创建聚合层
      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 +2319,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 +2338,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,10 +2380,10 @@
      });

      // 将聚合层加入地图
      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();

      // let dataSource;