菜单

lxl

2022-11-07 c6a9b11ff0783bcd81a043a179fbc27f685eee70

 src/views/Synthesis/plotting.vue

@@ -1,75 +1,253 @@
<template>
  <div class="box">
    <div class="tooltip"></div>
    <input type="file" accept=".kml" class="file" style="display: none" />

    <ul>
      <li
        style="width: 86px"
        @click="changePlot(item)"
        v-for="item in itemsOne"
      >
      <li style="margin-left: 20px" @click="drawing">
        <div class="divli">
          <div :class="item.class" class="backimge8"></div>
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">{{ item.name }}</div>
        <div class="div_li">标绘</div>
      </li>
      <li style="margin-left: 20px" id="open">
        <div class="divli">
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">打开json</div>
      </li>
      <li style="margin-left: 20px" @click="save">
        <div class="divli">
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">保存json</div>
      </li>
      <li style="margin-left: 20px" @click="kmlopen">
        <div class="divli">
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">原生kml</div>
      </li>
      <li style="margin-left: 20px" @click="handleOpenClick">
        <div class="divli">
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">导入KML文件</div>
      </li>
      <li style="margin-left: 20px" @click="handleSaveClick">
        <div class="divli">
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">导出KML文件</div>
      </li>
    </ul>

    <terrainDig ref="terrainDig" />
    <modelPress ref="modelPress" />
  </div>
</template>

<script>
// 测量-信息弹窗
import terrainDig from "../Tools/terrainDig.vue";
import modelPress from "../Tools/modelPress.vue";
export default {
  components: { terrainDig, modelPress },
  data() {
    return {
      itemsOne: [
        {
          id: "1",
          name: "点",
          class: "h1",
        },
        {
          id: "2",
          name: "线",
          class: "h2",
        },
        {
          id: "3",
          name: "矩形",
          class: "h3",
        },
        {
          id: "4",
          name: "多边形",
          class: "h4",
        },
        {
          id: "7",
          name: "符号化标签",
          class: "h7",
        },
        {
          id: "5",
          name: "地形平整",
          class: "h5",
        },
        {
          id: "6",
          name: "地形开挖",
          class: "h6",
        },
        {
          id: "8",
          name: "清除绘制",
          class: "h8",
        },
      ],
      id: "",
      plotStatus: {
        delete: true,
        upload: true,
        insert: true,
        update: true,
      },
    };
  },
  created() {
    var cover_Id = this.$store.state.syntiesis.menu;
    var cover_perms = this.$store.state.permsEntity;

    for (var i = 0; i < cover_perms.length; i++) {
      if (cover_perms[i].pid == cover_Id) {
        this.showViewMenu(cover_perms[i]);
      }
    }
    layui.use("upload", function () {
      var upload = layui.upload;
      upload.render({
        elem: "#open",
        accept: "file", //普通文件
        auto: false,
        choose: function (obj) {
          var files = obj.pushFile();
          for (var key in files) {
            sgworld.Creator.SimpleGraphic.open(files[key]);
            break;
          }
        },
      });
    });
  },
  methods: {
    changePlot(res) {
      var res_val = {
        url: "",
        name: res.name,
    handleSaveClick() {
      let funDownload = function (content, filename) {
        let eleLink = document.createElement("a");
        eleLink.download = filename;
        eleLink.style.display = "none";
        // 字符内容转变成blob地址
        let blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      };
      this.$bus.$emit("changetool", res_val);
      let entities = new Cesium.EntityCollection();
      let dataSources = sgworld.Viewer.dataSources;
      for (let i = 0, j = dataSources.length; i < j; i++) {
        for (let v of dataSources.get(i).entities.values) {
          entities.add(v);
        }
      }
      for (let v of sgworld.Viewer.entities.values) {
        entities.add(v);
      }

      if (entities.values.length) {
        console.log(sgworld.Viewer.entities);

        let promise = Cesium.exportKml({ entities: sgworld.Viewer.entities });
        console.log(entities);
        // let promise = Cesium.exportKml({ entities: entities });
        promise.then(function (e) {
          
          funDownload(e.kml, new Date().getTime() + ".kml");
        });
      } else {
        alert("当前场景没有entities实体");
      }
    },
    handleOpenClick() {
      // let that = this;
      let fileInput = document.querySelector(".file");
      fileInput.onchange = function (evt) {
        let files = evt.target.files;
        if (files.length > 0) {
          let file = evt.target.files[0];

          let fileReader = new FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onload = () => {
            sgworld.Viewer.dataSources
              .add(
                Cesium.KmlDataSource.load(fileReader.result, {
                  camera: sgworld.Viewer.scene.camera,
                  canvas: sgworld.Viewer.scene.canvas,
                })
              )
              .then((KmlDataSource) => {
                console.log(KmlDataSource);
                // let entities = kmlDataSource.entities;
              });
          };

          // let fileReader = new FileReader();
          // fileReader.onload = function () {
          // sgworld.Viewer.dataSources
          // .add(
          //       Cesium.KmlDataSource.load(new Blob([this.result]), {
          //         camera: sgworld.Viewer.scene.camera,
          //         canvas: sgworld.Viewer.scene.canvas,
          //         clampToGround: false,
          //       })
          // )
          //     .then(function (kmlDataSource) {
          //       let entities = kmlDataSource.entities;
          //       let item = entities.values[entities.values.length - 1];
          //       sgworld.Viewer.zoomTo(entities);
          //     });
          //   fileInput = null;
          //   fileReader = null;
          // };
          // fileReader.readAsText(file);
        }
        // fileInput.value = null;
      };
      fileInput.click();
    },

    preview(event) {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      //监听文件读取结束后事件
      reader.onloadend = function (e) {
        $(".img").attr("src", e.target.result); //e.target.result就是最后的路径地址
      };
      // let files = document.getElementById(this.id).files[0];
      // this.imgDataUrl = this.getObjectURL(files);
      // // this.$emit("sendImgUrl", this.imgDataUrl, this.id);
      // console.log("sendImgUrl", this.imgDataUrl, this.id);
    },
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url;
    },
    showViewMenu(res) {
      if (res.cnName != "标绘") return;
      switch (res.tag) {
        case "/delete":
          this.plotStatus.delete = true;
          break;
        case "/upload":
          this.plotStatus.upload = true;
          break;
        case "/insert":
          this.plotStatus.insert = true;
          break;
        case "/update":
          this.plotStatus.update = true;
          break;
      }
    },
    save() {
      // var val_result = sgworld.Viewer.entities._entities._array;
      // console.log(val_result[0]);
      // console.log(sgworld.Core);
      // console.log(sgworld.Core.getEntityPropValue(val_result[0], show));
      sgworld.Creator.SimpleGraphic.save();
    },
    kmlopen() {
      sgworld.Creator.addKmlLayer(
        "kml数据",
        "http://183.162.245.49:82/sdkdemo_2022/demo/kml/facilities/facilities.kml",
        true
      );
    },
    drawing() {
      this.$emit("drawing");
    },
    clearAll() {
      sgworld.Creator.SimpleGraphic.clear();
      if (window.Excavation) {
        window.Excavation.clear();
        window.Excavation = null;
      }
      if (window.TerrainFlattening) {
        window.TerrainFlattening.remove();
        window.TerrainFlattening = null;
      }
    },
  },
};
@@ -81,6 +259,7 @@
  height: 100%;
  position: relative;
}

.box li {
  list-style: none;
  float: left;
@@ -127,9 +306,9 @@
.backimge8 {
  width: 30px;
  height: 30px;
  margin-left: 30px;
  position: absolute;
  background-size: 100% 100%;
  margin: 0% 30%;
}
.divli {
  width: 100%;