hightopo 公交车动态图

1.简略
<!DOCTYPE html>
<html>
    <head>
        <title>公交车（简略）</title>
        <style>
            .view {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
            body {
                background: black;
            }
        </style>        
        <script type="text/javascript" src="../../../../lib/core/ht.js"></script>
        <script type="text/javascript" src="../../../../lib/plugin/ht-flow.js"></script>
        <script type="text/javascript" src="../../../../lib/plugin/ht-xeditinteractor.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            //公交车
            ht.Default.setImage("bus", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADuUlEQVR4Xu2XS2hcVRzGf+ec+8hMnaRJbNQkJVRIfZS0ahobRKHu+rIPROtK1AqSLmyrVhBcZKWb1EYXBdGF+NioEVqirlSM4itiKImVoNWpj5a2ah5tJ5nk3vN3LvfOIpQJc1dZmA+++z/nu/P9z8c5ZxZXiQhLCQ38vwMsB1gOoCJ2vTi02ck1fmpFEAEBkIW/UqTTtaqw3OylJ7493P06YAGciMH83D1rG33aGzMABFYIS5TYgtEqImEK3TMKrRRCAgFBODE6dwB4C5ghQaaj95O3j49NyrwVufXIqFyZF/lnRuRiIa7R/JaU+vr+Mdn3Xl4eeTcvj5XqXcdOiRWRpwb/kFXde5pJoAFH1VzT2ZhzuVwExzFcmoWpGVtiGNVojjEp9CIorenf3caRnW0c3dXG2qYV/PJvwN1r6mjd/fQLgFMO4OJlb26p9fj+7CwZX1MMKVEW1Jo0egCeq5megcmCMF2IA41fKHLn6hzZuoYHgZpyAANCa63DlTlLjWcIQ7BWlRjXIArgaoIq9cif8Q1zIYSR38b+/NQcjobN7Q2Zdc8ObAOUAyiNwgLnLs+T812UAqM1WgSlVImQq0mp+y77P8wjAq6JL2vWLUbh2NiaY7Cx5UnguAKaNvaPnn9oU3PpCApopeJ/gQhlGKXQCqxQlR71AHhnTysTBXj5u7/JTxVxtWJXez23NWe4/40xRg51rHQAMAa0Jus7gCCACAugVFmrTrciPDp4FgEcFd8JgA9OT+L7LmgD4DkABT/HrPHwvYD113rU+hpRigUQIQ2EhX5FfDyf/Rkw8BcUsg2U7wAjB1bT+7XgukV+mghAa0SXUwI2BBvEVQAqhVGgiH1X+xEB4+d47aLD9CGoA5xyO6vB91w0IGHI9GAf8+fGAXBvuInaHQdRno/YsPJuKIXSpqJfHBetDZwCASgHWPfKBfZqMNkVaKM4/2YvG1pX0r33GQC++WKIkyeOct3DvUgQIhUCqCiAYxb1GwuHHxDeb5mEffVxgOfsADIUNQZtHMbzP9Kx8yB9fS8B0NPTw+df9rPpq1exYbDYDlThD0Epnjeax8s7MH46DwgQNTAEVijMzOK6HkA0jjR+PvM7NlxsB6rzl9ciedYDa5IK4GzdtuNYV1fXjRtuvwOAkyM/MDw8/OvHHw3uBwIqIKV/AvgNwEtCNCVsA7q3bNl6Zvv2+yRiNI605F1TBab11wMeVwMXuB7oBO5N2JloLhWQyl9lkzpgVcK6FOY0/qXH8qfZkgdYDvAftC1Oc+4ypOMAAAAASUVORK5CYII=");
            function init() {
                var graph = window.graph = new ht.graph.GraphView(),//GraphView 拓扑图形组件
                    dm = graph.dm(),
                    view = graph.getView();
                
                var node1 = new ht.Node(),
                    node2 = new ht.Node(),
                    edge3 = new ht.Edge(node1, node2);

                view.className = "view";
                document.body.appendChild(view);

                //位置1
                dm.add(node1);

                //位置2
                node2.setPosition(0, 200);
                dm.add(node2);
                
                //汽车前进线
                edge3.s("edge.type", "points");
                edge3.s("edge.points", new ht.List([//线点集合   （无两端点）
                    { x: 0, y: 25 },
                    { x: 25, y: 25 },
                    { x: 25, y: 50 },
                    { x: 50, y: 50 },
                    { x: 50, y: 75 },
                    { x: 75, y: 75 },
                    { x: 75, y: 200 }
                ]));

                edge3.s("flow", true);//值为true或false，控制此ht.Shape或ht.Edge是否可流动， 默认值为false,一般选择false
                edge3.s("flow.count", 3);//控制流动组的个数，默认为1  每组几辆车
                edge3.s("flow.step", 4);//控制流动的步进，默认为3  车速
                edge3.s("flow.element.image", "bus"); //字符串类型，指定流动组中元素的图片，图片需要提前通过ht.Default.setImage注册
                edge3.s("flow.element.max", 60);//流动组中最大元素的尺寸，默认为7
                edge3.s("flow.element.min", 7);//流动组中最小元素的尺寸，默认为0;每个流动组中的元素的尺寸从flow.element.max递减至flow.element.min， 如果希望元素尺寸保持一致，将这两个参数设为一致即可。
                edge3.s("flow.element.count", 2);//每个流动组中的元素的个数，默认为10
                edge3.s("flow.element.autorotate", true);//值为true或false，控制流动组中的元素是否与路径的方向保持一致，默认为false  一般为false
                edge3.s("flow.element.shadow.visible", false);//值为true或false，控制流动组中的元素是否显示渐变阴影，默认为true
                edge3.s("shape.background", null); //流动组中元素的背景颜色，默认为rgba(255, 255, 114, 0.4)  一般为null
                dm.add(edge3);
                
                graph.translate(500, 300);//在当前坐标的基础上增加x、y两个方向的平移值（当前内容  向右移动x，向下移动y）
                graph.setZoom(2);//缩放操作（当前内容按照比例放大和缩小）
                graph.enableFlow(60);//流动的时间间隔 （流动到头的时间）
            }
        </script>
    </head>
    <body onload="init();">
        
    </body>
</html>
hightopo 公交车动态图

猜你喜欢
