yymap-routeplay

yymap-routeplay 是基于 yymap 开发轨迹播放插件

CDN

<script type="text/javascript" src="https://unpkg.com/yymap-routeplayer/dist/yymap-routeplayer.min.js"></script>

警告

unpkg 比较慢，如果你嫌慢的话，可以把这个资源下载下来

YY.RoutePlayer

YY.RoutePlayer 是导出的命名空间

creation

• constructor(route,map,[options])
  • {Object} route:路径信息
  • {YY.Map} map:地图对象
  • {Object} options

//路径数据
const route = {
  path: [
    [121.475031060928, 31.2611187865471, 301000],
    [121.47940842604, 31.263466566376, 541000],
    [121.481768769973, 31.2649338991092, 781000],
    [121.483871621841, 31.2638700851521, 901000],
    [121.483742875808, 31.2617424212607, 1021000],
    [121.486532373184, 31.261925842451, 1201000],
    [121.48760525679, 31.2623660518534, 1441000],
    [121.488763971084, 31.2639067685916, 1681000],
    [121.489665193313, 31.2648238499456, 1981000],
    [121.491939706557, 31.2642736022027, 2281000],
    [121.492454690688, 31.2639067685916, 2461000],
    [121.495458764785, 31.2624761038832, 2641000],
    [121.49854866957, 31.2622193156141, 2881000],
    [121.504985971205, 31.2647138006537, 3181000],
    [121.50696007704, 31.2647504837653, 3481000],
    [121.514599008314, 31.2629896783252, 3781000],
    [121.515843553297, 31.2631730970915, 4081000],
    [121.518976373426, 31.2600916145062, 4321000],
    [121.520950479261, 31.2580739225948, 4501000],
    [121.519663018934, 31.2545153426586, 4621000],
    [121.517216844313, 31.2514702656954, 4801000],
    [121.515113992445, 31.2515436421988, 5041000],
    [121.512238664381, 31.2508098745995, 5341000],
    [121.509921235793, 31.2520205880802, 5521000],
    [121.504685563796, 31.2512501358434, 5821000],
    [121.50472847914, 31.2548822127716, 6061000],
    [121.505329293959, 31.2573768917291, 6361000],
    [121.505329293959, 31.2595046540352, 6541000],
    [121.500265283339, 31.2583674077352, 6661000],
    [121.497990770095, 31.2563863653288, 6901000],
    [121.494042558425, 31.2556159487204, 7201000],
    [121.495115442031, 31.2587342628775, 7381000],
    [121.491639299148, 31.2592478576813, 7501000],
    [121.488506479018, 31.2584774644276, 7741000],
    [121.483184976333, 31.2568632867449, 8041000],
    [121.480695886367, 31.2551390210024, 8281000],
    [121.482326669448, 31.2515436421988, 8401000],
    [121.480481309646, 31.2480215057159, 8701000],
    [121.48112503981, 31.2468474310257, 8881000],
    [121.482369584793, 31.2454165077606, 9061000],
    [121.485030336135, 31.2466272903962, 9301000],
    [121.488978547805, 31.245930175017, 9481000],
    [121.490866822952, 31.2455265795508, 9721000],
  ],
};

example

基本轨迹播放

var map = new YY.Map("map", {
    center: [121.47698763524318, 31.26107879207106],
    zoom: 15,
});

var tileLayer = YY.LayerLookup.lookup("amap");
map.addBaseLayer(tileLayer);

var player = new YY.RoutePlayer(route, map);
player.play();

events

playstart

playstart 播放开始

reset

reset 重置数据

clear

clear 清除数据

playpause

playpause 播放暂停

playcancel

`playcancel 播放取消

playfinish

playfinish 播放完成

const EVENTS = {
    playstart: "playstart",
    reset: "reset",
    clear: "clear",
    playpause: "playpause",
    playcancel: "playcancel",
    playfinish: "playfinish",
};
for (let eventType in EVENTS) {
    player.on(eventType, function(e) {
        console.log(e);
    });
}

method

play()

• 播放
• 返回值： this

pause()

• 暂停
• 返回值： this

replay()

• 重新播放
• 返回值： this

finish()

• 结束
• 返回值： this

cancel()

• 取消
• 返回值： this

clear()

• 清除
• 返回值： this

getUnitTime()

• 获取时间刻度，即速度
• 返回值：

setUnitTime(time)

• 设置时间刻度值，设置速度
• 参数
  • {Number} time :
• 返回值： this

setLineStyle(idx,lineStyle)

• 设置播放轨迹线的样式
• 参数
  • {Number} idx : 路径信息的索引，即数组的下标，第一条路径信息的 idx=0,
  • {YY.Style} lineStyle : YY.Style.formatLine();
• 返回值： this

setPointStyle(idx,pointStyle)

• 设置播放轨迹点的样式
• 参数
  • {Number} idx : 路径信息的索引，即数组的下标，第一条路径信息的 idx=0,
  • {YY.Style} pointStyle : YY.Style.formatImage();
• 返回值： this

resetRoutes(routes)

• 重置轨迹信息
• 参数
  • {Object} routes : 路径信息的索引，即数组的下标，第一条路径信息的 idx=0,
• 返回值： this