图层树开发方法（待验证）下拉框选择图片（有bug）

WX

2023-07-21 bf48462e6ce0e0baa899c1c64c24c05290dc77fd

图层树开发方法（待验证）下拉框选择图片（有bug）

 src/api/api.js

@@ -33,5 +33,5 @@
//图层查询
export function layer_selectAll(params) {
  //请求地址
  return request.get("/layer/selectAll", { params: params });
  return request.get("/res/selectAll", { params: params });
}

 src/assets/js/Map/server.js

@@ -1,11 +1,12 @@
import { getToken } from "@/utils/auth";
const server = {
  addTreeData(treeNode, checked) {
    console.log(treeNode, checked);
    let _data = sgworld.ProjectTree.getObject(treeNode.id);
    let _data = earthCtrl.ProjectTree.getObject(treeNode.id);
    let pID = 0;
    console.log(_data);
    if (_data) {
      sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
      earthCtrl.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
      return;
    } else {
      // _data = _getTreeData(treeNode.id);
@@ -27,15 +28,87 @@
      //   return;
      // }
    }
    switch (treeNode.sourceType) {
      case "tms":
    //       comment on table lf.sys_res is '资源表';
    // comment on column lf.sys_res.id is '主键ID';
    // comment on column lf.sys_res.pid is '父ID：0-根节点';
    // comment on column lf.sys_res.cn_name is '中文名称';
    // comment on column lf.sys_res.en_name is '英文名称';
    // comment on column lf.sys_res.type is '类型：1-图层组,2-普通图层,3-代理图层';
    // comment on column lf.sys_res.status is '状态：-1-废弃，0-停用，1-启用';
    // comment on column lf.sys_res.category is '类型：0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    // comment on column lf.sys_res.firm is '厂商：0-其他，1-GisServer，2-GeoServer，3-数简';
    // comment on column lf.sys_res.url is '服务地址';
    // comment on column lf.sys_res.test is '测试地址';
    // comment on column lf.sys_res.proxy is '代理地址';
    // comment on column lf.sys_res.descr is '描述';
    // comment on column lf.sys_res.depid is '单位编码';
    // comment on column lf.sys_res.dirid is '项目编码';
    // comment on column lf.sys_res.img is '缩略图';
    // comment on column lf.sys_res.level is '层级：0-根节点';
    // comment on column lf.sys_res.sort is '排序';
    // comment on column lf.sys_res.create_user is '创建人ID';
    // comment on column lf.sys_res.create_time is '创建时间';
    // comment on column lf.sys_res.update_user is '更新人ID';
    // comment on column lf.sys_res.update_time is '更新时间';
    // comment on column lf.sys_res.bak is '备注';
    //     代理：/proxy/{token}/4
    // 地址：http://192.168.20.83:8088/MoonServer + proxy.replace("{token}", token)
    // order_num -> sort
    // serve_type -> category

    switch (treeNode.type) {
      case 1:
        treeNode.useUrl = treeNode.url;
        break;
      case 2:
        treeNode.useUrl = treeNode.url;
        break;
      case 3:
        var token = getToken();
        treeNode.useUrl = BASE_URL + treeNode.proxy.replace("{token}", token);
        break;
    }
    if (treeNode.firm == 2) {
      this.addGeoServer(treeNode);
    } else {
      this.addGisServer(treeNode);
    }
  },
  addGisServer(treeNode) {
    console.log(treeNode);
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    switch (treeNode.category) {
      case 1:
        this.AddTmsLayer(treeNode.useUrl);
        break;
      case 2:
        this.AddWmtesLayer(treeNode.useUrl);
        break;
      case 3:
        break;
      case 4:
        break;
    }
  },
  addGeoServer(treeNode) {
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    switch (treeNode.category) {
      case 1:
        break;
      case 2:
        this.AddGeoWmsLayer(treeNode.useUrl);
        break;
      case 3:
        break;
      case 4:
        break;
    }
  },
  //添加geoserver服务wms服务
  AddGeoWmsLayer(url, s) {
  AddGeoWmsLayer(url) {
    window.layerWMS = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: "http://192.168.22.198:8090/geoserver/moon/wms",
      // url: "http://192.168.22.198:8090/geoserver/moon/wms",
      url: url,
      layers: "moon:lunar_place_nane",
      parameters: {
        transparent: true,
@@ -56,7 +129,7 @@
    //   url: url + "/{z}/{x}/{y}.png"
    // });
    // Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
    sgworld.Creator.createUrlTemplateImageryProvider(
    earthCtrl.Creator.createUrlTemplateImageryProvider(
      "tms服务",
      {
        url: Cesium.buildModuleUrl(url + "/{z}/{x}/{reverseY}.png"),

 src/views/layer/layerDetail.vue

@@ -26,13 +26,18 @@
          class="m-2"
          placeholder="Select"
          size="small"
          @change="changeSelection(stretchValue)"
          ref="select"
        >
          <el-option
            v-for="item in stretchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
          >
            <img :src="item.url" style="height: 30px; margin-right: 10px" />
            <span>{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
    </div>
@@ -52,26 +57,17 @@
const transparence = ref(0);
let layerName = ref("图层名称");
let layerState = ref(false);
let select = ref();
const stretchOptions = [
  {
    value: "Option1",
    label: "Option1",
    url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
    url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
];
const emits = defineEmits(["detailClose"]);
@@ -83,6 +79,22 @@
  emits("detailClose", false);
};
const handlCheckAllChange = (res) => {};
const changeSelection = (scope) => {
  let brand = scope;
  for (let index in stretchOptions) {
    let aa = stretchOptions[index];
    let value = aa.value;
    if (brand === value) {
      console.log(select.value);
      select.value.$el.children[0].children[0].setAttribute(
        "style",
        "background:url(" +
          aa.url +
          ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
      );
    }
  }
};
</script>

<style lang="less" scoped>

 src/views/layer/layerManage.vue

@@ -33,7 +33,7 @@
                Delete
              </a>
            </span> -->
            <span class="button" v-if="data.type == 2">
            <span class="button" v-if="data.type == 2 || data.type == 3">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
@@ -91,6 +91,7 @@
import { useStore } from "vuex"; // 引入useStore 方法
import { layer_selectAll } from "@/api/api";
import server from "@/assets/js/Map/server";
import { ElMessage } from "element-plus";
const store = useStore(); // 该方法用于返回store 实例
const stretchValue = ref("");

@@ -119,6 +120,7 @@
];
const transparence = ref(0);
var treeData = ref([]);
var layerListData = ref([]);
let menuOption = reactive([
  {
    id: 1,
@@ -305,16 +307,47 @@
};
//编辑图层树
const addlayer = (res) => {
  menuOption.push(res);
  // treeData.value = handleTree(menuOption, "id", "pid", "children");
  console.log(res);
  let node;
  layerListData.value.forEach((e) => {
    if (e.id == res.id) {
      node = estreeRef.value.getNode(e);
    }
  });
  // 将变动之前的node备份
  let copyNode = { ...node };
  copyNode.previousSibling = { ...node.previousSibling };
  copyNode.nextSibling = { ...node.nextSibling };
  if (res.type === 1) {
    // 上移
    if (node.previousSibling) {
      // 删除原先的node
      estreeRef.value.remove(node.data);
      // 拿到copy的node
      // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
      // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)

      estreeRef.value.insertBefore(
        copyNode.data,
        copyNode.previousSibling.data
      );
      // window.sessionStorage.removeItem("menuNode");
    }
  } else {
    // 下移
    if (node.nextSibling) {
      estreeRef.value.remove(node.data);
      estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
    }
  }
};
//删除图层树
const delLayer = (res) => {
  menuOption = menuOption.filter((item) => {
    return item.id != res;
  });
  console.log(res);
  console.log(menuOption);
  // menuOption = menuOption.filter((item) => {
  //   return item.id != res;
  // });
  // console.log(res);
  // console.log(menuOption);
  // treeData = handleTree(menuOption, "id", "pid", "children");
};

@@ -322,6 +355,7 @@
  const dt = await layer_selectAll();
  if (dt.code == 200) {
    treeData.value = setTreeData(dt.result);
    layerListData.value = dt.result;
  }

  // treeData.value = JSON.parse(JSON.stringify(treeData.value));
@@ -337,7 +371,7 @@
    let branchArr = cloneData.filter((child) => father.id == child.pid);
    if (branchArr.length > 0) {
      branchArr.sort(function (a, b) {
        return a.orderNum - b.orderNum;
        return a.sort - b.sort;
      });
    }


 src/views/layer/layerSet.vue

@@ -74,8 +74,12 @@
          @click="delLayer"
          >删除</el-button
        >
        <el-button type="primary" :icon="Top">向上移动</el-button>
        <el-button type="primary" :icon="Bottom">向下移动</el-button>
        <el-button type="primary" :icon="Top" @click="move(1)"
          >向上移动</el-button
        >
        <el-button type="primary" :icon="Bottom" @click="move(2)"
          >向下移动</el-button
        >
      </div>
      <div class="edit_box_form">
        <el-form :model="form" label-width="120px">
@@ -208,7 +212,7 @@
  }
  var addObj = {
    id: id,
    name: form.name,
    cnName: form.name,
    region: form.region,
    layerUrl: form.layerUrl,
    children: [],
@@ -220,11 +224,13 @@
  }

  if (t == "t") {
    addObj.parentId = selectedObj.value.parentId;
    // console.log(treeRef.value.getNode(selectedObj.value));
    // addObj.parentId = selectedObj.value.parentId;
    treeRef.value.insertAfter(addObj, treeRef.value.getNode(selectedObj.value));
  } else {
    addObj.parentId = selectedNodeId.value;
    // addObj.parentId = selectedNodeId.value;
    treeRef.value.append(addObj, treeRef.value.getNode(selectedObj.value));
  }
  emits("addlayer", addObj);
};
//删除
const delLayer = () => {
@@ -246,6 +252,42 @@
    }
  });
};
//移动
const move = (type) => {
  // let node = treeRef.value.getCurrentNode();
  let node = treeRef.value.getNode(selectedObj.value);
  let data = selectedObj.value;
  // 将变动之前的node备份
  let copyNode = { ...node };
  copyNode.previousSibling = { ...node.previousSibling };
  copyNode.nextSibling = { ...node.nextSibling };
  // window.sessionStorage.setItem("menuNode", CircularJSON.stringify(copyNode));

  if (type === 1) {
    // 上移
    if (node.previousSibling) {
      // 删除原先的node
      treeRef.value.remove(node.data);
      // 拿到copy的node
      // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
      // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)

      treeRef.value.insertBefore(copyNode.data, copyNode.previousSibling.data);
      // window.sessionStorage.removeItem("menuNode");
    } else {
      return ElMessage.warning("该菜单已经是当前层最上级");
    }
  } else {
    // 下移
    if (node.nextSibling) {
      treeRef.value.remove(node.data);
      treeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
    } else {
      return ElMessage.warning("该菜单已经是当前层最下级");
    }
  }
  emits("addlayer", { type: type, id: selectedObj.value.id });
};
</script>

<style lang="less" scoped>