kriging using web worker

wangzhibo

2021-11-11 007c761cd16f833a48e9210dbbc7e96a2696e280

 widgetsTS/widget_grid/view.js

@@ -6,86 +6,16 @@
var current_heatmap_alpha_value = 0.5;
var current_heatmap_qindex = "pm25";

//var grid_level_list = [{ layer: null, level: 5000, min: 8, max: 10, data: [], image: "", show: false }, { layer: null, level: 3000, min: 11, max: 12, data: [], image: "", show: false }, { layer: null, level: 1000, min: 13, max: 19, data: [], image: "", show: false }];
var grid_level_list = [{ layer: null, level: 5000, min: 8, max: 10, data: [], image: "", show: false }, { layer: null, level: 3000, min: 11, max: 12, data: [], image: "", show: false }, { layer: null, level: 1000, min: 13, max: 15, data: [], image: "", show: false }];

var grid_level_list = [{ layer: null, level: 3000, min: 8, max: 15, data: [], image: "", show: false }];
//var grid_level_list = [{ layer: null, level: 3000, min: 8, max: 15, data: [], image: "", show: false }];



// 子进程方法
function loadkriging() {
    onmessage = ({ data: { processId,gridConfig, qindex, kriging, bounds, map_extent } }) => {
        console.log('收到主线程消息：' + gridConfig);
        canvas.width = 2000;
        canvas.height = 2000;

        var t = [];
        var x = [];
        var y = [];
        for (var i = 0, len = gridConfig.data.length; i < len; i++) {
            t.push(gridConfig.data[i][qindex]); // 权重值
            var tmp_grid_id = gridConfig.data[i]["grid_id"];
            var lon_lat = tmp_grid_id.split("_");
            if (gridConfig.level == 5000) {
                x.push(Number(lon_lat[0]) + 0.025); // x
                y.push(Number(lon_lat[1]) + 0.025); // y
            } else if (gridConfig.level == 3000) {
                x.push(Number(lon_lat[0]) + 0.0125); // x
                y.push(Number(lon_lat[1]) + 0.0125); // y
            } else if (gridConfig.level == 1000) {
                x.push(Number(lon_lat[0]) + 0.005); // x
                y.push(Number(lon_lat[1]) + 0.005); // y
            }

        }
        //1.用克里金训练一个variogram对象
        var variogram = kriging.train(t, x, y, "exponential", 0, 100);

        //2.使用刚才的variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值；
        //bounds:普通的geojson格式的面的格式的coordinates。

        var grid = kriging.grid(bounds, variogram, (map_extent.maxx - map_extent.minx) / 500);
        //3.将得到的格网预测值渲染到canvas画布上
        //kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], colors);
        //var image = canvas.toDataURL("image/png");

        postMessage({processId,result:grid });
    };
}
const makeWorker = (func) => {
    let pendingProcesss = {};
    if (!window.Worker) {//浏览器不支持worker子线程的情况
        alert('浏览器不支持worker子线程');
        return;
    }
    //创建新的Worker
    const worker = new Worker(
        URL.createObjectURL(new Blob([`(${func.toString()})()`]))
    );
    //接收消息
    worker.onmessage = ({ data: { result, processId } }) => {
        // 调用resolve，改变Promise状态
        pendingProcesss[processId](result);
        // 删掉，防止进程id冲突
        delete pendingProcesss[processId];
        // 关闭worker线程
        worker.terminate();
    }

    //异常处理
    worker.onerror = function (err) { }

    return (...message) => new Promise(resolve => {
        const processId = String(Math.random())//new Date().getTime()
        pendingProcesss[processId] = resolve;
        //传递参数
        worker.postMessage({ processId, message });
    })
}
const testWorker = makeWorker(loadkriging);
console.log('主线程正常运行：1')


var tem_html_canvas = document.createElement("canvas");
tem_html_canvas.width = 2000;
tem_html_canvas.height = 2000;
grid_level_list.forEach(element => {
    element.worker = new Worker('/shanghai/widgetsTS/widget_grid/webworker.js') ;
});


//当前页面业务
@@ -114,16 +44,21 @@
    $('input[type=radio][name=style_option2]').change(function () {
        current_heatmap_qindex = this.value;
        grid_level_list.forEach(grid_item => {
            /*
            testWorker(grid_item, current_heatmap_alpha_value, kriging, kriging_bounds, map_extent ).then((grid) => {
                var canvas = document.createElement("canvas");
                kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                grid_item.image = canvas.toDataURL("image/png");
                addImageToMap(grid_item);
            });
            */
            grid_item.image = createKrigingImage(grid_item, kriging_bounds, kriging_colors); //kriging_bounds, kriging_colors在kriging_config.js中定义
            addImageToMap(grid_item);
            if (grid_item.data.length > 0) {
                grid_item.worker.postMessage({dataItems:grid_item.data,gridLevel:grid_item.level,qindex:current_heatmap_qindex});// 发送JavaScript对象，会先执行序列化为JSON文本消息再发送，然后在接收端自动反序列化为JavaScript对象。                                                                      
                grid_item.worker.onmessage = event => {
                    kriging.plot(tem_html_canvas, event.data, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                    grid_item.image = tem_html_canvas.toDataURL("image/png");
                    addImageToMap(grid_item);
                }
                grid_item.worker.onmessageerror = error => console.error(error)
                grid_item.worker.onerror = error => {
                    console.error(error)
                }
                //grid_item.image = createKrigingImage(grid_item, kriging_bounds, kriging_colors); //kriging_bounds, kriging_colors在kriging_config.js中定义
                //addImageToMap(grid_item);
            }


        });

@@ -143,7 +78,6 @@


    $("#show_gridmap").change(function () {
        console.log(this.checked);
        if (this.checked) {
            thisWidget.showGridmapLayers();
        } else {
@@ -171,16 +105,22 @@

    grid_level_list.forEach(grid_item => {
        queryGridHeatmapData(grid_item).then(function () {
            /*
            testWorker(grid_item, current_heatmap_alpha_value, kriging, kriging_bounds, map_extent ).then((grid) => {
                var canvas = document.createElement("canvas");
                kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                grid_item.image = canvas.toDataURL("image/png");
                addImageToMap(grid_item);
            });
            */
            grid_item.image = createKrigingImage(grid_item, kriging_bounds, kriging_colors); //kriging_bounds, kriging_colors在kriging_config.js中定义
            addImageToMap(grid_item);
            if (grid_item.data.length > 0) {
                //worker.postMessage([grid_item, current_heatmap_qindex]);// 发送JavaScript对象，会先执行序列化为JSON文本消息再发送，然后在接收端自动反序列化为JavaScript对象。                                                                                                                                                                  
                grid_item.worker.postMessage({dataItems:grid_item.data,gridLevel:grid_item.level,qindex:current_heatmap_qindex});// 发送JavaScript对象，会先执行序列化为JSON文本消息再发送，然后在接收端自动反序列化为JavaScript对象。                                                                      
                grid_item.worker.onmessage = event => {
                    console.log(event.data.length);
                    kriging.plot(tem_html_canvas, event.data, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                    grid_item.image = tem_html_canvas.toDataURL("image/png");
                    addImageToMap(grid_item);
                }
                grid_item.worker.onmessageerror = error => console.error(error)
                grid_item.worker.onerror = error => {
                    console.error(error)
                }
                //grid_item.image = createKrigingImage(grid_item, kriging_bounds, kriging_colors); //kriging_bounds, kriging_colors在kriging_config.js中定义
                //addImageToMap(grid_item);
            }
        });
    });

@@ -246,7 +186,7 @@
    var t = [];
    var x = [];
    var y = [];
    console.log("开始："+(new Date()).toISOString());
    console.log("开始：" + (new Date()).toISOString());
    for (var i = 0, len = gridConfig.data.length; i < len; i++) {
        t.push(gridConfig.data[i][current_heatmap_qindex]); // 权重值
        var tmp_grid_id = gridConfig.data[i]["grid_id"];
@@ -263,24 +203,24 @@
        }

    }
    console.log("数据构造完成："+(new Date()).toISOString());
    console.log("数据构造完成：" + (new Date()).toISOString());

    //1.用克里金训练一个variogram对象
    var variogram = kriging.train(t, x, y, "exponential", 0, 100);
    console.log("variogram对象完成："+(new Date()).toISOString());
    console.log("variogram对象完成：" + (new Date()).toISOString());

    //2.使用刚才的variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值；
    //bounds:普通的geojson格式的面的格式的coordinates。

    var grid = kriging.grid(bounds, variogram, (map_extent.maxx - map_extent.minx) / 500);
    //3.将得到的格网预测值渲染到canvas画布上
    console.log("grid完成："+(new Date()).toISOString());
    console.log("grid完成：" + (new Date()).toISOString());

    kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], colors);
    console.log("cavas绘制完成"+(new Date()).toISOString());
    console.log("cavas绘制完成" + (new Date()).toISOString());

    var image = canvas.toDataURL("image/png");
    console.log("image转换完成："+(new Date()).toISOString());
    console.log("image转换完成：" + (new Date()).toISOString());

    return image;
}