spotcheck-management/src/views/remote/farmland/index.vue

<template>
  <div id="mapApp">
    <div class="btn" v-if="nowObj.qsx">
      <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
      <span class="sx qsx">前时相:{{ nowObj.qsx }}</span>
      <span class="sx hsx">后时相:{{ nowObj.hsx }}</span>
    </div>
    <MapView :maptype="maptype" ref="MapView" />

    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      :modal="false"
      :wrapperClosable="false"
      modal-class="mask-layer"
    >
      <div class="jctbCon">
        <div class="tbTitle">
          <span>检测图斑{{ newObj.name }}</span>

          <el-input
            placeholder="请输入监测编号查询"
            prefix-icon="el-icon-search"
            v-model="queryParams.jcbh"
          >
          </el-input>
          <el-button>下载</el-button>
        </div>
        <div class="numCard">
          <div class="cardItem">
            <span>检测图斑个数(个):</span>
            <span>{{ newObj.spotsnumber }}</span>
          </div>
          <div class="cardItem jc">
            <span>监测面积(亩):</span>
            <span>{{ newObj.spotsarea }}</span>
          </div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <!-- @cell-click="tableClick" -->
          <el-table-column prop="jcbh" label="监测编号" width="220">
            <template slot-scope="scope">
              <span style="cursor: pointer" @click="tableClick(scope.row)">{{
                scope.row.jcbh
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="xmc" label="区县名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="jcmj"
            label="监测面积(亩)"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.stop="handleDetails(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-drawer>
    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails>
    </el-dialog>
  </div>
</template>
  
  <script>
import MapView from "../MapView.vue";
import CustomDetails from "@/components/custom-detailsInfo.vue";
import parse from "wellknown";
import { getPcsj, listPcsjXQList, getPcsjXQ } from "@/api/supervise/pcsj";
import { detailInfos } from "./config";
import "ol/ol.css";
// import { get as getProjection, transform } from "ol/proj.js";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import Feature from "ol/Feature";
import LineString from "ol/geom/LineString";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import { Vector as LayerVec } from "ol/layer";
import { Style, Icon } from "ol/style";
import { Point } from "ol/geom";
import { Vector as SourceVec, XYZ } from "ol/source";
import Tile from "ol/layer/Tile";
import { OSM } from "ol/source";
import * as control from "ol/control";
import * as coordinate from "ol/coordinate";
import ImageLayer from "ol/layer/Image";
import ImageStatic from "ol/source/ImageStatic";
import Draw from "ol/interaction/Draw";
import GeoJSON from "ol/format/GeoJSON";
import { transform } from "@/utils/transformUtils";
import { removeWebGLTile, addTiff } from "@/utils/help";

export default {
  components: {
    MapView,
    CustomDetails,
  },
  data() {
    return {
      maptype: "normal",
      total: 0,
      queryParams: {
        jcbh: "", //监测编号
        pageNum: 1,
        pageSize: 10,
        pcsjid: this.$route.query.id,
      },
      drawer: true,
      direction: "rtl",

      tableData: [],
      newObj: {
        name: "f52d8b03a7214d9098ca44a7ea641d9b",
        spotsnumber: 0,
        spotsarea: 0,
      },
      curPageResultLayer: {},
      vectorLayer: {},
      nowObj: {},
      itemObj: {}, //用于存储分屏高亮的实体
      dialogVisible: false,
      infoObj: {},
      detailInfos: detailInfos,
    };
  },
  mounted() {
    console.log(this.$route.query);
    // 绑定事件，编写回调函数
    this.$nextTick(() => {
      getPcsj(this.$route.query.id).then((response) => {
        this.newObj = response.data;
      });
      this.getList();
    });
  },

  methods: {
    tableClick(row) {
      removeWebGLTile("mapCon1");
      removeWebGLTile("mapCon2");
      let urlQsx = this.newObj.proxypath + row.qsxtif;
      let urlHsx = this.newObj.proxypath + row.hsxtif;
      if (this.nowObj.id != row.id) {
        this.maptype = "split";
        this.nowObj = row;
        addTiff("mapCon1", urlQsx);
        addTiff("mapCon2", urlHsx);
        this.test(row);
      } else {
        this.maptype = "normal";
        this.nowObj = {};
      }
    },

    getList() {
      listPcsjXQList(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        // this.open = true;
        // this.title = "修改监管批次数据";
        this.initVectorLayer("mapDiv");
        this.initVectorLayer("mapCon1");
        this.initVectorLayer("mapCon2");
        this.addGeoJson("mapDiv");
        this.addGeoJson("mapCon1");
        this.addGeoJson("mapCon2");
      });
    },
    handleDetails(row) {
      getPcsjXQ(row.id).then((res) => {
        this.infoObj = res.data;
        this.dialogVisible = true;
      });
    },
    handleClose() {
      this.drawer = false;
    },
    test(item) {
      window.map["mapCon1"].removeLayer(this.itemObj);
      window.map["mapCon2"].removeLayer(this.itemObj);

      if (item.geom && item.geom != "") {
        if (typeof item.geom === "string") {
          let geom = this.tableData[i].geom;
          item.geom = parse(geom);
        }
        let features = new GeoJSON().readFeatures(item.geom);
        this.itemObj = new VectorLayer({
          source: new VectorSource({
            features: features,
          }),
          style: function (feature) {
            return new Style({
              fill: new Fill({
                //矢量图层填充颜色，以及透明度
                color: "#f006",
              }),
              stroke: new Stroke({
                //边界样式
                color: "rgba(255, 0, 0, 1)",
                width: 2,
              }),
            });
          },
          zIndex: 9999,
        });
        let fullExtent = this.itemObj.getSource().getExtent();
        window.map["mapCon1"].getView().fit(fullExtent, {
          duration: 3, //动画的持续时间,
          callback: null,
        });
        window.map["mapCon1"].addLayer(this.itemObj);
        window.map["mapCon2"].addLayer(this.itemObj);
      }
    },

    addGeoJson(name) {
      this.tableData.forEach((titem, i) => {
        if (titem.geom && titem.geom != "") {
          if (typeof titem.geom === "string") {
            // let geom = transform(this.tableData[i].geom);
            let geom = this.tableData[i].geom;
            titem.geom = parse(geom);
          }
          let features = new GeoJSON().readFeatures(titem.geom);
          this.curPageResultLayer[name].getSource().addFeatures(features);
        }
      });
      let fullExtent = this.curPageResultLayer[name].getSource().getExtent();
      window.map[name].getView().fit(fullExtent, {
        duration: 3, //动画的持续时间,
        callback: null,
      });
    },
    /**
     * 初始化地图矢量图层
     */
    initVectorLayer(name) {
      if (!this.vectorLayer[name]) {
        let vectorSource = new VectorSource({
          // projection: "EPSG:3857",
        });
        this.vectorLayer[name] = new VectorLayer({
          source: vectorSource,
          style: new Style({
            stroke: new Stroke({
              color: "#f00",
              width: 2,
            }),
          }),
        });
        window.map[name].addLayer(this.vectorLayer[name]);
      }
      if (!this.curPageResultLayer[name]) {
        let vectorSource = new VectorSource();
        this.curPageResultLayer[name] = new VectorLayer({
          source: vectorSource,
          zIndex: 999,
          style: new Style({
            stroke: new Stroke({
              color: "#1f1cd3",
              width: 2,
            }),
          }),
        });
        window.map[name].addLayer(this.curPageResultLayer[name]);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  // position: absolute;
  // top: 0;
  // left: 60px;
  // z-index: 40;
  .sx {
    background: rgb(151, 250, 222);
    padding: 5px 10px;
    border: 1px solid #4949492b;
    border-radius: 5px;
    position: absolute;
    top: 20px;
    left: calc(50% - 420px);
    z-index: 40;
  }
  .hsx {
    left: calc(50% - 220px);
  }
}
// .mask-layer{
//   width: 264px !important;
// }
::v-deep .el-drawer__wrapper {
  position: static !important;
}
::v-deep .el-drawer__container {
  position: static !important;
}
.jctbCon {
  .tbTitle {
    display: flex;
    justify-content: space-around;
    ::v-deep .el-input {
      width: 40%;
    }
  }
  .numCard {
    width: 100%;
    height: 120px;
    display: flex;
    // background-color: rgba(255, 192, 203, 0.272);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .cardItem {
      width: 230px;
      height: 85px;
      background: linear-gradient(
        180deg,
        rgba(30, 198, 149, 1) 0%,
        rgba(30, 198, 149, 1) 0%,
        rgba(51, 204, 204, 1) 100%,
        rgba(51, 204, 204, 1) 100%
      );
      border: none;
      border-radius: 4px;
      -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
      -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      span {
        display: inline-block;
        width: 100%;
        height: 39%;
        // background: #faebd78c;
        text-align: center;
      }
    }
    .jc {
      background: linear-gradient(
        90deg,
        rgba(244, 174, 149, 1) 0%,
        rgba(244, 174, 149, 1) 0%,
        rgba(226, 113, 140, 1) 100%,
        rgba(226, 113, 140, 1) 100%
      );
    }
  }
}
</style>
  <style  scoped>
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
#mapApp {
  width: 100%;
  height: 100%;
}
</style>