<template>
  <div>
    <div id="map" ></div>
    
    <div class="diacontain">
      <div class="diacontainer" v-if="formsVisible"></div>
      <div class="diabox" v-if="formsVisible">
          <div class="diatitle">
            <div class="flex">
              <span>案件详情</span>
              <i class="el-icon-close" @click="formsVisible = false"></i>
            </div>
          </div>
          <div class="diacontent">
              <formDetail :ruleFormId="ruleFormId" :ruleForm="handleForm" @close="formsVisible = false"></formDetail> 
          </div>
      </div>
    </div>
  </div>

</template>

<script>
import waves from '@/directive/waves'
import {loadBaseLayers} from "./widget/layerManage";
import {layerStyle} from "./widget/layerStyle";
import elDragDialog from '@/directive/el-dragDialog'
import {getMethodCommon} from "@/api/common";
import {loadAllDroneGeoJson} from '@/api/map'
import formDetail from "./widget/formdetail"
import appInfo from '/public/config.json'
export default {
  name: "index",
  props:[],
  components: {
    formDetail
  },
  directives: {
    waves,
    elDragDialog
  },
  data(){
    return{
      formsVisible: false,
      ruleFormId: '',
      handleForm: [],
      villageLayerGroup:[],
      villageGeoJson:null,
      satelliteLayer:null,  //存放影像图层
      villageLayer:null,//存放村庄图层
      villageNames:[],
      map: ''
    }
  },  
  mounted(){
    this.mapInit();
    this.showLayers();
  },
  methods:{

    //地图配置
    mapInit() {
      let baseLayers = loadBaseLayers()
      this.map = L.map("map", {
        center: [35.281969,117.9827], // 地图中心117.9827,
        zoom: 10, //缩放比列
        maxZoom:24,
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        crs: L.CRS.EPSG4326, //设置坐标系4326
        layers: [baseLayers["卫星"]],
      });
      this.map.pm.setLang("zh"); //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
    },

    showLayers(data){
      this.satelliteLayer =  L.tileLayer.wms(appInfo.layers.imageLayer.url,{
        layers: appInfo.layers.imageLayer.name,
        format: 'image/png',
        maxZoom:24,
        transparent: true
      }).addTo(this.map);

      

      this.getVillageGeoJson();

      // 设置村庄名称的显示级别
      let _this = this;
      _this.map.on('zoom',function(e){
        if(_this.map.getZoom() < 11){
          _this.map.removeLayer(_this.villageLayerGroup);
        }else{
          _this.map.addLayer(_this.villageLayerGroup);
        }
      })
    },
    getVillageGeoJson(){
      this.$axios({
        method:"get",
        url:appInfo.layers.administrationLayer.url,
      }).then(res=>{
        if(res.status == 200){
          this.villageGeoJson = res.data;
          this.villageLayer = L.geoJSON(this.villageGeoJson, {
              style:{
                color: "blue",
                fillColor: "blue",
                fillOpacity: 0,
              }
            }).bindTooltip(function(e){
              return e.feature.properties.XZQMC;
            }).addTo(this.map);
          }
          this.loadCunName();
      }).catch(error=>{
        console.log("axioserror",error);
      });
    },
    loadCunName(){
      for(let i = 0;i<this.villageGeoJson.features.length;i++){
        let str = "<div style='font-size:12px;color:#fff;text-shadow:#000 3px 0 0;'>"+this.villageGeoJson.features[i].properties.XZQMC+"</div>"
        let divicon = L.divIcon({
          html:str,
          className:"myDivIcon",
          iconSize:[80],
        });
        let newcor = this.getPolygon(this.villageGeoJson.features[i].geometry.coordinates[0][0]);
        let myMarker = L.marker([newcor[1],newcor[0]],{icon:divicon,maxZoom:20,minZoom:12});
        this.villageNames.push(myMarker);
      }
      this.villageLayerGroup = L.layerGroup(this.villageNames).addTo(this.map);
      this.getLayerGeoJson()
    },
    getPolygon(pList) {  //获取多边形中心点
      var area = 0;
      var x = 0;
      var y = 0;
      for (var i = 1; i <= pList.length; i++) {
        var lat = pList[i % pList.length][0];
        var lng = pList[i % pList.length][1];
        var nextLat = pList[i - 1][0];
        var nextLng = pList[i - 1][1];
        var temp = (lat * nextLng - lng * nextLat) / 2;
        area += temp;
        x += (temp * (lat + nextLat)) / 3;
        y += (temp * (lng + nextLng)) / 3;
      }
      x = x / area;
      y = y / area;
      return [x, y];
    },
    //获取图层信息
    getLayerGeoJson(data){
      return new Promise((res,rej) =>{
        loadAllDroneGeoJson().then(res =>{
          if(res.code === 200){
              L.geoJSON().clearLayers().addTo(this.map); 
              let layer = L.geoJSON(res.result, {
                ...layerStyle.selectLayerGroup.style
              }).addTo(this.map)
             
              this.bindLayerEdit(layer)
          }
        })
      })
    },
    bindLayerEdit(layer) {
      layer.on("click", (e) => {
        let relid = e.layer.feature.properties.relid
        this.getFormData(relid)
      })
    },
    getFormData(relid){
        getMethodCommon('/DroneCaseinfo/GetCaseInfo',{id: relid}).then(res => {
            this.handleForm = res.result.info
            this.ruleFormId = res.result.info.id
            this.formsVisible = true
        })
    }

   
        
  }
  
}
</script>

<style scoped>
.myDivIcon{

}
.diacontain{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.diacontainer{
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  position: absolute;
  top:0;
  left: 0;
  z-index: 99999;
}
.diabox{
  width: 600px;
  height: 820px;
  position: absolute;
  left: 50%;top: 50%;
  margin-left: -300px;
  margin-top: -455px;
  background: #fff;
  border-radius: 5px;
  z-index: 99999;
  overflow: hidden;
}
.diabox .diatitle{
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  background: #f8f8f8;
}
.diabox .diatitle .flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diabox .diatitle span{
  font-size: 14px;
  color: #333;
}
.diabox .diatitle i{
  font-size: 14px;
  color: #0a76a4;
  cursor: pointer;
}
.diabox .diacontent{
  height: 785px;
  padding: 10px;
  font-size: 14px;
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100vh;
  z-index: 1;
}


</style>
