图层树默认 图层加载删除

WX

2023-07-24 e2abcc58249920af74fc5fa04e90554274c208d5

图层树默认 图层加载删除

 src/assets/js/Map/index.js

@@ -44,25 +44,12 @@
    //大气层
    Viewer.scene.globe.showGroundAtmosphere = false;

    // server.AddTmsLayer(config.moonTms);
    server.AddWmtesLayer(config.moonWmts);
    // var terrain = new Cesium.CesiumTerrainProvider({
    //   url: config.moonTerrain,
    //   tilingScheme: new Cesium.GeographicTilingScheme({
    //     ellipsoid: Cesium.Ellipsoid.MOON,
    //   }),
    // });
    // window.Viewer.terrainProvider = terrain;
    server.AddDemLayer("", 12316);

    // server.AddTmsLayer(
    //   "http://172.16.2.10:50001/sj_raster/v6/service/10003901/1"
    // );

    server.AddGeoWmsLayer(
      "http://192.168.22.198:8090/geoserver/moon/wms",
      "111",
      "moon:Ageo_copernican_period"
    );
    // var param = {
    //     name: labelName,
    //     id: earthCtrl.factory.createUUID(),

 src/assets/js/Map/server.js

@@ -1,33 +1,14 @@
import { getToken } from "@/utils/auth";
//配置文件地址
import config from "./config";
const server = {
  layerList: [],
  addTreeData(treeNode) {
    console.log(treeNode);
    let _data = earthCtrl.ProjectTree.getObject(treeNode.id);
    let pID = 0;
    console.log(_data);
    if (_data) {
      earthCtrl.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
    if (!treeNode.checked) {
      this.delLayer(treeNode.id);
      return;
    } else {
      // _data = _getTreeData(treeNode.id);
      // if (_data) {
      //   _data.item &&
      //     _data.item.setVisibility &&
      //     _data.item.setVisibility(treeNode.checked);
      //   _data.item &&
      //     _data.item.setVisible &&
      //     _data.item.setVisible(treeNode.checked);
      //   _data.item &&
      //     _data.item.show !== undefined &&
      //     (_data.item.show = treeNode.checked);
      //   if (_data.datatype === "particle") {
      //     _data.item.forEach((item) => {
      //       item.show = treeNode.checked;
      //     });
      //   }
      //   return;
      // }
    }

    //       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-根节点';
@@ -75,15 +56,35 @@
      this.addGisServer(treeNode);
    }
  },
  //清除图层
  delLayer(code) {
    this.layerList.forEach((e, i) => {
      if (e.id === code) {
        switch (e.type) {
          case "wmts":
            window.Viewer.imageryLayers.remove(e.layerData);
            break;
          case "tms":
            window.Viewer.imageryLayers.remove(e.layerData);
            break;
          case "dem":
            window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
              {}
            );
            break;
        }
        this.layerList.splice(i, 1);
      }
    });
  },
  addGisServer(treeNode) {
    console.log(1111111111111111111, treeNode);
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    switch (treeNode.type) {
      case 1:
        this.AddTmsLayer(treeNode.useUrl);
        this.AddTmsLayer(treeNode.useUrl, treeNode.id);
        break;
      case 2:
        this.AddWmtesLayer(treeNode.useUrl);
        this.AddWmtesLayer(treeNode.useUrl, treeNode.id);
        break;
      case 3:
        break;
@@ -92,7 +93,6 @@
    }
  },
  addGeoServer(treeNode) {
    console.log(222222222222222222222222222, treeNode);
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    switch (treeNode.type) {
      case 1:
@@ -108,11 +108,8 @@
  },
  //添加geoserver服务wms服务
  AddGeoWmsLayer(url, id, tab) {
    console.log(url);

    window.layerWMS = new SmartEarth.Cesium.WebMapServiceImageryProvider({
    let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      // url: "http://192.168.22.198:8090/geoserver/moon/wms",
      // id: id,
      url: url,
      layers: tab,
      parameters: {
@@ -124,17 +121,18 @@
      tileWidth: 512,
      tileHeight: 512,
    });
    layerWMS.name = "Wms_Layer";
    layer.name = `Wms_Layer${id}`;

    Viewer.imageryLayers.addImageryProvider(window.layerWMS);
    let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    this.layerList.push({ id: id, layerData: img_layer, type: "wmts" });
  },
  //添加GisServer服务TMS切片服务
  AddTmsLayer(url) {
  AddTmsLayer(url, id) {
    // var urlTemplateImageryProvider = new SmartEarth.Cesium.UrlTemplateImageryProvider({
    //   url: url + "/{z}/{x}/{y}.png"
    // });
    // Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
    earthCtrl.Creator.createUrlTemplateImageryProvider(
    let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
      "tms服务",
      {
        url: Cesium.buildModuleUrl(url + "/{z}/{x}/{reverseY}.png"),
@@ -144,8 +142,9 @@
      true,
      ""
    );
    this.layerList.push({ id: id, layerData: img_layer, type: "tms" });
  },
  AddWmtesLayer(url) {
  AddWmtesLayer(url, id) {
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
      url: url,
@@ -178,6 +177,25 @@
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    console.log(urlTemplateImageryProvider);
    this.layerList.push({
      id: id,
      layerData: urlTemplateImageryProvider._primitive,
      type: "wmts",
    });
  },
  AddDemLayer(url, id) {
    var terrain = new Cesium.CesiumTerrainProvider({
      url: config.moonTerrain,
      // url: url,
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    window.Viewer.terrainProvider = terrain;

    // let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    this.layerList.push({ id: id, type: "dem" });
  },
};
export default server;

 src/views/layer/layerManage.vue

@@ -23,6 +23,7 @@
        @check="handleCheckChange"
        ref="estreeRef"
        v-if="treeData.length"
        :default-checked-keys="DefaultId"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
@@ -176,7 +177,8 @@
// 当前选中的节点 id
const selectedNodeId = ref(null as any); //做类型断言处理
const emits = defineEmits(["setCloseLayer"]);

//默认选中id
const DefaultId = ref([15]);
//图层设置弹框
const layerSetBox = () => {
  layerSetIsshow.value = !layerSetIsshow.value;
@@ -307,7 +309,6 @@
};
//编辑图层树
const addlayer = (res) => {
  console.log(res);
  let node;
  layerListData.value.forEach((e) => {
    if (e.id == res.id) {
@@ -358,6 +359,15 @@
      return a.sort - b.sort;
    });
    layerListData.value = dt.result;

    //添加默认选中图层
    dt.result.forEach((e) => {
      DefaultId.value.forEach((v) => {
        if (e.id == v) {
          setVisiable(e, true);
        }
      });
    });
  }

  // treeData.value = JSON.parse(JSON.stringify(treeData.value));
@@ -383,8 +393,10 @@
    return father.pid == 0; // 返回一级菜单
  });
}
getLayer();
onMounted(() => {
  getLayer();
  console.log(treeData.value);
  console.log(estreeRef.value);
});
</script>


 src/views/menus.vue

@@ -30,14 +30,21 @@
    </div>
  </div>
  <div class="content_box" v-show="fullScreen">
    <layer-manage @setCloseLayer="setCloseLayer" v-if="checkMenuFlag == 'l1'">
    </layer-manage>
    <div v-show="checkMenuFlag == 'l1'">
      <layer-manage @setCloseLayer="setCloseLayer"> </layer-manage>
    </div>
    <div v-show="checkMenuFlag == 'l2'">
      <plotting> </plotting>
    </div>
    <div v-show="checkMenuFlag == 'l5'">
      <baseMapSwitching> </baseMapSwitching>
    </div>

    <plotting v-show="checkMenuFlag == 'l2'"> </plotting>
    <baseMapSwitching v-show="checkMenuFlag == 'l5'"> </baseMapSwitching>
    <search v-if="thematicMapBtnState"> </search>
  </div>

  <top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn>

  <thematic-map v-show="!thematicMapBtnState"></thematic-map>
  <div class="fullScreen_btn" v-show="!fullScreen" @click="screen"></div>
</template>
@@ -136,9 +143,8 @@
    document.webkitIsFullScreen
  );
}
onMounted(() => {
  menuOptions.value = menuData.leftMenu;
});
menuOptions.value = menuData.leftMenu;
onMounted(() => {});
</script>
<style lang="less" scoped>
.menus {