轨迹展示&巡航

展示PathSimplifier及其巡航器的创建和使用。

源代码编辑器
<!-- 重点参数：renderOptions -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/index.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>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    
    #loadingTip {
        position: absolute;
        z-index: 9999;
        top: 0;
        left: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 14px;
    }
    </style>
</head>

<body>
    <div id="container"></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 % colors.length],
                        lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));

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

        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);

            function onload() {
                pathSimplifierIns.renderLater();
            }

            function onerror(e) {
                alert('图片加载失败！');
            }

            //创建一个巡航器
            var navg0 = pathSimplifierIns.createPathNavigator(1, {
                loop: true, //循环播放
                speed: 500000
            });

            navg0.start();


            var navg1 = pathSimplifierIns.createPathNavigator(0, {
                loop: true,
                speed: 1000000,
                pathNavigatorStyle: {
                    width: 24,
                    height: 24,
                    //使用图片
                    content: PathSimplifier.Render.Canvas.getImageContent('./imgs/plane.png', onload, onerror),
                    strokeStyle: null,
                    fillStyle: null,
                    //经过路径的样式
                    pathLinePassedStyle: {
                        lineWidth: 6,
                        strokeStyle: 'black',
                        dirArrowStyle: {
                            stepSpace: 15,
                            strokeStyle: 'red'
                        }
                    }
                }
            });

            navg1.start();

            var navg2 = pathSimplifierIns.createPathNavigator(7, {
                loop: true,
                speed: 500000,
                pathNavigatorStyle: {
                    width: 16,
                    height: 32,
                    content: PathSimplifier.Render.Canvas.getImageContent('./imgs/car.png', onload, onerror),
                    strokeStyle: null,
                    fillStyle: null
                }
            });

            navg2.start();

            var navg3 = pathSimplifierIns.createPathNavigator(5, {
                loop: true,
                speed: 500000,
                pathNavigatorStyle: {
                    autoRotate: false, //禁止调整方向
                    pathLinePassedStyle: null,
                    width: 24,
                    height: 24,
                    content: PathSimplifier.Render.Canvas.getImageContent('./imgs/car-front.png', onload, onerror),
                    strokeStyle: null,
                    fillStyle: null
                }
            });

            navg3.start();
        });
    });
    </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服公众号
二维码