import {Select} from 'ol/interaction'
import Circle from 'ol/geom/Circle'
import Overlay from 'ol/Overlay'
import  Feature  from 'ol/Feature'
import { Point } from 'ol/geom'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import {
    clearSpatial
} from './poiQuery'
import WFS from 'ol/format/WFS'
import { and, isNull, not, bbox, between, contains, during, equalTo, greaterThan, 
    greaterThanOrEqualTo, intersects, lessThan, lessThanOrEqualTo, like, or, within } from 'ol/format/filter'
import {equalTo as equalToFilter,like as likeFilter,and as andFilter,within as withinFilter} from 'ol/format/filter.js'
import {circular as circularPolygon, fromCircle as fromCirclePolygon} from 'ol/geom/Polygon.js'
import { Fill, Stroke, Style, Text, Icon, Circle as CircleStyle } from 'ol/style'
import WKT from 'ol/format/WKT'
var overlayToShowSelectedInf
export function highLight(map,center){
        let vectorSource = new VectorSource({})
        //创建图标特性
        let iconFeature = new Feature({
            geometry: new Point([center[0], center[1]])
        })
        //将图标特性添加进矢量中
        vectorSource.addFeature(iconFeature)
        //创建图标样式
        let iconStyle = new Style({
            image: new Icon({
                imgSize: [30, 30],  // 及图标大小
                src:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAC4jAAAuIwF4pT92AAAF62lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNC0xNVQxMzo1ODoxMSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNC0xNVQxMzo1ODoxMSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDQtMTVUMTM6NTg6MTErMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZTgyNDlmNWYtY2ZjMy04NTQ5LTlmOTUtNzVlYWJiNDdlY2Y1IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ODVmMDE0YWItMGQwOC0wMTQwLTg0M2QtOWQzOGQxZWNhZjkzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ODA4NWUwY2UtZjlkZi02NzQ3LTk4NGMtM2ViZjlhY2U2MTRkIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MDg1ZTBjZS1mOWRmLTY3NDctOTg0Yy0zZWJmOWFjZTYxNGQiIHN0RXZ0OndoZW49IjIwMTktMDQtMTVUMTM6NTg6MTErMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU4MjQ5ZjVmLWNmYzMtODU0OS05Zjk1LTc1ZWFiYjQ3ZWNmNSIgc3RFdnQ6d2hlbj0iMjAxOS0wNC0xNVQxMzo1ODoxMSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7I/R8mAAADdUlEQVRIicXXTYgcRRjG8d/bPV8bdNkYjFHBg9GbkIsRBHPwpCAiEkTPgUjQixcRFUSFIIJelPiVg5d4UtGweDNBEFSiETSoJKAHQdwkhnyYzWxvprs81GzcDLubnSWQF4aumap6/1VdTz01FSkl1yJay1XMPLxt9KfADbgXD2ArbsZxHMKX+AYncdlsNk1/vXrwSPTwBHYOwbEwksRtw0E8je+xF/vQXynhasDr8CJegIjI1JSIEMNnQkpp63AQd+JVnF8ruI2X8BwUEVJK+oNaVdcGqVFGoVeWuq1SEaHJmnl22Pd5zI0LDjwyTCJQN41T/b6z1UUXm0ZKFEGrCJPdjg0TE9pFqPMKP4PD+MjImkOxAngSu/JEQ52SmdkLTlyYU9U1Kf0STKeUfq7qxskLc2bOz5pvkiJiIccurF8q+UrgLbgv50hO9yun5yrBXBnxWkRsj7AjIh4rI14pmD1TzTvVrzSSIfse3D0ueBu6IVR17WxV5Q4Rr+NlHMU/OIbdEbEb/q0q83VtKME27h8XfNdCYX7QGDSNIkM+xvxI24v4tODIoG5Ug2Zx3ZZxwTflR1KnZkGtMzizTPuzxN+NLMJFeto4Lvh4foR2lAuC2Sy71VKxiXRHiVZRGHoM2cnGAv+wUOi0Cp2y1HCr7F4bRtqux46G29utUrcsF9d9u1TylfbxVziXUppsl6WpXs/c7Kw6pSfLiA14DydwI3bWKT0OU72ubqs0PHz6ODAu+FccSDwamOp1XGwGTvUrddNsj4iHIuKvlNItKZkoIqyf6JrqdQSG8jqIn8YF9/EOHkwpTRTBxnUTukXp7Py8alD3aja3InTK0lSvY7LbUQzNRlb+Hsv49ZW8+iA+xFNNyl49NdF1Xbejqmt1SsoI3bLQKgsSzf/muE8+KpeMlcRFfmN78Bs5aUrZm9e1267vdKxrt7WKUmoug/6Ot+X9vSawIfT9hS/p0gDSpU+T0ugpsNcyazsOOGEa362iLfyIzy1xIo0Lhj/k7TNqlaMxkN/O0SslXC0YPsMnV2izX/byK8Y44HOy0I4vU39qWH/6aoPJ/yL3W3r9vpDdblUxLhjelNd8cfyJN5YZ0FUDH8O7spCglrfPkXGSrAVMVvihYfkw3ho3wVrBs/KsZ/GBLLyxYrU3iaViWr7S7F9L57hWl7b/AIaIQ+rqJJWKAAAAAElFTkSuQmCC'
            }),
        })
        clearLayer("carLayer",map)
        //创建矢量层
        let vectorLayer = new VectorLayer({
            id:'carLayer',
            source: vectorSource,
            style: iconStyle
        })
        map.getView().setCenter([center[0], center[1]])
        map.getView().setZoom(15)
        //添加进map层
        map.addLayer(vectorLayer)
}
export function addClick(map){
    this.selectTool = new Select({
            multi:true,
            hitTolerance:4
    })
    map.addInteraction(this.selectTool)
    var _this = this
    // return new Promise(function(resolve) {
    //     _this.selectTool.on("select",function(e){
    //             _this.pos = []
    //             if(e.selected.length!==0){
    //                 //clearLayer('nearbySearch',_this.windowMap)
    //                 let coordinate = e.mapBrowserEvent.coordinate//监听地图变化
    //                 _this.lon = coordinate[0]
    //                 _this.lat = coordinate[1]
    //                 let properties = e.selected[0].getProperties()
    //                 //这块或者直接给sessionStroage
    //                 resolve(e)
    //                 //_this.createSelectInfoPop(coordinate,properties,map)
    //             }
    //             else{
    //                 _this.close()
    //             }     
    //     })    
    // })
}
export function clearLayer(layerId,map){
    //清除第一次添加的矢量图层
    if(map.getLayers().array_.length!=0){
        for(var i = 0;i<map.getLayers().array_.length;i++){
            if(map.getLayers().array_[i].type==="VECTOR"){
                if(map.getLayers().array_[i].values_.id===layerId){
                    map.removeLayer(map.getLayers().array_[i])
                 
                }
            }
        }
    }
}
export function createSelectInfoPop(overyPosition,properties,map){
    if(overlayToShowSelectedInfo){
        overlayToShowSelectedInfo = null
    }
    // let infowindow = this.$refs.info
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    let overlayElement = this.$refs.popup
    content.innerHTML= "<table>"+"<tr><td>地址:"+properties.address
                                 +"</tr></td>"+"<tr><td>名称:"+properties.name+"</table>"
    let overlayToShowSelectedInfo = new Overlay({
        element:container,
        position:"bottom-center",
        offset:[0,-10],
        position:overyPosition
    })
    map.addOverlay(overlayToShowSelectedInfo)
    overlayElement.style.display="block"
}
export  function close() {
    this.$refs.popup.style.display="none"
//   this.originInstance.setPosition(undefined)
//   this.$emit('close')
}