real3d-portalsite/src/components/mapView/range.vue

<template>
  <div class="map-range">
    <div class="fwlxrange">
      <div :class="model.xzmj == 0 ? 'pointer' : ''" @click="drawMap">
        <el-button plain v-if="model.xzmj == 0" icon="edit-pen" size="mini"
          >绘制</el-button
        >
        <span v-if="model.xzmj != 0">{{ model.xzmj }} m²</span>
      </div>
      <el-upload
        class="upload-demo"
        :on-change="handleChange"
        :auto-upload="false"
        :show-file-list="false"
        :file-list="fileList"
      >
        <el-tooltip
          v-if="fileList.length > 0"
          :content="fileList[0].name"
          placement="bottom-start"
          effect="light"
        >
          <span class="title-item" style="display: inline-block; width: 100%">{{
            fileList[0].name
          }}</span>
        </el-tooltip>
        <el-button v-else class="upload-btn" icon="Upload" size="mini"
          >导入</el-button
        >
      </el-upload>
      <div class="clear" @click="clearAll">清除</div>
    </div>
  </div>
</template>

<script>
import { ShapeUpload } from "@/api/ghss/hgxfx.js";
import { ElMessage } from "element-ui";
export default {
  components: {},
  props: {
    //启用的组件，不传为所有
    keys: {
      type: Array,
      default: ["xzq", "hx", "sc", "zbd"],
    },
    activeTabs: {
      type: String,
    },
  },
  data() {
    return {
      userXZQ: "", //store.state.user.user.dept.district,
      fwlist: {
        xzq: {
          id: 0,
          name: "行政区",
          icon: "wind-power",
        },
        hx: {
          id: 1,
          name: "绘制",
          icon: "Share",
        },
        sc: {
          id: 2,
          name: "上传",
          icon: "Upload-filled",
        },
        zbd: {
          id: 3,
          name: "坐标点",
          icon: "Location",
        },
      },
      model: {
        fwlx: 0,
        xzfw: "",
        xzmj: 0,
        feature: null,
      },
      handlerDraw: null,
      draw: null, //绘制
      fileList: [], //文件
    };
  },
  mounted() {
    this.model.fwlx = this.fwlist[this.$props.keys[0]].id;
  },
  methods: {
    //切换
    onChangeRange(fwlx) {
      this.clearAll();
      this.model.fwlx = fwlx;
    },

    //上传文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
        this.clearAll();
      }
      const formdata = new FormData();
      formdata.append("file", file.raw);
      this.addPolygon();
      ShapeUpload(formdata).then((res) => {
        if (res.success) {
          // var layer = myMap.addGeoJson("common_layer", res.data.geojson);
          // var url = `${SYS_LAYERS.XZQXZ}/0/query`;
          // var geom = layer.getSource().getFeatures()[0].getGeometry();
          // 判断绘制范围是否在行政区范围内
          let withinRange = true;
          // arcMap.SearchWfsData(url, geom, function (fs) {
          //   if (fs.length) {
          //     fs.map((res) => {
          //       let xzqdm = res.get("XZQDM");
          //       if (!xzqdm.startsWith(this.userXZQ)) {
          //         withinRange = false;
          //       }
          //     });
          //   } else {
          //     withinRange = false;
          //   }
          if (withinRange) {
            this.model.xzfw = res.data.filepath;
            //     this.model.feature = layer.getSource().getFeatures()[0];
            //     this.model.xzmj = new OLTool().Tools.formatArea(
            //       this.model.feature.getGeometry(),
            //       true
            //     );
            //     myMap.zoomToextent(layer.getSource().getExtent());
          } else {
            //     this.clearAll();
            //     ElMessage.warning("分析范围超出了权限范围，请重新上传文件！");
          }
          // });
        }
      });
    },
    // 加载GeoJSON数据
    addPolygon() {
      // let geojson = CX_geojeson;
      let polygon = Cesium.GeoJsonDataSource.load(
        "/static/data/ghss/导入.geojson"
        // { clampToGround: true }
      );
      polygon.then(function (dataSource) {
        // 将数据源添加到Cesium Viewer
        viewer.dataSources.add(dataSource);
        viewer.zoomTo(dataSource);
        // 可以获取实体并进行操作
        // var entities = dataSource.entities.values;
        // for (var i = 0; i < entities.length; i++) {
        //   var entity = entities[i];
        //   // 你可以在这里设置实体的属性，例如位置、颜色等
        // }
      });
    },
    //绘制
    drawMap() {
      if (!window.handlerPolygon) {
        common.initHandler("Polygon");
      }
      common.handlerDrawing("Polygon").then(
        (res) => {
          console.log(res.positions, "------");
        },
        (err) => {
          console.log(err);
        }
      );
      window.handlerPolygon.activate();
    },
    clear() {
      if (this.handlerDraw != null) {
        this.handlerDraw.clear();
        viewer.scene.globe.removeAllExcavationRegion();
        this.handlerDraw.deactivate();
        this.handlerDraw = null;
        this.result = null;
      }
    },

    //清除
    clearAll() {
      this.model.xzfw = "";
      this.model.xzmj = 0;
      common.clearHandlerDrawing("Polygon");
    },
    //输出：重置
    reset() {
      this.model = {
        fwlx: this.fwlist[this.$props.keys[0]].id,
        xzfw: "",
        xzmj: 0,
      };
      this.fileList = []; //文件
      this.clearAll();
    },
    //输出：获取范围
    getRange() {
      return this.model;
    },
  },

  // watch(
  //     () => prop.activeTabs,
  //     (newValue, oldValue) => {
  //       this.getXzq();
  //     }
  //   );
};
</script>

<style lang="scss" scoped>
.map-range {
  width: 100px;
  // height: 100px;
  color: #fff;
  .xz_type {
    margin-bottom: 10px;
    // display: flex;
    // justify-content: space-between;
    .keyitem {
      width: 100px;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      display: inline-block;
      cursor: pointer;
    }
  }
  .fwlxrange {
    display: flex;
    justify-content: space-between;
    text-align: center;
    .clear {
      width: 80px;
    }
  }
}
</style>