<template>
    <div id="searchDivCar" style="position:absolute;top:100px;left:80px;width:320px;height:50px;
                                background:rgba(2, 84, 167, 0.1);z-index:99999;border: 1px solid #ccc; padding: 1em;display: block">  
        <ul id="controls">         
            <!--<li style="list-style-type:none;">  
                <label for="pointToggle">关键字:</label>  
                <input name="searchkey" id="searchkey"  type="text" v-model="searchValue">             
                <input name="type" value="搜索" id="polygonToggle" @click="filterKey" type="button">  
            </li>-->
            <form id="optionsform" ref="optionsform" automplete="off">
                 <label for="speed">
                speed:&nbsp;
                <input id="speed" type="range" min="10" max="999" step="10" value="5" ref="speed">
                </label>
                <input name="type" value="开始运行"  @click="startAnimation" type="button">
            </form>
        </ul>       
     </div>          
</template>
<script>
 import turf_distance from '@turf/distance'
 import turf_point from 'turf-point'
 import { Fill, Stroke, Style, Text, Icon, Circle } from 'ol/style'
 import Feature from 'ol/Feature'
 import { Point, LineString } from 'ol/geom'
 //import Geom from 'ol/geom'
 import ol from 'ol'
 import Overlay from 'ol/Overlay'
 import { Vector as VectorLayer } from 'ol/layer'
 import { Vector as VectorSource } from 'ol/source'
 import { getBottomLeft, getTopRight, containsCoordinate } from 'ol/extent'
 import Polyline from 'ol/format/Polyline.js';
var animating = false;
var speed, now;
var speedInput = document.getElementById('speed');
var startButton = document.getElementById('start-animation');
var geoMarker,routeLength,routeCoords;
var mapFeature;
var styles;
export default{
    name:'car-move',
    render () { },
    data() {
       return {
         selectValue:'100',
         windowMap:{}
       } 
    },
    mounted(){
       
    },
    props:{
        position: {
            type: Object 
        },
        title: {
            type: String,
            default: '属性'
        },
        map:{
            type: Object 
        }
    },
    methods:{
        initLine(map){
            var lineArr = new Array()
            var lngX = 116.397428
            var latY = 39.146874950477105
            //数组中添加坐标
            lineArr.push([lngX, latY])
            //随机生成坐标点
            for (var i = 1; i < 10; i++) {
                lngX = lngX + Math.random() * 0.1
                if (i % 2) {
                    latY = latY + Math.random() * 0.1
                } else {
                    latY = latY + Math.random() * 0.6
                }
                lineArr.push([lngX, latY])
            }

            var polyline = [
            'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}N',
            'fIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^',
            'aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_E',
            'kUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_',
            'Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@',
            'sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]k',
            'DuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mC',
            'um@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@ka',
            'i@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgB',
            'k_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__',
            'DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAw',
            'Xyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrX',
            'itAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@',
            'xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNma',
            'CsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_',
            'fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o',
            '~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAm',
            'b@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_',
            'lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknF',
            'oFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snA',
            'w`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDw',
            'zGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}',
            '@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwy',
            'A{kHo~@omEoYmoDaEcPiuAosDagD}rO{{AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi',
            '@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC',
            '|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBb',
            'h@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipA',
            'dy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_',
            's@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCo',
            'SfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@',
            'oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e',
            '[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfY',
            'gEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~k',
            'Dyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB',
            '_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jI',
            'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@',
            'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJ',
            'uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m',
            '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
        ].join('');
        debugger;
        // var route = /** @type {module:ol/geom/LineString~LineString} */ (new Polyline({
        //     factor: 1e6
        // }).readGeometry(polyline, {
        //     dataProjection: 'EPSG:4326',
        //     featureProjection: 'EPSG:4326'
        // }));
        var vm=this;     
        //获取直线的坐标
         routeCoords = route.getCoordinates();
         routeLength = routeCoords.length;
        var routeFeature = new Feature({
            type: 'route',
            geometry: route
        });
        geoMarker = new Feature({
            type: 'geoMarker',
            geometry: new Point(routeCoords[0])
        });
        var startMarker = new Feature({
            type: 'icon',
            geometry: new Point(routeCoords[0])
        });
        var endMarker = new Feature({
            type: 'icon',
            geometry: new Point(routeCoords[routeLength - 1])
        });
         styles = {
            'route':new Style({
                stroke: new Stroke({
                    width: 6,
                    color: '#F2C841'
                }),
                fill:new Fill({
                    color:"#F6E3A3"
                })
            }),
            'geoMarker': new Style({
                    image: new Icon({
                        src:'data:image/png;base64,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',
                        rotateWithView: false,
                        rotation: -Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0]),
                        scale:0.3,
                    })
                }),
            'stop':new Style({
                   stroke: new Stroke({
                                color: '#ff3100',
                                width: 1
                            }),
                            fill: new Fill({
                                color: 'rgba(0, 0, 255, 0.1)'
                            })
            })
        };
        var vectorLayer = new VectorLayer({
            id:'carLayer',
            source: new VectorSource({
                features: [routeFeature, geoMarker, startMarker, endMarker]
                //  features: [routeFeature, geoMarker, startMarker, endMarker,stopMakers[0],stopMakers[1],stopMakers[2],stopMakers[3]]
            }),
            style: function (feature) {
                //如果动画是激活的就隐藏geoMarker
                if (animating && feature.get('type') === 'geoMarker') {
                    return null;
                }
                return styles[feature.get('type')];
            }
        });
       // var center = ol.proj.fromLonLat([115.981,40.451]);
        map.addLayer(vectorLayer);
      },
       moveFeature(event){
           debugger
            var vectorContext = event.vectorContext;
            var frameState = event.frameState;
            if (animating) {
                var elapsedTime = frameState.time - now;
                // here the trick to increase speed is to jump some indexes
                // on lineString coordinates
                debugger;
                let speed = parseInt(this.$refs.speed.value)
                var index = Math.round(speed * elapsedTime / 1000);
                if (index >= routeLength) {
                    this.stopAnimation(true);
                    return;
                }
                var dx,dy,rotation,carStyle;
                debugger
                if(routeCoords[index] && routeCoords[index+1]){
                    dx=routeCoords[index][0]-routeCoords[index+1][0];
                    dy=routeCoords[index][1]-routeCoords[index+1][1];
                    rotation = Math.atan2(dy,dx);
                    //console.log("***********",rotation);
                    carStyle= new Style({
                        image: new Icon({
                            src: "data:image/png;base64,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",
                            rotateWithView: false,
                            rotation: -rotation,
                            scale:0.5,
                        })
                    });
                    var currentPoint = new Point(routeCoords[index]);  //当前点
                    var feature = new Feature(currentPoint);
                    vectorContext.drawFeature(feature, carStyle);
                }

                // var currentPoint = new Point(routeCoords[index]);
                // var feature = new Feature(currentPoint);
                // vectorContext.drawFeature(feature, styles.geoMarker);
            }
            // tell OpenLayers to continue the postcompose animation
            this.map.render();
            // var vectorContext = event.vectorContext;   //HTML5 Canvas context，ol.render.canvas.Immediate的对象
            // var frameState = event.frameState;        //freme 的状态
            // if (animating) {
            //     var elapsedTime = frameState.time - now;    //elapsedTime  已过时间
            //     //通过增加速度，来获得lineString坐标
            //     var index = Math.round(speed * elapsedTime / 1000);   //已经走了多少个点
            //     //console.log("#########",routeCoords[index]);
            //     if (index >= routeLength) {
            //         stopAnimation(true);
            //         return;
            //     }
            //     //fixme ---------------
            //     if( index < 14){
            //         flashFeature(0);
            //     }
            //     if( index == 14){
            //         changeStyle(0, 1);
            //     }
            //     if(index > 14 && index <43){
            //         flashFeature(1);
            //     }
            //     if(index == 43){
            //         changeStyle(1, 2);
            //     }
            //     if(index > 43 && index <63){
            //         flashFeature(2);
            //     }
            //     if(index == 63){
            //         changeStyle(2, 3);
            //     }
            //     if(index > 63 && index <85){
            //         flashFeature(3);
            //     }
            //     if(index == 85){
            //         changeStyle(3, 3);
            //     }
            //     //fixme--------------------
            //     var dx,dy,rotation,carStyle;
            //     if(routeCoords[index] && routeCoords[index+1]){
            //         dx=routeCoords[index][0]-routeCoords[index+1][0];
            //         dy=routeCoords[index][1]-routeCoords[index+1][1];
            //         rotation = Math.atan2(dy,dx);
            //         //console.log("***********",rotation);
            //         carStyle= new Style({
            //             image: new Icon({
            //                 src: "http://webapi.amap.com/images/car.png",
            //                 rotateWithView: false,
            //                 rotation: -rotation,
            //                 scale:0.3,
            //             })
            //         });
            //         var currentPoint = new Point(routeCoords[index]);  //当前点
            //         var feature = new Feature(currentPoint);
            //         vectorContext.drawFeature(feature, carStyle);
            //     }
            // }
            // //继续动画效果
            // mapFeature.render();
            // if(mapFeature){

            // }
       },
       startAnimation(map,center){
            if (animating) {
                this.stopAnimation(false,map);
            } else {
                animating = true;
                now = new Date().getTime();           /** 开始时的时间*/
                // speed = speedInput.value;
                //startButton.textContent = '结束运动';
                //隐藏geoMarker
                geoMarker.setStyle(null);
                //设置显示范围
                //map.getView().setCenter();
                this.map.on('postcompose', this.moveFeature);    /** postcompose事件-- 地图渲染时都会触发   */
                // map.on('postcompose', function(){
                //    alert(123);
                // })
                this.map.render();
            }
       },
       stopAnimation(ended,map){
            animating = false;
           // startButton.textContent = '开始运动';

            //如果动画取消就开始动画
            var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
            /** @type {ol.geom.Point} */
            (geoMarker.getGeometry()).setCoordinates(coord);
            //移除监听
            map.un('postcompose',  this.moveFeature);    /** 解除postcompose 事件  */
       }

    }
}
 </script>