shuili-vue/src/views/dike/safeOperation/index.vue

<template>
  <div class="safe-operation">
    <div id="reservoir-map-container"></div>

    <!-- 按钮，浮窗 -->
    <!-- <el-input
      class="search-input"
      placeholder="请输入内容"
      style="width: 240px"
      size="small"
    >
      <el-button
        type="default"
        slot="append"
        icon="el-icon-search"
        size="small"
      ></el-button>
    </el-input> -->
    <div class="tool-btn">
      <div class="btn cursor-pointer" @click="handleChangeTreeShow">
        <img class="icon" src="../../../assets/icons/layer.png" alt="" />
        图层管理
      </div>
      <div class="line"></div>
      <div class="btn cursor-pointer" @click="handleChangeMode">
        <img class="icon" src="../../../assets/icons/change23D.png" alt="" />
        {{ mapSceneType === 3 ? "三" : "二" }}维地图
      </div>
    </div>

    <!-- 树结构浮窗 -->
    <Transition name="fade">
      <div class="tree-box" v-if="showTreeBox">
        <el-tree
          @check-change="handleCheckTree"
          :data="treeData"
          default-expand-all
          node-key="id"
          ref="treeRef"
          show-checkbox
          highlight-current
          :props="defaultProps"
        >
          <template #default="{ node, data }">
            <div class="flex items-center">
              <img
                v-if="node.level > 1"
                src="../../../assets/common/icon-layer.png"
                alt=""
              />
              <img v-else src="../../../assets/common/icon-folder.png" alt="" />
              <span style="margin-left: 4px">{{
                data.nameCn || data.text
              }}</span>
            </div>
          </template>
        </el-tree>
      </div>
    </Transition>

    <div class="legend-icon">
      <Legend></Legend>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      :title="`${(resInfoData && resInfoData.dikeName) || commonName || '??'}(${
        (resInfoData && resInfoData.dikeCode) || commonCode || '??'
      })`"
      :visible.sync="showDialog"
      :destroy-on-close="true"
      width="1200px"
    >
      <ProjectDetail
        ref="detailRef"
        :resCode="commonCode"
        @getResInfo="handleGetResInfo"
      ></ProjectDetail>
    </el-dialog>
  </div>
</template>
<script>
import mitt from "mitt";

import ProjectDetail from "./components/ProjectDetail.vue";

import { getSceneListData, getLayerData } from "@/api/mapCommon";
import { getSceneConfig } from "@/api/aiSupervision/layerConfigApi";

import {
  addLayer,
  removeLayer,
  zoomToLayer,
} from "@/views/aiSupervision/waterSetting/runScene/layerTree/index";

import { queryLayersByPos, getSelectedLayersLegend } from "@/utils/mapUtils";
import Legend from "./components/Legend.vue";

import { throttle } from "lodash-es";
import { devRun } from "@/utils";

const emitter = mitt();

let viewer, htmlLayer;
// let graphicsList = [];

window.panelClickFunc = function (code, name) {
  console.log("panelClickFunc >>>>>  ", code, name);
  emitter.emit("openDialog", {
    code,
    name,
  });
};
export default {
  components: { ProjectDetail, Legend },
  data() {
    return {
      showDialog: false,
      // 水库信息
      resInfoData: null,
      // 当前水库code
      commonCode: null,
      commonName: null,
      mapSceneType: 2, // 2: 2D, 3: 3D
      showTreeBox: false,
      defaultProps: {
        children: "layers",
        label: "nameCn",
      },
      configData: null,
      layerList: [],
      checkList: [],
      treeData: [],
    };
  },
  methods: {
    async initData() {
      let res1 = await getSceneListData({
        name: "堤防安全运行",
      });
      let id = res1.records?.[0]?.id;
      let res2 = await getLayerData(id);
      this.treeData = res2.data?.children || [];
      let res3 = await getSceneConfig(id);
      this.configData = res3.data || null;
      if (res3.data?.layerId && typeof res3.data.layerId === "string") {
        this.checkList = JSON.parse(res3.data?.layerId);
        this.treeData.forEach((item) => {
          if (item.layers) {
            let arr = item.layers?.filter((item) =>
              this.checkList.includes(item.id)
            );
            this.layerList.push(...arr);
          }
        });
      }
      this.initMap();
    },
    handleChangeMode() {
      this.mapSceneType = this.mapSceneType === 3 ? 2 : 3;
      viewer?.changeSceneMode(this.mapSceneType);
      let position = new sycim.Position(113.27, 23.13, 600000, 0, -90, 0);
      viewer?.flyToPosition(
        position,
        () => {
          console.log("移动结束 >>>>> ");
        },
        1
      );
    },
    handleGetResInfo(data) {
      console.log("handleGetResInfo >>>>>  ", data);
      this.resInfoData = data;
    },
    initMap() {
      if (!sycim) {
        setTimeout(() => {
          this.initMap();
        }, 1000);
        return;
      }
      viewer = new sycim.Viewer("reservoir-map-container");
      window.viewer = viewer;
      let baseLayer = sycim.ImageryLayerFactory.createImageryLayer(
        sycim.ImageryType.ARCGIS,
        {
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        }
      );
      viewer.addBaseLayer(baseLayer);
      let layer = new sycim.EntityLayer("layer");
      viewer.addLayer(layer);
      // plot = new sycim.Plot(viewer);

      htmlLayer = new sycim.HtmlLayer("layer");
      viewer.addLayer(htmlLayer);

      viewer.setOptions({
        globe: {
          depthTestAgainstTerrain: true,
        },
      });

      setTimeout(() => {
        if (this.layerList.length) {
          this.layerList.forEach((item) => {
            addLayer(item);
          });
        }
        if (this.configData) {
          let pos = JSON.parse(this.configData.cameraPosture);
          viewer.scene.camera.setView({
            destination: new Cesium.Cartesian3.fromDegrees(
              pos.lng,
              pos.lat,
              pos.alt
            ),

            duration: 2,
          });
        } else {
          viewer.scene.camera.setView({
            destination: new Cesium.Cartesian3.fromDegrees(
              113.27,
              23.13,
              600000
            ),
            // orientation: {
            //   heading:  0,
            //   pitch:  -90,
            //   roll: 0,
            // },
            duration: 2,
          });
        }
        this.viewerAddEventListener();
      }, 300);
    },
    handleChangeTreeShow() {
      this.showTreeBox = !this.showTreeBox;
      if (this.showTreeBox) {
        this.$nextTick(() => {
          this.$refs.treeRef?.setCheckedKeys(this.checkList);
        });
      }
    },
    handleAddHtmlLayer(position, data) {
      console.log("添加DivIcon >>>>>  ", position, data);
      htmlLayer?.clear();
      let divIcon = new sycim.DivIcon(
        `${position.lng}, ${position.lat}`,
        `
          <div class="sycim-panel" onclick="panelClickFunc('${
            data.attributes?.showCode
          }','${data.attributes?.showName}')">
            <div class="panel-text">${data.attributes?.showName || "未知"}
            </div>
          </div>
        `
      );
      divIcon.setStyle({
        // 设置可视距离
        distanceDisplayCondition: {
          near: 0, //最近距离
          far: 8000000, //最远距离
        },
        //设置视距缩放
        scaleByDistance: {
          near: 0, //最近距离
          nearValue: 1.5, //最近距离值
          far: 50000, //最远距离值
          farValue: 1, //最远距离值
        },
        horizontalOrigin: sycim.Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: sycim.Cesium.VerticalOrigin.BOTTOM,
      });
      htmlLayer.addGraphic(divIcon);
    },

    // 监听鼠标移动事件
    viewerAddEventListener() {
      window.viewer.on(
        sycim.MouseEventType.MOUSE_MOVE,
        throttle((e) => {
          if (!e.wgs84SurfacePosition) {
            return;
          }
          queryLayersByPos(e.wgs84SurfacePosition, this.layerList, (res) => {
            console.log("res >>>>>  ", res);
            if (res) {
              this.handleAddHtmlLayer(e.wgs84SurfacePosition, res);
            } else {
              htmlLayer?.clear();
            }
          });
        }, 100),
        window.viewer
      );
    },

    openDialog({ code, name }) {
      console.log("打开弹窗获取resCode >>>>>  ", code, name);
      let tempCode = code;
      let tempName = name;
      // devRun(() => {
      //   // tempCode = "440111000008";
      //   tempCode = "HP0174419000000566";
      //   tempName = "开发写死的名字";
      // });
      this.commonCode = tempCode;
      this.commonName = tempName;
      this.showDialog = true;
    },
    // 点击
    handleClickTree(data, node) {
      if (node.isLeaf && !data.children) {
        let resId = this.checkList.find((v) => v === data.id);
        if (resId) {
          this.checkList = this.checkList.filter((v) => v != resId);
          this.layerList = this.layerList.filter((v) => v.id != resId);
          removeLayer(data);
        } else {
          this.checkList = [...this.checkList, data.id];
          addLayer(data);
          this.layerList.push(data);
        }
      }
    },
    handleCheckTree(data, checked) {
      if (data.pid === "root" || data.layers) return;
      if (checked) {
        this.checkList = [...this.checkList, data.id];
        addLayer(data);
        this.layerList.push(data);
      } else {
        this.checkList = this.checkList.filter((v) => v != data.id);
        this.layerList = this.layerList.filter((v) => v.id != data.id);
        removeLayer(data);
      }
    },
  },
  created() {
    emitter.on("openDialog", this.openDialog);
    // devRun(() => {
    //   setTimeout(() => {
    //     this.openDialog({
    //       code: "",
    //       name: "",
    //     });
    //   }, 1000);
    // });
  },
  mounted() {
    this.initData();
  },
  beforeDestroy() {
    window.viewer = null;
    htmlLayer = null;
  },
};
</script>
<style scoped lang="scss">
.safe-operation {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  #reservoir-map-container {
    width: 100%;
    height: 100%;
  }

  .search-input {
    position: absolute;
    font-size: 14px;
    z-index: 9;
    right: 148px;
    top: 20px;
  }

  .tool-btn {
    border-radius: 4px;
    font-size: 14px;
    padding: 12px;
    background: #fff;
    position: absolute;
    z-index: 9;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    .btn {
      user-select: none;
      display: flex;
      align-items: center;
      font-size: 14px;
      .icon {
        width: 18px;
        height: 18px;
      }
    }
    .line {
      width: 2px;
      background: #e7e7e7;
      height: 12px;
      margin: 0 8px;
    }
  }

  .tree-box {
    position: absolute;
    z-index: 9;
    right: 12px;
    top: 66px;
    border-radius: 4px;
    padding: 2px;
    background: #fff;
    width: 280px;
    min-height: 300px;
    max-height: 600px;
    padding: 12px 0;
    overflow: auto;
  }

  .legend-icon {
    border-radius: 4px;
    padding: 8px 12px;
    background: #fff;
    width: 140px;
    position: absolute;
    z-index: 9;
    right: 12px;
    bottom: 12px;
    max-height: 168px;
    overflow: auto;
    .row {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-bottom: 4px;
      .icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
<style lang="scss">
.sycim-panel {
  padding: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  .panel-text {
    color: #fff;
    font-size: 14px;
  }
}
</style>