更新

lixuliang

2024-09-14 c7187e038c284acc051a439c5eda16582bdb9b7a

 src/components/map/viewer.vue

@@ -1,31 +1,57 @@
<template>
  <div>
    <div id="sdkContainer"></div>

    <div class="listBox" v-show="viewer1Show && !isLand">
      <ul id="viewer_lsyx">
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap($event, item, index)"
        >{{ item }}</li>
      </ul>
    </div>

    <layerTreeTwoScreen v-if="layerTreeTwoScreen" />
    <!-- <div id="bottomInfo" v-html="bottomInfo"></div> -->
    <div id="switchImagerLayer" :style="{
      transform: `scale(${scale}) translate(${offset},${offset})`,
      '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
    }">
      <transition name="animate__animated animate__bounce" @click="switchImagerLayerShowOrHide"
        enter-active-class="animate__backInRight" leave-active-class="animate__backOutRight" appear>
        <switchImagerLayer v-show="switchImagerLayer" />
    <div
      id="switchImagerLayer"
      :style="{
        transform: `scale(${scale}) translate(${offset},${offset})`,
        '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
      }"
    >
      <transition
        name="animate__animated animate__bounce"
        @click="switchImagerLayerShowOrHide"
        enter-active-class="animate__backInRight"
        leave-active-class="animate__backOutRight"
        appear
      >
        <switchImagerLayer ref="switchImagerLayer" v-show="switchImagerLayer" />
      </transition>

      <img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" />
      <div class="bgbox">
        <img class="swichImg" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" />
        <img class="swichImg bgbox" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" />
        <img
          class="swichImg"
          @click="switchImagerLayerShowOrHide"
          src="@/assets/img/new/shiliang.png"
        />
        <img
          class="swichImg bgbox"
          @click="switchImagerLayerShowOrHide"
          src="@/assets/img/new/shiliang.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/components/common";
import layerTreeTwoScreen from "@/components/left/layerTreeTwoScreen";
import switchImagerLayer from "@/components/right/switchImagerLayer";
import { mapState, mapMutations } from "vuex";
@@ -35,11 +61,14 @@
import jiejing from "@/assets/img/new/jiejing.png";
import "animate.css";
import Bus from "@tools/Bus";
import mapMsg from "../../assets/js/mapMsg";

let activeLi, nLayer, LWLayer;
export default {
  name: "viewer",
  components: {
    switchImagerLayer,
    layerTreeTwoScreen,
    layerTreeTwoScreen
  },
  data() {
    return {
@@ -55,20 +84,66 @@
      scale: "1",
      offset: "0%",
      radio: 3,
      arr: [
        2001,
        2002,
        2003,
        2004,
        2005,
        2006,
        2007,
        2008,
        2009,
        2010,
        2011,
        2012,
        2013,
        2014,
        2015,
        2016,
        2017,
        2018,
        2019,
        2020,
        2021
      ]
    };
  },
  computed: {
    ...mapState(["layerTreeTwoScreen", "cesiumInit"]),
    ...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 pathName = window.location.pathname.split("/");
    let StaticFileBaseUrl;
    if (pathName.length != 2) {
      StaticFileBaseUrl = `../../../${pathName[1]}/static/CimSDK/`;
    } else {
      StaticFileBaseUrl = `../../../static/CimSDK/`;
    }
    this.$nextTick(function() {
      let that = this;
      //*********北京sdk************
      window.sgworld = new SmartEarth.EarthCtrl(
        "sdkContainer",
        {
          // StaticFileBaseUrl: "../../../static/CimSDK/",
          StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
          StaticFileBaseUrl: StaticFileBaseUrl
        },
        {},
        {},
@@ -81,7 +156,7 @@
              39.744945,
              50000
            ),
            duration: 7, //飞行时间8s
            duration: 7 //飞行时间8s
          });
          //再飞到朝林大厦
          setTimeout(() => {
@@ -91,7 +166,7 @@
                39.791361,
                5000
              ),
              duration: 5, //飞行时间8s
              duration: 5 //飞行时间8s
            });
          }, 8000);
          setTimeout(() => {
@@ -104,16 +179,19 @@
              orientation: {
                heading: Cesium.Math.toRadians(328.5),
                pitch: Cesium.Math.toRadians(-27.5),
                roll: Cesium.Math.toRadians(0.0),
                roll: Cesium.Math.toRadians(0.0)
              },
              duration: 5, //飞行时间8s
              duration: 5 //飞行时间8s
            });
            // console.log("加载完成");
          }, 14000);
          that.setCesiumInit(true);
        }
      );
      window.Viewer = sgworld._Viewer;
      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);
      window.viewer = sgworld._Viewer;
      sgworld._Viewer.scene.moon.show = false;
      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium);
      Viewer.shadows = false;
      //深度检测
      sgworld.Analysis.depthTestAgainstTerrain(true);
@@ -121,28 +199,32 @@
      // Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
      Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
      Viewer.scene.globe.undergroundColor = undefined;

      mapMsg.init();
      // rpc.clickToCoordinates();
      // mapMsg.setTime();
      //开启编辑并启用属性弹窗
      sgworld.Creator.SimpleGraphic.setEdit(true, {
        editProp: true,
        editPropData: {
          offset: "r",
          height: "60%",
          height: "60%"
        },
        callBack: {
          delete: function (entity) {
          delete: function(entity) {
            Bus.$emit("removeTreeNode", entity);
          },
          end: function (entity) {
          end: function(entity) {
            if (entity) {
              let style = sgworld.Creator.SimpleGraphic.getStyle(entity);
              let data = {
                name: entity.name,
                style: style,
                style: style
              };
              Bus.$emit("updataTreeNode", entity.id, data);
            }
          },
        },
          }
        }
      });
      //标会编辑
      // sgworld.Creator.SimpleGraphic.setEdit(true, {
@@ -179,18 +261,9 @@
            if (layeroHeight >= titleHeight + htmlHeight) {
              layero.height(titleHeight + htmlHeight);
            }
          },
        },
          }
        }
      });










      //初始化弹窗事件
      // that.showBottom();
@@ -229,6 +302,127 @@
      //this.onresize_height = ratio;
      // return ratio;
    },
    changeMode(mode) {
      this.$refs.switchImagerLayer.switchImagerLayerClick(mode);
    },
    setImageComparison(isStart) {
      this.isImage = isStart;
      if (!this.isImage) {
        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 = 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 = null;
      }
      liObj.classList.add("active");
      activeLi = liObj;
      this.loadImageLayer(item);
    },
    loadImageLayer(year) {
      if (nLayer) {
        Viewer.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
      nLayer = this.loadBJ54ImageLayer(year);
      if (!LWLayer || Viewer.imageryLayers.indexOf(LWLayer) < 0) {
        if (LWLayer) {
          LWLayer.destroy();
        }
        LWLayer = this.loadBJ54LWLayer();
      }
    },
    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=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
      });
      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, 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;
    },
    changeImage(val) {
      switch (val) {
        case "1":
@@ -249,15 +443,24 @@
      this.switchImagerLayer = !this.switchImagerLayer;
    },
    ArcgisImageryLayer() {
      var layer = sgworld.factory.createImageryLayer({
        sourceType: "arcgis",
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      });
      let InitMap = sgworld.Creator.createArcGisImageryLayer(
        "ARCGIS",
        {
          url:
            "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
          enablePickFeatures: false
        },
        "0",
        1,
        true,
        ""
      );
     console.log(InitMap);
    },
    //初始化弹窗事件

    initLayerOpen() {
      window.layerOpen = function (name, options) {
      window.layerOpen = function(name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);

        let width = options.width;
@@ -284,27 +487,32 @@
          offset: options.offset || undefined,
          area: [
            typeof width === "number" ? width + "px" : width,
            typeof height === "number" ? height + "px" : height,
            typeof height === "number" ? height + "px" : height
          ],
          content: options.url,
          success: function (layero, index) {
          success: function(layero, index) {
            layero.css({
              "border-radius": "8px",
              "border-radius": "8px"
            });
            if (successFn && typeof successFn === "function") {
              successFn(layero, index);
            }
          },
          cancel: function () {
          cancel: function() {
            if (cancelFn && typeof cancelFn === "function") {
              cancelFn();
              if (window.pickFeature && window.pickFeature.primitive) {
                window.pickFeature.primitive.image = imgUrl;
                window.pickFeature.primitive.scale = scale;
                window.pickFeature = null;
              }
            }
          },
          end: function () {
          end: function() {
            if (endFn && typeof endFn === "function") {
              endFn();
            }
          },
          }
        });
      };
    },
@@ -314,7 +522,7 @@
        "<div style='color: #FFFFFF;float: left;height: 28px;line-height: 28px;'></div>";

      let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      handler3D.setInputAction((wheelment) => {
      handler3D.setInputAction(wheelment => {
        // 滚动滚轴，得到当前的视点高度
        // 单位换算，当大于1000米的时候显示“千米”，小于1000米的时候显示单位为“米”
        var cHeightM = Viewer.camera.positionCartographic.height;
@@ -383,8 +591,8 @@
      //       "</span>";
      //   }
      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
  },
    }
  }
};
</script>

@@ -450,6 +658,37 @@
  z-index: -1;
}

.listBox {
  position: absolute;
  left: 20px;
  top: 100px;
}

.listBox .active {
  background: rgba(255, 166, 0, 0.808);
}

.listBox li {
  padding: 2px;
  margin-top: 1px;
  border-radius: 2px;
  color: white;
  background: rgba(14, 50, 143, 0.6);
  font-size: 14px;
  cursor: pointer;
}

/* 屏幕分辨率放大为 125 */
@media (-webkit-min-device-pixel-ratio: 1.25) {
  .listBox li {
    font-size: 12px;
  }
}

.listBox li:hover {
  background: rgba(255, 166, 0, 0.808);
}

.mid {
  position: absolute;
  top: 50%;