index.vue

<template lang="pug">
  <div class="ol_point">
    <el-container style='padding-left:0px;'>
      <el-aside width='333px' style='height:825px;'>
          <el-card class = "tree-container">
            <div class="ol_point_left_top">
              <div class="ol_point_left_topL">
                <div>资源列表</div>
              </div>
              //- <div style="float:right; margin:5px 5px 0 5px">
              //-   <el-button type="text" size="mini" icon='el-icon-shoucang' @click="treeDataOffClick()"></el-button>
              //- </div>
              <div class="ol_point_left_topR">
                <el-input suffix-icon="el-icon-search" size="small" v-model="searchInput" clearable></el-input>
              </div>
            </div>
            <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :filter-node-method="filterNode" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
              <span class="custom-tree-node" style='width:100%;line-height: 18px;' slot-scope="{ node, data }">
                <span v-if="node.data.level == 3" class="el-icon-zhandian  xa-icon"></span>
                <span v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1  xa-icon"></span>
                <span v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon  xa-icon"></span>
                <span v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin  xa-icon"></span>
                <span v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi  xa-icon"></span>
                <span v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing  xa-icon"></span>
                <span v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha  xa-icon"></span>
                <span v-if="node.data.level == 6 && node.data.isDefence" class="el-icon-fangqukuang7  xa-icon"></span>
                <span v-if="node.data.level == 6 && !node.data.isDefence" :class="node.data.icon+'7'" class='xa-icon'></span>
                <span v-if="node.data.level == 7 " :class="node.data.icon+'7'" class='xa-icon'></span>
                <span style="position: relative;" v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1">&nbsp;{{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
                <span style="position: relative;" v-if="node.label.indexOf('在线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span><span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
                <span style="position: relative;" v-if="node.label.indexOf('离线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span><span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
                <span style="float:right;">
                  <el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 6" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
                </span>
                span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
              </span>
            </el-tree>
            <!-- <span class="el-icon-shousuo"></span> -->
          </el-card>
      </el-aside>

      <el-main style="padding:0px;height:825px;">
        <el-card>
          <div class="ol_point_right_button">
            <el-row :span="24" style='padding-top:5px;'>
                <el-col :md='14' :sm="5" class='tier-btn'>
                    <el-button type="primary" size="small" plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin-left:10px;" v-for="item in mapList" :key='item.id' @click="changeMap(item)">{{item.name}}</el-button>
                </el-col>
                <el-col :md='10' :sm="5">
                  <div style="float:right;">
                    <div :class="item.value" style="margin:5px 5px 0 0;" :title="item.name" v-for="item in iconNameListBottom" @click="iconClick(item)"></div>
                  </div>
                </el-col>
            </el-row>
          </div>
            //-   <div class="ol_point_right_button_r">
            //-       <div :class="[transformationSta == 1?'on':'']" @click="transformation(1)">2D</div>
            //-       <div :class="[transformationSta == 2?'on':'']" @click="transformation(2)">3D</div>
            //-   </div>
          <div v-show="transformationSta==1">
            <el-row style="padding-bottom:15px;height:780px;background:#fff;" :span="24">
              <el-col class="resource-container" :style="obj" ref="drag">
                <div id="map" class="map" ref='map'  style="width: 100%;height: 720px;position:relative;"></div>
              </el-col>
            </el-row>
          </div>
          <div class="map_right">
            <div>
              <iframe :src="src" ref="iframe"></iframe>
            </div>
          </div>
        </el-card>
      </el-main>
      <query-detail v-if='queryDetailVisible' ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
      <no-query-detail v-if='noQueryDetailVisible' ref='noQueryDetail' @closeQ="closeNoQueryDetailVisible"></no-query-detail>
    </el-container>
  </div>

</template>

<script>
import QueryDetail from './query-detail'
import NoQueryDetail from './no-query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'

import 'ol/ol.css'
import { Map, View, layer, Markers } from 'ol'
import { Projection, Transform } from 'ol/proj'
import { getCenter } from 'ol/extent'
import overviewmap from 'ol/control/OverviewMap'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import { control } from 'ol/control/Control'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom, Select } from 'ol/interaction'
// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon'

// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'

import { mapState, mapGetters, mapActions } from 'vuex'

let that
export default {
  name: 'sys-user',
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0, 20) + '...'
      }
      return value
    }
  },
  data() {
    return {
      imgLayerList: [],
      controlList: [],
      imgurl: '',
      transformationSta: 1,
      isCollapse: true,
      urlPath: window.CONFIG.urlPath,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      queryDetailVisible: false,
      noQueryDetailVisible: false,
      treeData: [],
      listArr: [],
      defaultExpandedKeys: [],
      iconNameListBottom: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        level1: 'level'
      },
      nodeKey: 'id',
      station: {}, //当前选择的站点
      mapList: [], //当前站点的所有层
      stationMap: {}, //当前选择的层
      clickItem: {},
      checkedData: {
        stationId: '',
        stationName: '',
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId')
      },
      currentNode: {},
      dragAble: false,
      list: [],
      obj: 'pointer-events:initial',
      editable: false,
      activeName: '1',
      searchInput: '',
      regionMouse: {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
        status: false
      },
      vectorLayer: [],
      lineVectorLayer: [],
      resolutions: [],
      code: ''
    }
  },
  components: {
    QueryDetail,
    NoQueryDetail
  },
  watch: {
    searchInput(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    that = this
    this.initTreeStationMap()
    this.initResourceTypeDicList()
  },
  methods: {
    // 初始化地图
    initMap(url) {
      this.resolutions = []
      let mapList = this.mapList
      //   let mapsrcList = []
      //   if (mapList != null && mapList.length > 0) {
      //     mapsrcList = mapList.map((e) => e.readPath)
      //   }
      this.imgurl = url
      // 计算静态地图映射到地图上的范围
      let extent = [-1100, 110, 1460, 820]

      let projection = new Projection({
        // 投影
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      })
      if (mapList.length > 0) {
        for (var i = 0; i < mapList.length; i++) {
          let layerItem = new ImageLayer({
            id: mapList[i].id,
            source: new ImageStatic({
              url: mapList[i].readPath, //这里添加静态图片的地址
              projection: projection,
              imageExtent: extent
            }),
            visible: false
          })
          this.imgLayerList.push(layerItem)

          let controlItem = new overviewmap({
            className: 'ol-overviewmap myOverview', //鹰眼控件样式
            // 在鹰眼中加载相同坐标系下不同数据源的图层
            layers: [
              new ImageLayer({
                source: new ImageStatic({
                  url: mapList[i].readPath, //这里添加静态图片的地址
                  projection: projection,
                  imageExtent: extent
                })
              })
            ],
            collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
            label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
            collapsed: false //初始为展开方式
          })
          this.controlList.push(controlItem)

          let resolutionItem = 1
          this.resolutions.push(resolutionItem)
        }
      }

      let zoomControl = new Zoom({
        delta: 0.2,
        zoomInTipLabel: '',
        zoomOutTipLabel: ''
      })
      // 大图
      this.map = new Map({
        target: 'map',
        layers: this.imgLayerList,
        controls: [zoomControl],
        resolutions: this.resolutions,
        view: new View({
          projection: projection,
          center: getCenter([0, 0, 0, 0]), // 获取范围的中心坐标。
          zoom: 2.5,
          maxZoom: 5.0,
          minZoom: 1.5,
          extent: [-1100, -100, 2000, 1000] //[minX, minY, maxX, maxY] 控制拖动
        })
      })
      // 删除默认的双击事件
      const dblClickInteraction = this.map
        .getInteractions()
        .getArray()
        .find((interaction) => {
          return interaction instanceof DoubleClickZoom
        })
      this.map.removeInteraction(dblClickInteraction)
      //将鹰眼控件加载到map中
      this.map.addControl(this.controlList[0])

      //点击事件
      this.changeVectorLayer(this.list)

      this.map.on('click', function (evt) {
        let feature = evt.map.forEachFeatureAtPixel(
          evt.pixel,
          function (feature) {
            return feature
          }
        )
        if (feature) {
          for (let i in that.list) {
            let style = that.getPointStyle(
              that.list[i].imageSrc + '.png',
              that.list[i].name
            )
            let style2 = that.getPointStyle(
              that.list[i].imageSrc + '2.png',
              that.list[i].name,
              0.3
            )
            //获取feature对象
            let feature_ = that.vectorLayer
              .getSource()
              .getFeatureById(that.list[i].id)
            //获取红外对射或者振动光纤第二个点的feature对象
            let featureEnd = that.vectorLayer
              .getSource()
              .getFeatureById(that.list[i].key + 'end')
            if (feature_) {
              if (feature_ === feature || featureEnd === feature) {
                //修改选中样式
                feature_.setStyle(style2)
                if (featureEnd) {
                  featureEnd.setStyle(style2)
                }
                that.pointListClick(that.list[i])
              } else {
                //清除选中以外的样式
                feature_.setStyle(style)
                if (featureEnd) {
                  featureEnd.setStyle(style)
                }
              }
            }
          }
        }
      })
    },
    mapClick(feature, item, flag) {
      //默认样式
      let style = this.getPointStyle(item.imageSrc + '.png', item.name)
      //选中样式
      let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
      //获取feature对象
      let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
      //获取红外对射或者振动光纤第二个点的feature对象
      let featureEnd = this.vectorLayer
        .getSource()
        .getFeatureById(item.key + 'end')
      if (feature_) {
        if (feature_ === feature || featureEnd === feature) {
          //console.log(feature_)
          //修改选中样式
          feature_.setStyle(style2)
          if (featureEnd) {
            featureEnd.setStyle(style2)
          }
        } else {
          //清除选中以外的样式
          feature_.setStyle(style)
          if (featureEnd) {
            featureEnd.setStyle(style)
          }
        }
      } else {
        //获取新增的feature对象
        let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)
        //获取红外对射或者振动光纤第二个点的feature对象
        let newFeatureEnd = this.vectorLayer
          .getSource()
          .getFeatureById(item.key + 'end')
        if (newFeature) {
          if (newFeature === feature || newFeatureEnd === feature) {
            newFeature.setStyle(style2)
            if (newFeatureEnd) {
              newFeatureEnd.setStyle(style2)
            }
          } else {
            //清除选中以外的样式
            newFeature.setStyle(style)
            if (newFeatureEnd) {
              newFeatureEnd.setStyle(style)
            }
          }
        }
      }
    },
    getPointStyle(src, name, zoom) {
      let style = new OlStyleStyle({
        image: new OlStyleIcon({
          anchor: [0.5, 0.5],
          scale: zoom || 0.4,
          //rotation:0 旋转度
          src: require('@/assets/images/' + src)
        }),
        text: new Text({
          text: name, // 添加文字描述
          font: '14px font-size', // 设置字体大小
          fill: new Fill({
            // 设置字体颜色
            color: 'black'
          }),
          offsetY: 30 // 设置文字偏移量
        })
      })
      return style
    },
    clearLayer() {
      if (this.map) {
        this.map.removeLayer(this.vectorLayer)
        this.map.removeLayer(this.lineVectorLayer)
        this.map.removeInteraction(this.modify)
        return false
      } else {
        return true
      }
    },
    changeVectorLayer(list) {
      if (list) {
        this.list = list
      } else {
        this.clearLayer()
      }
      if (this.clearLayer()) return
      this.lineVectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: []
        }),
        style: new OlStyleStyle({
          stroke: new Stroke({
            color: '#409EFF',
            width: 3
          })
        })
      })
      this.map.addLayer(this.lineVectorLayer)

      let lineLastArr = []
      let featuresArr = []
      for (let i in list) {
        if (list[i].imageSrc) {
          //振动光纤和红外线对射
          if (
            list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' ||
            list[i].type === '4f69755dbc0c45e49c142857286c5669'
          ) {
            let lineFeatures = []
            lineFeatures.push([list[i].xlongit, list[i].ylat])
            lineFeatures.push([list[i].xpoint, list[i].ypoint])
            this.lineVectorLayer
              .getSource()
              .addFeature(new OlFeature(new LineString(lineFeatures)))
            lineLastArr.push(list[i])
          }
          featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
          let style = this.getPointStyle(
            list[i].imageSrc + '.png',
            this.list[i].name
          )
          featuresArr[i].setStyle(style)
          featuresArr[i].setId(list[i].id)
        } else {
          continue
        }
      }

      let LinefeaturesArr = []
      for (let i in lineLastArr) {
        LinefeaturesArr.push(
          this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint)
        )
        let style = this.getPointStyle(
          lineLastArr[i].imageSrc + '.png',
          lineLastArr[i].name
        )
        LinefeaturesArr[i].setStyle(style)
        LinefeaturesArr[i].setId(lineLastArr[i].key + 'end')
        this.list.push(lineLastArr[i])
      }

      this.vectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: featuresArr.concat(LinefeaturesArr)
        })
      })
      this.map.addLayer(this.vectorLayer)
    },
    getFeature(x, y) {
      return new OlFeature({
        type: 'icon',
        geometry: new OlGeomPoint([x, y])
      })
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleClick(tab) {
      //左侧tab切换
      if (tab) {
        this.activeName = tab
      }
      if (this.activeName == 1) {
        this.initTreeStationMap()
      } else {
        this.initTreeStationMap(true)
      }
    },
    treeDataDeleteClick(node, data) {
      this.$confirm('确认取消该收藏?', '取消收藏', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        //左侧tree取消收藏按钮
        // console.log(node)
        // console.log(node.parent.childNodes.length, '节点长度')
        // console.log(data)
        let len = node.parent.childNodes.length
        let pid = data.pid
        let tid = data.tierId

        this.$http({
          url: this.$http.adornUrlEq('/liEnshrine/delete'),
          method: 'post',
          data: {
            resourceId: node.data.id,
            stationId: this.checkedData.sId
          }
        }).then((data) => {
          if (data && data.code === 0) {
            this.$message.success('取消收藏成功1111')
            // this.defaultExpandedKeys = [this.treeData[0].id]
            this.initTreeStationMap(true)
            if (len > 1) {
              this.defaultExpandedKeys = [pid]
            } else {
              this.defaultExpandedKeys = [tid]
            }
          }
        })
      })
    },
    treeDataOffClick() {
      //左侧tree收藏按钮
      let node = this.$refs.tree.getCurrentNode()
      // console.log(node)
      if (node.level !== 6) {
        this.$message.warning('只能收藏资源点或防区')
        return
      }
      let dForm = {}
      if (node.isDefence && node.level == 6) {
        //如果是防区
        dForm = {
          resourceId: node.id,
          byx1: '1',
          stationId: this.checkedData.sId
        }
      } else {
        dForm = {
          resourceId: node.id,
          stationId: this.checkedData.sId
        }
      }
      this.$http({
        url: this.$http.adornUrlEq('/liEnshrine/save'),
        method: 'post',
        data: dForm
      }).then((data) => {
        if (data && data.code === 0) {
          if (data.msg === '收藏成功') {
            this.$message.success(data.msg)
          } else {
            this.$message.warning(data.msg)
          }
        }
      })
    },
    pointListClick(item) {
      //监视器列表点击
      //关闭其他窗口
      // this.closeNoQueryDetailVisible()
      if (this.transformationSta === 1) {
        if (
          item.type === 'b6af764f2a6e454490a6b1b3c9057e57' ||
          item.type === 'ece0b8b2db27411886254e81134988a3'
        ) {
          // console.log('1')
          this.queryDetail(item.id)
        } else {
          // console.log('2')
          this.noQueryDetail(item.id)
        }
        // console.log('subCode', item.subCode, typeof (item.subCode))
        // switch (item.subCode) {
        //   case '01' :
        //     //视频监控
        //     this.queryDetail01Visible = true
        //     this.$nextTick(() => {
        //       this.$refs.queryDetail01.init(item.id, this.checkedData.sId)
        //     })
        //     break
        //   case '02' :
        //     //出入口控制
        //     this.queryDetail02Visible = true
        //     this.$nextTick(() => {
        //       this.$refs.queryDetail02.init(item.id, this.checkedData.sId)
        //     })
        //     break
        //   case '03' :
        //     //入侵报警
        //     this.queryDetail03Visible = true
        //     this.$nextTick(() => {
        //       this.$refs.queryDetail03.init(item.id, this.checkedData.sId)
        //     })
        //     break
        //   case '04' :
        //     //安全检查
        //     this.queryDetail04Visible = true
        //     this.$nextTick(() => {
        //       this.$refs.queryDetail04.init(item.id, this.checkedData.sId)
        //     })
        //     break
        //   case '05' :
        //     //电子巡更
        //     this.queryDetail05Visible = true
        //     this.$nextTick(() => {
        //       this.$refs.queryDetail05.init(item.id, this.checkedData.sId)
        //     })
        //     break
        // }
      }
      this.activeChooseResourceBox(item.id)
      this.defaultExpandedKeys = [item.id]
      // this.$refs.tree.setCurrentKey(item.id)
    },
    //初始化站点下的资源点
    initTreeStationMap() {
      this.$http({
        url: this.$http.adornUrl('/liResource/getTreeList'),
        method: 'post',
        data: {
          stationId: this.checkedData.sId,
          name: this.searchInput
        }
      })
        .then((data) => {
          if (data && data.code === 0) {
            this.treeData = data.tree
            console.log('data:', this.treeData)
            if (this.treeData && this.treeData.length > 0) {
              Vue.set(this.treeData[0], 'iconB', true)
            }
            return data
          }
        })
        .then((data) => {
          if (
            this.checkedData.sId &&
            this.treeData &&
            this.treeData.length > 0
          ) {
            // this.defaultExpandedKeys = [data.nodes[0].id]
          }
          this.initStation(this.checkedData.sId)
        })
    },
    initResourceTypeDicList() {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
        method: 'get',
        params: { stationId: this.checkedData.sId }
      }).then((data) => {
        if (data && data.code === 0) {
          this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
          this.iconNameListBottom.forEach((res) => {
            res.value += '3'
          })
        }
      })
    },
    iconClick(item) {
      this.iconNameListBottom.forEach((res) => {
        if (res.id === item.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) != 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '4'
          }
        } else {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })

      if (
        this.currentNode.level == 5 ||
        (this.currentNode.level == 6 && this.currentNode.isDefence)
      ) {
        this.list = []
        this.currentNode.children.forEach((el) => {
          if (item === null || (item != null && item.id === el.type)) {
            this.list.push(el)
          }
        })

        this.list.forEach((res) => {
          Vue.set(res, 'active', false)
        })
      } else {
        this.showResourceByMapId(item)
      }
      this.clickItem = item
      this.changeVectorLayer(this.list)
    },
    initStation(id) {
      this.$http({
        url: this.$http.adornUrl(`/liStation/getId/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      })
        .then((data) => {
          if (data && data.code === 0) {
            this.station = data.bean
            this.mapList = data.bean.mapList
            if (this.mapList && this.treeData) {
              this.mapList.forEach((element) => {
                element.readPath = this.urlPath + element.filePath
              })
              this.checkedData.stationId = this.station.id
              this.checkedData.stationName = this.station.stationName
              this.checkedData.tierId = !this.mapList[0]
                ? ''
                : this.mapList[0].id
              if (!this.checkedData.tierId) {
                return
              }
              this.isFlag(this.treeData, this.checkedData.tierId)
              if (this.treeData[0]) {
                this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
                this.defaultExpandedKeys = [this.checkedData.tierId]
                this.checkedData.tierName = this.mapList[0].name
                this.stationMap = this.mapList[0]
              }
            }
          }
        })
        .then(() => {
          if (!this.checkedData.tierId) {
            return
          }
          this.showResourceByMapId(null)
          if (!this.map) {
            this.initMap()
            this.imgLayerList[0].setVisible(true) //初始第一个显示
          } else {
            this.changeVectorLayer(this.list)
          }
        })
    },
    isFlag(data, id) {
      data.forEach((res) => {
        if (res.id === id) {
          Vue.set(res, 'iconB', true)
        } else {
          Vue.set(res, 'iconB', false)
        }
        if (res.children) {
          this.isFlag(res.children, id)
        }
      })
    },
    // 改变层级和鹰眼图
    changeImgControl(id) {
      //   console.log('mapid', id)
      let srcIndex = this.imgLayerList.findIndex((e) => {
        return e.values_.id == id
      })
      this.map.removeControl(this.controlList[srcIndex])
      this.map.addControl(this.controlList[srcIndex])
      for (var k = 0; k < this.imgLayerList.length; k++) {
        if (this.imgLayerList[k].values_.id == id) {
          this.imgLayerList[k].setVisible(true)
        } else {
          this.imgLayerList[k].setVisible(false)
        }
      }
    },
    addBox(obj) {
      this.boxVectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: []
        }),
        style: new OlStyleStyle({
          stroke: new Stroke({
            color: '#409EFF',
            width: 2
          }),
          fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        })
      })
      this.map.addLayer(this.boxVectorLayer)
      //创建矩形对象
      let start = [obj.xpoint, obj.ypoint]
      let end = [obj.xlongit, obj.ylat]
      let boxFeature = new OlFeature({
        geometry: new Polygon([
          [start, [start[0], end[1]], end, [end[0], start[1]], start]
        ])
      })
      boxFeature.setId(obj.id + 'box')
      this.boxVectorLayer.getSource().addFeature(boxFeature)
    },
    //线路资源点树节点点击事件
    handleNodeClick(node) {
      // console.log(node)
      this.currentNode = node
      let name = node.name
      let id = node.id
      this.isFlag(this.treeData, id)
      if (node.level !== 7) {
        this.regionMouse = {
          x: 0,
          y: 0,
          w: 0,
          h: 0,
          status: false
        }
      }
      //每次选择节点都先清空资源位
      console.log('选中节点的层级', node)
      if (node.level === 4) {
        this.map.removeLayer(this.boxVectorLayer)
        //层级
        this.checkedData.tierId = id
        this.checkedData.tierName = name
        this.checkedData.stationId = node.stationId
        this.stationMap = node
        // console.log('选中节点的层级id', this.tierId)
        this.showResourceByMapId(null)
        this.changeImgControl(id)
        this.changeVectorLayer(this.list)
      } else if (node.level === 5) {
        this.map.removeLayer(this.boxVectorLayer)
        //资源点类型
        this.list = []
        if (node.children) {
          node.children.forEach((res) => {
            this.list.push(res)
          })
        }

        this.checkedData.tierId = node.tierId
        this.mapList.forEach((res) => {
          if (res.id === node.tierId) {
            this.stationMap = res
          }
        })

        this.list.forEach((res) => {
          Vue.set(res, 'active', false)
        })
        this.changeImgControl(node.tierId)
        this.changeVectorLayer(this.list)
      } else if (node.level === 6) {
        this.map.removeLayer(this.boxVectorLayer)
        //资源点
        let subNode = this.$refs.tree.getNode(node.tierId + node.type).data
        // console.log('当前要选中的层级节点', subNode)
        this.list = []
        subNode.children.forEach((res) => {
          this.list.push(res)
        })
        this.list.forEach((res) => {
          Vue.set(res, 'active', false)
        })
        this.changeVectorLayer(this.list)

        // 点亮对应的marker
        let feature = this.vectorLayer.getSource().getFeatureById(id)
        if (feature) {
          for (let i in this.list) {
            if (feature.id_ == that.list[i].id) {
              this.listItem = that.list[i]
            }
            //flag为ture打开详情或者编辑页面
            this.mapClick(feature, that.list[i], false)
          }
        }
        this.checkedData.resourceId = id
        this.checkedData.tierId = node.tierId

        this.activeChooseResourceBox(id)
        this.pointListClick(node)
        this.changeImgControl(node.tierId)
      }

      this.iconNameListBottom.forEach((res) => {
        if (res.id === this.clickItem.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
    },
    setStyle(item) {
      //选中样式
      let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
      let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
      feature_.setStyle(style2)
      let featureEnd = this.vectorLayer
        .getSource()
        .getFeatureById(item.key + 'end')
      if (featureEnd) {
        featureEnd.setStyle(style2)
      }
    },
    //激活选中资源点位节点
    activeChooseResourceBox(id, level) {
      this.list.forEach((res) => {
        if (res.id === id) {
          Vue.set(res, 'active', true)
        } else {
          Vue.set(res, 'active', false)
        }
      })
    },
    //切换层级
    changeMap(map) {
      this.map.removeLayer(this.boxVectorLayer)

      // 切换openlayer
      // console.log(this.map)
      //图层缩放级别设置为默认
      this.map.getView().setZoom(1)
      // console.log(this.imgLayerList)
      this.changeImgControl(map.id)
      this.currentNode = this.$refs.tree.getNode(map.id).data
      // console.log('当前要选中的节点', this.currentNode)
      //将选中的层级树节点设置为选中

      this.$refs.tree.setCurrentNode(this.currentNode)
      // this.defaultExpandedKeys = [this.currentNode.id]
      this.defaultExpandedKeys = [map.id]
      this.isFlag(this.treeData, this.currentNode.id)
      // console.log('当前要选中的节点2', this.currentNode)
      this.checkedData.tierId = map.id
      this.checkedData.tierName = map.name
      this.stationMap = map

      this.iconNameListBottom.forEach((res) => {
        if (res.id === this.clickItem.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
      this.showResourceByMapId(null)
      this.changeVectorLayer(this.list)
    },
    //根据层级id展示当前层级所有的资源点
    showResourceByMapId(item) {
      let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
      // console.log('当前要选中的层级节点', tierNode.children)
      this.list = []
      //this.list = tierNode.children[0].children || []

      if (tierNode && tierNode.children) {
        tierNode.children.forEach((type) => {
          type.children.forEach((res) => {
            if (item === null || (item != null && item.id === res.type)) {
              this.list.push(res)
            }
          })
        })
      }
      this.list.forEach((res) => {
        Vue.set(res, 'active', false)
      })
    },
    //详情
    queryDetail(id) {
      this.queryDetailVisible = true
      this.noQueryDetailVisible = false
      this.$nextTick(() => {
        this.$refs.queryDetail.init(id, this.checkedData.sId)
      })
    },
    noQueryDetail(id) {
      this.noQueryDetailVisible = true
      this.queryDetailVisible = false
      this.$nextTick(() => {
        this.$refs.noQueryDetail.init(id, this.checkedData.sId)
      })
    },
    closeQueryDetailVisible() {
      this.queryDetailVisible = false
    },
    closeNoQueryDetailVisible() {
      this.noQueryDetailVisible = false
    },
    transformation(now) {
      //2D3D转换
      this.transformationSta = now
      // console.log('当前节点', this.currentNode)
      // console.log(this.mapList)

      if (now == 1) {
        if (this.currentNode.level == 6) {
          this.$nextTick(() => {
            // console.log(22222222222)
            this.changeImgControl(this.currentNode.tierId)
          })
        } else if (
          this.currentNode.level == 5 ||
          this.currentNode.level == 6 ||
          this.currentNode.level == 7
        ) {
          this.$nextTick(() => {
            // console.log(3333333333333)
            this.changeImgControl(this.currentNode.tierId)
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dic_tree {
  background: #f4f4f4;
  font-size: 14px;
  transform: translateX(-6px);
  // margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
  padding-left: 0px !important;
}

.dic_tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
}

.dic_tree /deep/ .el-tree-node__children {
  padding-left: 8px;
}

.dic_tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.dic_tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.dic_tree /deep/ .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.dic_tree /deep/ .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.dic_tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #bfbfbf;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.dic_tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #bfbfbf;
  height: 20px;
  top: 12px;
  width: 35px;
  // background: red;
  position: absolute;
  z-index: 1;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree-container {
  /* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
  background: url('../../../assets/images/add.png');

  content: '';
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
  // background:skyblue;
}
.dic_tree
  /deep/
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url('../../../assets/images/sub.png');
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
  // background:skyblue;
}
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0 2px 0 0;
}

.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
  opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
  // margin-left: -15px !important;
}
</style>

<style lang="scss">
// openlayer 样式
.resource-container {
  .ol-overviewmap {
    left: 89%;
  }
}
</style>
<style lang="scss">
.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;
  .span-box {
    font-size: 12px;
    border-radius: 5px;
    position: absolute;
  }
}

.tier-btn {
  .active-tier {
    background-color: #409eff;
    color: #ffffff;
  }
}
.ol_point {
  .regionDiv {
    background: #35aff8;
    opacity: 0.5;
    z-index: 10;
  }
  .el-tree {
    background: #f4f4f4;
    font-size: 12px;
    overflow-y: auto;
    height: 750px;
  }
  .el-card__body {
    padding: 0;
  }
  .el-card {
    height: 99%;
    background: #f4f4f4;
  }
  .el-tree {
    padding: 20px 20px 0 0px;
  }
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #f4f4f4 !important;
    color: #fff !important;
    .el-button--text {
      color: #fff;
    }
    .custom-tree-node {
      background-color: #35aff8 !important;
    }
  }

  .ol_point_left_top {
    height: 50px;
    background: #e1edf4;
    padding-left: 10px;
    .ol_point_left_topL {
      height: 40px;
      padding-top: 10px;
      float: left;
      div {
        height: 40px;
        float: left;
        padding: 0 10px 0 10px;
        line-height: 40px;
        cursor: pointer;
        font-size: 14px;
        border: 1px solid transparent;

        span {
          color: #35aff8;
        }
      }
      div.on {
        background: #fff;
        border: 1px solid #c3c3c3;
        border-bottom: none;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
    }
    .ol_point_left_topR {
      float: right;
      margin-top: 10px;
      .el-input {
        width: 109px;
      }
    }
  }
  .ol_point_right_button {
    height: 50px;
    width: 100%;
    background: #e3e4e6;
    border-bottom: 1px solid #ccc;
    ol_point_right_button_l {
      margin-left: 20px;
    }
    .el-button--primary.is-plain {
      margin-top: 5px;
      background: #ced1d6;
      border: none;
      color: #656565;
    }
    .tier-btn .active-tier {
      background-color: #409eff;
      color: #ffffff;
    }
    .el-button.is-plain:hover {
      background: #fff;
      border-color: #32a5ea;
      color: #32a5ea;
    }
  }
  .ol_point_right_button_r {
    position: absolute;
    right: 20px;
    top: 60px;
    width: 95px;
    height: 26px;
    z-index: 10;
    font-size: 12px;
    line-height: 25px;
    overflow: hidden;
    border-radius: 13px;
    background: #ced1d6;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
      0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    div {
      width: 46px;
      height: 24px;
      float: left;
      text-align: center;
      cursor: pointer;
    }
    div.on {
      background: #45b5f8;
      color: #fff;
      border-radius: 13px;
      border: 1px solid rgba(23, 41, 71, 0.5);
      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
        0px 2px 0px 0px rgba(255, 255, 255, 0.15);
    }
  }
  .map_right {
    margin-top: 50px;
    iframe {
      width: 1600px;
      height: 680px;
    }
  }
}
.ol-overviewmap .ol-overviewmap-map {
  height: 110px !important;
}
</style>