<template>
<div id="gismap">
    <div class="seachMap" v-show="showMap == '1'">
        <!-- <Input v-model="searthValue" placeholder="搜索地点" style="width: 250px;" /> -->
        <Button type="info" @click="handelOk()">保存</Button>
        <Button type="info" @click="addPolygon()">绘制</Button>
        <Button type="info" @click="handelEdit()">编辑</Button>
        <Button type="info" @click="handelDelete()">删除</Button>
        <Button type="info" @click="handelcore()">添加中心点</Button>
        <el-color-picker v-model="color" color-format="hex"></el-color-picker>  
        
    </div>
    <div id="map"></div>
</div>
         </template>

  <script>
           export default {
props: ['showMap'], //   showMap    参数1 是区域编辑按钮  展示
data() {
    return {
        iconurl1: require('../assets/images/screen/marker1.png'),  //  逾期
        iconurl2: require('../assets/images/screen/marker2.png'),  //  紧急
        iconurl3: require('../assets/images/screen/marker3.png'),   //  正常
        iconurl4: require('../assets/images/screen/markPeo.png'),   //  人
        bigMap: null,
        draw: null, //设置一个变量来保存当前的绘制对象
        drawnItems: null, //创建一个图形覆盖物的集合来保存点线面
        searthValue: '',
        ArrMarkerPT:[],//  普通事件
        ArrMarkerJJ:[],//  紧急事件
        layer: null, //  面数据
        color: '#1C26D6',
        latlng: null ,//  经纬度
        arrLayer:[],//  所有区域
        ArrMarkerWGY:[],//  网格员
        ArrMarkerZC:[],//  正常事件
        ArrMarkerYQ:[],//  逾期事件
    };
},
mounted() {
    this.init();
},
methods: {
    init() {
        let that = this;
        // BM.Config.HTTP_URL = ' http://192.168.11.46:9000';
        BM.Config.HTTP_URL = 'http://106.8.152.2:55556';
        // 在ID为map的元素中实例化一个地图，不要设置地图ID，ID号程序自动生成，无需手动配置，设置中心点，默认的级别和显示级别控件
        var map = BM.map('map', null, { crs: BM.CRS.Baidu, center: [40.730171, 114.885675], zoom: 10, zoomControl: true, attributionControl: false, maxZoom: 15 });
        // 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.baidu-map，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
        //河北的数据下载到了 13级，张家口的数据下载了 17级
        // var layer1 = BM.tileLayer('bigemap.d5t2jr8t')
        //  .addTo(map)
        //  .on('load', function(argument) {
        //      layer1.options.maxNativeZoom = 13;
        //      layer1.options.maxZoom = 15;
        //      map.setMaxZoom(15);
        //  });
        // bigemap.5v7t9nd2
        // bigemap.arlcbhau
        var layer2 = BM.tileLayer('bigemap.arlcbhau')
            .addTo(map)
            .on('load', function(argument) {
                map.setMaxZoom(15);
            });
        that.bigMap = map;
        // var arcgis_satellite = BM.tileLayer('bigemap.56me4vj7');
        // arcgis_satellite.addTo(map);
        //创建一个图形覆盖物的集合来保存点线面
        that.drawnItems = new BM.FeatureGroup();
        //添加在地图上
        that.bigMap.addLayer(that.drawnItems);
    },
    //监听绘画完成事件
    ceeatedDraw() {
        let that = this;
        that.bigMap.on(BM.Draw.Event.CREATED, function(e) {
            if(that.layer){
                that.layer.remove()
            }
        that.layer = e.layer;
        that.drawnItems.addLayer(that.layer);
        
        });
    },
    
    // 循环加载区域
    forPolygon() {
        let that = this;
        var latlngs = [[40.7167295, 114.87690484], [40.81924185, 114.87879372], [40.61467295, 114.98690484]];
        that.layer = BM.polygon(latlngs, { color: that.color }).addTo(that.bigMap);
        // that.drawnItems.removeLayer(that.layer);
        // 让地图适配当前的线段
        // that.bigMap.fitBounds(polygon.getBounds());
    },
    // 添加点位
    handelcore() {
        let that = this;
        that.bigMap.addEventListener('click', that.ShowInfo);
    },
    ShowInfo(e) {
        if (this.latlng) {
            this.latlng.remove();
        }
        this.latlng = e.latlng;
        this.latlng = BM.marker(e.latlng).addTo(this.bigMap);
    },
    // 添加区域边界
    addPolygon() {
        let that = this;
        that.bigMap.removeEventListener('click', that.ShowInfo);
        that.draw = new BM.Draw.Polygon(that.bigMap, {
            showArea: false,
            allowIntersection: false,
            drawError: {
                color: '#b00b00',
                message: '不能绘制交叉的多边形!'
            },
            shapeOptions: {
                color: that.color
            }
        });
        that.draw.enable();
        that.ceeatedDraw();
    },
    // 编辑图层
    handelEdit() {
        let that = this;
        that.layer.once('click', () => {
            that.layer.editing.enable();
            that.bigMap.once('contextmenu', () => {
                that.layer.editing.disable();
            });
        });
        this.bigMap.removeEventListener('click', this.ShowInfo);
    },
    // 删除图层
    handelDelete() {
        let that = this;
        that.layer.on('click', e => {
            that.layer.remove()
            that.layer=null
        });
    },
    // 加载热力
    getRandom(data) {
        let arr=[]
          data.diagramList.forEach(res=>{
              if(res.area_center){
                  let lanlat=res.area_center.split(',')
                  arr.push([parseFloat(lanlat[0]) ,parseFloat(lanlat[1]),res.peopleCount])
              }
          })
        var heat = BM.heatLayer(arr, { radius: 20, minOpacity: 0.5, gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' } }).addTo(this.bigMap);
        heat.on('mousemove',function(e){
            console.log(e)
        })
        this.bigMap.setView([40.730171, 114.885675],9);
        
    },
    // 不同页面等级
    setViewMap(level){
            this.bigMap.setView([40.730171, 114.885675],level);
    },
    // 保存区域编辑
    handelOk() {
        this.$emit('handelOkmap', this.layer, this.latlng, this.color); //  范围  中心点  颜色
    },
    // 画区域回显
    forPolygonOne(data){
        let that=this
        if(that.latlng){
            that.latlng.remove()
        }
        if(that.layer){
            that.layer.remove()
        }
      // 加载区域 和定位点
        if(data.areaCenter&&data.areaRange){
             let arr=JSON.parse(data.areaRange)
            let str={
                lat:data.areaCenter.split(',')[0],
                lng:data.areaCenter.split(',')[1]
            }
            that.layer = BM.polygon(arr, { color: data.reserve1 }).addTo(that.bigMap);
            that.color=data.reserve1
            that.bigMap.fitBounds(that.layer.getBounds());
            that.latlng = BM.marker(str).addTo(this.bigMap);
        }else if(data.areaCenter){
            let str={
                lat:data.areaCenter.split(',')[0],
                lng:data.areaCenter.split(',')[1]
            }
            that.latlng = BM.marker(str).addTo(this.bigMap);
            that.bigMap.setView([str.lat,str.lng],9);
        }
        
        
        
       
    },
    // gis管理   区域面
    forPolygonOneGIS(data){
    let that=this
        let arr=JSON.parse(data.areaRange)
         that.layer = BM.polygon(arr, { color: data.reserve1 }).addTo(that.bigMap);
         that.layer.bindTooltip(`<div style=background-color:${data.reserve1}>${data.areaName}</div>`,{permanent:true,className:'myLayer_tooltip'});
         that.layer['name']=data.areaName
         that.layer['id']=data.id
         that.layer['areaId']=data.areaId
         that.layer['areaLevel']=data.areaLevel
         that.arrLayer.push(that.layer)
         that.layer.on('click',function(e){
             console.log(e.target.areaLevel)
             if(e.target.areaLevel>=3){   //  社区 村 一下
                 that.$emit('gisAreaPeo',e.target.areaId)
             }
         })
    },
    // 定位当前位置
    markerLocation(data,n){
        let level=n?n:11
        let that=this
        let str={
            lat:data.areaCenter.split(',')[0],
            lng:data.areaCenter.split(',')[1]
            }
            that.bigMap.setView([str.lat,str.lng],level);
    },
     // 网格员 事件
    formarkerLocation(data,title){
        let that = this;
        let small_icon =null;
        if(title=='网格员'){
            small_icon= BM.icon({
                iconUrl: that.iconurl4,
                iconSize: [44, 71],
                iconAnchor: [10, 20]
            });
            //设置图标
            let mark = BM.marker([data.latitude,data.longitude], {
                icon: small_icon
            }).bindTooltip(data.name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
            mark['name']=data.areaName
            mark['id']=data.areaerId
            that.ArrMarkerWGY.push(mark)
            mark.on('click',function(e){
                    console.log(e)
                    that.$emit('headelPeoDetail',e.target.id)
            })
            
        }else if(title=='逾期事件'){  //  逾期事件
            small_icon= BM.icon({
                iconUrl: that.iconurl1,
                iconSize: [44, 71],
                iconAnchor: [10, 20]
            });
            //设置图标
            let mark = BM.marker([data.latitude,data.longitude], {
                icon: small_icon
            }).bindTooltip(data.event_name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
            mark['name']=data.event_name
            mark['id']=data.id
            that.ArrMarkerYQ.push(mark)
        }else if(title=='正常事件'){  //  正常事件
            small_icon= BM.icon({
                iconUrl: that.iconurl3,
                iconSize: [44, 71],
                iconAnchor: [10, 20]
            });
            //设置图标
            let mark = BM.marker([data.latitude,data.longitude], {
                icon: small_icon
            }).bindTooltip(data.event_name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
            mark['name']=data.event_name
            mark['id']=data.id
            that.ArrMarkerZC.push(mark)
        }else if(title=='紧急事件'){  //  紧急事件
            
        }else if(title=='普通事件'){  //  普通事件
            small_icon= BM.icon({
                iconUrl: that.iconurl3,
                iconSize: [44, 71],
                iconAnchor: [10, 20]
            });
            //设置图标
            let mark = BM.marker([data.latitude,data.longitude], {
                icon: small_icon
            }).bindTooltip(data.event_name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
            mark['name']=data.event_name
            mark['id']=data.report_id
            that.ArrMarkerPT.push(mark)
            mark.on('click',function(e){
                    console.log(e)
                    that.$emit('headelEventDetail',e.target.id,'普通事件')
            })
        }
        // $('.bigemap-tooltip-pane').html('')
    },
    // 删除所有标注区域
    ForRemovePoly(){
        let that=this
        if(that.arrLayer.length){
            that.arrLayer.forEach(res=>{
                res.remove()
            })
        }
    },
    // 删除所有标注
    ForRemoveMarker(title,arr){
        let that=this
        if(that[arr].length){
            that[arr].forEach(res=>{
                res.remove()
            })
        }
    }
}
};
</script>
<style lang="less">
.myLayer_tooltip{
    background: none;
    border: none;
    &:before{
        border: none;
    }
    div{
         padding: 3px 5px;
         border-radius: 3px;
         color: #fff;
    }
    
}
.my_tooltip{
    left: 12px;
        top: -17px;
}
  .bigemap-control-container {
display: none;
}

</style>
 <style scoped lang="less">
  .seachMap {
position: fixed;
z-index: 100;
padding: 10px;
button {
    margin: 0 10px;
}
.el-color-picker {
    position: absolute;
    top: 5px;
}
}
 #gismap {
width: 100%;
height: 100%;

#map {
    width: 100%;
    height: 100%;
    background: url('../assets/images/screen/bg.png') no-repeat;
}
}
  </style>