real3d-portalsite/src/components/Combinations/LayerManage/LayerManage.vue

<template>
  <div class="sm-panel" v-show="LayerManageShow">
    <div class="sm-panel-header">
      <span>{{ Resource.LayerManage }}</span>
      <span class="closeBtn" @click="toggleVisibility">&times;</span>
    </div>
    <Tabs value="">
      <TabPane :label="Resource.Resource" name="zyml">
        <div class="zyml">
          <el-input
            :placeholder="Resource.InputPlaceholder"
            prefix-icon="el-icon-search"
            v-model="treeSearchText"
            size="small"
          >
          </el-input>
          <div class="treeDiv">
            <el-tree
              @check="handleCheckChange"
              class="filter-tree"
              :data="TreeDatas"
              show-checkbox
              :props="defaultProps"
              :filter-node-method="filterNode"
              ref="tree"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <Icon
                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
                    color="green"
                    size="18"
                    class="opBtn"
                    :title="
                      data.favorite ? Resource.DelCollect : Resource.AddCollect
                    "
                    @click="favoriteHandle(data)"
                    v-if="data.url != ''"
                  />
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </TabPane>
      <TabPane :label="Resource.LayerOptions" name="tckz">
        <div class="tckz">
          <List split size="large">
            <ListItem v-for="(item, index) in addlayerdata" :key="index">
              {{ item.title }}
              <div class="listBtn">
                <i-switch
                  v-model="item.visible"
                  size="small"
                  @on-change="visibleChange(item, $event)"
                >
                  <template #open>
                    <span></span>
                  </template>
                  <template #close>
                    <span></span>
                  </template>
                </i-switch>
                <Icon
                  type="md-arrow-round-up"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.MoveUpOneLevel"
                  @click="raise(item)"
                  v-if="
                    index > 0 && (item.type == 'Vector' || item.type == 'IMG')
                  "
                />
                <Icon
                  type="md-arrow-round-down"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.MoveDownOneLevel"
                  @click="lower(item)"
                  v-if="
                    index < addlayerdata.length - 1 &&
                    (item.type == 'Vector' || item.type == 'IMG')
                  "
                />
                <Icon
                  type="md-locate"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.location"
                  @click="location(item)"
                />
              </div>
              <div class="sliderBtn" v-if="item.type != 'Terrain'">
                <Slider
                  v-model="item.trans"
                  @on-change="transSliderChange(item, $event)"
                ></Slider>
              </div>
            </ListItem>
          </List>
        </div>
      </TabPane>
      <TabPane :label="Resource.Favorite" name="collect">
        <div class="collect">
          <List split>
            <ListItem
              v-for="(item, index) in favoriteLayerList"
              :key="index"
              class="layerlist"
            >
              <Checkbox @on-change="checkboxChange(item, $event)">{{
                item.title
              }}</Checkbox>
              <div class="listBtn">
                <Icon
                  type="ios-star"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.DelCollect"
                  @click="favoriteHandle(item)"
                />
              </div>
            </ListItem>
          </List>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
export default {
  name: "LayerManage",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      modellayerlist: [],
      vectorlayerlist: [],
      username: "admin",
      treeSearchText: "",
      addlayerdata: [],
      sceneLayers: {},
      favoriteLayerList: [],
      sharedState: store.state,
      //   flag: false,
      //   s3mLen: 0,
      hid: true,
      layerparams: {},
      ImgHid: false, //影响图层移动默认不显示
      S3MLayersObj: {
        title: Resource.s3mLayer,
        expand: true,
        checked: true,
        type: "S3M",
        children: [],
      },
      imgLayersObj: {
        title: Resource.imageryLayer,
        expand: true,
        checked: true,
        type: "IMG",
        children: [],
      },
      TerrainLayersObj: {
        title: Resource.terrainLayer,
        expand: true,
        checked: true,
        type: "TERRAIN",
        children: [],
      },

      TreeDatas: [
        {
          title: Resource.layerList,
          expand: true,
          //   selected: true,
          //   contextmenu: true,
          children: [],
          type: "ROOT",
        },
      ],
      contextData: null,
      hideS3mNames: [],
      hideImgNames: [],
      hideTerrainNames: [],
      S3MList:[],
    };
  },
  computed: {
    LayerManageShow: function () {
      return this.sharedState.toolBar[0];
    },
    imgLayers: function () {
      return this.sharedState.imgLayerManage;
    },
    terrainLayers: function () {
      return this.sharedState.terrainLayerManage;
    },
    S3MLayers: function () {
      return this.sharedState.S3MLayerManage;
    },
  },

  methods: {
    toggleVisibility() {
      store.setToolBarAction(0);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    favoriteHandle(data) {
      if (data.favorite) {
        data.favorite = null;
        for (let i = 0; i < this.favoriteLayerList.length; i++) {
          if (this.favoriteLayerList[i].id == data.id) {
            this.favoriteLayerList.splice(i, 1);
          }
        }
      } else {
        data.favorite = this.username;
        this.favoriteLayerList.push(data);
      }
      Collect(this.username, data.id)
        .then((res) => {
          if (res.statuscode == 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    favorite(data) {
      console.log(data);
    },
    checkboxChange(obj, checked, a) {
      obj.checked = checked;
      this.handleCheckChange(obj, checked);
    },
    visibleChange(obj, visible, a) {
      console.log(obj, visible, a);
      switch (obj.type) {
        case "S3M": //场景
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title][0][0].visible = visible;
          }
          break;
        case "3DTiles": //场景
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title].show = visible;
          }
          break;
        case "S3MDATA": //scp
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title][0][0].visible = visible;
          }
          break;
        case "IMG": //影像
          this.layerparams[obj.id].show = visible;
          break;
        case "Vector": //矢量
          this.layerparams[obj.id].show = visible;
          break;
        case "Terrain": //地形
          if (visible) {
            viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
              url: obj.url,
              isSct: true,
              requestVertexNormals: true,
            });
          } else {
            viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
              {}
            );
          }
          break;
        default:
          null;
      }
    },
    transSliderChange(obj, v, a) {
      if (typeof v == undefined) {
        return;
      }
      let value = v / 100;
      let imageryLayers = viewer.imageryLayers;
      switch (obj.type) {
        case "S3M": //场景
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title][0][0].style3D.fillForeColor =
              new Cesium.Color(1.0, 1.0, 1.0, value);
          }
          break;
        case "S3MDATA": //scp
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title][0][0].style3D.fillForeColor =
              new Cesium.Color(1.0, 1.0, 1.0, value);
          }
          break;
        case "3DTiles": //tileset
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title].style = new Cesium.Cesium3DTileStyle({
              color: "color('rgba(255,255,255," + value + ")')",
            });
          }
          break;
        case "IMG": //影像
          for (let i = 0; i < imageryLayers._layers.length; i++) {
            let element = imageryLayers._layers[i];
            if (element._imageryProvider._name == obj.title) {
              element.alpha = value;
              break;
            }
          }
          break;
        case "Vector": //矢量
          for (let i = 0; i < imageryLayers._layers.length; i++) {
            let element = imageryLayers._layers[i];
            if (element._imageryProvider._name == obj.title) {
              element.alpha = value;
              break;
            }
          }
          break;
        case "Terrain": //地形
          break;
        default:
          null;
      }
    },
    addS3M(LayerURL) {
      let promiseArray = [];
      promiseArray.push(viewer.scene.addS3MTilesLayerByScp(LayerURL));
      this.promiseWhen(promiseArray, true);
    },

    addTerrain(LayerURL) {
      viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: LayerURL,
        isSct: true,
        requestVertexNormals: true,
      });
    },

    add3DTiles(obj) {
      let tileset = new Cesium.Cesium3DTileset({
        url: obj.url + "?id=" + obj.id,
        skipLevelOfDetail: true
      });
      this.sceneLayers[obj.title] = tileset;
      let thisLayer = viewer.scene.primitives.add(tileset);
      viewer.flyTo(thisLayer);
    },

    addImage(LayerURL) {
      var layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.SuperMapImageryProvider({
          url: LayerURL,
        })
      );
      viewer.flyTo(layer);
    },

    promiseWhen(promiseArray, sceneName, obj) {
      let this_ = this;
      Cesium.when.all(
        promiseArray,
        (layers) => {
          this_.sceneLayers[obj.title] = layers;
          if (sceneName) {
            this.flyTo(sceneName);
          }
          if (obj.title == "分层分户") {
            store.setLayerList(layers[0][0])
            layers[0][0].setQueryParameter({
              url: "https://www.supermapol.com/realspace/services/data-HeBing8HaoLou/rest/data",
              dataSourceName: "Model_8_old",
              dataSetName: "属性表",
              keyWord: "SmID",
            });
          }
          store.state.S3MList.push(layers[0])
          store.state.tempLatData=layers[0]
          // for (var i = 0; i < layers.length; i++) {
          //   let style = new Cesium.Style3D();
          //   style.bottomAltitude = window.modelBottomAltitude; //底部高度
          //   if (layers[i].length > 0) {
          //     for (var j = 0; j < layers[i].length; j++) {
          //       layers[i][j].style3D = style;
          //       layers[i][j].refresh();
          //       layers[i][j].isOverlapDisplayed = true; //开启避让
          //     }
          //   } else {
          //     layers[i].style3D = style;
          //     layers[i].refresh();
          //     layers[i].isOverlapDisplayed = true; //开启避让
          //   }
          // }
        },
        function (e) {
          if (widget._showRenderLoopErrors) {
            let title = Resource.scpUrlErrorMsg;
            widget.showErrorPanel(title, undefined, e);
          }
        }
      );
    },
    handleSelectChange(selectedList, obj) {
      obj ? (obj.expand = !obj.expand) : null;
    },
    // 复选框改变
    handleCheckChange(obj, checked) {
      // console.log(obj, checked ,);
      if (typeof checked == "boolean") {
        obj.checked = checked;
      } else {
        obj.checked = !obj.checked;
      }
      if (obj.children && obj.children.length > 0) {
        for (let i = 0; i < obj.children.length; i++) {
          this.handleCheckChange(obj.children[i], checked);
        }
      } else {
        let imageryLayers = viewer.imageryLayers;
        if (obj.checked) {
          obj.trans = 100;
          obj.visible = true;
          this.addlayerdata.push(obj);
          switch (obj.type) {
            case "S3M": //场景
              let s = viewer.scene.open(obj.url);
              this.vectorlayerlist.push(obj);
              this.promiseWhen([s], undefined, obj);
              // store.setModelLayerList(this.vectorlayerlist);
              // console.log(store.state.modellayerlist,'vvvvv');
              // store.state.S3MList.push(obj)
              break;
            case "S3MDATA": //scp
              viewer.scene.addS3MTilesLayerByScp(obj.url, {
                name: obj.title,
              });
              break;
            case "3DTiles": //tileset
              this.add3DTiles(obj);
              this.vectorlayerlist.push(obj);
              break;
            case "IMG": //影像
              let layer = viewer.imageryLayers.addImageryProvider(
                new Cesium.SuperMapImageryProvider({
                  url: obj.url,
                  name: obj.title,
                })
              );
              this.layerparams[obj.id] = layer;
              // viewer.flyTo(layer);
              break;
            case "Vector": //矢量
              let layer2 = viewer.imageryLayers.addImageryProvider(
                new Cesium.SuperMapImageryProvider({
                  url: obj.url,
                  name: obj.title,
                })
              );
              this.vectorlayerlist.push(obj);
              this.layerparams[obj.id] = layer2;
              // viewer.flyTo(layer2);
              break;
            case "Terrain": //地形
              this.addTerrain(obj.url);
              break;
            default:
              null;
          }
        } else {
          for (let i = 0; i < this.addlayerdata.length; i++) {
            if (this.addlayerdata[i].title == obj.title) {
              this.addlayerdata.splice(i, 1);
              break;
            }
          }
          for (let i = 0; i < this.vectorlayerlist.length; i++) {
            if (this.vectorlayerlist[i].title == obj.title) {
              this.vectorlayerlist.splice(i, 1);
              break;
            }
          }
          for (let i = 0; i < this.modellayerlist.length; i++) {
            if (this.modellayerlist[i].title == obj.title) {
              this.modellayerlist.splice(i, 1);
              break;
            }
          }
          delete this.layerparams[obj.id];
          switch (obj.type) {
            case "S3M": //场景
              if (this.sceneLayers[obj.title]) {
                for (let i = 0; i < this.sceneLayers[obj.title].length; i++) {
                  if (this.sceneLayers[obj.title][i].length > 0) {
                    for (
                      let u = 0;
                      u < this.sceneLayers[obj.title][i].length;
                      u++
                    ) {
                      viewer.scene.layers.remove(
                        this.sceneLayers[obj.title][i][u]._name
                      );
                    }
                  } else {
                    viewer.scene.layers.remove(
                      this.sceneLayers[obj.title][i]._name
                    );
                  }
                }
              }
              break;
            case "S3MDATA": //scp
              viewer.scene.layers.remove(obj.title);
              break;
            case "3DTiles": //tileset
              viewer.scene.primitives.remove(this.sceneLayers[obj.title]);
              break;
            case "IMG": //影像
              for (let i = 0; i < imageryLayers._layers.length; i++) {
                let element = imageryLayers._layers[i];
                if (element._imageryProvider._name == obj.title) {
                  imageryLayers.remove(element);
                  break;
                }
              }
              break;
            case "Vector": //矢量
              for (let i = 0; i < imageryLayers._layers.length; i++) {
                let element = imageryLayers._layers[i];
                if (element._imageryProvider._name == obj.title) {
                  imageryLayers.remove(element);
                  break;
                }
              }
              break;
            case "Terrain": //地形
              viewer.scene.terrainProvider =
                new Cesium.EllipsoidTerrainProvider({});
              break;
            default:
              null;
          }
        }
      }
      store.setVectorLayerList(this.vectorlayerlist);
      store.setModelLayerList(this.modellayerlist);
    },

    //获取后台资源目录树结构
    getResourceTree() {
      GetResourceTree().then((res) => {
        if (res.statuscode == 200) {
          this.TreeDatas = res.data;
          store.state.tempResourceTree = res.data
        } else {
          console.log(e);
        }
      });
    },

    //获取后台资源目录树结构
    getFavoriteLayers() {
      GetMyCollect().then((res) => {
        if (res.statuscode == 200) {
          this.favoriteLayerList = res.data;
        } else {
          console.log(e);
        }
      });
    },

    //图层定位
    location(obj) {
      let imageryLayers = viewer.imageryLayers;
      switch (obj.type) {
        case "S3M": //场景
          if (this.sceneLayers[obj.title]) {
            viewer.flyTo(this.sceneLayers[obj.title][0][0]);
          }
          break;
        case "S3MDATA": //scp
          viewer.flyTo(this.sceneLayers[obj.title][0][0]);
          break;
        case "3DTiles": //tileset
          viewer.flyTo(this.sceneLayers[obj.title]);
          break;
        case "IMG": //影像
          for (let i = 0; i < imageryLayers._layers.length; i++) {
            let element = imageryLayers._layers[i];
            if (element._imageryProvider._name == obj.title) {
              viewer.flyTo(element);
              break;
            }
          }
          break;
        case "Vector": //矢量
          for (let i = 0; i < imageryLayers._layers.length; i++) {
            let element = imageryLayers._layers[i];
            if (element._imageryProvider._name == obj.title) {
              viewer.flyTo(element);
              break;
            }
          }
          break;
        case "Terrain": //地形
          viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
            {}
          );
          break;
        default:
          null;
      }
    },

    //影像图层操作
    raise(obj) {
      viewer.imageryLayers.raise(this.layerparams[obj.id]);
      for (let i = 0; i < this.addlayerdata.length; i++) {
        if (this.addlayerdata[i].title == obj.title) {
          let arr = Array.from(this.addlayerdata);
          this.addlayerdata = [];
          this.addlayerdata = this.moveUp(arr, i);
          break;
        }
      }
    },
    lower(obj) {
      viewer.imageryLayers.lower(this.layerparams[obj.id]);
      for (let i = 0; i < this.addlayerdata.length; i++) {
        if (this.addlayerdata[i].title == obj.title) {
          let arr = Array.from(this.addlayerdata);
          this.addlayerdata = [];
          this.addlayerdata = this.moveDown(arr, i);
          break;
        }
      }
    },
    raiseToTop() {
      let imageryLayers = viewer.imageryLayers._layers;
      let ly = imageryLayers[this.contextData.id];
      viewer.imageryLayers.raiseToTop(ly);
      this.updataImgLayers();
    },
    lowerToBottom() {
      let imageryLayers = viewer.imageryLayers._layers;
      let ly = imageryLayers[this.contextData.id];
      viewer.imageryLayers.lowerToBottom(ly);
      this.updataImgLayers();
    },
    // 上移操作
    moveUp(array, index) {
      if (index > 0 && index < array.length) {
        let temp = array[index];
        array[index] = array[index - 1];
        array[index - 1] = temp;
      }
      return array;
    },
    // 下移操作
    moveDown(array, index) {
      if (index >= 0 && index < array.length - 1) {
        let temp = array[index];
        array[index] = array[index + 1];
        array[index + 1] = temp;
      }
      return array;
    },
  },

  mounted() {
    this.getResourceTree();
    this.getFavoriteLayers();
  },

  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>

<style lang="scss">
@import "./LayerManage.scss";
</style>