在线制图，图层列表修改

Surpriseplus

2023-06-14 d50cc12c336b28c94d02c6ce05a73a48ed5d8bd5

 src/views/exportMap/index.vue

@@ -1,24 +1,29 @@
<template>
  <div
    id="mapView"
    class="MapBox"
    class="MapBox "
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="topMenu">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <div class="topMenu box_divm">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-link
            style="color: white"
            @click="showLeftMenu(1)"
            :underline="false"
            title="图层列表"
            ><i class="el-icon-s-operation"></i
          ></el-link>
          ><i class="el-icon-s-operation"></i></el-link>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value" placeholder="请选择">
          <el-select
            :popper-append-to-body="false"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
@@ -31,63 +36,52 @@

        <el-form-item>
          <el-link
            style="color: white"
            @click="setMapAddDraw()"
            @click="drawRegularPolygon()"
            :underline="false"
            ><i class="el-icon-edit-outline"></i>绘制</el-link
          >
          ><i class="el-icon-edit-outline"></i>绘制</el-link>
        </el-form-item>
        <el-form-item>
          <el-link
            :disabled="layerExtent == null"
            style="color: white"
            @click="setMapRemoveDraw()"
            :underline="false"
            title="图层列表"
            ><i class="el-icon-delete"></i>清除</el-link
          >
          ><i class="el-icon-delete"></i>清除</el-link>
        </el-form-item>

        <el-form-item>
          <el-link
            style="color: white"
            @click="showMapApply = true"
            :underline="false"
            :disabled="layerExtent == null"
            >出图申请
          </el-link></el-form-item
        >
          >出图申请
          </el-link>
        </el-form-item>
        <el-form-item>
          <el-link
            style="color: white"
            @click="getShowMapList"
            :underline="false"
            >出图列表</el-link
          ></el-form-item
        >
          >出图列表</el-link>
        </el-form-item>
        <el-form-item>
          <el-link
            style="color: white"
            @click="changeMenulayer"
            :underline="false"
            v-show="isActive"
            >影像</el-link
          >
          >影像</el-link>
          <el-link
            style="color: white"
            v-show="!isActive"
            @click="changeMenulayer"
            :underline="false"
            >矢量</el-link
          >
          >矢量</el-link>
        </el-form-item>
        <el-form-item label="旋转角度">
        <!-- <el-form-item label="旋转角度">
          <el-input
            v-model="formInline.role"
            placeholder="请输入内容"
            @change="setMapRole"
          ></el-input>
        </el-form-item>
        </el-form-item> -->
      </el-form>
    </div>
    <div
@@ -95,21 +89,27 @@
      class="left_Menu"
      :class="{ left_main_show: !leftMenuOpen }"
    >
      <div class="menu_content">
        <div class="topHeader" v-show="lefMenuContent">
      <div class="menu_content box_divm">
        <div
          class="topHeader"
          v-show="lefMenuContent"
        >
          <div>图层列表</div>
          <div @click="showLeftMenu(2)"><i class="el-icon-s-fold"></i></div>
        </div>
        <el-divider></el-divider>
        <div class="bottomContent">
          <div style="width: 100%" v-show="lefMenuContent">
          <div
            style="width: 100%"
            v-show="lefMenuContent"
          >
            <el-tree
              :data="data"
              :data="treeData"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              :default-expanded-keys="[1]"
              @check-change="handleTreeNodeClick"
              @check="handleTreeNodeClick"
              ref="tree"
            >
            </el-tree>
@@ -118,70 +118,107 @@
      </div>
    </div>

    <div class="mapApplay" v-if="showMapApply">
    <div
      class="mapApplay box_divm"
      v-if="showMapApply"
    >
      <label>出图申请</label>
      <el-divider />
      <el-form ref="form" :model="form" label-width="80px">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="出图名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-input
            v-model="formInline.role"
            placeholder="请输入旋转角度(0-360)"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-table
            ref="singleTable"
            :data="tableData"
            style="width: 100%"
            height="200"
          >
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
          <div style="padding: 1%;  ">
            <el-table
              ref="singleTable"
              :data="tableData"
              style="width: 100%"
              height="200"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
              >
              </el-table-column>

            <el-table-column property="name" label="图层名称">
            </el-table-column>
          </el-table>
              <el-table-column
                property="name"
                label="图层名称"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="setMapApply">立即创建</el-button>
          <el-button
            type="primary"
            @click="setMapApply"
          >立即创建</el-button>
          <el-button @click="showMapApply = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mapApplay" v-if="showMapList">
      <div>
        <label>出图列表</label>
        <div style="float: right">
          <el-link @click="showMapList = false" :underline="false"
            ><i style="color: white" class="el-icon-close"></i
          ></el-link>
        </div>
      </div>
      <el-divider />

    <el-dialog
      title="出图列表"
      :visible.sync="showMapList"
    >
      <el-table
        ref="singleTable"
        :data="exportable"
        style="width: 100%"
        border
        height="200"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" width="50" label="序号">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        >
        </el-table-column>
        <el-table-column property="name" label="名称"> </el-table-column>
        <el-table-column property="type" label="类型"> </el-table-column>
        <el-table-column
          property="descr"
          label="标题"
        > </el-table-column>
        <el-table-column
          property="name"
          label="文件名称"
        > </el-table-column>
        <el-table-column
          property="createName"
          label="出图人"
        >
        </el-table-column>
        <el-table-column
          property="createTime"
          :formatter="formatTime"
          label="日期"
        >
        </el-table-column>
        <el-table-column property="descr" label="描述"> </el-table-column>
        <el-table-column label="操作" width="120">

        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-link
              style="color: white"
              @click.native.prevent="downloadMap(scope.$index, scope.row)"
              :underline="false"
              >下载</el-link
            >
            >下载</el-link>
          </template>
        </el-table-column>
      </el-table>
@@ -190,22 +227,25 @@
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listdata.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>

    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="layerform" :model="layerform" label-width="80px">
      <el-form
        ref="layerform"
        :model="layerform"
        label-width="80px"
      >
        <el-form-item label="服务名称">
          <el-input v-model="layerform.name"></el-input>
        </el-form-item>
@@ -215,38 +255,51 @@
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务地址">
          <el-input type="textarea" v-model="layerform.resource"></el-input>
          <el-input
            type="textarea"
            v-model="layerform.resource"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setAddMapLayer">确 定</el-button>
        <el-button
          type="primary"
          @click="setAddMapLayer"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImageWMS from 'ol/source/ImageWMS';
import Map from 'ol/Map';
import XYZ from 'ol/source/XYZ';
import View from 'ol/View';
import Image from 'ol/layer/Image';
import TileLayer from 'ol/layer/Tile';
import { transform } from 'ol/proj';
import Draw, { createRegularPolygon, createBox } from 'ol/interaction/Draw.js';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import LayerVector from 'ol/layer/Vector';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';
import mapviewVue from '../../components/mapview.vue';
import { removeToken, getToken } from '@/utils/auth';
import $ from 'jquery';
import { exportSelectByPage } from '../../api/api.js';
import moment from 'moment';
import ImageWMS from "ol/source/ImageWMS"
import Map from "ol/Map"
import XYZ from "ol/source/XYZ"
import View from "ol/View"
import { OverviewMap, defaults as defaultControls, FullScreen, ScaleLine, Rotate } from "ol/control.js"
import Image from "ol/layer/Image"
import TileLayer from "ol/layer/Tile"
import { transform } from "ol/proj"
import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw.js"


import { OSM, Vector as VectorSource } from "ol/source"
import { Vector as VectorLayer } from "ol/layer"
import LayerVector from "ol/layer/Vector"
import Style from "ol/style/Style"
import Fill from "ol/style/Fill"
import Stroke from "ol/style/Stroke"
import Circle from "ol/style/Circle"
import mapviewVue from "../../components/mapview.vue"
import { removeToken, getToken } from "@/utils/auth"
import $ from "jquery"
import { exportSelectByPage, perms_selectLayers } from "../../api/api.js"
import moment from "moment"
import { image_layer } from "../../assets/js/index.js"
export default {
  data() {
    return {
@@ -262,61 +315,29 @@
      rowtype: true,
      loading: false,
      form: {},
      formInline: { role: '' },
      formInline: { role: "" },
      layerform: {},
      tableData: [],
      exportable: [],
      multipleSelection: [],
      options: [
        { label: 'A0', value: 'A0' },
        { label: 'A1', value: 'A1' },
        { label: 'A2', value: 'A2' },
        { label: 'A3', value: 'A3' },
        { label: 'A4', value: 'A4' },
        { label: 'A5', value: 'A5' },
        { label: 'A6', value: 'A6' },
        { label: "A0", value: "A0" },
        { label: "A1", value: "A1" },
        { label: "A2", value: "A2" },
        { label: "A3", value: "A3" },
        { label: "A4", value: "A4" },
        // { label: "A5", value: "A5" },
        // { label: "A6", value: "A6" },
      ],
      value: 'A4',
      data: [
        {
          id: 1,
          label: '图层',
          children: [
            {
              id: 11,
              label: '项目',
              value: '项目',
              layer: 'LF:bs_project',
              isEdit: false,
            },
            {
              id: 12,
              label: '站场',
              value: '站场',
              layer: 'LF:m_sitepoint',
              isEdit: false,
            },
            {
              id: 13,
              label: '管道中心线',
              value: '管道中心线',
              layer: 'LF:m_pipeline',
              isEdit: false,
            },
            {
              id: 14,
              label: '战略通道',
              value: '战略通道',
              layer: 'LF:th_strategic_channel',
              isEdit: false,
            },
          ],
        },
      ],
      value: "A4",
      treeData: [],
      arrList: [],
      layername: [
        1, 2, 5, 13, 15, 16, 31
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
        children: "children",
        label: "cnName",
      },
      draw: null,
      vector: null,
@@ -328,304 +349,491 @@
        pageIndex: 1,
      },
      count: 0,
    };

    }
  },

  mounted() {
    this.initMap();
    this.showMapLayer();
    this.LayerStart()
    this.initMap()

  },
  methods: {
    showMapLayer() {
      var val = this.data[0].children;
      var std = [];
      for (var i = 0; i < val.length; i++) {
        var layer2 = new Image({
          name: val[i].label,
          source: new ImageWMS({
            crossOrigin: 'anonymous',
            url: geoServerURl,
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        // 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
      });
    },
    async LayerStart() {
      this.treeData = [];
      const data = await perms_selectLayers()
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败")
      }
      var res = data.result;

      const val = [];
      const std = [];
      const layerWMS = [];
      for (var i = 0; i < res.length; i++) {
        var str = res[i];

        if (str.type == 1 && str.cnName.indexOf('模型') == -1 && str.cnName.indexOf('倾斜摄影') == -1 && str.cnName.indexOf('数字正射影像') == -1 && str.isProject != 1) {
          val.push(str)
        }

        if (str.url != null && str.type == 2 && str.serveType == 'WMS') {

          if (str.isShow == 1) {
            std.push(str.id)
            layerWMS.push(str)
            this.tableData.push({
              name: str.cnName,
              ename: str.enName,
            })
          }
          val.push(str)
        }
      }
      const val_data = val.filter(ts => {
        if (ts.type == 1) {
          return ts
        }
        if (ts.url != null && ts.type == 2 && ts.serveType == 'WMS') {
          return ts
        }
      })
      var layer_data = this.setTreeData(val_data);
      this.treeData = layer_data;
      this.$refs.tree.setCheckedKeys(std)
      this.showMapLayer(layerWMS);
    },







    setClearMap() {
      var layers_ol = mapView.getAllLayers();
      for (var i in layers_ol) {
        var layerOl = layers_ol[i];
        if (layerOl.values_.name == "Wms_Layer") {
          mapView.removeLayer(layers_ol[i]); //显示图层
        }
      }
    },
    showMapLayer(val) {
      if (val) {
        this.setClearMap();
        var url = [];
        for (var i in val) {
          console.log(val[i])
          if (val[i].url) {
            url.push(val[i].url)
          }

        }
        url = url.reverse()
        console.log(url)
        var layer2 = new Image({
          name: "Wms_Layer",
          source: new ImageWMS({
            crossOrigin: "anonymous",
            url: geoServerURl,
            params: {
              FORMAT: 'image/png',
              VERSION: '1.1.1',
              LAYERS: val[i].layer,
              FORMAT: "image/png",
              VERSION: "1.1.1",
              LAYERS: url.toString(),
            },
          }),
        });
        mapView.addLayer(layer2);
        std.push(val[i].id);
        mapView.addLayer(layer2)
      }
      this.$refs.tree.setCheckedKeys(std);

    },
    showLeftMenu(res) {
      switch (res) {
        case 1:
          this.leftMenuOpen = !this.leftMenuOpen;
          break;
          this.leftMenuOpen = !this.leftMenuOpen
          break
        case 2:
          this.leftMenuOpen = false;
          break;
          this.leftMenuOpen = false
          break
      }
      if (this.leftMenuOpen == true) {
        setTimeout(() => {
          this.lefMenuContent = true;
        }, 200);
          this.lefMenuContent = true
        }, 200)
      } else {
        setTimeout(() => {
          this.lefMenuContent = false;
        }, 1100);
          this.lefMenuContent = false
        }, 1100)
      }
    },
    formatTime(row, column) {
      let date = row[column.property];
      let date = row[column.property]
      if (date === undefined || date === null) {
        return '';
        return ""
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
      return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss")
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = val;
      this.getShowMapList();
      this.listdata.pageIndex = 1
      this.listdata.pageSize = val
      this.getShowMapList()
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getShowMapList();
      this.listdata.pageIndex = val
      this.getShowMapList()
    },
    async getShowMapList() {
      this.showMapList = true;
      const data = await exportSelectByPage(this.listdata);
      this.showMapList = true
      const data = await exportSelectByPage(this.listdata)

      this.exportable = data.result;
      this.exportable = data.result

      this.count = data.count;
      this.count = data.count
    },
    getYMD() {
      let myDate = new Date();
      let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let myToday = myDate.getDate(); //获取当前日(1-31)
      myMonth = myMonth > 9 ? myMonth : '0' + myMonth;
      myToday = myToday > 9 ? myToday : '0' + myToday;
      let nowDate = 'V' + myYear + myMonth + myToday;
      return nowDate;
      let myDate = new Date()
      let myYear = myDate.getFullYear() //获取完整的年份(4位,1970-????)
      let myMonth = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      let myToday = myDate.getDate() //获取当前日(1-31)
      myMonth = myMonth > 9 ? myMonth : "0" + myMonth
      myToday = myToday > 9 ? myToday : "0" + myToday
      let nowDate = "V" + myYear + myMonth + myToday
      return nowDate
    },
    setExportMapLayer(res) {
      var token = '?token=' + getToken();
      var token = "?token=" + getToken()
      var data = {
        token: token.replace('?token=', ''),
        token: token.replace("?token=", ""),
        title: this.form.name,
        pageSize: this.value,
        province: '山东省',
        scale: '1:20万',
        resolution: '20米',
        province: "山东省",
        scale: "1:20万",
        resolution: "20米",
        date: this.getYMD(),
        layers: res.toString(),
        rotation: 0,
        rotation: this.formInline.role,
        xmin: this.layerExtent.xmin,
        ymin: this.layerExtent.ymin,
        xmax: this.layerExtent.xmax,
        ymax: this.layerExtent.ymax,
      };
      }

      $.ajax({
        async: true,
        url: BASE_URL + '/export/insertMap' + token,
        type: 'POST',
        url: BASE_URL + "/export/insertMap" + token,
        type: "POST",
        data: JSON.stringify(data),
        contentType: 'application/json',
        dataType: 'json',
        error: function () {},
        success: (rs) => {
          this.loading = false;
          var value = 'code = ' + rs.code + ', result = ' + rs.result;
        contentType: "application/json",
        dataType: "json",
        error: function () { },
        success: rs => {
          this.loading = false
          var value = "code = " + rs.code + ", result = " + rs.result
          if ((rs.code = 200)) {
            this.$message({
              message: value,
              type: 'success',
            });
            this.setMapRemoveDraw();
              message: "出图成功,请到出图列表查看并下载",
              type: "success",
            })
            this.setMapRemoveDraw()
          } else {
            this.loading = false;
            this.$message.error(value);
            this.loading = false
            this.$message.error(value)
          }
        },
      });
      })
    },
    downloadMap(index, rows) {
      var guid = rows.guid;
      var token = '?token=' + getToken();
      var a = document.createElement('a'); // 创建一个a标签元素
      a.style.display = 'none'; // 设置元素不可见
      a.href = BASE_URL + '/mark/downloadFile' + token + '&guid=' + guid;
      var guid = rows.guid
      var token = "?token=" + getToken()
      var a = document.createElement("a") // 创建一个a标签元素
      a.style.display = "none" // 设置元素不可见
      a.href = BASE_URL + "/export/downloadFile" + token + "&guid=" + guid

      document.body.appendChild(a); // 加入
      a.click(); // 触发点击,下载
      document.body.removeChild(a); // 释放
      document.body.appendChild(a) // 加入
      a.click() // 触发点击,下载
      document.body.removeChild(a) // 释放
    },
    setMapRemoveDraw() {
      if (this.draw != null) {
        mapView.removeLayer(this.vector);
        mapView.removeLayer(this.vector)
      }
      this.layerExtent = null;
      this.layerExtent = null
      this.formInline.role = '';
    },
    stopDraw() {
      // if (this.draw !== null) {
      //   this.map.removeInteraction(this.draw)
      // }
      if (this.draw != null) {
        mapView.removeLayer(this.vector)
      }
      this.layerExtent = null
    },
    drawRegularPolygon() {
      this.stopDraw();

    setMapAddDraw() {
      this.setMapRemoveDraw();

      this.source = new VectorSource({ wrapX: false });
      this.source = new VectorSource({ wrapX: false })

      this.vector = new VectorLayer({
        source: this.source,
      });
      mapView.addLayer(this.vector);
      })
      mapView.addLayer(this.vector)

      let type = 'Circle';
      let geometryFunction = createBox();
      let type = 'Circle'
      // var geometryFunction = ol.interaction.Draw.createBox();
      // console.log(geometryFunction)
      let geometryFunction2 = createBox()
      this.draw = new Draw({
        source: this.source,
        type,
        geometryFunction,
      });
      mapView.addInteraction(this.draw);
      this.draw.on('drawend', (e) => {
        let feature = e.feature;
        let geom = feature.getGeometry();
        var extent = geom.getExtent();
        var a1 = transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
        var a2 = transform([extent[2], extent[3]], 'EPSG:3857', 'EPSG:4326');
        type: type,
        geometryFunction: geometryFunction2
      })
      mapView.addInteraction(this.draw)
      this.draw.on("drawend", e => {
        let feature = e.feature
        let geom = feature.getGeometry()
        var bbox = geom.getExtent();
        var ss = turf.square(bbox);
        geom.setCoordinates([[[ss[0], ss[3]], [ss[2], ss[3]], [ss[2], ss[1]], [ss[0], ss[1]], [ss[0], ss[3]]]]);
        e.feature.setGeometry(geom);
        var extent = geom.getExtent()
        var a1 = transform([extent[0], extent[1]], "EPSG:3857", "EPSG:4326")
        var a2 = transform([extent[2], extent[3]], "EPSG:3857", "EPSG:4326")

        this.layerExtent = {
          xmin: a1[0],
          ymin: a1[1],
          xmax: a2[0],
          ymax: a2[1],
        };
        mapView.removeInteraction(this.draw);
      });
        }

        mapView.removeInteraction(this.draw)
      })
      mapView.addInteraction(this.draw);
    },
    //绘制图形
    setMapAddDraw() {
      this.setMapRemoveDraw()

      this.source = new VectorSource({ wrapX: false })

      this.vector = new VectorLayer({
        source: this.source,
      })
      mapView.addLayer(this.vector)

      let type = "Circle"
      let geometryFunction = createBox()
      this.draw = new Draw({
        source: this.source,
        type,
        geometryFunction,
      })
      mapView.addInteraction(this.draw)
      this.draw.on("drawend", e => {
        let feature = e.feature
        let geom = feature.getGeometry()
        var extent = geom.getExtent()
        var a1 = transform([extent[0], extent[1]], "EPSG:3857", "EPSG:4326")
        var a2 = transform([extent[2], extent[3]], "EPSG:3857", "EPSG:4326")

        this.layerExtent = {
          xmin: a1[0],
          ymin: a1[1],
          xmax: a2[0],
          ymax: a2[1],
        }
        mapView.removeInteraction(this.draw)
      })
    },
    setMapRole() {
      if (this.formInline.role == '') {
        this.formInline.role = '0';
      if (this.formInline.role == "") {
        this.formInline.role = "0"
      }
      var value = parseFloat(this.formInline.role);
      var value = parseFloat(this.formInline.role)

      var role = (Math.PI / 180) * value;
      mapView.getView().setRotation(role);
      var role = (Math.PI / 180) * value
      mapView.getView().setRotation(role)
    },
    setMapApply() {
      if (this.layerExtent == null) {
        this.$message.error('请选择出图范围');
        return;
        this.$message.error("请选择出图范围")
        return
      }
      this.loading = true;
      var val_data = [];
      this.loading = true
      var val_data = []
      for (var i in this.tableData) {
        val_data.push(this.tableData[i].name);
        val_data.push(this.tableData[i].ename)
      }
      if (this.isActive) {
        val_data.push('矢量图');
        val_data.push("高德矢量")
      } else {
        val_data.push('影像注记');
        val_data.push('影像图');
        // val_data.push("影像注记")
        val_data.push("高德影像")
      }
      this.setExportMapLayer(val_data);
      this.showMapApply = false;
      this.form = {};
      this.setExportMapLayer(val_data)
      this.showMapApply = false
      this.form = {}
    },
    handleClose() {},
    handleClose() { },
    handleTreeNodeClick(data, nodes) {
      if (data.children != null) return;
      var layers = mapView.getAllLayers();
      for (var i in layers) {
        var layer = layers[i];
        if (layer.values_.name == data.label) {
          layer.setVisible(nodes); //显示图层
          if (nodes == true) {
            this.arrList.push({
              name: data.label,
            });
          } else {
            this.arrList.some((item, i) => {
              if (item.name === data.label) {
                this.arrList.splice(i, 1);
              }
            });
          }
      var value = this.$refs.tree.getCheckedNodes();

      this.showMapLayer(value)

      var std = [];
      for (var i in value) {
        if (value[i].type == 2) {
          var str = value[i]
          std.push({
            name: str.cnName,
            ename: str.enName,
          })
        }

      }
      this.tableData = this.arrList;
      this.tableData = std;
      // if (data.children != null) return

      // var layers = mapView.getAllLayers()
      // for (var i in layers) {
      //   var layer = layers[i]
      //   var str = 0
      //   if (layer.values_.name == data.cnName) {
      //     layer.setVisible(nodes) //显示图层
      //     if (nodes == true) {
      //       str++
      //       this.tableData.push({
      //         name: data.cnName,
      //         ename: data.enName
      //       })
      //     } else {
      //       this.tableData.some((item, i) => {
      //         if (item.name === data.cnName) {
      //           this.tableData.splice(i, 1)
      //         }
      //       })
      //     }
      //   }
      // }

      // if (str == 0 && nodes == true) {
      //   this.showMapLayer(data)
      //   // this.tableData.push({
      //   //   name: data.cnName,
      //   //   ename: data.enName,
      //   // })
      // }

      // // this.tableData = this.arrList
    },
    setAddMapLayer() {
      this.dialogVisible = false;
      this.dialogVisible = false
      this.data[0].children.push({
        label: this.layerform.name,
        type: this.layerform.type,
        resource: this.layerform.resource,
      });
      })
    },

    setLeftMenu() {
      this.showleftMenu = true;
      this.rowtype = true;
      this.showleftMenu = true
      this.rowtype = true
    },
    //左侧菜单点击事件
    changeRowType() {
      this.rowtype = !this.rowtype;
      this.rowtype = !this.rowtype
    },
    //地图初始化
    initMap() {
      var TiandiLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
      });
      var TiandiLayer, GaoDeLayer;
      if (is_production) {
        var base_ulr = window.sceneConfig.baseUrl;
        if (base_ulr.indexOf('{host}') > -1) {
          base_ulr = base_ulr.replace("{host}", iisHost)
        }
        GaoDeLayer = new TileLayer({
          title: "高德地图",
          source: new XYZ({
            url: base_ulr,
            wrapX: false
          })
        });
        var base_ulr_sl = window.sceneConfig.baseUrl_sl;
        if (base_ulr_sl.indexOf('{host}') > -1) {
          base_ulr_sl = base_ulr_sl.replace("{host}", iisHost)
        }
        TiandiLayer = new TileLayer({
          source: new XYZ({
            url: base_ulr_sl,
          }),
        })
      } else {
        TiandiLayer = new TileLayer({
          source: new XYZ({
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          }),
        })

      var GaoDeLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
        }),
      });
      var GaoDeTitle = new TileLayer({
        source: new XYZ({
          url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
        }),
      });
        GaoDeLayer = new TileLayer({
          source: new XYZ({
            url: "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6",
          }),
        })

      }

      window.mapView = new Map({
        target: 'mapView',
        layers: [TiandiLayer, GaoDeLayer, GaoDeTitle],
        target: "mapView",
        layers: [TiandiLayer, GaoDeLayer],
        view: new View({
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
          zoom: 4,
          projection: 'EPSG:3857',
          projection: "EPSG:3857",
        }),
      });
      mapView.getLayers().item(1).setVisible(false);
      mapView.getLayers().item(2).setVisible(false);
      this.formInline.role = mapView.getView().getRotation();
        controls: defaultControls().extend([new FullScreen(), new ScaleLine(), new Rotate()]),
      })
      // console.log(mapView.getLayers().item(2))
      mapView.getLayers().item(1).setVisible(false)
      // mapView.getLayers().item(2).setVisible(false)

      // this.formInline.role = mapView.getView().getRotation()
    },
    //切换底图
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
      this.isActive = !this.isActive
      this.isMenuLayer = !this.isMenuLayer
      this.setLayerVisible()
    },
    setLayerVisible() {
      if (this.isActive == true) {
        mapView.getLayers().item(1).setVisible(false);
        mapView.getLayers().item(2).setVisible(false);
        mapView.getLayers().item(0).setVisible(true);
        mapView.getLayers().item(1).setVisible(false)
        // mapView.getLayers().item(2).setVisible(false)
        mapView.getLayers().item(0).setVisible(true)
      } else {
        mapView.getLayers().item(1).setVisible(true);
        mapView.getLayers().item(2).setVisible(true);
        mapView.getLayers().item(0).setVisible(false);
        mapView.getLayers().item(1).setVisible(true)
        // mapView.getLayers().item(2).setVisible(true)
        mapView.getLayers().item(0).setVisible(false)
      }
    },
  },
};
}
</script>

<style lang="less" scoped>
@@ -636,15 +844,16 @@
  .topMenu {
    z-index: 40;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);

    width: 100%;
    height: 70px;
    padding-left: 20px;
    margin: 0;
  }
  .left_Menu {
    z-index: 40;
    width: 300px;
    background: rgba(0, 0, 0, 0.5);

    height: calc(100% - 220px);
    position: fixed;
    left: 0;
@@ -658,7 +867,6 @@
        margin: 10px;
        display: flex;
        justify-content: space-between;
        color: white;
      }
      .bottomContent {
        width: calc(100% - 40px);
@@ -666,6 +874,7 @@
        padding: 20px;
        display: flex;
        justify-content: space-between;
        overflow: auto;
      }
      .CenDiv {
        height: 40px;
@@ -681,7 +890,7 @@
      .active {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
        background: url("../../assets/img/Layer/imgLayer2.png") no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
@@ -689,7 +898,7 @@
      .menuLayer {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
        background: url("../../assets/img/Layer/imgLayer1.png") no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
@@ -703,130 +912,23 @@
  .mapApplay {
    width: 40%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);

    z-index: 40;
    top: 15%;
    margin-left: 30%;
    padding: 1%;
    label {
      color: white;
    }
  }
  /deep/.el-form-item__label {
    color: white;
    line-height: 70px;
  /deep/.el-form-item {
    margin-top: 10px;
  }
  /deep/.el-form-item__content {
    line-height: 70px;
  }
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/ .el-divider--horizontal {
    margin: 5px 0px;
  }
  /*修改table 表体的背景颜色和文字颜色*/
  /deep/ .el-table {
    background-color: transparent;
  // /deep/ .el-tree-node {
  //   .is-leaf + .el-checkbox .el-checkbox__inner {
  //     display: inline-block;
  //   }

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // 表头背景色
    th.el-table__cell {
      background-color: #303030;

      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.3) !important;
      // text-align: center;
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 5px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
    }

    /*定义滑块 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
  .pagination_box {
    margin-top: 20px;
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
    /deep/.btn-next i {
      color: white;
    }
    /deep/.btn-prev i {
      color: white;
    }
  }
  /deep/.el-loading-spinner i {
    color: #409eff !important;
  }
  //   .el-checkbox .el-checkbox__inner {
  //     display: none;
  //   }
  // }
}
</style>