轨迹巡航控制

展示PathSimplifier的巡航器的各种使用和控制接口，如速度、启动、暂停、停止等。

源代码编辑器
复制
运行
还原
          <!-- 重点参数：renderOptions -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/navigators.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>轨迹巡航控制</title>
    <style>
    #container,
    body,
    html {
        height: 100%;
        width: 100%
    }
    
    #loadingTip,
    #panel {
        position: absolute;
        top: 0
    }
    
    body,
    html {
        margin: 0;
        font-size: 12px
    }
    
    #outer-box {
        height: 100%;
        padding-right: 300px;
    }
    
    #panel {
        right: 0;
        width: 300px;
        z-index: 999;
        height: calc(100% - 5px);
        overflow: hidden;
        overflow-y: auto
    }
    
    #routes-container {
        height: 1200px;
        margin-left: 10px
    }
    
    #loadingTip {
        z-index: 9999;
        left: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 13px
    }
    
    .route-item {
        margin-bottom: 10px
    }
    
    .route-item pre {
        margin: 0
    }
    
    .route-item h3 {
        margin: 5px 0;
        font-size: 14px;
        cursor: pointer
    }
    
    .hide {
        display: none
    }
    
    .speedBox {
        padding: 5px 0
    }
    
    .speedRange {
        vertical-align: middle;
        margin: 0;
        padding: 0;
        width: 100px
    }
    
    .markerInfo {
        background: rgba(255, 255, 255, 0.7);
        padding: 2px 5px;
        border: 1px solid #ccc;
        white-space: nowrap;
    }
    </style>
</head>

<body>
    <div id="outer-box">
        <div id="container">
        </div>
        <div id="panel">
            <div id="routes-container">
            </div>
        </div>
    </div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

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

        //just some colors
        var colors = [
            "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
            "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
            "#651067", "#329262", "#5574a6", "#3b3eac"
        ];

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {

                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {

                if (pointIndex >= 0) {
                    //point 
                    return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
                }

                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
                pathLineStyle: {
                    dirArrowStyle: true
                },
                getPathStyle: function(pathItem, zoom) {

                    var color = colors[pathItem.pathIndex],
                        lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));

                    return {
                        pathLineStyle: {
                            strokeStyle: color,
                            lineWidth: lineWidth
                        },
                        pathLineSelectedStyle: {
                            lineWidth: lineWidth + 2
                        },
                        pathNavigatorStyle: {
                            fillStyle: color
                        }
                    }
                }
            }
        });

        var pathNavigs = [];

        function getNavg(pathIndex) {

            if (!pathNavigs[pathIndex]) {

                //创建一个轨迹巡航器
                var navgtr = pathSimplifierIns.createPathNavigator(pathIndex, {
                    loop: true,
                    speed: parseInt($('#speedInp_' + pathIndex).val())
                });

                var $markerContent = $('<div class="markerInfo"></div>');

                $markerContent.html(pathSimplifierIns.getPathData(pathIndex).name);

                navgtr.marker = new AMap.Marker({
                    offset: new AMap.Pixel(12, -10),
                    content: $markerContent.get(0),
                    map: map
                });

                var $msg = $('#routes-container').find('div.route-item[data-idx="' +
                    pathIndex + '"]').find('.msg');

                navgtr.on('move', function() {
                    navgtr.marker.setPosition(navgtr.getPosition());
                });

                navgtr.onDestroy(function() {
                    pathNavigs[pathIndex] = null;
                    navgtr.marker.setMap(null);
                    $msg.html('');
                });

                navgtr.on('start resume', function() {
                    navgtr._startTime = Date.now();
                    navgtr._startDist = this.getMovedDistance();
                });

                navgtr.on('stop pause', function() {

                    navgtr._movedTime = Date.now() - navgtr._startTime;
                    navgtr._movedDist = this.getMovedDistance() - navgtr._startDist;

                    navgtr._realSpeed = (navgtr._movedDist / navgtr._movedTime * 3600);

                    var msgInfo = {
                        '状态': this.getNaviStatus(),
                        '设定速度': this.getSpeed() + ' km/h',
                        '总行进距离': Math.round(this.getMovedDistance() / 1000) + ' km',
                        '本段行进距离': Math.round(navgtr._movedDist / 1000) + ' km',
                        '本段耗时': (navgtr._movedTime / 1000) + ' s',
                        '本段实际速度': Math.round(navgtr._realSpeed) + ' km/h'
                    };

                    $msg.html('<pre>' + JSON.stringify(msgInfo, null, 2) + '</pre>');

                    refreshNavgButtons();
                });

                navgtr.on('move', function() {

                    var msgInfo = {
                        '状态': this.getNaviStatus(),
                        '设定速度': this.getSpeed() + ' km/h',
                        '总行进距离': Math.round(this.getMovedDistance() / 1000) + ' km'
                    };

                    $msg.html('<pre>' + JSON.stringify(msgInfo, null, 2) + '</pre>');
                });

                pathNavigs[pathIndex] = navgtr;
            }

            return pathNavigs[pathIndex];
        }

        var navigBtnsConf = [{
            name: '开始巡航',
            action: 'start',
            enableExp: 'navgStatus === "stop" || navgStatus === "pause"'
        }, {
            name: '暂停',
            action: 'pause',
            enableExp: 'navgStatus === "moving"'
        }, {
            name: '恢复',
            action: 'resume',
            enableExp: 'navgStatus === "pause"'
        }, {
            name: '停止',
            action: 'stop',
            enableExp: 'navgStatus === "moving"'
        }, {
            name: '销毁',
            action: 'destroy',
            enableExp: 'navgExists'
        }];

        function refreshNavgButtons() {

            $('#routes-container').find('div.route-item').each(function() {

                var pathIndex = parseInt($(this).attr('data-idx'), 0);

                if (pathIndex < 0) {
                    return;
                }

                var navgStatus = 'stop',
                    navgExists = !!pathNavigs[pathIndex];

                if (navgExists) {
                    navgStatus = pathNavigs[pathIndex].getNaviStatus();
                }

                $(this).find('.navigBtn').each(function() {

                    var btnIdx = parseInt($(this).attr('data-btnIdx'));

                    $(this).prop('disabled', !eval(navigBtnsConf[btnIdx].enableExp));

                });

            });
        }

        function initRoutesContainer(data) {

            $('#routes-container').on('click', '.navigBtn', function() {

                var pathIndex = parseInt($(this).closest('.route-item').attr('data-idx'), 0);

                var navg = getNavg(pathIndex);

                navg[$(this).attr('data-act')]();

                refreshNavgButtons();
            });

            for (var i = 0, len = data.length; i < len; i++) {
                initRouteItem(data[i], i);
            }

            refreshNavgButtons();
        }

        function initRouteItem(pathData, idx) {

            var $routeItem = $('<div class="route-item"></div>');

            $routeItem.attr('data-idx', idx);

            $('<h3/>').css({
                color: colors[idx]
            }).html(pathData.name + '(点数： ' + pathData.path.length + ')').appendTo($routeItem).on('click', function() {
                pathSimplifierIns.setSelectedPathIndex(idx);
            });


            for (var i = 0, len = navigBtnsConf.length; i < len; i++) {
                $('<button class="navigBtn" data-btnIdx="' + i + '" data-act="' + navigBtnsConf[i].action + '"></button>').html(navigBtnsConf[i].name).appendTo($routeItem);
            }

            $speedBox = $('<div class="speedBox"></div>').appendTo($routeItem);

            var speedTxt = $('<span><span>').appendTo($speedBox);

            var speedRangeInput = $('<input id="speedInp_' + idx +
                '" class="speedRange" type="range" min="1000" max="1000000" step="1000" value="100000" />').appendTo($speedBox);

            function updateSpeedTxt() {
                var speed = parseInt(speedRangeInput.val(), 10);

                speedTxt.html('时速：' + speed + ' km/h');

                if (pathNavigs[idx]) {
                    pathNavigs[idx].setSpeed(speed);
                }
            }
            speedRangeInput.on('change', updateSpeedTxt);

            updateSpeedTxt();

            $speedBox.appendTo($routeItem);

            $('<div class="msg"></div>').appendTo($routeItem);

            $routeItem.appendTo('#routes-container');
        }

        window.pathSimplifierIns = pathSimplifierIns;

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);

        $.getJSON('https://a.amap.com/amap-ui/static/data/big-routes.json', function(d) {

            $('#loadingTip').remove();

            var flyRoutes = [];

            for (var i = 0, len = d.length; i < len; i++) {

                if (d[i].name.indexOf('乌鲁木齐') >= 0) {

                    d.splice(i, 0, {
                        name: '飞行 - ' + d[i].name,
                        path: PathSimplifier.getGeodesicPath(
                            d[i].path[0], d[i].path[d[i].path.length - 1], 100)
                    });

                    i++;
                    len++;
                }
            }

            d.push.apply(d, flyRoutes);

            pathSimplifierIns.setData(d);

            initRoutesContainer(d);

            // for (var i = 0, len = d.length; i < 2; i++) {

            //     (function(i) {

            //         setTimeout(function() {

            //             getNavg(i).start();

            //             refreshNavgButtons();

            //         }, 1000 * (i + 1));

            //     })(i);
            // }
        });

        pathSimplifierIns.on('selectedPathIndexChanged', function(e, info) {

        });

        pathSimplifierIns.on('pointClick pointMouseover pointMouseout', function(e, record) {
            //console.log(e.type, record);
        });

        pathSimplifierIns.on('pathClick pathMouseover pathMouseout', function(e, record) {
            //console.log(e.type, record);
        });
    });
    </script>
</body>

</html>
        
控制台
清空
示例
中心常见
问题智能
客服