<template>
    <div class="mapbox" style="width:100%;height:100%;">
        <div class="query-container">
            <jy-query @draw="draws" @deleteDraw="deleteDraw" @query="query"></jy-query>
        </div>
        <!-- <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
    </select> -->
        <div id="map" class="map" style="width:100%;height:100%;">    
        </div>
    </div>
</template>
<style>
    /* .mapbox{
        position:fixed;
        width:100%;
        height:100%;
        left:0px;
        top:0px;
    } */
    .query-container{
        position:absolute;
        left:0px;
        top:50px;
        z-index:111;
    }
  
    .map:-moz-full-screen {
        height: 100%;
    }
    .map:-webkit-full-screen {
        height: 100%;
    }
    .map:-ms-fullscreen {
        height: 100%;
    }
    .map:fullscreen {
        height: 100%;
    }
    .ol-rotate {
        top: 3em;
    }

</style>
<script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {Draw, Modify, Snap} from 'ol/interaction.js';
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
      import {OSM, Vector as VectorSource} from 'ol/source.js';
      import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
    export default{
        data(){
            return {
                 drawType:"",
                 source:"",
                 map:"",
                 draw:'',
                 snap:""
            }
           
            
        },
        mounted:function(){
            var self=this;
            //底图资源    
            var raster = new TileLayer({
                    source: new OSM()
            });
            // var features=new ol.Collection();

            this.source = new VectorSource({
                
            });  //为矢量层提供功能源，此源提供的矢量特征适合编辑
            //呈现在客户端的矢量数据
            var vector = new VectorLayer({
                source: this.source,   
                style: new Style({
                //填充颜色
                fill: new Fill({
                    color: 'red'
                }),
                //线条（外框的颜色）
                stroke: new Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                //   image: new CircleStyle({
                //     radius: 7,
                //     fill: new Fill({
                //       color: '#ffcc33'
                //     })
                //   })
                })
            });

            this.map = new Map({
                layers: [raster, vector],
                target: 'map',
                view: new View({
                center: [-11000000, 4600000],
                zoom: 4
                })
            });

            var modify = new Modify({source: this.source});
            this.map.addInteraction(modify);
            this.addInteractions();
        },
        methods:{
            query(data){
                alert(data.index)
                if(data.index==2){
                    console.log(this.map.getLayers())
                }
            },
            draws(data){
                this.map.removeInteraction(this.draw);
                this.map.removeInteraction(this.snap);
                this.drawType=data.type;
               
                this.addInteractions();
            },
            addInteractions(){

                    if(this.drawType==""){
                        return;
                    }
                    this.draw = new Draw({
                        source: this.source,
                        type: this.drawType
                    });
                    this.map.addInteraction(this.draw);
                    this.snap = new Snap({source: this.source});
                    this.map.addInteraction(this.snap);

                
            },
            deleteDraw(){
                debugger;
                 this.map.removeInteraction(this.draw);
                this.map.removeInteraction(this.snap);
            },
        }
       
    }
</script>