openlayers之轨迹回放（附加暂停、继续播放功能）

管理员--0728

已于 2024-07-17 18:30:41 修改

阅读量6k

点赞数 13

分类专栏： openlayers 文章标签： openlayers

于 2021-04-08 18:15:42 首次发布

本文链接：https://blog.youkuaiyun.com/hangzhou728/article/details/115527753

版权

效果图

在这里插入图片描述

添加暂停、继续后的效果图

在这里插入图片描述

老规矩，直接上代码，已经把该备注的都备注好了（可直接复制查看）

	<div id="map"></div>
	<label for="speed">
	    speed:&nbsp;
	    <input id="speed" type="range" min="10" max="999" step="10" value="60">
	</label>
	<button id="start-animation">Start Animation</button>
<script>
	var center =  [-5639523.95, -3501274.52];

    var map = new ol.Map({
   
    target: document.getElementById('map'),
    view: new ol.View({
   
        center: center,
        zoom: 10 ,
        minZoom: 2,
        maxZoom: 18,
    }),
    layers: [
        new ol.layer.Tile({
   
            source: new ol.source.OSM(),    //底图
        }) ],
    });
    //polyline 从官网拿到的json数据，最后转为[[],[],[]...]
    var polyline = 'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}NfIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_EkUFmq@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]kDuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mCum@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@kai@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgBk_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`GsAwXyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrXitAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNmaCsK_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{dAmb@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknFoFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snAw`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDwzGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwyA{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@gjBbh@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipAdy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_s@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCoSfFwXhEmOnLi\\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{@|QsAfYgEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~kDyq[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@??jIab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJuEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
    var route = new ol.format.Polyline({
   
        factor: 1e6,
    }).readGeometry(polyline, {
   
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857',
    });
    var routeLength = route.A.length;
    var routeCoords = []
    var routeCoordsX = []
    var routeCoordsY = []
    for(var i=0;i<route.A.length;i++) {
   
        if(i%2 ==0){
   
            routeCoordsX.push(route.A[i])
        }else{
   
            routeCoordsY.push(route.A[i])
        }
    }
    // 将[1,2,3,4,5,6...]转为[[1,2],[3,4],[5,6]...]
    for(var i=0;i<routeCoordsX.length;i++) {
   
        routeCoords.push([routeCoordsX[i],routeCoordsY[i]])
    }
    // 矢量元素要呈现的几何图形的特征属性LineString代表线段
    var routes = new ol.geom.LineString(routeCoords);
    var routeLength = routeCoords.length;
    // var routeCoords =[
    //     [120.97202539443971,29.149083495140076],
    //     [121.27202539443971,29.149083495140076],
    //     [121.99202539443971,29.149083495140076],
    //     [122.27202539443971,29.149083495140076],
    //     [123.27202539443971,29.149083495140076],
    //     [123.97202539443971,29.149083495140076],
    //     [125.0260719060898,30.149083495140076],
    //     [129.0260719060898,29.115327894687653]
    // ]
    // var route = new ol.geom.LineString(routeCoords);
    // 定义矢量元素
    var routeFeature = new ol.Feature({
   
        type: 'route',
        geometry: routes,
    });
    var geoMarker = new ol.Feature({
   
        type: 'geoMarker',
        geometry: new ol.geom.Point(routeCoords[0]),
    });
    var startMarker = new ol.Feature({
   
        type: 'iconStart',
        geometry: new ol.geom.Point(routeCoords[0]),
    });
    var endMarker = new ol.Feature({
   
        type: 'iconEnd',
        geometry: new ol.geom.Point(routeCoords[routeLength - 1]),
    });
    // 设置矢量元素样式
    var styles = {
   
        'route': new ol.style.Style({
   
            stroke: new ol.style.Stroke({
   
                width: 6,
                color: [237, 212, 0, 0.8],
            }),
        }),
        'iconStart': new ol.style.Style({
   
            image: new ol.style.Icon({
   
                anchor: [0.5, 0.5],
                src: './startSend.png',
            }),
        }),
        'iconEnd': new