北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2023-11-15 f263e0396359ac7686e68ce0e1a2e2ef6419906d
src/components/map/viewer.vue
@@ -2,7 +2,7 @@
  <div>
    <div id="sdkContainer"></div>
    <div class="listBox" v-show="viewer1Show && !isLand">
      <ul>
      <ul id="viewer_lsyx">
        <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)">
          {{ item }}
        </li>
@@ -43,7 +43,7 @@
import "animate.css";
import Bus from "@tools/Bus";
let activeLi, nLayer;
let activeLi, nLayer, LWLayer;
export default {
  name: "viewer",
  components: {
@@ -73,6 +73,24 @@
  computed: {
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]),
  },
  watch: {
    viewer1Show(newvalue, oldvalue) {
      if (!newvalue) {
        this.destroyImageLayer();
      } else {
        if (!this.isLand) {
          this.initLSYX();
        }
      }
    },
    isLand(newvalue, oldvalue) {
      if (newvalue) {
        this.destroyImageLayer();
      } else {
        this.initLSYX();
      }
    },
  },
  mounted() {
    this.$nextTick(function () {
      let that = this;
@@ -80,8 +98,8 @@
      window.sgworld = new SmartEarth.EarthCtrl(
        "sdkContainer",
        {
          // StaticFileBaseUrl: "../../../static/CimSDK/",
          StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
          StaticFileBaseUrl: "../../../static/CimSDK/",
          // StaticFileBaseUrl: "../../../SW/static/CimSDK/",
        },
        {},
        {},
@@ -126,7 +144,8 @@
        }
      );
      window.Viewer = sgworld._Viewer;
      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);
      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium);
      Viewer.shadows = false;
      //深度检测
      sgworld.Analysis.depthTestAgainstTerrain(true);
@@ -196,15 +215,6 @@
        },
      });
      //初始化弹窗事件
      // that.showBottom();
      that.initLayerOpen();
@@ -251,23 +261,32 @@
        this.destroyImageLayer();
      }
    },
    initLSYX() {
      let ul = document.getElementById("viewer_lsyx");
      let lis = ul.getElementsByTagName('li');
      lis[19].click();
    },
    destroyImageLayer() {
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi.classList.remove("active");
        activeLi = null;
      }
      if (nLayer) {
        Viewer.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
      if (LWLayer) {
        Viewer.imageryLayers.remove(LWLayer, true);
        LWLayer = null;
      }
    },
    changeLeftMap(event, item, index) {
      let liObj = event.currentTarget;
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi.classList.remove("active");
        activeLi = null;
      }
      liObj.classList.add('active');
      liObj.classList.add("active");
      activeLi = liObj;
      this.loadImageLayer(item);
    },
@@ -277,21 +296,29 @@
        nLayer = null;
      }
      nLayer = this.loadBJ54ImageLayer(year);
      if (!LWLayer||Viewer.imageryLayers.indexOf(LWLayer)<0) {
        if(LWLayer)
        {
          LWLayer.destroy();
        }
        LWLayer = this.loadBJ54LWLayer();
      }
    },
    loadBJ54ImageLayer(year) {
    loadBJ54LWLayer() {
      let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = 113.168199 * Math.PI / 180.0;
      let miny = 39.230551 * Math.PI / 180.0;
      let maxx = 118.562362 * Math.PI / 180.0;
      let maxy = 41.294714 * Math.PI / 180.0;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Shiliang_Lw_2019&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = (113.168199 * Math.PI) / 180.0;
      let miny = (39.230551 * Math.PI) / 180.0;
      let maxx = (118.562362 * Math.PI) / 180.0;
      let maxy = (41.294714 * Math.PI) / 180.0;
      let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
        numberOfLevelZeroTilesY: 1,
      });
      var dx = {
        url: paramUrl,
@@ -302,11 +329,49 @@
          },
          ny: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          }
        }
          },
        },
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
        alpha: 1,
        brightness: 1.0,
      });
      Viewer.imageryLayers.add(imageLayer, 3);
      return imageLayer;
    },
    loadBJ54ImageLayer(year) {
      let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = (113.168199 * Math.PI) / 180.0;
      let miny = (39.230551 * Math.PI) / 180.0;
      let maxx = (118.562362 * Math.PI) / 180.0;
      let maxy = (41.294714 * Math.PI) / 180.0;
      let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1,
      });
      var dx = {
        url: paramUrl,
        tilingScheme: tilingScheme,
        customTags: {
          nx: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + x;
          },
          ny: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          },
        },
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
        alpha: 1,
        brightness: 1.0,
      });
      Viewer.imageryLayers.add(imageLayer, 2);
      return imageLayer;
    },
@@ -330,10 +395,17 @@
      this.switchImagerLayer = !this.switchImagerLayer;
    },
    ArcgisImageryLayer() {
      var layer = sgworld.factory.createImageryLayer({
        sourceType: "arcgis",
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      });
      sgworld.Creator.createArcGisImageryLayer(
        "ARCGIS",
        {
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
          enablePickFeatures: false,
        },
        "0",
        1,
        true,
        ""
      );
    },
    //初始化弹窗事件
@@ -535,13 +607,10 @@
  position: absolute;
  left: 20px;
  top: 100px;
}
.listBox .active {
  background: rgba(255, 166, 0, 0.808);
}
.listBox li {