绘制轨迹压力测试.html

<!DOCTYPE html>
<html>

<head>
    <title>Leaflet1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>


    <!--<script src="https://cdnjs.com/libraries/leaflet-tilelayer-geojson"></script>-->
    <style TYPE="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }
        /**
         * 单独设置mapid为100%不显示，可能float坍塌
         */

        html,
        body,
        #mapDiv {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="mapDiv">
</div>
</body>
<script>
    //地图地址
    var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
    var attr = ' Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

    var leafletMap = L.map('mapDiv').setView([31.005, 113], 8);
    //图层
    L.tileLayer(url, {
        maxZoom: 18,
        attribution: attr,
        id: 'mapbox.streets'
    }).addTo(leafletMap);
    //标记点


    function randomHexColor() { //随机生成十六进制颜色
        var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
        while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
            hex = '0' + hex;
        }
        return '#' + hex; //返回‘#'开头16进制颜色
    }


    var generateLine = function (lat, lon) {
        var i=0;
        var color = randomHexColor();

        var latlngs = [
            [lat, lon]
        ];

        var polyline = L.polyline(latlngs, {color: color}).addTo(leafletMap);

        setInterval(function () {

            var latTemp = lat+ 0.008*i*(Math.random()-0.5);
            var lonTemp = lon+ 0.008*i;


            polyline.addLatLng([latTemp, lonTemp]);


            i++;

        }, 1000);
    };

    for(var m =0; m< 1000; m++){

        var lat = 31+ m*0.01*(Math.random()-0.5);
        var lon = 113+ m*0.1*(Math.random()-0.5);

        generateLine(lat, lon)
    }


</script>

</html>