From 007c761cd16f833a48e9210dbbc7e96a2696e280 Mon Sep 17 00:00:00 2001
From: wangzhibo <wangzhibo@shsening.com>
Date: 星期四, 11 十一月 2021 14:07:26 +0800
Subject: [PATCH] kriging using web worker
---
widgetsTS/widget_grid/view.js | 150 +++++++++++++++-----------------------------------
1 files changed, 45 insertions(+), 105 deletions(-)
diff --git a/widgetsTS/widget_grid/view.js b/widgetsTS/widget_grid/view.js
index b21d705..561c794 100644
--- a/widgetsTS/widget_grid/view.js
+++ b/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.鐢ㄥ厠閲岄噾璁粌涓�涓獀ariogram瀵硅薄
- var variogram = kriging.train(t, x, y, "exponential", 0, 100);
-
- //2.浣跨敤鍒氭墠鐨剉ariogram瀵硅薄浣縫olygons鎻忚堪鐨勫湴鐞嗕綅缃唴鐨勬牸缃戝厓绱犲叿澶囦笉涓�鏍风殑棰勬祴鍊硷紱
- //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锛屾敼鍙楶romise鐘舵��
- pendingProcesss[processId](result);
- // 鍒犳帀锛岄槻姝㈣繘绋媔d鍐茬獊
- 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鍦╧riging_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});// 鍙戦�丣avaScript瀵硅薄锛屼細鍏堟墽琛屽簭鍒楀寲涓篔SON鏂囨湰娑堟伅鍐嶅彂閫侊紝鐒跺悗鍦ㄦ帴鏀剁鑷姩鍙嶅簭鍒楀寲涓篔avaScript瀵硅薄銆�
+ 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鍦╧riging_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鍦╧riging_config.js涓畾涔�
- addImageToMap(grid_item);
+ if (grid_item.data.length > 0) {
+ //worker.postMessage([grid_item, current_heatmap_qindex]);// 鍙戦�丣avaScript瀵硅薄锛屼細鍏堟墽琛屽簭鍒楀寲涓篔SON鏂囨湰娑堟伅鍐嶅彂閫侊紝鐒跺悗鍦ㄦ帴鏀剁鑷姩鍙嶅簭鍒楀寲涓篔avaScript瀵硅薄銆�
+ grid_item.worker.postMessage({dataItems:grid_item.data,gridLevel:grid_item.level,qindex:current_heatmap_qindex});// 鍙戦�丣avaScript瀵硅薄锛屼細鍏堟墽琛屽簭鍒楀寲涓篔SON鏂囨湰娑堟伅鍐嶅彂閫侊紝鐒跺悗鍦ㄦ帴鏀剁鑷姩鍙嶅簭鍒楀寲涓篔avaScript瀵硅薄銆�
+ 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鍦╧riging_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.鐢ㄥ厠閲岄噾璁粌涓�涓獀ariogram瀵硅薄
var variogram = kriging.train(t, x, y, "exponential", 0, 100);
- console.log("variogram瀵硅薄瀹屾垚锛�"+(new Date()).toISOString());
+ console.log("variogram瀵硅薄瀹屾垚锛�" + (new Date()).toISOString());
//2.浣跨敤鍒氭墠鐨剉ariogram瀵硅薄浣縫olygons鎻忚堪鐨勫湴鐞嗕綅缃唴鐨勬牸缃戝厓绱犲叿澶囦笉涓�鏍风殑棰勬祴鍊硷紱
//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;
}
--
Gitblit v1.9.1