路径回放

import * as turf from '@turf/turf'export default class RouteReplay {/**** @param {*} map mapbox实例对象* @param {*} routejson 路径geojson type = lineString* @param {*} nsteps nsteps type = number* @param {*} realRouteLayerId 线条realRouteLayerId type = string* @param {*} animatePointLayerId animatePointLayerId type = string* @param {*} width 线条width type = number* @param {*} opacity 线条opacity type = number* @param {*} color 线条color type = string*/map: anyjson: anyrealRouteId: stringanimatePointId: stringanimated: booleancounter: numbersteps: numbernsteps: numbernewRouteGeoJson: anytimer: anylayerList: Arraywidth: numberopacity: numbercolor: stringfinish: booleanconstructor(map: any,routejson: {type: string;features: {type: string;geometry: {type: string;coordinates: number[][]}}[] | {type: string;geometry: {type: string;coordinates: number[][]}}[] },nsteps: number,realRouteLayerId: string,animatePointLayerId: string,width: {type: number;default: 5},opacity: {type: number,default: 1},color: {type: string,default: 'rgba(0,255,255,1)'}) {this.map = mapthis.json = routejsonthis.realRouteId = realRouteLayerIdthis.animatePointId = animatePointLayerIdthis.animated = falsethis.counter = 0this.steps = 0this.nsteps = nstepsthis.newRouteGeoJson = nullthis.timer = nullthis.layerList = []this.width = widththis.opacity = opacitythis.color = colorthis.finish = false// 进中的路线this.realRouteGeoJson = {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'LineString','coordinates': []}}]}// 实时点this.animatePointGeoJson = {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': []}}]}this.init()}init() {// eslint-disable-next-line prefer-destructuringthis.animatePointGeoJson.features[0].geometry.coordinates = this.json.features[0].geometry.coordinates[0]// 轨迹点jsonthis.newRouteGeoJson = this.resetRoute(this.json.features[0], this.nsteps, 'kilometers')// 轨迹点json的点数量this.steps = this.newRouteGeoJson.geometry.coordinates.lengththis.addRealRouteSource(this.realRouteId) // 添加实时轨迹线图层this.addAnimatePointSource(this.animatePointId) // 添加动态点图层this.layerList.push(`realRouteLayer${this.realRouteId}`, `animatePointLayer${this.animatePointId}`,)}animate() {this.finish = falseif (this.counter >= this.steps) {this.finish = truereturn}let startPntlet endPntif (this.counter === 0) { // 开始this.realRouteGeoJson.features[0].geometry.coordinates = []startPnt = this.newRouteGeoJson.geometry.coordinates[this.counter]endPnt = this.newRouteGeoJson.geometry.coordinates[this.counter]} else if (this.counter !== 0) {startPnt = this.newRouteGeoJson.geometry.coordinates[this.counter - 1]endPnt = this.newRouteGeoJson.geometry.coordinates[this.counter]}this.animatePointGeoJson.features[0].geometry.coordinates = this.newRouteGeoJson.geometry.coordinates[this.counter]this.realRouteGeoJson.features[0].geometry.coordinates.push(this.animatePointGeoJson.features[0].geometry.coordinates)// 已经走过的轨迹更新this.map.getSource(`realRouteLayer${this.realRouteId}`).setData(this.realRouteGeoJson)if (this.animated) {this.timer = requestAnimationFrame(() => { this.animate() })}// eslint-disable-next-line no-plusplusthis.counter++}addRealRouteSource(layerId) {this.map.addLayer({'id': `realRouteLayer${layerId}`,'type': 'line','source': {'type': 'geojson','lineMetrics': true,'data': this.realRouteGeoJson},'paint': {'line-width': this.width,'line-opacity': this.opacity,'line-color': this.color,}})}// 添加动态点图层addAnimatePointSource(layerId) {this.map.addLayer({'id': `animatePointLayer${layerId}`,'type': 'symbol','source': {'type': 'geojson','data': this.animatePointGeoJson},// 'layout': {//     'icon-image': '',//     'icon-size': 0,//     'icon-rotate': ['get', 'bearing'],//     'icon-rotation-alignment': 'map',//     'icon-allow-overlap': true,//     'icon-ignore-placement': true// }})}resetRoute(route, nstep, units) {const newroute = {'type': 'Feature','geometry': {'type': 'LineString','coordinates': []}}// 指定点集合的总路长const lineDistance = turf.lineDistance(route)// 每一段的平均距离const nDistance = lineDistance / nstepconst {length} = this.json.features[0].geometry.coordinates// eslint-disable-next-line no-plusplusfor (let i = 0; i < length - 1; i++) {let from = turf.point(route.geometry.coordinates[i]) // type 为 point的featurelet to = turf.point(route.geometry.coordinates[i + 1])let lDistance = turf.distance(from, to, { // 两个点之间的距离units: units})if (i === 0) { // 起始点直接推入newroute.geometry.coordinates.push(route.geometry.coordinates[0])}if (lDistance > nDistance) { // 两点距离大于每段值，将这条线继续分隔let rings = this.splitLine(from, to, lDistance, nDistance, units)newroute.geometry.coordinates = newroute.geometry.coordinates.concat(rings)} else { // 两点距离小于每次移动的距离，直接推入newroute.geometry.coordinates.push(route.geometry.coordinates[i + 1])}}return newroute}// 过长的两点轨迹点分段// eslint-disable-next-line class-methods-use-thissplitLine(from, to, distance, splitLength, units) {var step = parseInt(distance / splitLength, 10)const leftLength = distance - step * splitLengthconst rings = []const route = turf.lineString([from.geometry.coordinates, to.geometry.coordinates])// eslint-disable-next-line no-plusplusfor (let i = 1; i <= step; i++) {let nlength = i * splitLength// turf.alone返回沿着route<LineString>距离为nlength<number>的点let pnt = turf.along(route, nlength, {units: units});rings.push(pnt.geometry.coordinates)}if (leftLength > 0) {rings.push(to.geometry.coordinates)}return rings}start() {if (!this.animated) {this.animated = truethis.animate()}}pause() {this.animated = falsethis.animate()}end() {window.cancelAnimationFrame(this.timer)this.animated = falsethis.counter = 0this.animate()}remove() {window.cancelAnimationFrame(this.timer)// eslint-disable-next-line array-callback-returnthis.layerList.map(layer => {// console.log(layer)if (this.map.getSource(layer)) {this.map.removeLayer(layer)this.map.removeSource(layer)}})}finished(){return this.finish}
}

使用

new RouteReplay(map对象, 数据, 50, `${index}`, `${index}`, 5,1,'rgba(0,255,255,1)')