<!--
 * @Description: 管线图层
 * @Author: 王晓颖
 * @Date: 2021-06-04 14:55:15
 -->
<template>
  <div>
    <slot/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import axios from 'axios'
import 'mars3d-echarts'
export default {
  name: 'PipeLayer2',
  mixins: [commonMixin('layer')],
  props: {
    glowPower: {
      type: Number,
      default: 0.02
    }, // 发光强度
    opacity: {
      type: Number,
      default: 0.9
    }, // 透明度
    width: {
      type: Number,
      default: 100
    }, // 线宽度
    height: {
      type: Number,
      default: 0
    }, // 高度
    color: {
      type: String,
      default: '#92ffdf'
    }, // 偏移值
    show: {
      type: Boolean,
      default: false
    } // 是否可见
  },
  data() {
    return {
      layer: null, // 图层
      data: [] // 完整数据
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      if (this.show) {
        this.initLayer()
      }
    },
    initLayer() {
      const { mars3d, map } = this
      if (map) {
        if (this.show && this.layer) { // 如果已经有图层了，先移除
          this.removeLayer()
        }
        debugger
        axios.get('static/geojson/pipe_test1.json').then((res) => {
          const data = res.data
          debugger
          var options = this.getEchartsOption(data.data)
          options.depthTest = false // 是否进行计算深度（大数据时，需要关闭）
          this.layer = new mars3d.layer.EchartsLayer(options)
          map.addLayer(this.layer)
        })
      }
    },
    getEchartsOption(data) {
      var option = {
        animation: false,
        GLMap: {},
        visualMap: {
          type: 'piecewise',
          left: 'right',
          top: 'bottom',
          min: 0,
          max: 15,
          splitNumber: 1,
          maxOpen: true,
          color: ['red', 'yellow', 'green'],
          textStyle: {
            color: '#ffffff'
          }
        },
        clampToGround: true,
        tooltip: {
          formatter: function(params, ticket, callback) {
            return '拥堵指数:' + params.value
          },
          trigger: 'item'
        },
        series: [
          {
            type: 'lines',
            coordinateSystem: 'GLMap',
            polyline: true,
            data: data,
            lineStyle: {
              normal: {
                opacity: 1,
                width: 4
              },
              emphasis: {
                width: 6
              }
            },
            effect: {
              show: true,
              symbolSize: 2,
              color: 'white'
            }
          }
        ]
      }

      return option
    },
    // 移除图层
    removeLayer() {
      const { map, layer } = this
      if (this.layer) {
        map.removeLayer(layer)
        this.layer = null
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>