javascript - 将画布层动态添加到传单？

Question

我正在循环遍历 JavaScript 中的数组，并希望在每次增量时动态更新/重绘传单画布层以生成动画地图？我试图移动产生“地图已启动”错误的循环，并刷新 html 内容但似乎无法到达任何地方。lat 和 long 不仅仅改变数组中的值。任何帮助都会很棒。

完整代码：https ://pastebin.com/CzTnGCQt

代码：

    var value = <?php echo json_encode($sensor) ?>; 
    //(24) [3, 3, 3, 3, 3, 3, 3, 3, 6, 6, 7, 8, 4, 5, 7, 6, 4, 6, 5, 4, 8, 6, 7, 2]

    var count = <?php echo json_encode($count, JSON_NUMERIC_CHECK) ?>;   
    var i = 0, howManyTimes = value.length;       

    var lats = <?php echo json_encode($lat, JSON_NUMERIC_CHECK) ?>;
    //(3) [-3737, -3501, -4170]

    var lons = <?php echo json_encode($long, JSON_NUMERIC_CHECK) ?>;   
    // (3) [14083, 13875, 14709]


    var tiles = new L.tileLayer('http://a.tiles.mapbox.com/v3/briegn1.cfc1a74d/{z}/{x}/{y}.png',{attribution: "<a href='https://www.mapbox.com/about/maps/' target='_blank'>&copy; Mapbox &copy; OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a>"});


    var leafletMap = L.map('map', {
        center: [-37.3785, 140.8365],
        zoom: 10,
    });             

    leafletMap.addLayer(tiles);           
    //Important line to make sure the tiles (more specifically the continental labels) show up on top of the grids.
    $('.leaflet-tile-pane').css('z-index',10);



                       function f() {

     console.log(value[i+1], value[i+2], value[i+3]);

      var d = [value[i+1], value[i+2], value[i+3]];
            data = d;   


            data.map(function(d,i) {
                var pixel = LatLongToPixelXY(lats[i]/100., lons[i]/100);
                vertz.push(pixel.x, pixel.y)
                var colors = Colors2Get[showVar][d];
                if (colors[0] < 1) {
                    colorz.push(colors[0]/256., colors[1]/256., colors[2]/256., 0.0);
                } else {
                    colorz.push(colors[0]/256., colors[1]/256., colors[2]/256., 1.0);
                }
            });

            numPoints = data.length;
            if (gl) {
                vertArray = new Float32Array(vertz);
                colorArray = new Float32Array(colorz);
                gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
                gl.bufferData(gl.ARRAY_BUFFER, vertArray, gl.STATIC_DRAW);
                gl.vertexAttribPointer(program.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(program.vertexPositionAttribute);
                gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
                gl.bufferData(gl.ARRAY_BUFFER, colorArray, gl.STATIC_DRAW);
                gl.vertexAttribPointer(program.vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(program.vertexColorAttribute);
                glLayer.redraw();
            }

     i += 3

    if( i < howManyTimes ){
        setTimeout( f, 4000 );


    }
}

f();        

标签： javascriptleaflet