<template>
  <div>
    <div id="map" class="leaflet_container" style="background-color: white">
      <div style="margin-top: 20px;position: absolute;right:50px;z-index: 100000">
        <el-checkbox-group v-model="selectParts" style=" width: 130px">
          <el-checkbox key="底图" label="底图" border style="margin-left: 10px;width: 130px;background-color: white" @change="mapChange"/>
          <el-checkbox v-for="parts in partsOptions" :label="parts" :key="parts" border style="width: 130px;background-color: white" @change="partsChange">{{ parts }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getServerList } from '@/api/server'
var esri = require('esri-leaflet')
const rainHole = [14]
const sewageHole = [37]
const video = [35]
const lamp = [1, 3, 4, 22, 25, 34]
const toilet = [12, 13, 41]
const garbage = [24]
const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40, 42, 43, 44, 45]
export default {
  name: 'Overview',
  data() {
    return {
      listLoading: false, // 加载动画
      TianDiTu: {
        Normal: {
          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Satellite: {
          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Terrain: {
          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
      },
      map: null,
      showtable: true,
      partsOptions: ['网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'],
      selectParts: ['底图', '网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'],
      listQuery: {
        offset: 1,
        limit: 15
      }, // 筛选条件
      list: [],
      maps: [],
      parts: [],
      baseUrl: '',
      partsUrl: '',
      mapUrl: '',
      multipleSelection: [], // 多选选中项
      baselayer: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    mapChange(val) {
      if (!val) { // 隐藏底图
        for (let i = 0; i < this.maps.length; i++) {
          this.map.removeLayer(this.maps[i])
        }
      } else {
        for (let i = 0; i < this.maps.length; i++) {
          this.map.addLayer(this.maps[i])
        }
      }
    },
    partsChange(val, item) {
      console.log(val, item.target.defaultValue)
      var selectItem
      switch (item.target.defaultValue) {
        case '视频监控点':
          selectItem = video
          break
        case '路灯杆和灯箱':
          selectItem = lamp
          break
        case '公共厕所':
          selectItem = toilet
          break
        case '垃圾箱':
          selectItem = garbage
          break
        case '雨水井盖':
          selectItem = rainHole
          break
        case '污水井盖':
          selectItem = sewageHole
          break
        case '其他部件':
          selectItem = othersParts
          break
        default:
          selectItem = []
          break
      }
      if (!val) { // 隐藏底图
        for (let i = 0; i < selectItem.length; i++) {
          this.map.removeLayer(this.parts[selectItem[i] - 1])
        }
      } else {
        for (let i = 0; i < selectItem.length; i++) {
          this.map.addLayer(this.parts[selectItem[i] - 1])
        }
      }
    },
    tableclick() {
      this.showtable = !this.showtable
    },
    setZoom(points) {
      if (points.length > 0) {
        var maxLng = points[0][1]
        var minLng = points[0][1]
        var maxLat = points[0][0]
        var minLat = points[0][0]
        var res
        for (var i = points.length - 1; i >= 0; i--) {
          res = points[i]
          if (res[1] > maxLng) maxLng = res[1]
          if (res[1] < minLng) minLng = res[1]
          if (res[0] > maxLat) maxLat = res[0]
          if (res[0] < minLat) minLat = res[0]
        }
        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
      } else {
        // 没有坐标，显示全中国
        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
      }
    },
    getZoom(maxLng, minLng, maxLat, minLat) {
      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
      var latlng = L.latLng(maxLat, maxLng)
      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
        if (zoom[i] - distance > 0) {
          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
        }
      }
      return 5
    },
    async init() {
      const res = await getServerList(this.listQuery)
      this.list = res.data.rows
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].name === 'GIS地图') {
          this.baseUrl = this.list[i].url
        } else if (this.list[i].name === '部件分层URL') {
          this.partsUrl = this.list[i].url
        } else if (this.list[i].name === '二维地图URL') {
          this.mapUrl = this.list[i].url
        }
      }
      const map = L.map('map', {
        minZoom: 2,
        // maxZoom: 18,
        center: [27.755, 116.08],
        zoom: 18,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map
      // this.baselayer.push(L.tileLayer(
      //   'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
      //   { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      // ).addTo(map))
      // this.baselayer.push(L.tileLayer(
      //   'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
      //   { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      // ).addTo(map))

      this.maps.push(esri.dynamicMapLayer({
        url: this.baseUrl + this.mapUrl,
        minZoom: 4, // 最小缩放等级
        maxZoom: 21// 最大缩放等级
      }).addTo(map))
      // 部件
      for (let i = 1; i <= 45; i++) {
        let item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18 }
        if (i === 15) {
          item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18,
            style: function(feature) {
              return { color: '#ff0000', opacity: 0.75, weight: 5 }
            } }
        }
        var layer = esri.featureLayer(item).addTo(map)
        layer.on('click', function(e) {
          console.log(e)
          console.log(e.layer.feature.properties)
          var str = '<div style="font-size: 14px;width:200px;">' +
            '<div style="font-size: 14px;margin-bottom: 8px;">' +
            '<div>' + e.layer.feature.properties.小类名称 + '</div></div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">大类：</col>' + e.layer.feature.properties.大类名称	 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">小类：</col>' + e.layer.feature.properties.小类名称	 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">部件编码：</col>' + e.layer.feature.properties.编码 	 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">权属单位：</col>' + e.layer.feature.properties.权属单位 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">详细地址：</col>' + e.layer.feature.properties.详细地址 + '</div>' +
            '<div>'
          var popup = L.popup().setContent(str)
          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
          // var id = e.layer.feature.properties.FID
        })
        this.parts.push(layer)
      }
      this.map.setZoom(15)
    },
    // 多选触发方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:35px;
  .leaflet_container{
    width: 100%;
    height: 83vh;
  }
  .top_title{
    height: 40px;
    font-size: 18px;
    border: 1px solid #b5b5b5;
    padding-top: 10px;
  }
  .title{
    height: 40px;
    width: 320px;
    padding-top: 10px;
    padding-left: 5px;
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.91);
  }
  .titletext{
    text-align: center;
    font-size: 15px;
  }
  .titlenumtext{
    text-align: center;
    font-size: 19px;
  }
  .list{
    text-align:center;
    width: 500px;
    height: 40px;
    z-index: 10000;
    position: absolute;
    right:20px;
    top:20px;
  }
  .btn_bottom{
    text-align:center;
    width: 100%;
    height:70px;
    z-index: 1000;
    position: fixed; bottom: 0; left: 0;right:0;
  }
  .table-name{
    position:relative;
    width: 100px;
    top:20px;
    margin:-10px auto; //外面的div高度的一半
    z-index: 100001;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
  .title-header{
    line-height:$tableTitleHeight;
    color: #606266;
    font-size: 15px;
  i{
    margin-left: 5px;
    margin-right: 5px;
  }
  }
  }
</style>