"use script";
|
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget
|
|
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: 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')
|
|
|
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget;
|
|
$("#grid5000").click(function () {
|
thisWidget.changeCamerView("grid5000");
|
});
|
$("#grid3000").click(function () {
|
thisWidget.changeCamerView("grid3000");
|
});
|
$("#grid1000").click(function () {
|
thisWidget.changeCamerView("grid1000");
|
});
|
|
thisWidget.style_options.forEach(element => {
|
$("#style_radio").append('<label style="padding-left: 10px;"><input type="radio" name="style_option" value="' + element + '" ' + (element == thisWidget.style_selected ? "checked" : "") + '/>' + element + '</label>')
|
$("#style_radio2").append('<label style="padding-left: 10px;"><input type="radio" name="style_option2" value="' + element + '" ' + (element == thisWidget.style_selected ? "checked" : "") + '/>' + element + '</label>')
|
|
});
|
|
$('input[type=radio][name=style_option]').change(function () {
|
thisWidget.update_grid_style(this.value);
|
});
|
$('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);
|
|
});
|
|
});
|
|
$("#gridmap_opcity")
|
.slider({ min: 0.1, max: 1, step: 0.1, value: 1 })
|
.on("change", (e) => {
|
thisWidget.setGridmapAlpha(e.value.newValue);
|
});
|
$("#heatmap_opcity")
|
.slider({ min: 0.1, max: 1, step: 0.1, value: 0.5 })
|
.on("change", (e) => {
|
current_heatmap_alpha_value = e.value.newValue;
|
thisWidget.setHeatmapAlpha(e.value.newValue);
|
});
|
|
|
$("#show_gridmap").change(function () {
|
console.log(this.checked);
|
if (this.checked) {
|
thisWidget.showGridmapLayers();
|
} else {
|
thisWidget.hideGridmapLayers();
|
}
|
});
|
|
$("#show_heatmap").change(function () {
|
if (this.checked) {
|
if (grid_level_list[0].layer != null) {
|
thisWidget.showHeatmapLayers();
|
} else {
|
grid_level_list.forEach(grid_item => { grid_item.show = true; });
|
}
|
} else {
|
thisWidget.hideHeatmapLayers();
|
}
|
});
|
|
|
initHeatMapLayers();
|
|
}
|
function initHeatMapLayers() {
|
|
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);
|
});
|
});
|
|
|
|
}
|
|
function addImageToMap(grid_item) {
|
|
if (grid_item.layer == null) {
|
grid_item.layer = new mars3d.layer.ImageLayer({
|
url: grid_item.image,
|
rectangle: {
|
xmin: map_extent.minx,
|
xmax: map_extent.maxx,
|
ymin: map_extent.miny,
|
ymax: map_extent.maxy,
|
},
|
minimumLevel: grid_item.min,
|
minimumTerrainLevel: grid_item.min,
|
maximumLevel: grid_item.max,
|
maximumTerrainLevel: grid_item.max,
|
alpha: current_heatmap_alpha_value,
|
show: grid_item.show
|
});
|
thisWidget.heatmapGroupLayer.addLayer(grid_item.layer);
|
} else {
|
grid_item.layer.options.url = grid_item.image;
|
grid_item.layer.setOptions(grid_item.layer.options);
|
|
}
|
}
|
|
|
//数据获取
|
function queryGridHeatmapData(grid_item) {
|
return new Promise(function (resolve, reject) {
|
$.ajax({
|
url: thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_grid_heatmap&gridlevel=" + grid_item.level + "&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime,
|
type: "get",
|
dataType: "json",
|
success: function (result) {
|
if (result.data?.result != undefined && result.data?.result?.length > 0) {
|
grid_item.data = result.data.result;
|
}
|
resolve(result.data.result);
|
|
},
|
error: function (data) {
|
haoutil.msg("后台错误，请联系系统管理员。");
|
},
|
});
|
});
|
}
|
|
|
//根据 克里金法 插值绘制图片
|
function createKrigingImage(gridConfig, bounds, colors) {
|
var canvas = document.createElement("canvas");
|
canvas.width = 2000;
|
canvas.height = 2000;
|
|
var t = [];
|
var x = [];
|
var y = [];
|
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"];
|
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
|
}
|
|
}
|
console.log("数据构造完成："+(new Date()).toISOString());
|
|
//1.用克里金训练一个variogram对象
|
var variogram = kriging.train(t, x, y, "exponential", 0, 100);
|
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());
|
|
kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], colors);
|
console.log("cavas绘制完成"+(new Date()).toISOString());
|
|
var image = canvas.toDataURL("image/png");
|
console.log("image转换完成："+(new Date()).toISOString());
|
|
return image;
|
}
|
