实现多模型剖切

<template>
  <div class="bigBox">
    <div class="map">
      <div class="modleBox" :class="launchshow ? 'ok' : 'modleBoxLarge'">
        <el-dropdown
          trigger="click"
          placement="bottom-start"
          :hide-on-click="false"
        >
          <span class="el-dropdown-link">
            <img
              src="@/assets/images/cesiumSet.png"
              class="cesiumSetIcon"
              alt=""
            />
          </span>
          <el-dropdown-menu slot="dropdown" class="dropdownBox">
            <el-dropdown-item>
              <div class="checkBoxDiv" v-show="!displayScene3d">
                <el-checkbox v-model="displayScene3d">三维场景</el-checkbox>
              </div>
              <div class="checkBoxDiv" v-show="displayScene3d">
                <el-checkbox v-model="displayEarth">显示地球</el-checkbox>
                <el-checkbox v-model="displaySection">是否剖切</el-checkbox>
                <el-checkbox v-model="displayPolyLine"
                  >显示矿权范围(线)</el-checkbox
                >
                <el-checkbox v-model="displayPolygon"
                  >显示矿权范围(面)</el-checkbox
                >
                <el-checkbox v-model="displayWall"
                  >显示矿权范围(墙)</el-checkbox
                >
                <div class="colorChange" v-if="displayWall">
                  <el-input
                    class="colorSelected"
                    type="color"
                    v-model="selectedColor"
                    @input="updateColor"
                  ></el-input>
                  <el-input-number
                    class="opcityNum"
                    size="small"
                    v-model="opcityNum"
                    :step-strictly="true"
                    @change="changeOpcity"
                    :step="0.1"
                    :min="0.1"
                    :max="1"
                  ></el-input-number>
                </div>
              </div>
              <div class="cesiumTreeLine" v-show="displayScene3d">
                <img src="@/assets/images/cesiumTreeLine.png" alt="" />
              </div>
              <div class="treeSelectBox">
                <el-tree
                  class="treeSelect"
                  v-show="displayScene3d"
                  :data="treeSelectDataLayer"
                  :props="defaultProps"
                  node-key="id"
                  show-checkbox
                  highlight-current
                  :default-checked-keys="defaultCheckedKeysLayer"
                  default-expand-all
                  @check-change="checkChange"
                  @node-click="nodeClick"
                ></el-tree>

<el-tree
                  ref="treeLabel"
                  class="treeSelect"
                  v-show="displayScene3d"
                  :data="treeSelectDataLabel"
                  :props="defaultProps"
                  node-key="id"
                  show-checkbox
                  highlight-current
                  :default-checked-keys="defaultCheckedKeysLabel"
                  default-expand-all
                  @check-change="checkChange"
                  @node-click="nodeClick"
                ></el-tree>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div
        class="launch"
        :class="launchshow ? 'ok' : 'retracLaunch'"
        @click="launch"
      >
        <img v-if="launchshow" src="@/assets/map/da.png" alt="" />
        <img v-else src="@/assets/map/xiao.png" alt="" />
      </div>
      <div
        class="launchSwitch"
        :class="launchshow ? 'ok' : 'retracLaunchSwitch'"
        @click="infoShow"
      >
        
        <el-dropdown @command="angleOfViewClick">
          <span class="el-dropdown-link">
            <i class="el-icon-view"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in angleOfView"
              :key="item.value"
              :command="item.value"
              >{{ item.lable }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <mars-map :url="configUrl" @onload="onMapload" />
      
      
      <div
        class="pointLeftBox"
        :class="launchshow ? 'centerLeftPosition' : 'bottomLeftPosition'"
      >
        <div class="addressBox">
          <div class="point"></div>
          <div class="addressLabel">当前位置</div>
          <div class="addressVal">
            {{
              addressInfo + " " + (roamingSpace ? roamingSpace : addressLayer)
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="content_left" :class="launchshow ? 'ok' : 'retractLeft'">
      <div class="content_left_top">
        <div class="content_left_title">
          <span>{{ splitStr(comlist["1"].componentTitle) }}</span>
        </div>
        <components :is="comlist['1'].componentName" :key="keytimer" />
      </div>
      <div class="content_left_center">
        <div class="content_left_title">
          <span>{{ splitStr(comlist["2"].componentTitle) }}</span>
        </div>
        <components :is="comlist['2'].componentName" :key="keytimer" />
      </div>
      <div class="content_left_bottom">
        <div class="content_left_title timeBox">
          <span>{{ splitStr(comlist["3"].componentTitle) }}</span>
          
        </div>
        <components :is="comlist['3'].componentName" :key="keytimer" />
      </div>
    </div>
    <div class="content_center">
      <div
        class="content_center_bottom"
        :class="launchshow ? 'ok' : 'retractCenter'"
      >
        <div class="content_Bottom_title">
          <span>{{ splitStr(comlist["4"].componentTitle) }}</span>
        </div>
        <components :is="comlist['4'].componentName" :key="keytimer" />
      </div>
    </div>
    <div class="content_right" :class="launchshow ? 'ok' : 'retractRight'">
      <div class="content_right_top">
        <div class="content_left_title timeBox">
          <span>{{ splitStr(comlist["7"].componentTitle) }}</span>
          
        </div>
        <components :is="comlist['7'].componentName" :key="keytimer" />
      </div>
      <div class="content_right_center">
        <div class="content_left_title timeBox">
          <span>{{ splitStr(comlist["6"].componentTitle) }}</span>
          
        </div>
        <components :is="comlist['6'].componentName" :key="keytimer" />
      </div>
      <div class="content_right_bottom">
        <div class="content_left_title timeBox">
          <span>{{ splitStr(comlist["5"].componentTitle) }}</span>
          
        </div>
        <components :is="comlist['5'].componentName" :key="keytimer" />
      </div>
    </div>
  </div>
</template>
<script>
import { getAlarmlegend } from "@/api/daping/group/IntegratedDB.js";
import {
  getModelInfoTreeList,
  areaUnder,
} from "@/api/daping/mine/IntegratedDB.js";
import { getComconfig } from "@/api/childSystem/config";
import MarsMap from "@/components/mars-work/mars-map.vue";
import * as mars3d from "mars3d";
const Cesium = mars3d.Cesium;
export default {
  components: {
    MarsMap,
  },
  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      configUrl: basePathUrl + "config/config.json",
      defaultSelectData: [],
      checkedNodes: [],
      treeSelectDataLayer: [],
      treeSelectDataLabel: [],
      energyTimeList: [
        {
          label: "年",
          value: "01",
          checked: true,
        },
        {
          label: "月",
          value: "02",
          checked: false,
        },
      ],
      timeList: [
        {
          label: "年",
          value: "01",
          checked: true,
        },
        {
          label: "月",
          value: "02",
          checked: false,
        },
      ],
      gradeTimeList: [
        {
          label: "年",
          value: "01",
          checked: true,
        },
        {
          label: "月",
          value: "02",
          checked: false,
        },
      ],
      type: "02",
      mineList: [],
      comlist: {
        1: { componentName: "", componentTitle: "" },
        2: { componentName: "", componentTitle: "" },
        3: { componentName: "", componentTitle: "" },
        4: { componentName: "", componentTitle: "" },
        5: { componentName: "", componentTitle: "" },
        6: { componentName: "", componentTitle: "" },
        7: { componentName: "", componentTitle: "" },
      },
      alarmTypeList: [],
      popperInfoList: [],
      keytimer: "",
      deptIds: this.$store.state.user.deptId,
      launchshow: false,
      envPuth: process.env.VUE_APP_FILEURL,
      infoHiddenShow: true,
      displayEarth: true,
      displaySection: false,
      defaultProps: {},
      defaultCheckedKeysLayer: [],
      defaultCheckedKeysLabel: [],
      displayScene3d: true,
      displayPolyLine: false,
      displayPolygon: false,
      displayWall: false,
      polyLineId: "",
      polygonId: "",
      wallId: "",
      selectedColor: "#00FFFF",
      selectedColorRgb: "",
      opcityNum: 1,
      addressInfo: "",
      addressLayer: "",
      roamingSpace: "",
      angleOfView: [
        {
          lable: "俯视图",
          value: "top",
        },
        {
          lable: "仰视图",
          value: "bottom",
        },
        {
          lable: "左视图",
          value: "left",
        },
        {
          lable: "右视图",
          value: "right",
        },
        {
          lable: "前视图",
          value: "front",
        },
        {
          lable: "后视图",
          value: "back",
        },
      ],
      tiles3dLayerArr: []
    };
  },
  watch: {
    displayEarth: {
      handler(val) {
        if (val) {
          this.map.basemap.show = true
          this.map.scene.showSun = true
          this.map.scene.showSkyAtmosphere = true
          delete this.map.scene.contextOptions
          delete this.map.scene.backgroundColor
          this.map.scene.backgroundColor = "#363635"
          this.map.scene.globe.baseColor = "#546a53"
          this.map.scene.globe.showGroundAtmosphere = true
          this.map.scene.skyAtmosphere = new Cesium.SkyAtmosphere();

this.map.scene.globe.depthTestAgainstTerrain = true
          this.map.terrainProvider = Cesium.createWorldTerrainAsync({})
        } else {
          this.map.basemap.show = false
          this.map.scene.showSun = false
          this.map.scene.showSkyAtmosphere = false
          this.map.scene.contextOptions = { webgl: { antialias: mars3d.Util.isPCBroswer() } }
          this.map.scene.backgroundColor = "#363635"
          this.map.scene.globe.baseColor = "#363635"
          this.map.scene.globe.showGroundAtmosphere = false
          this.map.scene.skyAtmosphere.destroy();

this.map.scene.globe.depthTestAgainstTerrain = false
          this.map.terrainProvider = new Cesium.EllipsoidTerrainProvider();
        }
      },
    },
    displaySection: {
      async handler(val) {
        if (val) {
          const graphic = await this.map.graphicLayer.startDraw({
            type: "polygon",
            style: {
              color: "#007be6",
              opacity: 0.5,
              clampToGround: true
            }
          })
          const positions = graphic.positionsShow
          this.map.graphicLayer.clear()
          console.log("绘制坐标为",mars3d.LngLatArray.toArray(positions));
          this.tiles3dLayerArr.map(tiles3dLayer => tiles3dLayer.planClip.positions = positions)
        } else {
          this.tiles3dLayerArr.map(tiles3dLayer => tiles3dLayer.planClip.clear())
          // this.tiles3dLayerArr = []
        }
      },
    },
    displayScene3d: {
      handler(val) {
        if (val) {
          this.$refs.threeDimensional.removeModel();
        }
      },
    },
    displayPolyLine: {
      handler(val) {
        if (val) {
          this.getAreaUnderLine("_line");
        } else {
          this.$refs.threeDimensional.removeEntityById([this.polyLineId]);
        }
      },
      immediated: false,
    },
    displayPolygon: {
      handler(val) {
        if (val) {
          this.getAreaUnder("_polygon");
        } else {
          this.$refs.threeDimensional.removeEntityById([this.polygonId]);
        }
      },
      immediated: false,
    },
    displayWall: {
      handler(val) {
        if (val) {
          this.getAreaUnderWall("_wall");
        } else {
          this.$refs.threeDimensional.removeEntityById([this.wallId]);
        }
      },
      immediated: false,
    },
  },
  created() {
    this.addressInfo = this.$route.query.mineName;
    // this.getAlarmlegend();
    this.getlist();
    this.getModelInfoTreeList();
  },
  methods: {
    // 地图构造完成回调
    onMapload(map) {
      this.map = map;
      // 以下为演示代码
      map.setCameraView({
        lat: 30.617828,
        lng: 116.294045,
        alt: 44160,
        heading: 357,
        pitch: -59,
      });

// 创建entity图层
      const graphicLayer = new this.mars3d.layer.GraphicLayer();
      map.addLayer(graphicLayer);

// 2.在layer上绑定监听事件
      graphicLayer.on(this.mars3d.EventType.click, function (event) {
        console.log("监听layer，单击了矢量对象", event);
      });
      graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
        console.log("监听layer，鼠标移入了矢量对象", event);
      });
      graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
        console.log("监听layer，鼠标移出了矢量对象", event);
      });

// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
      graphicLayer.bindPopup("我是layer上绑定的Popup", {
        anchor: [0, -10],
      });

// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
      graphicLayer.bindContextMenu([
        {
          text: "删除对象",
          iconCls: "fa fa-trash-o",
          callback: function (e) {
            const graphic = e.graphic;
            if (graphic) {
              graphicLayer.removeGraphic(graphic);
            }
          },
        },
      ]);
      map.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.WHEEL,
        Cesium.CameraEventType.PINCH,
      ];
      map.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.PINCH,
        Cesium.CameraEventType.RIGHT_DRAG,
      ];
      setTimeout(() => {
        this.flyToPoint();
      }, 3000);
    },
    flyToPoint() {
      this.map.setCameraView(
        {
          y: 27.469797,
          x: 103.991378,
          z: 1668.1,
          heading: 352.5,
          pitch: -16.5,
          roll: 0,
        },
        {
          complete: () => {
            this.launchshow = true
            this.displayEarth = false
          },
        }
      );
    },

splitStr(a) {
      if (a) {
        var b = a.split("-");
        return b[0];
      } else {
        return "";
      }
    },
    getlist() {
      getComconfig({
        userId: this.$store.state.user.user.userId,
        componentType: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.comlist = res.data;
        }
      });
    },
    addAnnotation(data) {
      // 创建矢量数据图层（业务数据图层）
      const busineDataLayer = new mars3d.layer.BusineDataLayer({
        data: data,
        lngColumn: "coordinateX",
        latColumn: "coordinateY",
        altColumn: "coordinateZ",
        symbol: {
          type: "billboardP",
          styleOptions: {
            image: this.getIconPathFilter(data[0]),
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              10000
            ),
            scale: 0.5,
            label: {
              text: "{label}",
              font_size: "bolder 14px sans-serif",
              color: Cesium.Color.AZURE,
              outline: true,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              show: true,
              scale: 1,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              fillColor: Cesium.Color.fromCssColorString("#ffffff"),
              pixelOffset: new Cesium.Cartesian2(0, -100),
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                0.0,
                10000
              ),
            },
          },
        },
      });
      this.busineDataLayer = busineDataLayer;
      this.map.addLayer(busineDataLayer);

// 单击事件
      busineDataLayer.on(mars3d.EventType.click, (event) => {});
    },
    angleOfViewClick(item) {
      this.$refs.threeDimensional.flyToView(
        item,
        this.checkedNodes.map((i) => i.path)
      );
    },
    changeOpcity() {
      this.$refs.threeDimensional.changeWallColor(
        this.hexToRgbA(this.selectedColor, this.opcityNum)
      );
    },
    hexToRgbA(hex, alpha = 1) {
      hex = hex.replace(/#/, "");
      if (hex.length === 3) {
        hex = hex
          .split("")
          .map((x) => x + x)
          .join("");
      }
      if (hex.length !== 6) {
        throw new Error("Invalid HEX color.");
      }
      const bigint = parseInt(hex, 16);
      const r = (bigint >> 16) & 255;
      const g = (bigint >> 8) & 255;
      const b = bigint & 255;
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    },
    updateColor(data) {
      this.selectedColorRgb = this.hexToRgbA(data);
      this.$refs.threeDimensional.changeWallColor(this.selectedColorRgb);
    },
    getAreaUnderWall(data) {
      areaUnder({ enterpriseId: this.$route.query.enterpriseId }).then(
        (res) => {
          if (res.code == 200) {
            this.wallId = res.data[0].id + data;
            const transformedData = {
              position: [
                ...res.data[0].inflectionPointEntityList.map((point) => [
                  point.pointX,
                  point.pointY,
                ]),
                [
                  res.data[0].inflectionPointEntityList[0].pointX,
                  res.data[0].inflectionPointEntityList[0].pointY,
                ],
              ],
              id: res.data[0].id + data,
              type: "wall",
              option: {
                maximumHeights: [
                  ...res.data[0].inflectionPointEntityList.map(
                    (point) => res.data[0].elevationTo
                  ),
                  res.data[0].elevationTo,
                ],
                minimumHeights: [
                  ...res.data[0].inflectionPointEntityList.map(
                    (point) => res.data[0].elevationFrom
                  ),
                  res.data[0].elevationTo,
                ],
                material: "rgba(0,255,255,0.5)",
                outline: true,
                outlineColor: "rgb(200,0,60)",
              },
            };
            this.$refs.threeDimensional.addWall([transformedData]);
          }
        }
      );
    },
    getAreaUnderLine(data) {
      areaUnder({ enterpriseId: this.$route.query.enterpriseId }).then(
        (res) => {
          if (res.code == 200) {
            this.polyLineId = res.data[0].id + data;
            const transformedData = {
              position: [
                ...res.data[0].inflectionPointEntityList.map((point) => [
                  point.pointX,
                  point.pointY,
                ]),
                [
                  res.data[0].inflectionPointEntityList[0].pointX,
                  res.data[0].inflectionPointEntityList[0].pointY,
                ],
              ],
              id: res.data[0].id + data,
              option: {
                color: "rgb(0,255,255,0.5)",
              },
            };
            this.$refs.threeDimensional.addPolyline([transformedData]);
          }
        }
      );
    },
    getAreaUnder(data) {
      areaUnder({ enterpriseId: this.$route.query.enterpriseId }).then(
        (res) => {
          if (res.code == 200) {
            this.polygonId = res.data[0].id + data;
            const transformedData = {
              position: [
                ...res.data[0].inflectionPointEntityList.map((point) => [
                  point.pointX,
                  point.pointY,
                ]),
                [
                  res.data[0].inflectionPointEntityList[0].pointX,
                  res.data[0].inflectionPointEntityList[0].pointY,
                ],
              ],
              id: res.data[0].id + data,
              option: {
                color: "rgb(0,255,255,0.5)",
              },
            };
            this.$refs.threeDimensional.addpadding([transformedData]);
          }
        }
      );
    },
    async nodeClick(data, checkData) {
      if (checkData.checked) {
        this.defaultSelectData = [];
        var layer = this.map.getLayerById(data.id);
        layer.flyTo();
        this.addressLayer = data.label;
      }
    },
    getIconPathFilter(el) {
      let path;
      switch (el.labelType) {
        case "01":
          path = require("@/assets/images/monitPointIcon.png");
          break;
        case "02":
          path = require("@/assets/images/areaIcon.png");
          break;
        case "03":
          path = require("@/assets/images/deviceIcon.png");
          break;
        case "04":
          path = require("@/assets/images/videoIcon.png");
          break;
        default:
          break;
      }
      return path;
    },
    loadTileset(tileset) {
      let tiles3dLayer
      tiles3dLayer = new mars3d.layer.TilesetLayer({
        id: tileset.id,
        name: tileset.label,
        url: tileset.path,
        maximumScreenSpaceError: 1,
        maxMemory: 1024, // 最大缓存内存大小(MB)
        cullWithChildrenBounds: false,
        skipLevelOfDetail: true,
        preferLeaves: true,
        // center: { lat: 28.439577, lng: 119.476925, alt: 229, heading: 57, pitch: -29 },

queryParameters: {
          // 可以传自定义url参数，如token等
          token: "mars3d",
        },
        enableDebugWireframe: true, // 是否可以进行三角网的切换显示
        flyTo: true,
      });
      this.tiles3dLayerArr.push(tiles3dLayer)
      this.map.addLayer(tiles3dLayer);
    },
    removeTileset(el) {
      let layer = this.map.getLayerById(el.id);
      layer.remove();
    },
    checkChange(el, check) {
      if (el.children && el.children.length > 0) {
        return;
      } else {
        if (check && el.type == "01") {
          this.checkedNodes.push(el);
          this.loadTileset(el);
          this.addressLayer = el.label;
        } else if (!check && el.type == "01") {
          const index = this.checkedNodes.findIndex(
            (node) => node.id === el.id
          );
          if (index !== -1) {
            this.checkedNodes.splice(index, 1);
          }
          this.removeTileset(el);
        }
        if (el.type == "02") {
          this?.busineDataLayer?.clear();
          if (
            this.$refs.treeLabel
              .getCheckedNodes()
              .filter((item) => !item.children).length > 0
          )
            this.addAnnotation(
              this.$refs.treeLabel
                .getCheckedNodes()
                .filter((item) => !item.children)
            );
        }
      }
    },
    changeEnergyTime(item) {
      this.energyTimeList.forEach((el) => {
        if (item.label == el.label) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
    },
    changeGradeTime(item) {
      this.gradeTimeList.forEach((el) => {
        if (item.label == el.label) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
    },
    changeTime(item) {
      this.timeList.forEach((el) => {
        if (item.label == el.label) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
    },
    getAlarmlegend() {
      getAlarmlegend().then((res) => {
        if (res.code == 200) {
          this.alarmTypeList = res.data;
        }
      });
    },
    getModelInfoTreeList() {
      getModelInfoTreeList({
        enterpriseId: this.$route.query.enterpriseId,
      }).then(async (res) => {
        if (res.code == 200) {
          this.treeSelectDataLayer = [
            {
              id: "01",
              label: "图层",
              children: res["图层"],
            },
          ];
          this.treeSelectDataLabel = [
            {
              id: "02",
              label: "标签",
              children: res["标签"],
            },
          ];
          await this.defaultLoading(res);
        }
      });
    },
    filterTree(tree, targetIds) {
      let result = [];
      function traverse(node) {
        if (targetIds.includes(node.id)) {
          result.push(node);
        }
        if (node.children) {
          node.children.forEach((child) => traverse(child));
        }
      }
      tree.forEach((rootNode) => traverse(rootNode));
      return result;
    },
    defaultLoading(resData) {
      if (resData["图层"].length > 0) {
        this.defaultCheckedKeysLayer = [4, 5, 8, 22, 23];
        this.defaultSelectData = this.filterTree(
          resData["图层"],
          [4, 5, 8, 22, 23]
        );
        this.filterTree(resData["图层"], [4, 5, 8, 22, 23]).forEach((el) => {
          this.loadTileset(el);
        });
      }
      // if (resData["图层"].length > 0) {
      //   this.defaultCheckedKeysLayer = [resData["图层"][0]?.children[0]?.id];
      //   this.checkChange(resData["图层"][0]?.children[0], true);
      //   this.addressLayer = resData["图层"][0]?.children[0]?.label
      // }
      // if (resData["标签"].length > 0) {
      //   this.defaultCheckedKeysLabel = [
      //     ...resData["标签"][0]?.children.map((el) => el.id),
      //   ];
      //   resData["标签"][0]?.children.filter((el) => {
      //     this.checkChange(el, true);
      //   });
      // }
    },
    onMineItemClick(mine) {
      window.localStorage.setItem("coordinate", mine.coordinate);
      this.$router.push({ path: "/beneficiation" });
      // this.getkeytimer();
    },
    getkeytimer() {
      this.keytimer = new Date().getTime();
    },
    launch() {
      this.launchshow = !this.launchshow;
      var doc = document.getElementsByClassName("cesium-viewer-toolbar")[0];
      if (this.launchshow) {
        doc.classList.remove("retracLaunch");
      } else {
        doc.classList.add("retracLaunch");
      }
    },
    infoShow() {
      this.infoHiddenShow = !this.infoHiddenShow;
    },
  },
};
</script>
<style lang="scss">
.dropdownBox {
  width: 250px !important;
  background: url("~@/assets/images/cesiumSetBox.png") no-repeat;
  background-size: 100% 100%;
  border: none;
  .popper__arrow {
    display: none !important;
  }
  .checkBoxDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .colorChange {
      display: flex;
      margin-bottom: 5px;
      .colorSelected {
        width: 30px;
        margin-right: 10px;
        .el-input__inner {
          padding: 0;
          margin: 0;
          width: 100%;
          height: 100%;
          border: none;
          width: 30px;
          height: 30px;
        }
      }
    }

.el-checkbox {
      background: url("~@/assets/images/cesiumOperate.png") no-repeat;
      background-size: 100% 100%;
      padding: 0 10px;
      margin-right: 0;
      margin-bottom: 5px;
    }
    .el-checkbox__label {
      color: #fff;
    }
    .is-checked {
      .el-checkbox__label {
        color: #29deff;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #29deff;
        border-color: #29deff;
      }
    }
  }
  .cesiumTreeLine {
    width: 100%;
    margin-top: -5px;
    img {
      width: 100%;
    }
  }
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: none;
  }
  .el-dropdown-menu__item:focus {
    background: none;
  }
  .treeSelectBox {
    max-height: 260px !important;
    overflow-y: scroll;
    position: relative;
    left: -7px;
    width: 108%;
    .treeSelect {
      background: none;
      color: #fff;
    }

::-webkit-scrollbar-thumb {
      background-color: #4bd5fc; /* 设置滚动条滑块颜色 */
      border-radius: 6px; /* 设置滑块圆角 */
      opacity: 0.4;
    }
    ::-webkit-scrollbar {
      width: 4px; /* 设置滚动条宽度 */
    }
    ::-webkit-scrollbar-track {
      background: #436d79; /* 设置滚动条背景色 */
    }

/* Firefox 浏览器 */
    scrollbar-color: #4bd5fc #436d79; /* 设置滚动条滑块颜色和背景色 */
    scrollbar-width: thin; /* 设置滚动条宽度 */

.el-tree-node__content:hover {
      background: none;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #29deff;
      border-color: #29deff;
    }
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #29deff;
      border-color: #29deff;
    }
    .el-tree-node__content {
      background: rgba(75, 213, 252, 0.2) !important;
      margin: 2px 0;
    }
    // .is-checked {
    //   background: url("~@/assets/images/cesiumChecked.png") no-repeat;
    //   background-size: 100% 100%;
    // }
    // .el-tree-node__content > label.el-checkbox {
    //   background: none;
    // }
  }
}
</style>
<style lang="scss" scoped>
.bigBox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

.map {
    position: absolute;
    width: 100%;
    height: 100%;
    .modleBox {
      position: absolute;
      left: 545px;
      top: 105px;
      z-index: 2;
      transition: left 1s;
      .cesiumSetIcon {
        width: 34px;
        height: 42px;
      }
    }
    .el-icon-view {
      margin-top: 5px;
    }
    .modleBoxLarge {
      left: 20px;
      top: 105px;
      transition: left 1s;
    }

.t-map {
      width: 100%;
      height: 100%;
    }
    .pointRightBox,
    .pointLeftBox {
      z-index: 2;
      color: #fff;
      background: url("~@/assets/images/pointNoteBg.png") no-repeat;
      background-size: 100% 100%;
      padding: 18px 25px;
      .addressBox {
        display: flex;
        .point {
          width: 6px;
          height: 6px;
          background: #27cfff;
          border-radius: 50%;
          margin-right: 3px;
          margin-top: 8px;
        }
        .addressLabel {
          color: #27cfff;
          font-size: 14px;
          margin-right: 5px;
        }
        .addressVal {
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
    .centerRightPosition {
      position: absolute;
      right: 545px;
      bottom: 33%;
      transition: left 1s, bottom 1s;
    }
    .bottomRightPosition {
      position: absolute;
      right: 50px;
      bottom: 50px;
      transition: left 1s, bottom 1s;
    }
    .centerLeftPosition {
      position: absolute;
      left: 545px;
      bottom: 33%;
      transition: left 1s, bottom 1s;
    }
    .bottomLeftPosition {
      position: absolute;
      left: 50px;
      bottom: 50px;
      transition: left 1s, bottom 1s;
    }

.launch {
      padding: 4px;
      width: 32px;
      height: 32px;
      position: absolute;
      right: 545px;
      top: 105px;
      z-index: 2;
      border: 1px solid #444;
      border-radius: 4px;
      background: #303336;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: right 1s, top 1s;
      img {
        width: 100%;
      }

i {
        color: #fff;
        font-size: 24px;
      }
    }
    .launchSwitch {
      padding: 4px;
      width: 32px;
      height: 32px;
      position: absolute;
      right: 545px;
      top: 140px;
      z-index: 3;
      border: 1px solid #444;
      border-radius: 4px;
      background: #303336;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: right 1s, top 1s;
      img {
        width: 100%;
      }

i {
        color: #fff;
        font-size: 24px;
      }
    }
    .angleOfViewBox {
      position: absolute;
      right: 545px;
      top: 140px;
      z-index: 3;
    }

.retracLaunch {
      right: 25px;
      top: 665px;
    }
    .retracLaunchSwitch {
      right: 25px;
      top: 710px;
    }

.all {
      position: absolute;
      right: 28%;
      top: 10%;
      z-index: 1;
      transition: right 1s;

.on {
        cursor: pointer;
        display: inline-block;
        width: 100px;
        height: 40px;
        font-size: 16px;
        margin: 0 5px;
        text-align: center;
        line-height: 40px;
        background: url("~@/assets/images/on.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
      }

.off {
        cursor: pointer;
        display: inline-block;
        width: 100px;
        height: 40px;
        font-size: 16px;
        margin: 0 5px;
        text-align: center;
        line-height: 40px;
        background: url("~@/assets/images/off.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
      }
    }

.retractAll {
      right: 290px;
    }
  }
  .content_Bottom_title {
    background: url("~@/assets/images/bottomTitle.png") no-repeat 100%;
    width: 100%;
    padding: 10px 0 10px 38px;
    background-size: 100% 100%;
    font-family: "DingTalk-jinBuTi";
    font-size: 20px;
    span {
      background: linear-gradient(to bottom, #ffffff, #79c5ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block; /* 或者 block, 根据需求 */
    }
  }
  .timeBox {
    display: flex;
    justify-content: space-between;
    .timeBtn {
      display: flex;
      .timeBtnItem {
        padding: 5px 15px;
        color: #27cfff;
        font-size: 12px !important;
        font-family: AlibabaPuHuiTiR !important;
        background: rgba(48, 103, 130, 0.5);
        border-radius: 5px;
        margin-right: 13px;
        cursor: default;
      }
      .activeTime {
        background: url("~@/assets/images/activeTimeBg.png") no-repeat 100%;
        background-size: 100% 100%;
        color: #ffffff;
      }
    }
  }
  .content_left_title {
    width: 100%;
    padding: 10px 0 10px 38px;
    background: url("~@/assets/images/componentTitle.png") no-repeat 100%;
    background-size: 100% 100%;
    font-family: "DingTalk-jinBuTi";
    font-size: 20px;
    span {
      background: linear-gradient(to bottom, #ffffff, #79c5ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block; /* 或者 block, 根据需求 */
    }
  }
  .content_left {
    position: absolute;
    left: 26px;
    bottom: 26px;
    width: 24%;
    height: calc(100% - 116px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    transition: left 1s;
    .content_left_top,
    .content_left_center,
    .content_left_bottom {
      z-index: 2;
      background: url("~@/assets/images/leftBg.png") no-repeat 100%;
      background-position: 0 100%;
      transition: left 1s;
      height: calc((100% - 40px) / 3);
      overflow: hidden;
    }
  }

.content_right {
    position: absolute;
    right: 26px;
    bottom: 26px;
    width: 24%;
    height: calc(100% - 116px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    transition: right 1s;
    .content_right_top,
    .content_right_center,
    .content_right_bottom {
      z-index: 2;
      background: url("~@/assets/images/rightBg.png") no-repeat 100%;
      background-position: 0 100%;
      background-size: 100% 100%;
      transition: left 1s;
      overflow: hidden;
    }
    .content_right_top {
      height: calc((100% - 40px) / 3);
    }
    .content_right_center {
      height: calc((100% - 40px) / 3);
    }
    .content_right_bottom {
      height: calc((100% - 40px) / 3);
    }
  }

.content_center_bottom {
    width: 48%;
    height: 28%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 26px;
    z-index: 2;
    background: url("~@/assets/images/bottomBg.png") no-repeat 100%;
    background-position: 100% 100%;
    transition: bottom 1s;
  }

.retractLeft {
    left: -30%;
  }

.retractRight {
    right: -30%;
  }

.retractCenter {
    bottom: -350px;
  }
}

.mine-mark-popper {
  width: 300px;
  border-radius: 6px;
  background: rgba(2, 17, 61, 0.6);
  backdrop-filter: blur(4px);
  user-select: none;
  pointer-events: none;

._info-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    padding: 12px;
    margin-bottom: -4px;
  }

._info-item {
    display: flex;
    width: 50%;
    margin-bottom: 4px;
    line-height: 20px;

> ._label {
      color: rgba(255, 255, 255, 0.5);
      margin-right: 10px;
      flex-shrink: 0;
    }

> ._value {
      flex-grow: 1;
      color: #fff;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
</style>

火星科技/Mars3D三维可视化平台

内容风险标识

评论 (13)

火星科技/Mars3D三维可视化平台 .gitee-modal { width: 500px !important; }

内容风险标识