<template>
  <div style="width:100%;height:100%">
      <div id="map" class="mapDiv"></div>
  </div>
</template>

<script>
var map;
var zoom = 12;
import {loadBaseLayers} from "./js/layerManage";
import {layerStyle} from "./js/layerStyle";
import {getMethodCommon, postMethodCommon } from "@/api/common";
import appInfo from '/public/config.json'
export default {
	name: "Map",
	props: ['defaultPosition','caseId'],
	data() {
		return {
			map: null,
		};
	},
	watch:{
		"defaultPosition":function(e){
			this.getData();
			this.map.fitBounds([e],{maxZoom: 19,animate: true});
		}
	},
	mounted() {
		this.mapInit();
		
	},
	methods: {
		mapInit() {
			let baseLayers = loadBaseLayers()
			this.map = L.map("map", {
				center: this.defaultPosition, // 地图中心117.9827,
				zoom: 15, //缩放比列
				minZoom: 0,
				maxZoom:20,
				zoomControl: false, //禁用 + - 按钮
				doubleClickZoom: false, // 禁用双击放大
				attributionControl: false, // 移除右下角leaflet标识
				crs: L.CRS.EPSG4326, //设置坐标系4326
				layers: [baseLayers["卫星"]],
				layer:null
			});
			//点位
			this.map.pm.setLang("zh"); //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
			this.getData()
			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();
		},

		getData(){
			if(this.layer != null){
				this.map.removeLayer(this.layer)
			}
			getMethodCommon('/DroneCaseinfo/GetDroneGeoJson',{id:this.caseId}).then(res =>{
				this.layer = L.geoJSON(res.result.features, {
				  ...layerStyle.selectLayerGroup.style
				}).addTo(this.map)
			})
		},
		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];
    },
	},
}
</script>

<style>
.map-contain {
	background-color: #ffffff;
}

.mapDiv {
	width: 100%;
	height: 100%;
}
.imgdiv{
	width: 100%;
	height: 100%;

}
</style>
