更新

lixuliang

2024-09-14 c7187e038c284acc051a439c5eda16582bdb9b7a

 src/components/map/viewer.vue

@@ -2,16 +2,13 @@
  <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>
        >{{ item }}</li>
      </ul>
    </div>

@@ -37,11 +34,7 @@
        <switchImagerLayer ref="switchImagerLayer" v-show="switchImagerLayer" />
      </transition>

      <img
        class="swichImg"
        @click="switchImagerLayerShowOrHide"
        :src="switchImage"
      />
      <img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" />
      <div class="bgbox">
        <img
          class="swichImg"
@@ -59,7 +52,6 @@
</template>

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

import mapData from "../../../static/mapData";
import mapMsg from "../../assets/js/mapMsg";
import vueEvents from "@/utils/vueEvent.js";

let activeLi, nLayer, LWLayer;
export default {
  name: "viewer",
  components: {
    switchImagerLayer,
    layerTreeTwoScreen,
    layerTreeTwoScreen
  },
  data() {
    return {
@@ -96,14 +85,32 @@
      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,
      ],
        2001,
        2002,
        2003,
        2004,
        2005,
        2006,
        2007,
        2008,
        2009,
        2010,
        2011,
        2012,
        2013,
        2014,
        2015,
        2016,
        2017,
        2018,
        2019,
        2020,
        2021
      ]
    };
  },
  computed: {
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]),
   
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"])
  },
  watch: {
    viewer1Show(newvalue, oldvalue) {
@@ -121,7 +128,7 @@
      } else {
        this.initLSYX();
      }
    },
    }
  },
  mounted() {
    let pathName = window.location.pathname.split("/");
@@ -133,11 +140,10 @@
    }
    this.$nextTick(function () {
      let that = this;
      //*********北京sdk************
      window.sgworld = new SmartEarth.EarthCtrl(
        "sdkContainer",
        {
          StaticFileBaseUrl: StaticFileBaseUrl,
          StaticFileBaseUrl: StaticFileBaseUrl
        },
        {},
        {},
@@ -150,7 +156,7 @@
              39.744945,
              50000
            ),
            duration: 7, //飞行时间8s
            duration: 7 //飞行时间8s
          });
          //再飞到朝林大厦
          setTimeout(() => {
@@ -160,7 +166,7 @@
                39.791361,
                5000
              ),
              duration: 5, //飞行时间8s
              duration: 5 //飞行时间8s
            });
          }, 8000);
          setTimeout(() => {
@@ -173,9 +179,9 @@
              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);
@@ -202,7 +208,7 @@
        editProp: true,
        editPropData: {
          offset: "r",
          height: "60%",
          height: "60%"
        },
        callBack: {
          delete: function (entity) {
@@ -213,12 +219,12 @@
              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, {
@@ -255,8 +261,8 @@
            if (layeroHeight >= titleHeight + htmlHeight) {
              layero.height(titleHeight + htmlHeight);
            }
          },
        },
          }
        }
      });

      //初始化弹窗事件
@@ -360,7 +366,7 @@
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1,
        numberOfLevelZeroTilesY: 1
      });
      var dx = {
        url: paramUrl,
@@ -371,13 +377,13 @@
          },
          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,
        brightness: 1.0
      });
      Viewer.imageryLayers.add(imageLayer, 3);
      return imageLayer;
@@ -395,7 +401,7 @@
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1,
        numberOfLevelZeroTilesY: 1
      });
      var dx = {
        url: paramUrl,
@@ -406,13 +412,13 @@
          },
          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,
        brightness: 1.0
      });
      Viewer.imageryLayers.add(imageLayer, 2);
      return imageLayer;
@@ -437,17 +443,19 @@
      this.switchImagerLayer = !this.switchImagerLayer;
    },
    ArcgisImageryLayer() {
      sgworld.Creator.createArcGisImageryLayer(
      let InitMap = sgworld.Creator.createArcGisImageryLayer(
        "ARCGIS",
        {
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
          enablePickFeatures: false,
          url:
            "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
          enablePickFeatures: false
        },
        "0",
        1,
        true,
        ""
      );
     console.log(InitMap);
    },
    //初始化弹窗事件

@@ -479,12 +487,12 @@
          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) {
            layero.css({
              "border-radius": "8px",
              "border-radius": "8px"
            });
            if (successFn && typeof successFn === "function") {
              successFn(layero, index);
@@ -504,7 +512,7 @@
            if (endFn && typeof endFn === "function") {
              endFn();
            }
          },
          }
        });
      };
    },
@@ -514,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;
@@ -583,8 +591,8 @@
      //       "</span>";
      //   }
      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
  },
    }
  }
};
</script>