16.gis车辆轨迹回放之mapbox-gl

原创

已于 2023-09-27 14:49:51 修改 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #arcgis

于 2023-08-24 16:56:06 首次发布

该博客介绍了利用JavaScript和ArcGIS实现车辆轨迹展示的方法。包括数据准备，如routeGeoJson轨迹数据等；通过调用特定方法实现车辆出发、暂停等操作；初始化图标并重新获取轨迹点数据；最终完成车辆轨迹及位置的结果展示。

数据准备

routeGeoJson轨迹数据
svgXML道路箭头
newRouteGeoJson根据速度生成新的轨迹点数组
realRouteGeoJson车辆经过后的轨迹线
animatePointGeoJson车辆位置

var svgXML =
        `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" > 
                <path style="animation: fall 1s linear infinite;" d="M529.6128 512L239.9232 222.4128 384.7168 77.5168 819.2 512 384.7168 946.4832 239.9232 801.5872z" p-id="9085" fill="#ffffff"></path> 
            </svg>
            `
    //给图片对象写入base64编码的svg流
    var svgBase64 = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXML)));
    var isPlay = false
    var counter = 0
    var steps = 0
    let aLength = 0;
    var newRouteGeoJson;
    var routeGeoJson = {
   
   
        'type': 'FeatureCollection',
        'features': [{
   
   
            'type': 'Feature',
            'geometry': {
   
   
                'type': 'LineString',
                'coordinates': [[108,34],[108,35],[109,35]]
            }
        }]
    }

    var realRouteGeoJson = {
   
   
        'type': 'FeatureCollection',
        'features': [{
   
   
            'type': 'Feature',
            'geometry': {
   
   
                'type': 'LineString',
                'coordinates': []
            }
        }]
    }

    var animatePointGeoJson = {
   
   
        'type': 'FeatureCollection',
        'features': [{
   
   
            'type': 'Feature',
            'properties': {
   
   },
            'geometry': {
   
   
                'type': 'Point',
                'coordinates': []
            }
        }]
    }

调用

通过调用下列方法可实现车辆出发、暂停、继续、返回、清除所有

// 开始
export const startClick=async()=> {
   
   
    isPlay=false
    if (!isPlay) {
   
   
        clearAllLayers()
        await initCarAndLine();
        isPlay = true
        animate()
    }
}
// 暂停
export const pauseClick=()=> {
   
   

    isPlay = false
    animate()
}
// 继续
export const goOnClick=async()=> {
   
   
    if (!isPlay) {
   
   
        isPlay = true
        animate()
    }
}
// 返回
export const stopClick=()=> {
   
   
    isPlay = false
    counter = 0
    animate(