PathSimplifier的使用

wcsy2018110

已于 2024-04-16 16:28:00 修改

阅读量672

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端

于 2024-04-16 16:09:50 首次发布

本文链接：https://blog.csdn.net/qq_48378883/article/details/137829251

文章描述了如何在JavaScript中使用AMapUI的PathSimplifier库处理轨迹数据，创建路径简化器实例，以及构建并控制轨迹的显示和巡航。重点在于Canvas支持和轨迹相关操作的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//加载PathSimplifier，loadUI的路径参数为模块名中 'ui/' 之后的部分 
AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {

    if (!PathSimplifier.supportCanvas) {
        alert('当前环境不支持 Canvas！');
        return;
    }

    //启动页面
    initPage(PathSimplifier);
});

function initPage(PathSimplifier) {
    //创建组件实例
    var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        map: map, //所属的地图实例
        getPath: function(pathData, pathIndex) {
            //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
            return pathData.path;
        },
        getHoverTitle: function(pathData, pathIndex, pointIndex) {
            //返回鼠标悬停时显示的信息
            if (pointIndex >= 0) {
                //鼠标悬停在某个轨迹节点上
                return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
            }
            //鼠标悬停在节点之间的连线上
            return pathData.name + '，点数量' + pathData.path.length;
        },
        renderOptions: {
            //轨迹线的样式
            pathLineStyle: {
                strokeStyle: 'red',
                lineWidth: 6,
                dirArrowStyle: true
            }
        }
    });

    //这里构建两条简单的轨迹，仅作示例
    pathSimplifierIns.setData([{
        name: '轨迹0',
        path: [
            [100.340417, 27.376994],
            [108.426354, 37.827452],
            [113.392174, 31.208439],
            [124.905846, 42.232876]
        ]
    }, {
        name: '大地线',
        //创建一条包括500个插值点的大地线
        path: PathSimplifier.getGeodesicPath([116.405289, 39.904987], [87.61792, 43.793308], 500)
    }]);

    //创建一个巡航器
    var navg0 = pathSimplifierIns.createPathNavigator(0, //关联第1条轨迹
        {
            loop: true, //循环播放
            speed: 1000000
        });

    navg0.start();
}