"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: 14, data: [], image: "", show: false }, { layer: null, level: 500, min: 15, max: 19, data: [], image: "", show: false }];
|
|
//var grid_level_list = [{ layer: null, level: 3000, min: 8, max: 15, data: [], image: "", show: false }];
|
|
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') ;
|
element.worker = new Worker('webworker.js') ;
|
});
|
|
$(function () {
|
$("#grid5000").click();
|
})
|
$("span").click(function () {
|
if (!$(this).hasClass("touchOn")) {//$(this)表示所点击的元素，在这里极为好用
|
$(this).addClass("touchOn");//给所点击元素加上touchOn类
|
}
|
$(this).siblings().removeClass("touchOn");//移除其他元素的touchOn类
|
})
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget;
|
|
$("#grid5000").click(function () {
|
thisWidget.changeCamerView("grid5000");
|
});
|
$("#grid3000").click(function () {
|
thisWidget.changeCamerView("grid3000");
|
});
|
$("#grid1000").click(function () {
|
thisWidget.changeCamerView("grid1000");
|
});
|
$("#grid500").click(function () {
|
thisWidget.changeCamerView("grid500");
|
});
|
|
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>')
|
|
});
|
$("#style_radio label").eq(0).html('<input type="radio" name="style_option" value="pm25" checked="">PM₂.₅');
|
$("#style_radio label").eq(1).html('<input type="radio" name="style_option" value="pm10">PM₁₀');
|
$("#style_radio label").eq(2).html('<input type="radio" name="style_option" value="no">NO');
|
$("#style_radio label").eq(3).html('<input type="radio" name="style_option" value="no2">NO₂');
|
$("#style_radio label").eq(4).html('<input type="radio" name="style_option" value="nox">NOₓ');
|
$("#style_radio label").eq(5).html('<input type="radio" name="style_option" value="co">CO');
|
|
$("#style_radio2 label").eq(0).html('<input type="radio" name="style_option2" value="pm25" checked="">PM₂.₅');
|
$("#style_radio2 label").eq(1).html('<input type="radio" name="style_option2" value="pm10">PM₁₀');
|
$("#style_radio2 label").eq(2).html('<input type="radio" name="style_option2" value="no">NO');
|
$("#style_radio2 label").eq(3).html('<input type="radio" name="style_option2" value="no2">NO₂');
|
$("#style_radio2 label").eq(4).html('<input type="radio" name="style_option2" value="nox">NOₓ');
|
$("#style_radio2 label").eq(5).html('<input type="radio" name="style_option2" value="co">CO');
|
|
$('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 => {
|
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);
|
}
|
|
|
});
|
|
});
|
|
$("#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 () {
|
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 () {
|
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);
|
}
|
});
|
});
|
|
|
|
}
|
|
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,
|
name:""
|
});
|
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;
|
}
|
