<template>
    <div class="stationmap">
        <div  id="mapid">
          111
        </div>
    </div>
</template>
<script>
import { setTimeout } from 'timers';


export default {
    name: "stationmap1",
    props:[],
    data() {
        return {
          map:null,
          itmeList:null,
          dataList : [],
          mapArr:[],

        }
    },
    mounted(){

      // this.dataList = this.mapArr;
      console.log(this.dataList);

      //获取中间地图导航栏
      this.getMapListFn();

    },
    methods:{

      //获取中间地图导航栏
      getMapListFn(){
        let _this = this;
        let obj = {
          gId:this.$port.gId,
          cId:this.$port.cId,
        };
        this.$axios.AxiosMethods("get",this.$api.getMapList,obj,function (res) {
          console.log('获取中间地图导航栏_________map2box1',res);
          _this.itmeList = res.data;

          //  获取地图里面的点、线、面
          // _this.getRiskPointListFn();

          //绘制地图
          _this.getMapFn();

        })
      },

      //定义地图
      getMapFn(){
        let _this = this;

        var one = L.layerGroup();
        var two = L.layerGroup();

          L.marker([50.5, 30.51]).bindPopup('This is Littleton, CO.').addTo(one),
          L.marker([50.5, 35.5]).bindPopup('This is Denver, CO.').addTo(one),
          L.marker([55.51, 30.51]).bindPopup('This is Aurora, CO.').addTo(two),
          L.marker([55.51, 35.5]).bindPopup('This is Golden, CO.').addTo(two);

        var map = L.map('mapid', {
          center: L.latLng(50.5, 30.5),
          zoom: 0,
          minZoom: 0,
          attributionControl: false
          // layers: [grayscale, one]
        });

          var yx = L.latLng;
          var xy = function xy(x, y) {
            if (L.Util.isArray(x)) {
              return yx(x[1], x[0]);

            }
            return yx(y, x);
          };
        var bounds = [xy(-600, -600), xy(300, 300)];

        var basemaps = {
          // '的舒服舒服': L.imageOverlay(mbUrl, bounds),

        };

        this.itmeList.forEach((item,index) => {
        //   console.log(item.mapName)
          basemaps[item.mapName] =  L.imageOverlay(this.$ip + item.mapRasterLayer, bounds);
        });

        let control2 = L.control.layers(basemaps, null, {collapsed: false})
        control2.addTo(map);
        basemaps[this.itmeList[0].mapName].addTo(map);

        // var overlays = {
        //   "one": one,
        //   "two": two,
        // };
        //
        // let control1 = L.control.layers(null, overlays, {})
        // control1.addTo(map);

        map.on('baselayerchange', function(ev, index) {
          console.log(ev,'------'+ev.layer.options.zIndex, ev.name); // ev is an event object (MouseEvent in this case)

          // map.removeLayer(one);   //删除layer
          // map.removeControl(control1); //删除控件
          // map.addControl(control11);  //添加控件
          // overlays['three'] = one;

        });

      },

      //根据场景获取坐标
      getRiskPointListFn(){
        let _this = this;
        let obj = {
          gId:this.$port.gId,
          cId:this.$port.cId,
        };
        this.$axios.AxiosMethods("get",this.$api.riskPointList,obj,function (res) {
          // console.log(res);
          let parentArr = [];
          _this.itmeList.forEach((item)=>{
            let arr = [];
            res.data.forEach((itemChild)=>{
              if(item.mapId == itemChild.entMapId){
                arr.push(itemChild);
              }
            })
            parentArr.push(arr);
          });

          _this.mapArr = parentArr;
          // console.log(parentArr);

        })
      },


    }
}
</script>
<style lang="less" >
    .stationmap{
        width: 100%;
        height: 100%;
        font-size: 0.1rem;
        #mapid{
            width: 100%;
            height: 100%;
            /*background-color: bisque;*/
        }

      /*.leaflet-right{*/
        /*display: flex;*/

        /*.leaflet-control:first-child{*/
          /*height: 44px;*/
        /*}*/
      /*}*/

      .leaflet-control{
        clear:none
      }
    }
</style>
