<template>
  <div id="map" class="map"  style="width: 100%;height: 680px;position: absolute;"></div>
</template>

<script>
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 } 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 { Text, Fill, Stroke, Circle, Style } from 'ol/style'
import { Select } from 'ol/interaction'
let that
export default {
  data() {
    return {

     imgLayerList: [],
      controlList: [],
    }
  },
  props:['mapList'],
    mounted() {
    setTimeout(() => {
      this.initMap()
       this.imgLayerList[0].setVisible(true) //初始第一个显示
    }, 2000)
  },
  methods: {
          // 初始化地图
    initMap(url) {
      let mapList = this.mapList
      this.imgurl = url
      // 计算静态地图映射到地图上的范围
      let extent = [-1100, 0, 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
                      })
                    })
                  ],
                  // layers:this.controlList,
                  collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
                  label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
                  collapsed: false //初始为展开方式
                })
              this.controlList.push(controlItem)
        }
      }
      let zoomControl = new Zoom({
        delta: 0.2,
        zoomInTipLabel: '',
        zoomOutTipLabel: ''
      })
      // 大图
      this.map = new Map({
        target: 'map',
        layers: this.imgLayerList,
        controls: [zoomControl],
        view: new View({
          projection: projection,
          center: getCenter([0, 0, 418, 600]), // 获取范围的中心坐标。
          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)
                    }
                }
            }
          }
        }
      })
    },
    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
    },
    changeVectorLayer(list) {
      if (list) {
          this.list = list
      } else {
          return
      }
      if (this.map) {
         this.map.removeLayer(this.vectorLayer)
         this.map.removeLayer(this.lineVectorLayer)
      } else {
          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) {
          // let bean = JSON.parse(JSON.stringify(lineLastArr[i]))
          // LinefeaturesArr.push(this.getFeature(bean.xpoint, bean.ypoint))
          // let style = this.getPointStyle(bean.imageSrc + '.png', bean.name)
          // LinefeaturesArr[i].setStyle(style)
          // bean.id = getUUID()
          // bean.key = lineLastArr[i].id
          // LinefeaturesArr[i].setId(bean.key + 'end')
          // this.list.push(bean)
          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])
                 })
    },
  },
          // 改变层级和鹰眼图
    changeImgControl(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) {
                      // that.imgurl=map.readPath
              this.imgLayerList[k].setVisible(true)
            } else {
                this.imgLayerList[k].setVisible(false)
            }
        }
    },
}
</script>

<style  scoped>

</style>
