菜单

lxl

2022-11-07 c6a9b11ff0783bcd81a043a179fbc27f685eee70

 src/views/Synthesis/plotting.vue

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

    <ul>
      <li
        style="margin-left: 20px"
        @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">{{ $t(item.name) }}</div>
        <div class="div_li">标绘</div>
      </li>
      <li v-if="plotStatus.delete" style="margin-left: 20px">
      <li style="margin-left: 20px" id="open">
        <div class="divli">
          <div class="backimge8"><i class="el-icon-delete"></i></div>
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">删除</div>
        <div class="div_li">打开json</div>
      </li>
      <li v-if="plotStatus.upload" style="margin-left: 20px">
      <li style="margin-left: 20px" @click="save">
        <div class="divli">
          <div class="backimge8"><i class="el-icon-upload2"></i></div>
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">上传</div>
        <div class="div_li">保存json</div>
      </li>
      <li v-if="plotStatus.upload" style="margin-left: 20px">
      <li style="margin-left: 20px" @click="kmlopen">
        <div class="divli">
          <div class="backimge8"><i class="el-icon-plus"></i></div>
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">新增</div>
        <div class="div_li">原生kml</div>
      </li>
      <li v-if="plotStatus.upload" style="margin-left: 20px">
      <li style="margin-left: 20px" @click="handleOpenClick">
        <div class="divli">
          <div class="backimge8"><i class="el-icon-edit"></i></div>
          <div class="backimge8 h1"></div>
        </div>
        <div class="div_li">修改</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>
@@ -43,60 +49,19 @@

<script>
// 测量-信息弹窗
import terrainDig from '../Tools/terrainDig.vue';
import modelPress from '../Tools/modelPress.vue';
import terrainDig from "../Tools/terrainDig.vue";
import modelPress from "../Tools/modelPress.vue";
export default {
  components: { terrainDig, modelPress },
  data() {
    return {
      id: "",
      plotStatus: {
        delete: false,
        upload: false,
        insert: false,
        update: false,
        delete: true,
        upload: true,
        insert: true,
        update: true,
      },
      itemsOne: [
        {
          id: '1',
          name: 'synthesis.point',
          class: 'h1',
        },
        {
          id: '2',
          name: 'synthesis.line',
          class: 'h2',
        },
        {
          id: '3',
          name: 'synthesis.rectangle',
          class: 'h3',
        },
        {
          id: '4',
          name: 'synthesis.polygon',
          class: 'h4',
        },
        {
          id: '7',
          name: 'synthesis.symboliclabel',
          class: 'h7',
        },
        {
          id: '5',
          name: 'synthesis.flatterrain',
          class: 'h5',
        },
        {
          id: '6',
          name: 'synthesis.terrainexcavation',
          class: 'h6',
        },
        {
          id: '8',
          name: 'synthesis.removepaint',
          class: 'h8',
        },
      ],
    };
  },
  created() {
@@ -108,80 +73,170 @@
        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: {
    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);
      };
      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;
      if (res.cnName != "标绘") return;
      switch (res.tag) {
        case '/delete':
        case "/delete":
          this.plotStatus.delete = true;
          break;
        case '/upload':
        case "/upload":
          this.plotStatus.upload = true;
          break;
        case '/insert':
        case "/insert":
          this.plotStatus.insert = true;
          break;
        case '/update':
        case "/update":
          this.plotStatus.update = true;
          break;
      }
    },
    changePlot(res) {
      switch (res.id) {
        case '1':
          sgworld.Creator.createSimpleGraphic(
            'point',
            {},
            function (entity) {}
          );
          break;
        case '2':
          sgworld.Creator.createSimpleGraphic(
            'polyline',
            {},
            function (entity) {}
          );
          break;
        case '3':
          sgworld.Creator.createSimpleGraphic(
            'rectangle',
            {},
            function (entity) {}
          );
          break;
        case '4':
          sgworld.Creator.createSimpleGraphic(
            'polygon',
            {},
            function (entity) {}
          );
          break;
        case '6':
          if (window.Excavation) {
            window.Excavation.clear();
            window.Excavation = null;
          } else {
            this.$refs.terrainDig.open();
          }

          break;
        case '5':
          if (window.TerrainFlattening) {
            window.TerrainFlattening.remove();
            window.TerrainFlattening = null;
          } else {
            this.$refs.modelPress.open();
          }

          break;
        case '7':
          sgworld.Creator.createModelLibrary();
          break;
        case '8':
          this.clearAll();
          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();
@@ -204,6 +259,7 @@
  height: 100%;
  position: relative;
}

.box li {
  list-style: none;
  float: left;
@@ -218,34 +274,34 @@
  margin: 0px;
}
.h1 {
  background: url('../../assets/img/synthesis/椭圆 5 拷贝 3.png') no-repeat
  background: url("../../assets/img/synthesis/椭圆 5 拷贝 3.png") no-repeat
    center;
}
.h2 {
  background: url('../../assets/img/synthesis/椭圆 3 拷贝 16.png') no-repeat
  background: url("../../assets/img/synthesis/椭圆 3 拷贝 16.png") no-repeat
    center;
}
.h3 {
  background: url('../../assets/img/synthesis/椭圆 3 拷贝 20.png') no-repeat
  background: url("../../assets/img/synthesis/椭圆 3 拷贝 20.png") no-repeat
    center;
}
.h4 {
  background: url('../../assets/img/synthesis/椭圆 3 拷贝 23.png') no-repeat
  background: url("../../assets/img/synthesis/椭圆 3 拷贝 23.png") no-repeat
    center;
}
.h5 {
  background: url('../../assets/img/synthesis/矩形 14 拷贝.png') no-repeat
  background: url("../../assets/img/synthesis/矩形 14 拷贝.png") no-repeat
    center;
}
.h6 {
  background: url('../../assets/img/synthesis/矩形 14 拷贝 7.png') no-repeat
  background: url("../../assets/img/synthesis/矩形 14 拷贝 7.png") no-repeat
    center;
}
.h7 {
  background: url('../../assets/img/synthesis/文本风格.png') no-repeat center;
  background: url("../../assets/img/synthesis/文本风格.png") no-repeat center;
}
.h8 {
  background: url('../../assets/img/synthesis/清除.png') no-repeat center;
  background: url("../../assets/img/synthesis/清除.png") no-repeat center;
}
.backimge8 {
  width: 30px;