资源目录矢量影像添加图例

src/components/Combinations/LayerManage/LayerLegend.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="legends" v-show="vectors.length > 0 && !store.state.viewer_flag">
+    <el-collapse accordion v-model="activeNames">
+      <el-collapse-item
+        :name="vector.id"
+        v-for="(vector, index) in vectors"
+        :key="index"
+        :title="vector.label"
+      >
+        <div v-for="legend in vector.legends" :key="legend.label">
+          <span class="legLabel"> {{ legend.label }}</span>
+          <img :src="legend.url" alt="" srcset="" />
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LayerLegend",
+  props: {},
+  data() {
+    return {
+      activeNames: [],
+      vectors: [],
+    };
+  },
+  computed: {
+    checkedNodes() {
+      return store.state.checkedNode;
+    },
+  },
+  mounted() {},
+  methods: {
+    async GetLegend(vdata) {
+      let url = `${vdata.url}/legend.json?bbox=108.99%2C18.2%2C109.81%2C18.59`;
+      let res = await axios.get(url);
+      let legends = [];
+      res.data.layerLegends.forEach((la) => {
+        legends = [...legends, ...la.legends];
+      });
+      this.vectors.push({ id: vdata.id, label: vdata.label, legends });
+      // return legends;
+    },
+  },
+
+  watch: {
+    checkedNodes() {
+      this.vectors = [];
+      let vectors = this.checkedNodes.filter((ci) => ci.type == "Vector");
+      vectors.forEach((ve) => {
+        this.GetLegend(ve);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.legends {
+  position: absolute;
+  left: 40px;
+  top: 70vh;
+  width: 150px;
+  height: 200px;
+  cursor: pointer;
+  background: url(/static/images/ghzc/内容框.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  padding: 0px 10px;
+  box-sizing: content-box;
+  text-align: left;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .legLabel {
+    min-width: 100px;
+    display: inline-block;
+  }
+}
+.el-collapse {
+  // width: 95%;
+  border: none;
+  background-color: transparent !important;
+}
+.el-scrollbar {
+  border: 1px solid #0f7ac8 !important;
+  // padding: 0 10px;
+}
+.el-collapse-item__header {
+  // border-bottom: 1px solid rgba(102, 126, 143, 0.747);
+  background-color: transparent !important;
+  color: rgb(217, 237, 254) !important;
+  border-color: transparent !important;
+}
+
+.el-collapse-item__wrap {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+.el-collapse-item__content {
+  // background-color: rgba(255, 192, 203, 0.425) !important;
+  background-color: transparent !important;
+  color: rgb(217, 237, 254) !important;
+}
+
+// @import "../../../views/complianceAnalysis/ghzc.scss";
+</style>

src/components/Combinations/LayerManage/LayerManage.vue

@@ -1,12 +1,24 @@
 <template>
-  <layer-manage-split :addlayerdata="addlayerdata" @visibleChange="visibleChange" @transSliderChange="transSliderChange"
-    @handleCheckChange="handleCheckChange" @location="location" @raise="raise" @lower="lower"></layer-manage-split>
+  <div>
+    <layer-manage-split
+      :addlayerdata="addlayerdata"
+      @visibleChange="visibleChange"
+      @transSliderChange="transSliderChange"
+      @handleCheckChange="handleCheckChange"
+      @location="location"
+      @raise="raise"
+      @lower="lower"
+    ></layer-manage-split>
+    <LayerLegend></LayerLegend>
+  </div>
 </template>
 
 <script>
 import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
+import LayerLegend from "./LayerLegend.vue";
 export default {
   name: "LayerManage",
+  components: { LayerLegend },
   data() {
     return {
       modellayerlist: [],
@@ -279,7 +291,7 @@ export default {
         switch (obj.type) {
           case "S3M": //场景
             let s = viewer.scene.open(obj.url, undefined, {
-              autoSetView: obj.title != '倾斜摄影'
+              autoSetView: obj.title != "倾斜摄影",
             });
             this.vectorlayerlist.push(obj);
             this.promiseWhen([s], undefined, obj);
@@ -309,7 +321,6 @@ export default {
             // viewer.flyTo(layer);
             break;
           case "Vector": //矢量
-
             // let provider = new Cesium.SuperMapImageryProvider({
             //   url: obj.url,
             //   name: obj.title,
@@ -333,7 +344,6 @@ export default {
             //   })
             // );
 
-
             // var provider = new Cesium.SuperMapImageryProvider({ url: 'http://192.168.60.3:8099/iserver/services/map-GuiHuaDiKuai/rest/maps/GHDK%40%E8%A7%84%E5%88%92%E5%9C%B0%E5%9D%97' });
             // var layer2 = viewer.imageryLayers.addImageryProvider(provider);
             // var params = [
@@ -345,7 +355,6 @@ export default {
             // ]
             // provider.setLayerStatusParameters(params)
 
-
             let layer2 = viewer.imageryLayers.addImageryProvider(
               new Cesium.SuperMapImageryProvider({
                 url: obj.url,

src/components/Combinations/LayerManage/LayerManageSplit.vue

@@ -6,7 +6,7 @@
     </div>
     <Tabs value="">
       <TabPane :label="Resource.Resource" name="zyml">
-        <div class="zyml" :class="$props.splitId >=0 ? `zymlsplit` : ''">
+        <div class="zyml" :class="$props.splitId >= 0 ? `zymlsplit` : ''">
           <el-input
             :placeholder="Resource.InputPlaceholder"
             prefix-icon="el-icon-search"
@@ -193,7 +193,9 @@ export default {
 
   methods: {
     toggleVisibility() {
-      this.$props.splitId != -1 ? this.$emit("close") : store.setToolBarAction(0);
+      this.$props.splitId != -1
+        ? this.$emit("close")
+        : store.setToolBarAction(0);
     },
     setCheckedKeys(keys) {
       this.$refs.tree.setCheckedKeys(keys);
@@ -245,8 +247,16 @@ export default {
     transSliderChange(obj, v, a) {
       this.$emit("transSliderChange", obj, v, a);
     },
+    getCheckedNodes() {
+      if (this.$props.splitId < 0) {
+        //是否只是叶子节点
+        let checks = this.$refs.tree.getCheckedNodes(true);
+        store.setcheckedTreeNode(checks);
+      }
+    },
     // 复选框改变
     handleCheckChange(obj, checked) {
+      this.getCheckedNodes();
       console.log(obj, checked);
       if (typeof checked == "boolean") {
         obj.checked = checked;

src/store/store.js

@@ -30,6 +30,7 @@ var store2 = {
         vectorlayerlist: [],
         modellayerlist: [],
         layerparamslist: [],//影像
+        checkedNode: [],//资源目录勾选数据
         chooseLayer: [],
         flattenNames: [],//存储压平的名称数组
         S3MList: [],
@@ -41,8 +42,8 @@ var store2 = {
         cockpit_date: null,
         viewer_flag: true,
         cockpit_wpjg: {
-            title:{},
-            echart:{}
+            title: {},
+            echart: {}
         },
         cockpit_tdgy: {//土地供应
             gy_jg: {
@@ -155,6 +156,9 @@ var store2 = {
     setlayerparamsList(newValue) {
         this.state.layerparamslist = newValue;
     },
+    setcheckedTreeNode(newValue) {
+        this.state.checkedNode = newValue;
+    },
     setToolBarShow(newValue) {
         this.state.ToolBarShow = newValue;
     },