最新

lixuliang

2024-08-07 a916fc2df00bac9f8210b09fd7ee79f8b291e345

最新

 src/components/login.vue

@@ -10,10 +10,13 @@
  },
  mounted() {
    // æµ‹è¯•ç‰ˆæœ¬å…ç™»å½•
    this.$router.push("/home");
    // this.$router.push({
    //   path: "/home",
    //   query: { showlayer: this.$route.query.showlayer }
    // });

    // // æ­£å¼ç‰ˆç¬¬ä¸‰æ–¹ç™»å½•
    // this.getQueryString("focus-open-code");
    // æ­£å¼ç‰ˆç¬¬ä¸‰æ–¹ç™»å½•
    this.getQueryString("focus-open-code");
  },

  methods: {
@@ -21,11 +24,14 @@
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        this.$router.push("/home");
        this.$router.push({
          path: "/index",
          query: { showlayer: this.$route.query.showlayer }
        });
      }
      return null;
    },
  },
    }
  }
};
</script>


 src/components/sideMenu/layerMenu/layerPanel copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,687 @@
<template>
  <div class="layerPanel">
    <div class="mapMode">
      <div class="title">地图模式</div>
      <div class="container">
        <div
          class="layerItem"
          :key="value.id"
          v-for="(value, index) in eMapModeList"
          @click.stop="handleEMapClick(value, index)"
        >
          <img
            :src="value.src"
            :class="{ active: curEMapModelIndex == index }"
          />
          <span :class="{ spanActive: curEMapModelIndex == index }">{{
            value.name
          }}</span>
        </div>
        <div
          class="layerItem"
          :key="value0.id"
          v-for="(value0, index0) in sMapModelList"
          @click.stop="handleSMapClick(value0, index0)"
        >
          <img
            :src="value0.src"
            :class="{ active: curSMapModelIndex == index0 }"
          />
          <span :class="{ spanActive: curSMapModelIndex == index0 }">{{
            value0.name
          }}</span>
        </div>
      </div>
    </div>
    <!-- <div class="areaType" style="margin-top: 10px">
      <div class="title">
        ä¸“题图层
        <span class="more" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
      </div>
      <div class="container">
        <div
          class="layerItem"
          :key="value1.id"
          v-for="(value1, index1) in areaTypeList"
          @click.stop="handleAreaClick(value1, index1)"
        >
          <img
            :src="value1.src"
            :class="{ active: curAreaTypeIndex == index1 }"
          />
          <span :class="{ spanActive: curAreaTypeIndex == index1 }">{{
            value1.name
          }}</span>
        </div>
      </div>
    </div> -->
    <div class="areaType" style="margin-top: 10px">
      <div class="title">
        ä¸“题应用
        <!-- ä¸æ˜¾ç¤ºæ›´å¤šå›¾å±‚ -->
        <span class="more" v-show="false" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
      </div>
      <div class="container">
        <div
          class="layerItem"
          v-for="(ZTValue, ZTIndex) in zhuantiList"
          :key="ZTValue.id"
          @click.stop="handleZTlick(ZTValue, ZTIndex)"
        >
          <img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" />
          <span :class="{ spanActive: curZTIndex == ZTIndex }">{{
            ZTValue.name
          }}</span>
        </div>
      </div>
      <div class="title2"></div>
      <div class="container">
        <div
          class="layerItem"
          v-for="(funcValue, funcIndex) in FuncList"
          :key="funcValue.id"
          @click.stop="handleFuncClick(funcIndex)"
        >
          <img
            :src="funcValue.src"
            :class="{ active: curFuncIndex == funcIndex }"
          />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
            funcValue.name
          }}</span>
        </div>
      </div>
    </div>

    <!-- <div class="yjsxt">
      <div class="title">城市部件</div>
      <div class="container">
        <div
          class="layerItem"
          :key="value2.id"
          v-for="(value2, index2) in yjList"
          @click.stop="handleYJClick(index2)"
        >
          <img :src="value2.src" :class="{ active: curYjIndex == index2 }" />
          <span :class="{ spanActive: curYjIndex == index2 }">{{
            value2.name
          }}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  loadHXQ,
  loadJKQ,
  loadXZ,
  clearMap,
  loadManhole,
  loadCamera,
  loadEnterprise,
  loadLayer,
  clearLayerByTypeId,
  clearLayerByTypeIdArr,
} from "@/utils/map.js";
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store.js";
import ZTTitem from "@/utils/ztt.js";
import { layers } from "../../../../static/json/layer.js";
export default {
  name: "LayerPanel",
  data() {
    return {
      eMapModeList: [
        {
          id: "ewdt",
          name: "二维地图",
          active: false,
          type: "er",
          src: require("@/assets/img/layer/ewdt.png"),
        },
        {
          id: "yxdt",
          name: "影像地图",
          active: true,
          type: "er",
          src: require("@/assets/img/layer/yxdt.png"),
        },
      ],
      sMapModelList: [
        {
          id: "3Dcs",
          name: "3D城市",
          active: false,
          type: "san",
          src: require("@/assets/img/layer/3Dcs.png"),
        },
        {
          id: "swmx",
          name: "三维模型",
          active: false,
          type: "san",
          src: require("@/assets/img/layer/swmx.png"),
        },
      ],
      areaTypeList: [
        // {
        //     id: 'hxq',
        //     name: '核心区',
        //     active: false,
        //     src: require("@/assets/img/layer/hxq.png")
        // },
        // {
        //     id: 'jkq',
        //     name: '经开区',
        //     active: false,
        //     src: require("@/assets/img/layer/jkq.png")
        // },
        // {
        //     id: 'xz',
        //     name: '乡镇',
        //     active: false,
        //     src: require("@/assets/img/layer/xz.png")
        // }
        {
          id: "规划范围",
          name: "规划范围",
          active: false,
          src: require("@/assets/img/layer/ghfw.png"),
        },
        {
          id: "XingZhengQuHuaTu",
          name: "行政区划",
          active: false,
          src: require("@/assets/img/layer/xzqh.png"),
        },
        {
          id: "GuiHuaDanYuanHuaFenTu",
          name: "规划单元",
          active: false,
          src: require("@/assets/img/layer/ghdy.png"),
        },
        {
          id: "ZhuYaoGongNengQuGuiHuaShiYiTu",
          name: "功能区域",
          active: false,
          src: require("@/assets/img/layer/gnq.png"),
        },
      ],
      yjList: [
        {
          id: "yinjing",
          name: "窨井",
          active: false,
          src: require("@/assets/img/layer/yj.png"),
        },
        {
          id: "shext",
          name: "摄像头",
          active: false,
          src: require("@/assets/img/layer/sxt.png"),
        },
      ],
      FuncList: [
        {
          id: "tdgl",
          name: "土地管理",
          active: false,
          src: require("@/assets/img/layer/tudiguanli.png"),
        },
        {
          id: "history",
          name: "历史影像",
          active: false,
          src: require("@/assets/img/layer/lishiyingxiang.png"),
        },
      ],
      zhuantiList: ZTTitem,
      //curMapModelIndex: 1,
      curEMapModelIndex: 0,
      curSMapModelIndex: -1,
      curAreaTypeIndex: -1,
      curYjIndex: -1,
      curFuncIndex: -1,
      curZTIndex: -1,
      state: store.thematicLayer,
      basicMapChecked: store.basicMapChecked,
      state1: store.tdglInfo,
    };
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.handleEMapClick(
          {
            id: "yxdt",
            name: "影像地图",
            active: true,
            type: "er",
            src: "/static/img/yxdt.cf4698e.png",
          },
          1
        );
        loadEnterprise();
      }, 2000);
    });
  },
  methods: {
    changeLayerView(max, enableTilt) {
      window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = max;
      window.Viewer.scene.screenSpaceCameraController.enableTilt = enableTilt;
    },
    handleMapClick(result, index) {
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curMapModelIndex == index) {
        clearLayerByTypeId(result.id);
        this.curMapModelIndex = -1;
      } else {
        this.curMapModelIndex = index;
        if (result.type == "er") {
          clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        } else {
          clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        }
        // clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          console.log(_GLOBAL.layers[result.id]);
        });
      }
    },
    // äºŒç»´åº•å›¾é€‰æ‹©
    handleEMapClick(result, index) {
      let p = sgworld.Navigate.getCameraInfo();
      let pitch;
      if (pitch !== -90) {
        pitch = -90;
        sgworld.Navigate.flyToPointsInterest({
          destination: new Cesium.Cartesian3.fromDegrees(
            p.location.lon,
            p.location.lat,
            p.location.height
          ),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(pitch),
            roll: Cesium.Math.toRadians(0),
          },
        });
      }

      // è®¾ç½®ç›¸æœº
      if (result.name == "二维地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(25000, false);
      } else if (result.name == "影像地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(50000, false);
      }
      // åˆ‡æ¢å›¾å±‚
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curEMapModelIndex == index) {
        // å†æ¬¡ç‚¹å‡»é€‰ä¸­çš„item时取消选择
        // clearLayerByTypeId(result.id);
        // this.curEMapModelIndex = -1;
      } else {
        this.curSMapModelIndex = -1;
        this.curEMapModelIndex = index;
        clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          // console.log(_GLOBAL.layers[result.id]);
        });
      }
    },
    // ä¸‰ç»´æ¨¡åž‹é€‰æ‹©
    handleSMapClick(result, index) {
      // è®¾ç½®ç›¸æœº
      if (result.name == "3D城市") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 2;
        this.changeLayerView(45000, true);
      } else if (result.name == "三维模型") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 2;
        this.changeLayerView(80000, true);
      }
      // åˆ‡æ¢å›¾å±‚
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curSMapModelIndex == index) {
        // clearLayerByTypeId(result.id);
        // this.curSMapModelIndex = -1;
      } else {
        this.curEMapModelIndex = -1;
        this.curSMapModelIndex = index;
        clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          console.log(_GLOBAL.layers[result.id]);
        });
      }
    },
    // ä¸“题图选择
    handleAreaClick(result, index) {
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curAreaTypeIndex == index) {
        this.curAreaTypeIndex = -1;
        let _data = sgworld.ProjectTree.getObject(children[0].id);
        if (_data) {
          sgworld.ProjectTree.setVisibility(children[0].id, false);
        }
        // clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
        store.setThematicLayerItemId("");
      } else {
        this.curAreaTypeIndex = index;
        //清除
        //clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
        let arr = [
          "GuiHuaFanWeiShiYiTu",
          "XingZhengQuHuaTu",
          "GuiHuaDanYuanHuaFenTu",
          "ZhuYaoGongNengQuGuiHuaShiYiTu",
        ];
        arr.forEach((item) => {
          sgworld.ProjectTree.getObject(item) &&
            sgworld.ProjectTree.setVisibility(item, false);
        });
        let dataObj = sgworld.ProjectTree.getObject(result.id);
        if (dataObj) {
          sgworld.ProjectTree.setVisibility(result.id, true);
        } else {
          _GLOBAL.layers[result.id] = [];
          children.forEach((item) => {
            let itemLayer = loadLayer(item);
            _GLOBAL.layers[result.id].push(itemLayer);
            console.log(_GLOBAL.layers[result.id]);
          });
        }
        store.setThematicLayerItemId(result.id);
      }
    },
    // çª¨äº•åŠ è½½
    handleYJClick(index) {
      if (this.curYjIndex == index) {
        this.curYjIndex = -1;
        window.clusterLayer && window.clusterLayer.clear();
      } else {
        this.curYjIndex = index;
        switch (index) {
          case 0:
            loadManhole();
            break;
          case 1:
            loadCamera();
            break;
          case 2:
            loadEnterprise();
            break;
        }
      }
    },
    // ç¬¬äºŒè¡Œ ä¸“题图 ç‚¹å‡»
    handleZTlick(result, index) {
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curZTIndex == index) {
        this.curZTIndex = -1;
        //   let _data = sgworld.ProjectTree.getObject(children[0].id);
        //   if (_data) {
        //     sgworld.ProjectTree.setVisibility(children[0].id, false);
        //   }
        store.setThematicLayerItemId("");
      } else {
        this.curZTIndex = index;
        store.setThematicLayerItemId(children);

        //   //清除
        //   // let arr = [
        //   //   "GuiHuaFanWeiShiYiTu",
        //   //   "XingZhengQuHuaTu",
        //   //   "GuiHuaDanYuanHuaFenTu",
        //   //   "ZhuYaoGongNengQuGuiHuaShiYiTu",
        //   // ];
        //   // arr.forEach((item) => {
        //   //   sgworld.ProjectTree.getObject(item) &&
        //   //     sgworld.ProjectTree.setVisibility(item, false);
        //   // });
        //   let dataObj = sgworld.ProjectTree.getObject(result.id);
        //   if (dataObj) {
        //     sgworld.ProjectTree.setVisibility(result.id, true);
        //   } else {
        //     _GLOBAL.layers[result.id] = [];
        //     children.forEach((item) => {
        //       let itemLayer = loadLayer(item);
        //       _GLOBAL.layers[result.id].push(itemLayer);
        //       console.log(_GLOBAL.layers[result.id]);
        //     });
        //   }
        //   // store.setThematicLayerItemId(result.id);
      }
    },
    // ç¬¬ä¸‰è¡Œ ä¸“题功能 ç‚¹å‡»
    handleFuncClick(index) {
      if (this.curFuncIndex == index) {
        store.setTdglFlag(false);
        store.setPoplayerListAction({});
        divPoint3 && divPoint3.deleteObject();
        store.setPoplayerShowAction(false);
        if (window.tdglLine) {
          sgworld.Creator.DeleteObject(window.tdglLine);
          window.tdglLine = null;
        }
        this.curFuncIndex = -1;
        window.clusterLayer && window.clusterLayer.clear();
        if (window.tdglLayer) {
          store.setSliderShow(false);
          sgworld.Creator.DeleteObject(window.tdglLayer);
        }
      } else {
        // éšè—åº•éƒ¨å›¾å±‚面版tdglLayer
        store.setLayerPanelShow(false);
        // éšè—å³ä¸Šè§’菜单面板
        store.setMenuListShow(false);
        // éšè—åº•éƒ¨æ¼«æ¸¸é¢æ¿
        store.setRoamPanelShow(false);
        this.curFuncIndex = index;
        switch (index) {
          case 0:
            store.setSliderShow(true);
            window.tdglLayer = sgworld.Creator.createImageryProvider(
              layers[8].name,
              "tms",
              {
                id: layers[8].children[0].id,
                url: layers[8].children[0].urls,
                fileExtension: layers[8].children[0].img || "png",
                enablePickFeatures: false,
                level: layers[8].children[0].Level,
                minimumLevel: layers[8].children[0].minimumLevel,
                maximumLevel: layers[8].children[0].maximumLevel,
                tilingScheme:
                  layers[8].children[0].tileType === "Geo"
                    ? new Cesium.GeographicTilingScheme()
                    : new Cesium.WebMercatorTilingScheme(),
                alpha: layers[8].children[0].alpha,
              },
              "0",
              layers[8].children[0].zIndex,
              true,
              ""
            );
            store.setTdglFlag(true);
            break;
          case 1:
            this.curFuncIndex = -1;
            store.setTdglFlag(false);
            if (window.tdglLayer) {
              store.setSliderShow(false);
              sgworld.Creator.DeleteObject(window.tdglLayer);
            }
            store.setHistoryShow(true);
            break;
        }
      }
    },
    showLayerTree() {
      store.setLayerTreeShow(true);
    },
  },
  watch: {
    "state.itemId": {
      handler: function (newVal, oldVal) {
        let that = this;
        if (newVal == "") {
          this.curAreaTypeIndex = -1;
        } else {
          let index = -1;
          if (newVal == "GuiHuaFanWeiShiYiTu") {
            index = 0;
          } else if (newVal == "XingZhengQuHuaTu") {
            index = 1;
          } else if (newVal == "GuiHuaDanYuanHuaFenTu") {
            index = 2;
          } else if (newVal == "ZhuYaoGongNengQuGuiHuaShiYiTu") {
            index = 3;
          }
          this.curAreaTypeIndex = index;
        }
      },
    },
    // åŸºç¡€å›¾å±‚
    "basicMapChecked.val": {
      handler: function (newVal, oldVal) {
        if (newVal == "三维模型") {
          debugger;
          this.handleSMapClick(
            {
              id: "swmx",
              name: "三维模型",
              active: false,
              type: "san",
              src: require("@/assets/img/layer/swmx.png"),
            },
            1
          );
        }
      },
      immediate: true, //刷新加载 ç«‹é©¬è§¦å‘一次handler
      deep: true, // å¯ä»¥æ·±åº¦æ£€æµ‹åˆ° obj å¯¹è±¡çš„属性值的变化
    },
    // "state1.alpha": {
    //   handler: function (newVal) {
    //     this.handleFuncClick(0);
    //   },
    //   deep: true,
    // },
  },
  computed: {
    alpha() {
      return store.tdglInfo.alpha;
    },
  },
};
</script>

<style scoped>
.layerPanel {
  width: 100%;
  position: absolute;
  bottom: 0px;
  align-items: center;
  padding: 0.1rem;
  background: white;
  z-index: 1000;
  padding-left: 0.25rem;
}

.title {
  height: 25px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 700;
  color: #181818;
  line-height: 25px;
  margin: 10px 0px 10px 0;
}
.title2 {
  height: 15px;
}
.container {
  display: flex;
  align-items: center;
  text-align: center;
}

.layerItem {
  /* font-size: 14px; */
  font-family: Source Han Sans SC;
  font-weight: 400;
  margin-right: 30px;
  cursor: pointer;
}

.active {
  color: #4187ff;
  border: 2px solid #4187ff;
  border-radius: 10px;
}

.spanActive {
  color: #4187ff;
}

img {
  display: block;
  width: 60px;
  height: 40px;
  margin-bottom: 5px;
}

.more {
  float: right;
  margin-right: 20px;
  font-size: 0.12rem;
  color: #4187ff;
  line-height: 25px;
  font-weight: 500;
  font-family: unset;
  cursor: pointer;
}
</style>

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -9,38 +9,37 @@
          v-for="(value, index) in eMapModeList"
          @click.stop="handleEMapClick(value, index)"
        >
          <img
            :src="value.src"
            :class="{ active: curEMapModelIndex == index }"
          />
          <span :class="{ spanActive: curEMapModelIndex == index }">{{
          <img :src="value.src" :class="{ active: curEMapModelIndex == index }" />
          <span :class="{ spanActive: curEMapModelIndex == index }">
            {{
            value.name
          }}</span>
            }}
          </span>
        </div>
        <div
        <!-- <div
          class="layerItem"
          :key="value0.id"
          v-for="(value0, index0) in sMapModelList"
          @click.stop="handleSMapClick(value0, index0)"
        >
          <img
            :src="value0.src"
            :class="{ active: curSMapModelIndex == index0 }"
          />
          <span :class="{ spanActive: curSMapModelIndex == index0 }">{{
          <img :src="value0.src" :class="{ active: curSMapModelIndex == index0 }" />
          <span :class="{ spanActive: curSMapModelIndex == index0 }">
            {{
            value0.name
          }}</span>
        </div>
            }}
          </span>
        </div>-->
      </div>
    </div>
    

    <div class="areaType">
      <div class="title ZTtitle">
        ä¸“题应用
        <!-- ä¸æ˜¾ç¤ºæ›´å¤šå›¾å±‚ -->
        <span class="more" v-show="false" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
        <span class="more" v-show="false" @click.stop="showLayerTree">
          æ›´å¤šå›¾å±‚
          <i class="el-icon-arrow-right"></i>
        </span>
      </div>
      <div class="container">
        <div
@@ -50,9 +49,11 @@
          @click.stop="handleZTlick(ZTValue, ZTIndex)"
        >
          <img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" />
          <span :class="{ spanActive: curZTIndex == ZTIndex }">{{
          <span :class="{ spanActive: curZTIndex == ZTIndex }">
            {{
            ZTValue.name
          }}</span>
            }}
          </span>
        </div>
        <div
          class="layerItem"
@@ -60,50 +61,15 @@
          :key="funcValue.id"
          @click.stop="handleFuncClick(funcIndex)"
        >
          <img
            :src="funcValue.src"
            :class="{ active: curFuncIndex == funcIndex }"
          />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
          <img :src="funcValue.src" :class="{ active: curFuncIndex == funcIndex }" />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">
            {{
            funcValue.name
          }}</span>
            }}
          </span>
        </div>
        <!-- <div style="height: 0" class="layerItem" v-for="n in 3" :key="n"></div> -->
      </div>
      <!-- <div class="container">
        <div
          class="layerItem"
          v-for="(funcValue, funcIndex) in FuncList"
          :key="funcValue.id"
          @click.stop="handleFuncClick(funcIndex)"
        >
          <img
            :src="funcValue.src"
            :class="{ active: curFuncIndex == funcIndex }"
          />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
            funcValue.name
          }}</span>
        </div>
      </div> -->
    </div>

    <!-- <div class="yjsxt">
      <div class="title">城市部件</div>
      <div class="container">
        <div
          class="layerItem"
          :key="value2.id"
          v-for="(value2, index2) in yjList"
          @click.stop="handleYJClick(index2)"
        >
          <img :src="value2.src" :class="{ active: curYjIndex == index2 }" />
          <span :class="{ spanActive: curYjIndex == index2 }">{{
            value2.name
          }}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

@@ -118,7 +84,7 @@
  loadEnterprise,
  loadLayer,
  clearLayerByTypeId,
  clearLayerByTypeIdArr,
  clearLayerByTypeIdArr
} from "@/utils/map.js";
import _GLOBAL from "@/assets/GLOBAL2";
import store from "@/utils/store2.js";
@@ -131,7 +97,7 @@
  addYzLayer,
  loadBaseMap,
  loadGeoMap,
  clearAll,
  clearAll
} from "@/utils/tool";
export default {
  name: "LayerPanel",
@@ -143,15 +109,15 @@
          name: "二维地图",
          active: false,
          type: "er",
          src: require("@/assets/img/layer/ewdt.png"),
          src: require("@/assets/img/layer/ewdt.png")
        },
        {
          id: "yxdt",
          name: "影像地图",
          active: true,
          type: "er",
          src: require("@/assets/img/layer/yxdt.png"),
        },
          src: require("@/assets/img/layer/yxdt.png")
        }
      ],
      sMapModelList: [
        {
@@ -159,124 +125,65 @@
          name: "三维模型",
          active: false,
          type: "san",
          src: require("@/assets/img/layer/swmx.png"),
        },
      ],
      areaTypeList: [
        {
          id: "规划范围",
          name: "规划范围",
          active: false,
          src: require("@/assets/img/layer/ghfw.png"),
        },
        {
          id: "XingZhengQuHuaTu",
          name: "行政区划",
          active: false,
          src: require("@/assets/img/layer/xzqh.png"),
        },
        {
          id: "GuiHuaDanYuanHuaFenTu",
          name: "规划单元",
          active: false,
          src: require("@/assets/img/layer/ghdy.png"),
        },
        {
          id: "ZhuYaoGongNengQuGuiHuaShiYiTu",
          name: "功能区域",
          active: false,
          src: require("@/assets/img/layer/gnq.png"),
        },
      ],
      yjList: [
        {
          id: "yinjing",
          name: "窨井",
          active: false,
          src: require("@/assets/img/layer/yj.png"),
        },
        {
          id: "shext",
          name: "摄像头",
          active: false,
          src: require("@/assets/img/layer/sxt.png"),
        },
          src: require("@/assets/img/layer/swmx.png")
        }
      ],
      FuncList: [
        {
          id: "tdgl",
          name: "土地管理",
          active: false,
          src: require("@/assets/img/layer/tudiguanli.png"),
          src: require("@/assets/img/layer/tudiguanli.png")
        },
        {
          id: "history",
          name: "历史影像",
          active: false,
          src: require("@/assets/img/layer/lishiyingxiang.png"),
        },
          src: require("@/assets/img/layer/lishiyingxiang.png")
        }
      ],
      zhuantiList: ZTTitem,
      //curMapModelIndex: 1,
      curEMapModelIndex: 0,
      curSMapModelIndex: -1,
      curAreaTypeIndex: -1,
      curYjIndex: -1,
      curFuncIndex: -1,
      curZTIndex: -1,
      state: store.thematicLayer,
      basicMapChecked: store.basicMapChecked,
      state1: store.tdglInfo,
      state1: store.tdglInfo
    };
  },
  mounted() {
    this.$nextTick(() => {
      // setTimeout(() => {
      //   this.handleEMapClick(
      //     {
      //       id: "yxdt",
      //       name: "影像地图",
      //       active: true,
      //       type: "er",
      //       src: "/static/img/yxdt.cf4698e.png",
      //     },
      //     1
      //   );
      //   loadEnterprise();
      // }, 2000);
      setTimeout(() => {
        switch (this.$route.query.showlayer) {
          case "SPJK":
            debugger;
            this.handleZTlick(ZTTitem[0], 0);
            break;
          case "QYXX":
            this.handleZTlick(ZTTitem[1], 1);
            break;
          case "SZGT":
            this.handleZTlick(ZTTitem[2], 2);
            break;
          case "TDGL":
            this.handleFuncClick(0);
            break;
          case "LSYX":
            this.handleFuncClick(1);
            break;
          default:
            break;
        }
        // loadEnterprise();
        // åˆå§‹åŠ è½½åœ°å›¾
        // this.handleEMapClick(this.eMapModeList[1], 1);
      }, 1000);
    });
  },
  methods: {
    changeLayerView(max, enableTilt) {
      window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = max;
      window.Viewer.scene.screenSpaceCameraController.enableTilt = enableTilt;
    },
    // handleMapClick(result, index) {
    //   const val = layers.filter((res) => {
    //     if (res.name == result.name) {
    //       return res;
    //     }
    //   });
    //   const children = val[0].children;
    //   if (this.curMapModelIndex == index) {
    //     clearLayerByTypeId(result.id);
    //     this.curMapModelIndex = -1;
    //   } else {
    //     this.curMapModelIndex = index;
    //     if (result.type == "er") {
    //       clearLayerByTypeIdArr(["ewdt", "yxdt"]);
    //     } else {
    //       clearLayerByTypeIdArr(["3Dcs", "swmx"]);
    //     }
    //     // clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']);
    //     _GLOBAL.layers[result.id] = [];
    //     children.forEach((item) => {
    //       let itemLayer = loadLayer(item);
    //       _GLOBAL.layers[result.id].push(itemLayer);
    //       console.log(_GLOBAL.layers[result.id]);
    //     });
    //   }
    // },
    // äºŒç»´åº•å›¾é€‰æ‹©
    handleEMapClick(result, index) {
      if (this.curEMapModelIndex == index) return;
@@ -300,112 +207,14 @@
      }
    },
    // è·³è½¬åˆ°ä¸‰ç»´
    show3d() {
    handleSMapClick(result, index) {
      store.setLayerPanelShow(false);
      this.$router.push("/viewer3D");
    },
    // ä¸‰ç»´æ¨¡åž‹é€‰æ‹©
    handleSMapClick(result, index) {
      // // è®¾ç½®ç›¸æœº
      // if (result.name == "3D城市") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   this.changeLayerView(45000, true);
      // } else if (result.name == "三维模型") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   this.changeLayerView(80000, true);
      // }
      // åˆ‡æ¢å›¾å±‚
      this.show3d();
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curSMapModelIndex == index) {
        // clearLayerByTypeId(result.id);
        // this.curSMapModelIndex = -1;
      } else {
        // this.curEMapModelIndex = -1;
        // this.curSMapModelIndex = index;
        // clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        // clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        // _GLOBAL.layers[result.id] = [];
        // children.forEach((item) => {
        //   let itemLayer = loadLayer(item);
        //   _GLOBAL.layers[result.id].push(itemLayer);
        //   console.log(_GLOBAL.layers[result.id]);
        // });
      }
    },
    // ä¸“题图选择
    handleAreaClick(result, index) {
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curAreaTypeIndex == index) {
        this.curAreaTypeIndex = -1;
        let _data = sgworld.ProjectTree.getObject(children[0].id);
        if (_data) {
          sgworld.ProjectTree.setVisibility(children[0].id, false);
        }
        // clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
        store.setThematicLayerItemId("");
      } else {
        this.curAreaTypeIndex = index;
        //清除
        //clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
        let arr = [
          "GuiHuaFanWeiShiYiTu",
          "XingZhengQuHuaTu",
          "GuiHuaDanYuanHuaFenTu",
          "ZhuYaoGongNengQuGuiHuaShiYiTu",
        ];
        arr.forEach((item) => {
          sgworld.ProjectTree.getObject(item) &&
            sgworld.ProjectTree.setVisibility(item, false);
        });
        let dataObj = sgworld.ProjectTree.getObject(result.id);
        if (dataObj) {
          sgworld.ProjectTree.setVisibility(result.id, true);
        } else {
          _GLOBAL.layers[result.id] = [];
          children.forEach((item) => {
            let itemLayer = loadLayer(item);
            _GLOBAL.layers[result.id].push(itemLayer);
            console.log(_GLOBAL.layers[result.id]);
          });
        }
        store.setThematicLayerItemId(result.id);
      }
    },
    // çª¨äº•åŠ è½½
    handleYJClick(index) {
      if (this.curYjIndex == index) {
        this.curYjIndex = -1;
        window.clusterLayer && window.clusterLayer.clear();
      } else {
        this.curYjIndex = index;
        switch (index) {
          case 0:
            loadManhole();
            break;
          case 1:
            loadCamera();
            break;
          case 2:
            loadEnterprise();
            break;
        }
      }
    },
    // ç¬¬äºŒè¡Œ ä¸“题图 ç‚¹å‡»
    // ç‚¹ä½å›¾ ç‚¹å‡»
    handleZTlick(result, index) {
      // console.log(result, index);
      const val = layers.filter((res) => {
      console.log(result, index);
      const val = layers.filter(res => {
        if (res.name == result.name) {
          return res;
        }
@@ -420,7 +229,7 @@
        store.setThematicLayerItemId(children);
      }
    },
    // ç¬¬ä¸‰è¡Œ ä¸“题功能 ç‚¹å‡»
    // åŠŸèƒ½é¡¹ ç‚¹å‡»
    handleFuncClick(index) {
      if (this.curFuncIndex == index) {
        store.setTdglFlag(false);
@@ -456,15 +265,16 @@
            window.tdgllayer = new ol.layer.Tile({
              source: new ol.source.TileWMS({
                ratio: 3,
                url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                url:
                  "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                params: {
                  VERSION: "1.1.1",
                  SRS: "EPSG:3857",
                  FORMAT: "image/png",
                  TILED: true,
                  LAYERS: "",
                },
              }),
                  LAYERS: ""
                }
              })
            });

            // window.tdgllayer = new ol.layer.Tile({
@@ -508,55 +318,35 @@
    },
    showLayerTree() {
      store.setLayerTreeShow(true);
    },
    }
  },
  watch: {
    "state.itemId": {
      handler: function (newVal, oldVal) {
        let that = this;
        if (newVal == "") {
          this.curAreaTypeIndex = -1;
        } else {
          let index = -1;
          if (newVal == "GuiHuaFanWeiShiYiTu") {
            index = 0;
          } else if (newVal == "XingZhengQuHuaTu") {
            index = 1;
          } else if (newVal == "GuiHuaDanYuanHuaFenTu") {
            index = 2;
          } else if (newVal == "ZhuYaoGongNengQuGuiHuaShiYiTu") {
            index = 3;
          }
          this.curAreaTypeIndex = index;
        }
      },
    },
    // åŸºç¡€å›¾å±‚
    "basicMapChecked.val": {
      handler: function (newVal, oldVal) {
        if (newVal == "三维模型") {
          debugger;
          this.handleSMapClick(
            {
              id: "swmx",
              name: "三维模型",
              active: false,
              type: "san",
              src: require("@/assets/img/layer/swmx.png"),
            },
            1
          );
        }
      },
      immediate: true, //刷新加载 ç«‹é©¬è§¦å‘一次handler
      deep: true, // å¯ä»¥æ·±åº¦æ£€æµ‹åˆ° obj å¯¹è±¡çš„属性值的变化
    },
  },
  // watch: {
  //   // åŸºç¡€å›¾å±‚
  //   "basicMapChecked.val": {
  //     handler: function(newVal, oldVal) {
  //       if (newVal == "三维模型") {
  //         debugger;
  //         this.handleSMapClick(
  //           {
  //             id: "swmx",
  //             name: "三维模型",
  //             active: false,
  //             type: "san",
  //             src: require("@/assets/img/layer/swmx.png")
  //           },
  //           1
  //         );
  //       }
  //     },
  //     immediate: true, //刷新加载 ç«‹é©¬è§¦å‘一次handler
  //     deep: true // å¯ä»¥æ·±åº¦æ£€æµ‹åˆ° obj å¯¹è±¡çš„属性值的变化
  //   }
  // },
  computed: {
    alpha() {
      return store.tdglInfo.alpha;
    },
  },
    }
  }
};
</script>


 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue

@@ -2694,7 +2694,6 @@
  watch: {
    "state.itemId": {
      handler: function (newVal, oldVal) {
        console.log("state.itemId");
        if (oldVal != "") {
          oldVal.forEach((item) => {
            this.setVisiable(item, false);

 src/components/viewer-bak.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,435 @@
<template>
  <div class="panel">
    <!-- çƒ -->
    <div id="sdkContainer" @click="clicktoclose"></div>

    <!-- é¡µé¢æ ‡é¢˜ -->
    <div class="titleBg">
      <img src="@/assets/img/title/title.png" />
    </div>
    <!-- åŽ†å²å½±åƒ -->
    <my-history v-if="state.show"></my-history>
    <!-- åŽ†å²å½±åƒå…³é—­æŒ‰é’® -->
    <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
      <img class="searchBtn" src="@/assets/closeinput1.png" />
    </div>
    <!-- å³ä¾§å¯¼èˆªæ¡† -->
    <my-navigation-bar></my-navigation-bar>
    <!-- æœç´¢æ¡† -->
    <my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo>
    <!-- å³ä¸Šå¿«æ·åŒºåŸŸï¼ˆå·¥ç¨‹æ ‘、空间分析） -->
    <!-- <div class="right-top">
      <my-layertree :rightshowzy="childrendata"></my-layertree>
    </div> -->
    <!-- åŽŸå·¦ä¸‹èœå• -->
    <!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
    <!-- å·¦ä¸‹å¿«æ·åŒºåŸŸï¼ˆå¤ä½ã€æŒ‡åŒ—等） -->
    <my-left-bottom :test="childrendata"></my-left-bottom>
    <!-- å³ä¸‹å¿«æ·åŒºåŸŸï¼ˆæ”¾å¤§ç¼©å°ï¼‰ -->
    <my-right-bottom :test="childrendata"></my-right-bottom>

    <!-- å„种面板 -->
    <!-- è®¾ç½®é¢æ¿ -->
    <my-setting-panel></my-setting-panel>
    <!-- ä½ç½®é¢æ¿ -->
    <my-collection-panel></my-collection-panel>
    <!-- æŒ‡åŒ—针面板 -->
    <my-direction-panel></my-direction-panel>
    <!-- æ–°å¢žæ”¶è—é¢æ¿ -->
    <my-add-collection-panel></my-add-collection-panel>
    <!-- çª¨äº•ã€æ‘„像头统计面板 -->
    <my-statistics-panel></my-statistics-panel>
    <!-- çª¨äº•ç»Ÿè®¡åˆ†æžé¢æ¿ -->
    <my-manhole-panel></my-manhole-panel>
    <!-- æ‘„像头统计分析面板 -->
    <my-video-panel></my-video-panel>
    <!-- å›¾å±‚面板 -->
    <my-layer-panel></my-layer-panel>
    <!-- æ¼«æ¸¸é¢æ¿ -->
    <my-roam-panel></my-roam-panel>
    <!-- å›¾å±‚树面板 -->
    <my-layer-tree-panel></my-layer-tree-panel>
    <!-- åœŸåœ°ç®¡ç†å¼¹çª— -->
    <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider>
  </div>
</template>
<script>
import store from "@/utils/store.js";

import _GLOBAL from "@/assets/GLOBAL";
import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom.vue";
import rightBottom from "@/components/rightMenu/bottom.vue";
import sousuo from "@/components/leftMenu/sousuo.vue";
import menu from "@/components/menu/menu.vue";
import NavigationBar from "./rightNavigation/NavigationBar.vue";
import layertree from "@/components/rightMenu/layerTree.vue";
import settingPanel from "./sideMenu/settingMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main.vue";
import directionPanel from "./sideMenu/directionMenu/main.vue";
import addCollectionPanel from "./sideMenu/addCollectionMenu/main.vue";
import statisticsPanel from "./sideMenu/statisticsMenu/main.vue";
import manholePanel from "./sideMenu/manholeStatistics/main.vue";
import videoPanel from "./sideMenu/videoStatistics/main.vue";
import layerPanel from "./sideMenu/layerMenu/main.vue";
import roamPanel from "./sideMenu/roamPanel/main.vue";
import layerTreePanel from "./sideMenu/layerTreePanel/main.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
import Axios from "axios";

export default {
  name: "viewer",
  components: {
    "my-sousuo": sousuo,
    "my-left-bottom": leftBottom,
    "my-right-bottom": rightBottom,
    "my-menu": menu,
    "my-layertree": layertree,
    "my-navigation-bar": NavigationBar,
    "my-setting-panel": settingPanel,
    "my-collection-panel": collectionPanel,
    "my-direction-panel": directionPanel,
    "my-add-collection-panel": addCollectionPanel,
    "my-statistics-panel": statisticsPanel,
    "my-manhole-panel": manholePanel,
    "my-video-panel": videoPanel,
    "my-layer-panel": layerPanel,
    "my-roam-panel": roamPanel,
    "my-layer-tree-panel": layerTreePanel,
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
  },
  data() {
    return {
      date: "",
      parentItem: {},
      childrendata: {
        fwval: true,
        zbzval: false,
        qpval: false,
        zymlval: false,
        zymlmenu: false,
        kjcxval: false,
        dxmsval: false,
        snmsval: false,
        ssval: true,
        zoomval: true,
      },
      timer: null,
      count: 0,
      state: store.history,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(function () {
      let that = this;
      let option = {
        // licenseServer: "http://183.162.245.49:18080",
        // StaticFileBaseUrl: "../../Mobile/static/CimSDK/",
        url: "./static/img/cesium/earth.jpg",
        toolbar: false,
        // fullscreenButton: true,
        navigationOption: {
          enableCompass: false,
          enableZoomControls: false,
          enableDistanceLegend: false,
          enableCompassOuterRing: false,
        },
      };

      //EPSG4326
      // Cesium.ExpandBySmartEarth.Ellipsoid.z = 6356752.3142451793;

      window.sgworld = new SmartEarth.SGWorld(
        "sdkContainer",
        // Cesium,
        option,
        // null,
        function () {
          sgworld.Navigate.jumpTo({
            //跳转视角
            destination: Cesium.Cartesian3.fromDegrees(
              116.52217697339846,
              39.75979421847914,
              17045.47005612415
            ),
            // orientation: {
            //   heading: Cesium.Math.toRadians(0),
            //   pitch: Cesium.Math.toRadians(0),
            //   roll: Cesium.Math.toRadians(0),
            // },
          });
        }
      );
      window.Viewer = sgworld._Viewer;
      Viewer.shadows = false;
      Viewer.scene.fxaa = false;
      Viewer.scene.postProcessStages.fxaa.enabled = false;
      window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
      that.showBottom();
      window.Viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //相机的高度的最小值
      // window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 38000; //相机高度的最大值
      //加载影像
      // let dtLayer = loadLayer({
      //   id: "C0698021",
      //   sourceType: "arcgis",
      //   name: "航拍影像",
      //   urls: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      // });
      // _GLOBAL.layers["yxdt"] = [];
      // _GLOBAL.layers["yxdt"].push(dtLayer);

      window.clusterLayer = new SmartEarth.ClusterLayer(Viewer, {
        style: "clustering",
        // size: 18,
        // fontSize: 12,
        // fontColor: "rgb(0,0,0)",
        // pixelRange: 10,
      });

      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);

      leftClick();
      // this.getQYInfo();
      //fps
      // Viewer.scene.debugShowFramesPerSecond = true;
      //深度检测
      // sgworld.Analysis.depthTestAgainstTerrain(true);

      // sgworld.Creator.SimpleGraphic.edit(true, {
      //   editProp: true,
      //   editPropData: {
      //     width: "100%",
      //     offset: "b",
      //     shade: 0.3,
      //     success: function (lay, index) {
      //       lay.css({
      //         "border-radius": "13px 13px 0px 0px",
      //       });
      //       lay.find(".layui-layer-title").css({
      //         "background-color": "#fff",
      //         border: "none",
      //         "font-size": "19px",
      //         "font-weight": "bold",
      //       });
      //     },
      //   },
      // });
      // sgworld.Creator.SimpleGraphic.setEdit(false);
      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);

        var width = options.width;
        var height = options.height;
        var offset = options.offset;
        var fn = options.fn || {};

        //获取相关回调事件
        var cancelFn = null;
        var successFn = null;
        var endFn = null;
        for (var key in fn) {
          cancelFn = key == "cancel" ? fn[key] : cancelFn;
          successFn = key == "success" ? fn[key] : successFn;
          endFn = key == "end" ? fn[key] : endFn;
        }

        SmartEarthPopupData.layerProp = layuiLayer.open({
          title: name,
          skin: "title-class",
          // title:false,
          type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
          // shade: options.shade !== undefined ? options.shade : 0.3,
          shade: 0,
          shadeClose: false,
          closeBtn: 1,
          resize: false,
          offset: offset,
          area: [
            typeof width === "number" ? width + "px" : width,
            // "100%",
            typeof height === "number" ? height + "px" : height,
          ],
          content: options.url,
          success: function (layero, index) {
            if (successFn && typeof successFn === "function") {
              successFn(layero, index);
            }
          },
          cancel: function () {
            if (cancelFn && typeof cancelFn === "function") {
              cancelFn();
            }
          },
          end: function () {
            if (endFn && typeof endFn === "function") {
              endFn();
            }
          },
        });
      };

      window._layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData._layerProp);

        var width = options.width;
        var height = options.height;
        var fn = options.fn || {};

        //获取相关回调事件
        var cancelFn = null;
        var successFn = null;
        var endFn = null;
        for (var key in fn) {
          cancelFn = key == "cancel" ? fn[key] : cancelFn;
          successFn = key == "success" ? fn[key] : successFn;
          endFn = key == "end" ? fn[key] : endFn;
        }

        SmartEarthPopupData._layerProp = layuiLayer.open({
          title: name,
          type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
          shade: options.shade !== undefined ? options.shade : 0.3,
          shadeClose: true,
          resize: false,
          offset: "b",
          area: [
            // typeof width === "number" ? width + "px" : width,
            "100%",
            typeof height === "number" ? height + "px" : height,
          ],
          content: options.url,
          success: function (layero, index) {
            if (successFn && typeof successFn === "function") {
              successFn(layero, index);
            }
          },
          cancel: function () {
            if (cancelFn && typeof cancelFn === "function") {
              cancelFn();
            }
          },
          end: function () {
            if (endFn && typeof endFn === "function") {
              endFn();
            }
          },
        });
      };
    });
  },
  methods: {
    clicktoclose() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.count++;
        if (this.count == 2) {
          // console.log("单击事件");
          // å…³é—­æ‰€æœ‰å¼¹çª—
          //this.$refs.menu.closeall();
          // æ¸…除定位中的位置标记
          //this.$refs.menu.clearFlyPoint();
        } else {
          // æ‰§è¡Œæ”¾å¤§æ“ä½œ
          // console.log("双击");
          // Viewer.camera.zoomIn();
          // console.log(window.clickPOI);
          let p = sgworld.Navigate.getDegrees();
          // console.log(p);
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              window.clickPOI.lon,
              window.clickPOI.lat,
              p.height / 1.8
            ),
            duration: 1.0,
          });
        }
        this.count = 0;
      }, 300);
      this.count++;
    },
    datafromchild(data) {
      for (var i in data) {
        this.childrendata[i] = data[i];
      }
    },
    closeHistory(val) {
      store.setHistoryShow(val);
    },
    showBottom() {
      let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      handler3D.setInputAction((wheelment) => {
        // æ»šåŠ¨æ»šè½´ï¼Œå¾—到当前的视点高度
        // å•ä½æ¢ç®—，当大于1000米的时候显示“千米”，小于1000米的时候显示单位为“米”
        var cHeightM = Viewer.camera.positionCartographic.height;
        var cHeightKm = (cHeightM / 1000).toFixed(0);
        // å½“cHeight的值改变时，赋值给window中的sdHeight
        window.sdHeight = this.cHeight;

        //当滑动的距离小于2km，取消聚合
        // if (window.dataClustering && window.dataClustering.enabled) {
        if (parseFloat(cHeightKm) < 2) {
          window.dataClustering && (window.dataClustering.enabled = false);
        } else {
          window.dataClustering && (window.dataClustering.enabled = true);
        }
      }, Cesium.ScreenSpaceEventType.WHEEL);
    },
    getQYInfo() {
      console.log(window.gisBaseUrl);
      Axios.get(
        window.gisBaseUrl +
          "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
      ).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
.panel,
#sdkContainer {
  width: 100%;
  height: 100%;
  background: black;
  position: absolute !important;
}

.titleBg {
  position: absolute;
  left: 0rem;
  top: 0rem;
  width: 100%;
  height: 0.43rem;
  background-color: #127eff;
  text-align: center;
  /* background-image: url("~@/assets/img/title/u2.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 100% !important; */
}

.titleBg img {
  width: 207px;
  margin-top: 5px;
}

.bottomLeft {
  display: none;
}
.colseBtn {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  left: 0.2rem;
}
.colseBtn img {
  width: 30px;
}
</style>

 src/components/viewer.vue

@@ -132,7 +132,6 @@
    this.$nextTick(function () {
      let that = this;
      let option = {
        // licenseServer: "http://183.162.245.49:18080",
        // StaticFileBaseUrl: "../../Mobile/static/CimSDK/",
        url: "./static/img/cesium/earth.jpg",
        toolbar: false,
@@ -145,8 +144,6 @@
        },
      };

      //EPSG4326
      // Cesium.ExpandBySmartEarth.Ellipsoid.z = 6356752.3142451793;

      window.sgworld = new SmartEarth.SGWorld(
        "sdkContainer",

 src/components/viewer2d.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,284 @@
<template>
  <div class="panel">
    <div id="openlayerContainer"></div>
  </div>
</template>
<script>
import store from "@/utils/store2.js";
import { setClick, leftClick, touchClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
// import { leftClick, loadLayer } from "@/utils/map.js";
import {
  addHxLayer,
  addYzLayer,
  loadGeoMap,
  listenDirection,
  getCurrentPosition,
} from "@/utils/tool";

export default {
  name: "viewer2",
  components: {
    
  },
  data() {
    return {
      date: "",
      parentItem: {},
      childrendata: {
        fwval: true,
        zbzval: false,
        qpval: false,
        zymlval: false,
        zymlmenu: false,
        kjcxval: false,
        dxmsval: false,
        snmsval: false,
        ssval: true,
        zoomval: true,
      },
      timer: null,
      count: 0,
      state: store.history,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(function () {
      ol.Map.prototype.getLayerByName = function (name) {
        var layer;
        this.getLayers().array_.forEach(function (lyr) {
          if (name == lyr.values_.name) {
            layer = lyr;
          }
        });
        return layer;
      };

      const layers = [];

      const TDTKey = "f234b950740b8c2e0d9959a51c169d21";
      const tiandituUrl = "http://t0.tianditu.gov.cn";
      let options = { proj: "EPSG:3857", layer: "img", matrixSets: "c" };
      let _proj = options.proj;
      let _layer = options.layer;
      let _key = TDTKey;
      let _matrixSets = options.matrixSets;

      let projection = ol.proj.get(_proj);
      let projectionExtent = projection.getExtent();
      let origin = projectionExtent
        ? ol.extent.getTopLeft(projectionExtent)
        : [-180, 90];
      let fromLonLat = ol.proj.getTransform("EPSG:3857", projection);
      let width = projectionExtent
        ? ol.extent.getWidth(projectionExtent)
        : ol.extent.getWidth(
            ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
          );

      let resolutions = [];
      let matrixIds = [];
      for (let z = 1; z < 19; z++) {
        resolutions[z] = width / (256 * Math.pow(2, z));
        matrixIds[z] = z;
      }
      let wmtsTileGrid = new ol.tilegrid.WMTS({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds,
      });
      console.log(
        "url:",
        `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`
      );
      let wmtsSource = new ol.source.WMTS({
        url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`,
        layer: _layer,
        version: "1.0.0",
        matrixSet: _matrixSets,
        format: "tiles",
        projection: projection,
        requestEncoding: "KVP",
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer = new ol.layer.Tile({
        name: "影像地图",
        id: _layer + "_" + _matrixSets,
        source: wmtsSource,
      });

      let wmtsSource1 = new ol.source.WMTS({
        url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`,
        layer: "cia",
        version: "1.0.0",
        matrixSet: _matrixSets,
        format: "tiles",
        projection: projection,
        requestEncoding: "KVP",
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer1 = new ol.layer.Tile({
        name: "路网图层",
        id: "cia_c",
        source: wmtsSource1,
      });

      let wmtsSource2 = new ol.source.WMTS({
        url: `${tiandituUrl}/vec_c/wmts?tk=${_key}`,
        layer: "vec",
        version: "1.0.0",
        matrixSet: _matrixSets,
        format: "tiles",
        projection: projection,
        requestEncoding: "KVP",
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer2 = new ol.layer.Tile({
        name: "二维地图",
        id: "cva_c",
        source: wmtsSource2,
      });
      // wmtsLayer2.setVisible(false);
      ////二维地图
      // layers.push(wmtsLayer2);
      ////卫星影像
      // layers.push(wmtsLayer);
      ////路网
      // layers.push(wmtsLayer1);

      const map = new ol.Map({
        layers: layers,
        target: "openlayerContainer",
        view: new ol.View({
          center: ol.proj.fromLonLat([116.505348, 39.795592]),
          projection: "EPSG:3857",
          zoom: 11.5,
          minZoom: 7,
          maxZoom: 19.5,
          enableRotation: false,
          // constrainResolution: true,
          smoothResolutionConstraint: false,
        }),
      });

      window.mapapi = map;
      window.layersArray = window.mapapi.getLayers();
      // addImageLayer();
      // addAnnotationLayer();
      window.mapapi.getView().setZoom(14);
      loadGeoMap();
      // loadBaseMap();
      addHxLayer();
      addYzLayer();

      setClick(true);
      touchClick();

      getCurrentPosition();
      listenDirection();
      // leftClick()

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

        var width = options.width;
        var height = options.height;
        var offset = options.offset;
        var fn = options.fn || {};

        //获取相关回调事件
        var cancelFn = null;
        var successFn = null;
        var endFn = null;
        for (var key in fn) {
          cancelFn = key == "cancel" ? fn[key] : cancelFn;
          successFn = key == "success" ? fn[key] : successFn;
          endFn = key == "end" ? fn[key] : endFn;
        }

        SmartEarthPopupData.layerProp = layuiLayer.open({
          title: name,
          skin: "title-class",
          // title:false,
          type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
          // shade: options.shade !== undefined ? options.shade : 0.3,
          shade: 0,
          shadeClose: false,
          closeBtn: 1,
          resize: false,
          offset: offset,
          area: [
            typeof width === "number" ? width + "px" : width,
            // "100%",
            typeof height === "number" ? height + "px" : height,
          ],
          content: options.url,
          success: function (layero, index) {
            if (successFn && typeof successFn === "function") {
              successFn(layero, index);
            }
          },
          cancel: function () {
            if (cancelFn && typeof cancelFn === "function") {
              cancelFn();
            }
          },
          end: function () {
            if (endFn && typeof endFn === "function") {
              endFn();
            }
          },
        });
      };
    });
  },
  methods: {},
};
</script>
<style scoped>
.panel,
#openlayerContainer {
  width: 100%;
  height: 100%;
  background: black;
  /* position: absolute !important; */
  z-index: 0;
}

.titleBg {
  position: absolute;
  left: 0rem;
  top: 0rem;
  width: 100%;
  height: 0.43rem;
  background-color: #127eff;
  text-align: center;
  /* background-image: url("~@/assets/img/title/u2.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 100% !important; */
}

.titleBg img {
  width: 207px;
  margin-top: 5px;
}

.bottomLeft {
  display: none;
}

.colseBtn {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  left: 0.2rem;
}

.colseBtn img {
  width: 30px;
}
</style>

 src/router/index.js

@@ -11,8 +11,9 @@
const routes = [
  {
    path: '/',
    redirect: "home",
    // redirect: "index",
    // redirect: "home",
    redirect: "login",
  },
  {
    path: '/login',