基于js气象IDW反向权重插值法
居中的图片: ])
##cs代码
//
<style>
.frame {
fill: none;
stroke: #000;
}
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis circle {
fill: none;
stroke: steelblue;
stroke-dasharray: 4;
}
.axis:last-of-type circle {
stroke: steelblue;
stroke-dasharray: none;
}
.line {
fill: none;
stroke: orange;
stroke-width: 3px;
}
svg {
opacity: 1;
filter: alpha(opacity=100);
}
</style>
//
##js代码
<div class="zuobiao">
<canvas id="canvas" style="z-index: -1; opacity:1; position: absolute; "> </canvas>
<canvas id="canvas1" height="400px" width="600px" style=" z-index: -1; position: absolute; "> </canvas>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
var width = 380, //图形的宽度
height = 300; //图形的高度
</script>
<script src="js/weathermapIDW.js"></script>
<script>
var colorarray = ["#0000FF", "#006EFF", "#00DDFF", "#2AFFFF", "#68FFFF", "#8BFFE8", "#06FF0B", "#49FF7A", "#49FF00", "#9BFF00", "#D2FF00", "#E3FF00", "#F3FF00", "#FFF200", "#FFCB00", "#FFA300", "#FF7D00", "#FF5300", "#FF5300", "#FF0000"];
var namearray = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000];
var table = [{
"WS": [1.0, 4.0, 2.0, 1.0, 3.0, 3.0, 3.0, 2.0, 2.0, 1.0, 1.0, 1.0, 3.0, 3.0, 3.0, 2.0, 5.0, 4.0, 6.0, 4.0, 2.0, 1.0, 2.0, 3.0, 3.0, 3.0, 4.0, 3.0, 3.0, 7.0, 6.0, 7.0, 4.0, 8.0, 6.0, 6.0, 7.0, 7.0, 6.0, 8.0, 8.0, 8.0, 7.0, 5.0, 4.0, 3.0, 3.0, 1.0, 2.0, 2.0, 2.0, 2.0],
"WD": [335.0, 350.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 170.0, 135.0, 135.0, 135.0, 90.0, 90.0, 90.0, 90.0, 100.0, 80.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 20.0, 30.0, 45.0, 45.0, 45.0, 80.0, 45.0, 45.0, 75.0, 45.0, 45.0, 45.0, 60.0, 45.0, 70.0, 80.0, 90.0, 225.0, 270.0, 260.0, 225.0],
"PM10": [183.2, 173.4, 194.0, 175.75, 203.6, 161.2, 142.0, 163.0, 175.5, 208.4, 205.0, 171.2, 143.6, 116.0, 110.6, 93.2, 98.2, 91.8, 83.6, 88.4, 81.4, 77.0, 81.8, 89.4, 115.8, 131.2, 166.4, 174.0, 170.2, 152.4, 184.4, 203.8, 212.6, 627.8, 1290.4, 1581.25, 1711.525, 1841.8, 2128.4, 2406.8, 2576.8, 2035.6, 1615.0, 1286.8, 1202.4, 1015.2, 733.8, 635.6, 339.2, 331.4, 303.2, 282.6]
}]
$(document).ready(function() {
parm("canvas", width, height);
wwDrawpolygon(table);
var Legend = {
"DistanceLeft": width,
"With": 20,
"Height": height,
"Colorarray": colorarray,
"Namearray": namearray
};
zzb("canvas1", Legend);
//纵坐标
/**
* Name:纵坐标的名称
* DistanceTop:距离顶部距离
* DistanceLeft:距离左边距距离
*/
var OrdinateName = {
"Name": "风速(m/s)",
"DistanceTop": 30,
"DistanceLeft": 10
};
/**Scale对象纵坐标标线与刻度
* Min:最小值
* Max:最大值
* Stepnumber:取多少个刻度(步数)
* height:圆的高度
* DistanceTop:坐标轴距离顶部的距离
* DistanceLeft:坐标轴距离左边的距离
* FontLeft:坐标轴的字体与纵坐标标线的距离
*/
var Scale = {
"Min": -maxvalue,
"Max": maxvalue,
"Stepnumber": 10,
"height": height,
"DistanceTop": 30,
"DistanceLeft": 40,
"FontLeft": 10
};
xzb("canvas1", OrdinateName, Scale);
});
</script>
##js代码 weathermapIDW.js
var radius = Math.min(width, height) / 2 - 30;
var canvas;
var canvasID;
var width ;
var height ;
var maxvalue = 0;
function parm(id, w, h) {
canvas = document.getElementById(id);
canvasID = id;
// var context = canvas.getContext("2d");
width = w;
height = h;
radius = Math.min(width, height) / 2 - 30;
// $("#" + id).height(Math.sqrt(((h - 60) / 2) * ((h - 60) / 2) * 2));
// $("#" + id).width(Math.sqrt(((h - 60) / 2) * ((h - 60) / 2) * 2));
// var w = ((h - 60) - Math.sqrt(((h - 60) / 2) * ((h - 60) / 2) * 2)) / 2 + 30;
// $("#" + id).css({
// "margin-top": w + "px"
// });
// var w = (width - Math.sqrt(((h - 60) / 2) * ((h - 60) / 2) * 2)) / 2;
// $("#" + id).css({
// "margin-left": w + "px"
// });
$("#" + id).height(h - 60);
$("#" + id).width(h - 60);
$("#" + id).css({
"margin-top": 30 + "px"
});
var w = (width - (h - 60) ) / 2 ;
$("#" + id).css({
"margin-left": w + "px"
});
}
/**
* canvas1:canvas的id
* @param {Object} Legend
* DistanceLeft:距离左边的距离
* With:单位图例高度
* Height:单位图例高度
* Colorarray:颜色设定值 数据类型 -数组(Array)
* Namearray:颜色块儿对应的名称 数据类型 -数组(Array)
*/
function zzb(canvas1, Legend) {
Legend.Height = (Legend.Height / (Legend.Colorarray.length + 2));
Legend.DistanceLeft = Legend.DistanceLeft - 30
var canvas1 = document.getElementById(canvas1);
var canvasWidth1 = canvas1.width;
var canvasHeight1 = canvas1.height;
var context1 = canvas1.getContext("2d");
for(var i = 0; i < Legend.Colorarray.length; i++) {
var my_gradient = context1.createLinearGradient(0, 0, 0, Legend.Height);
if(i != 0) {
my_gradient.addColorStop(0, Legend.Colorarray[Legend.Colorarray.length - i]);
my_gradient.addColorStop(1, Legend.Colorarray[Legend.Colorarray.length - i - 1]);
context1.fillStyle = my_gradient;
context1.fillRect(Legend.DistanceLeft * 1, Legend.Height * (i + 1), Legend.With, Legend.Height);
context1.strokeStyle = "#000000";
context1.strokeRect(Legend.DistanceLeft * 1, Legend.Height * (i + 1), Legend.With, Legend.Height);
context1.fillStyle = "#000000";
context1.font = "11px Arial";
context1.fillText(Legend.Namearray[Legend.Namearray.length - i - 1], Legend.DistanceLeft + Legend.With + 5, Legend.Height * (i + 1) + Legend.Height * 2 / 3);
} else {
my_gradient.addColorStop(0, Legend.Colorarray[Legend.Colorarray.length - i - 1]);
my_gradient.addColorStop(1, Legend.Colorarray[Legend.Colorarray.length - i - 1]);
context1.fillStyle = my_gradient;
context1.fillRect(Legend.DistanceLeft, Legend.Height * (i + 1), Legend.With, Legend.Height);
context1.strokeStyle = "#000000";
context1.lineHeight = Legend.Height;
context1.strokeRect(Legend.DistanceLeft, Legend.Height * (i + 1), Legend.With, Legend.Height);
context1.fillStyle = "#000000";
context1.font = "11px Arial";
context1.fillText(Legend.Namearray[Legend.Namearray.length - 1], Legend.DistanceLeft + Legend.With + 5, Legend.Height * (i + 1) + Legend.Height * 2 / 3);
}
}
}
/**
* @param {Object} OrdinateName 纵坐标标题
* Name:纵坐标的名称
* DistanceTop:距离顶部距离
* DistanceLeft:距离左边距距离
* @param {Object} Scale 纵坐标刻度
* Min:最小值
* Max:最大值
* Stepnumber:取多少个刻度(步数)
* Step:单位刻度的长度(步长)
* DistanceTop:坐标轴距离顶部的距离
* DistanceLeft:坐标轴距离左边的距离
* DistanceLeft:坐标轴距离左边的距离
*/
function xzb(canvas1, OrdinateName, Scale) {
var Step = (Scale.height - 60) / Scale.Stepnumber;
var canvas1 = document.getElementById(canvas1);
var canvasWidth1 = canvas1.width;
var canvasHeight1 = canvas1.height;
var context1 = canvas1.getContext("2d");
if((OrdinateName == "") && (OrdinateName == null))
OrdinateName = {
"Name": "风速(m/s)",
"DistanceTop": 200,
"DistanceLeft": 10
};
if((Scale == "") && (Scale == null))
Scale = {
"Min": -10,
"Max": 10,
"Stepnumber": 20,
"Step": 17,
"DistanceTop": 30,
"DistanceLeft": 40,
"FontLeft": 10
};
var Stepname = ((Scale.Max - Scale.Min) / Scale.Stepnumber).toFixed();
context1.fillStyle = "#000000";
for(var i = 0; i < (Scale.Stepnumber + 1); i++) {
if(i != 0) {
context1.fillRect(Scale.DistanceLeft, Step * (i + 1) + (Scale.DistanceTop - Step), 7, 1);
context1.font = "11px Arial";
context1.textAlign = "right";
context1.fillText(Scale.Min + (Scale.Stepnumber - i) * Stepname, Scale.DistanceLeft - Scale.FontLeft, Step * (i + 1) + (Scale.DistanceTop + 5 - Step));
} else {
context1.fillRect(Scale.DistanceLeft, Step * (i + 1) + (Scale.DistanceTop - Step), 7, 1);
context1.font = "11px Arial";
context1.textAlign = "right";
context1.fillText(Scale.Min + (Scale.Stepnumber - i) * Stepname, Scale.DistanceLeft - Scale.FontLeft, Step * (i + 1) + (Scale.DistanceTop + 5 - Step));
}
}
context1.fillRect(Scale.DistanceLeft, Scale.DistanceTop, 1, Step * Scale.Stepnumber);
context1.font = "12px Arial";
context1.textAlign = "center";
var DistanceTop = (Scale.height - 60) / 2;
context1.translate(OrdinateName.DistanceLeft, DistanceTop + OrdinateName.DistanceTop);
context1.rotate(270 * Math.PI / 180)
context1.fillText(OrdinateName.Name, 0, 0);
}
var zuobiaoname = ['北', '东北', '东', '东南', '南', '西南', '西', '西北', ]
// console.log($(".zuobiao").Width))
var data = [
[24, 100]
]
var y = _.map(data, _.last);
var max = Math.max.apply(null, y);
max = Math.ceil(max * 10) / 10;
var angle = d3.scale.linear()
.domain([0, 24])
.range([0, 2 * Math.PI]);
var r = d3.scale.linear()
.domain([0, max])
.range([0, radius]);
var svg = d3.select(".zuobiao").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gr = svg.append("g")
.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(max * 0.1).slice(1))
.enter().append("g");
gr.append("circle")
.attr("r", r);
gr.append("text")
.attr("y", function(d) {
return -r(d) - 4 ;
})
.attr("transform", "rotate(20)")
.style("text-anchor", "middle")
.text(function(d) {
return d+"%";
});
var ga = svg.append("g")
.attr("class", "a axis")
.selectAll("g")
.data(d3.range(-90, 270, 45))
.enter().append("g")
.attr("transform", function(d) {
return "rotate(" + d + ")";
});
ga.append("line")
.attr("x2", radius);
ga.append("text")
.attr("x", radius + 6)
.attr("dy", ".35em")
.style("text-anchor", function(d) {
return d < 270 && d > 90 ? "end" : null;
})
.attr("transform", function(d) {
console.log(d)
if(d < 270 && d > 90)
return d < 270 && d > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null;
if(d == 90)
return "rotate(270 " + (radius + 6) + ",5)";
if(d == -90)
return "rotate(90 " + (radius + 6) + ",-5)";
})
.attr("y", function(d) {
if(d == 90)
return "12";
if(d == -90)
return "-12";
})
.text(function(d, i) {
return zuobiaoname[i]
});
var color = d3.scale.category20();
function windrose2polar(a) {
var d = [];
for(var i = 0; i < a.length; i++) {
var r = 360 - a[i] + 90;
if(r > 360) {
r = r - 360;
}
d.push(r)
}
return d;
}
function linspace(a, b, c) { //生成等差数列
var d = (b - a) / (c - 1);
var e = ((b - a) / d) + 1;
var f = [];
for(var i = 0; i < e; i++) {
f.push(a + (d * i));
}
return f;
}
function radians(a) { //将角度转换为弧度
var d = [];
for(var i = 0; i < a.length; i++) {
var rwd = (a[i] * Math.PI) / 180;
d.push(rwd)
}
return d;
}
function degrees(a) {
var d = [];
for(var i = 0; i < a.length; i++) {
var dwdbins = (a[i] * 180) / Math.PI;
d.push(dwdbins)
}
return d;
}
function histogram(a, wdbins) {
var numarry = [];
for(var i = 0; i < wdbins.length - 1; i++) {
var num = 0;
for(var y = 0; y < a.length; y++) {
if((a[y] > wdbins[i]) && (a[y] < wdbins[i + 1])) {
num++;
}
}
numarry.push(num);
}
return numarry;
}
function pol2cartcos(rwd, ws) {
var cos = [];
for(var i = 0; i < rwd.length; i++) {
cos.push(ws[i] * Math.cos(rwd[i]))
// cos.push(Math.sqrt(rwd[i]*rwd[i] + ws[i]*ws[i] ));
}
return cos;
}
function pol2cartsin(rwd, ws) {
var sin = [];
for(var i = 0; i < rwd.length; i++) {
sin.push(ws[i] * Math.sin(rwd[i]))
}
return sin;
}
// 可以借助cos a 在0-180之间,单调递减!!!
// 这里用的是叉积,正弦的判断
function multiply(p0, p1, p2) {
return((p1.x - p0.x) * (p2.y - p0.y) - (p2.x - p0.x) * (p1.y - p0.y));
}
function distance_no_sqrt(p1, p2) {
//return(sqrt((p1.x-p2.x)*(p1.x-p2.x)+(p1.y-p2.y)*(p1.y-p2.y)));
return((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
}
function Graham_scan(pointSet, ch, n) {
// 这里会修改pointSet
var i, j, k = 0,
top = 2;
var tmp = new Object();
// 找到一个基点,基本就是保证最下面最左面的点
for(i = 1; i < n; i++) {
if((pointSet[i].y < pointSet[k].y) ||
((pointSet[i].y == pointSet[k].y) && (pointSet[i].x < pointSet[k].x))
) {
k = i;
}
}
tmp = pointSet[0];
pointSet[0] = pointSet[k];
pointSet[k] = tmp;
var use = n;
for(i = 1; i < use - 1; i++) {
k = i;
for(j = i + 1; j < use; j++) {
var direct = multiply(pointSet[0], pointSet[k], pointSet[j]);
if(direct > 0) {
k = j;
} else if(direct == 0) {
// k j 同方向
var dis = distance_no_sqrt(pointSet[0], pointSet[j]) - distance_no_sqrt(pointSet[0], pointSet[k]);
use--; // 也就是不要了
if(dis > 0) {
// 保留j
// 把 k 就不要了
pointSet[k] = pointSet[j];
pointSet[j] = pointSet[use];
j--;
} else {
tmp = pointSet[use];
pointSet[use] = pointSet[j];
pointSet[j] = tmp;
}
}
}
tmp = pointSet[i];
pointSet[i] = pointSet[k];
pointSet[k] = tmp;
}
ch.push(pointSet[0]);
ch.push(pointSet[1]);
ch.push(pointSet[2]);
for(i = 3; i < use; i++) {
while(!(multiply(pointSet[i], ch[top - 1], ch[top]) < 0)) {
top--;
ch.pop();
}
top++;
ch.push(pointSet[i]);
}
}
function drawCities(p) {
for(var i = 0; i < p.length; i++) {
// console.log(p[i].x + "-----" + p[i].y)
}
}
function convexhull(rwdc, wsc) {
var n = rwdc.length; // 用100个例子
var p = new Array(n);
for(var i = 0; i < rwdc.length; i++) {
p[i] = new Object();
// p[i].x = rwdc[i] * (1) * 10 + 50;
// p[i].y = wsc[i] * (1) * (10) + 50;
p[i].x = rwdc[i];
p[i].y = wsc[i];
//p[i].tj = false
}
var res = new Array();
Graham_scan(p, res, n);
drawCities(res);
return res;
}
function sortNumber(a, b) {
return a - b
}
var ws = [];
var wd = [];
var pm10 = [];
var N = 0;
function wwDrawpolygon(table) {
ws = table[0].WS;
wd = table[0].WD;
pm10 = table[0].PM10;
N = ws.length;
var rwd = windrose2polar(wd); //从风玫瑰坐标转换为极坐标
rwd = radians(rwd) //将角度转换为弧度
var wdbins = linspace(0.0, Math.PI * 2, 9); //生成等差数列
var dwdbins = degrees(wdbins) // 将弧度转换成角度
dwdbins = windrose2polar(dwdbins);
var rwdbins = radians(dwdbins);
var wdN = wdbins.length - 1;
var theta = [];
theta = rwdbins;
theta[wdN] = theta[0];
for(var i = 0; i < wd.length; i++) {
wd[i] = wd[i] + (360 / wdN) / 2;
}
for(var i = 0; i < wd.length; i++) {
if(wd[i] > 360) {
wd[i] = wd[i] - 360;
}
}
var wdhist = histogram(radians(wd), wdbins);
for(var i = 0; i < wdhist.length; i++) {
wdhist[i] = wdhist[i] / N;
}
var nwdhist = wdhist;
nwdhist.push(nwdhist[0]);
var rwdc = pol2cartcos(rwd, ws); //极坐标转换为笛卡尔坐标
var wwrwdc = rwdc;
var wsc = pol2cartsin(rwd, ws);
var wwwsc = wsc;
var poly = convexhull(rwdc, wsc) //计算凸包
var dd = 0.5;
var minX = 0,
maxX = 0,
minY = 0,
maxY = 0;
for(var i = 0; i < rwdc.length ; i++){
if(minX > rwdc[i]){
minX = rwdc[i];
}
if(maxX < rwdc[i]){
maxX = rwdc[i];
}
}
for(var i = 0; i < wsc.length ; i++){
if(minY > wsc[i]){
minY = wsc[i];
}
if(maxY < wsc[i]){
maxY = wsc[i];
}
}
var fn = new MapIDW();
var datas = [];
for(var i = 0; i < rwdc.length; i++) {
datas.push({
"x": wwrwdc[i] * 1,
"y": wwwsc[i] * 1,
"v": pm10[i],
})
}
if(maxvalue < Math.abs(minX)){
maxvalue = Math.abs(minX);
}
if(maxvalue < Math.abs(minY)){
maxvalue = Math.abs(minY);
}
if(maxvalue < Math.abs(maxX)){
maxvalue = Math.abs(maxX);
}
if(maxvalue < Math.abs(maxY)){
maxvalue = Math.abs(maxY);
}
var num = parseInt(maxvalue / 5);
var numol = maxvalue % 5;
if(numol > 0){
maxvalue = num*5 + 5;
}else{
maxvalue = num*5 ;
}
console.log(maxvalue);
$("#" + canvasID).height((height - 60)* ((maxY - minY)/(maxvalue*2)));
$("#" + canvasID).width((height - 60) * ((maxX - minX)/(maxvalue*2)));
var top = (height - 60 )/2 * ((10 - maxY)/maxvalue)
$("#" + canvasID).css({
"margin-top": (30 + top) + "px"
});
var w = (width - (height - 60) ) / 2 ;
var left = (height - 60 )/2 * ((minX + maxvalue )/maxvalue)
$("#" + canvasID).css({
"margin-left": (w +left) + "px"
});
var points = fn.getTrainPonits(datas, 500,minX, maxX,minY ,maxY, 25000, poly);
fn.draw(canvas, points,colorarray, namearray,function(v) {
for(var i = 0; i < colorarray.length ; i++){
if(i == 0){
if(v < namearray[i]) {
return colorarray[i];
}
}else if((i < (colorarray.length - 2))&&(i != 0)){
if((v > namearray[i - 1]) && (v < namearray[i])) {
return colorarray[i];
}
}else if( i == (colorarray.length - 1)){
if((v > namearray[i])) {
return colorarray[i];
}
}
};
});
}
//worker 内容
function MapIDW() {
/**
* 反向距离权重法模拟点位
* @param {Object} datas 原始数据
* @param {Object} minlon 经度边界
* @param {Object} maxlon 经度边界
* @param {Object} minlat 纬度边界
* @param {Object} maxlat 纬度边界
* @param {Object} num 生成点数
* @param {Object} isRange 判断点是否在范围内,在则显示,否则抛弃
*/
this.getTrainPonits = function(datas,weight, minlon, maxlon, minlat, maxlat, num, polygon) {
var deltx = maxlon - minlon;
var delty = maxlat - minlat;
var b = deltx / delty;
var numy = Math.floor(Math.sqrt(num / b), 0)
var numx = Math.floor(b * Math.sqrt(num / b), 0)
var wx = deltx / numx;
var wy = delty / numy;
var result = [];
for(var j = 0; j < numy; j++) {
for(var i = 0; i < numx; i++) {
var tempx = minlon + i * wx;
var tempy = minlat + j * wy;
if(!isRange(tempx,tempy,polygon)) {
continue;
}
result.push({
x: tempx,
y: tempy,
v: 0,
id: i + ":" + j
})
}
}
var isallOffline = true; //站点如果全部离线,值都置为-1,地图用灰色显示
datas.forEach(function(d, index) {
if(!d.v) {
return;
}
isallOffline = false;
})
if(isallOffline) {
console.log("无值!");
}
var maxdis = Math.sqrt(Math.pow(Math.abs(maxlon - minlon), 2) + Math.pow(Math.abs(maxlat - minlat), 2));
result = result.map(function(r) {
if(isallOffline) {
r.v = -1
return r;
}
var v = 0;
var n = 0;
var disLimit = maxdis / 20;
var blog = false; // r.id == "6:4";
if(blog) {
// console.log(r)
}
var fenmu = 0;
datas.forEach(function(d, index) {
if(!d.v) { //站点无值,则不参与运算
return;
}
var dis = Math.sqrt(Math.pow(Math.abs(r.x - d.x)*weight, 2) + Math.pow(Math.abs(d.y - r.y)*weight, 2 ));
d.dis = dis;
fenmu += Math.pow((1 / dis), 2);
})
r.v = 0;
for(var i = 0; i < datas.length; i++) {
var d = datas[i]
if(!d.v) {
continue;
}
d.weight = Math.pow((1 / d.dis), 2) / fenmu;
r.v += d.v * d.weight;
// console.log(r.v);
}
if(blog) {
console.log(r);
}
return r
})
this.numy = numy;
this.numx = numx;
this.deltx = deltx;
this.delty = delty;
this.minlon = minlon;
this.minlat = minlat;
this.maxlon = maxlon;
this.maxlat = maxlat;
this.resultPoints = result;
return result;
}
this.draw = function(canvas, points,Colorarray, Namearray, getColorFuc) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 1;
var wx = canvas.width / this.numx;
var wy = canvas.height / this.numy;
for(var i = 0; i < points.length; i++) {
var x = (points[i].x - this.minlon) * canvas.width / this.deltx;
var y = canvas.height - (points[i].y - this.minlat) * canvas.height / this.delty;
var temp = points[i].v;
ctx.fillStyle = getColorFuc(temp);
ctx.fillRect(x - wx / 2, y - wy / 2, wx, wy);
}
}
this.drawSelf = function(canvas, getColorFuc) {
this.draw(canvas, this.resultPoints, getColorFuc);
}
this.getDataUrlSelf = function(getColorFuc) {
var canvas = document.createElement("canvas");
canvas.style.background = "transparent";
canvas.width = 500;
canvas.height = 500 * (this.maxlat - this.minlat) / (this.maxlon - this.minlon) * 1.13;
this.drawSelf(canvas, getColorFuc);
//图片展示的 data URI
var dataUrl = canvas.toDataURL();
return dataUrl;
}
this.getDataUrl = function(points, getColorFuc) {
var canvas = document.createElement("canvas");
canvas.style.background = "transparent";
canvas.width = 500;
canvas.height = 500 * (this.maxlat - this.minlat) / (this.maxlon - this.minlon) * 1.13;
this.draw(canvas, points, getColorFuc);
//图片展示的 data URI
var dataUrl = canvas.toDataURL();
return dataUrl;
}
//定义点的结构体
function Point(x, y) {
this.y = y;
this.x = x;
}
//计算一个点是否在多边形里,参数:点,多边形数组
function PointInPoly(pt, poly) {
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
((poly[i].x <= pt.x && pt.x < poly[j].x) || (poly[j].x <= pt.x && pt.x < poly[i].x)) &&
(pt.y < (poly[j].y - poly[i].y) * (pt.x - poly[i].x) / (poly[j].x - poly[i].x) + poly[i].y) &&
(c = !c);
return c;
}
function isRange(x, y, polygon) {
var p = new Point(x, y)
return PointInPoly(p, polygon);
}
}
var colorArray = ["#00e400", "#ffff00", "#ff7e00", "#ff0000", "#99004c", "#7e0023"];
var colorchild = {
"1": ['#2be900', '#55ed00', '#80f200', '#aaf600', '#d5fb00', "#ffff00"],
"2": ['#ffea00', '#ffd400', '#ffbf00', '#ffa900', '#ff9400', "#ff7e00"],
"3": ['#ff6900', '#ff5400', '#ff3f00', '#ff2a00', '#ff1500', "#ff0000"],
"4": ['#ee000d', '#dd0019', '#cc0026', '#bb0033', '#aa003f', "#99004c"],
"5": ['#950045', '#90003e', '#8c0038', '#870031', '#83002a', "#7e0023"]
}
var paraLevelRange = {
'PM25': [0, 35, 75, 115, 150, 250, 500],
'PM10': [0, 50, 150, 250, 350, 420, 600],
'PM2.5': [0, 35, 75, 115, 150, 250, 500],
'SO2': [0, 150, 500, 650, 800],
'NO2': [0, 100, 200, 700, 1200, 2340, 3840],
'CO': [0, 5, 10, 35, 60, 90, 150],
'O3': [0, 160, 200, 300, 400, 800, 1200],
'AQI': [0, 50, 100, 150, 200, 300, 500],
'AQI': [0, 50, 100, 150, 200, 300, 500],
'TVOC': [0, 60, 100, 200, 300, 500]
};
function getColorFuc(value) {
if(value < 0) {
return "gray";
}
let id = 0;
var paraname = "NO2"
for(let i = 1; i < paraLevelRange[paraname].length; i++) {
if(value < paraLevelRange[paraname][i]) {
id = i - 1;
break;
}
if(i == paraLevelRange[paraname].length - 1) {
id = i - 1;
}
}
if(id > 0) {
let max = paraLevelRange[paraname][id + 1];
let min = paraLevelRange[paraname][id];
let childColor = colorchild['' + id];
let ci = Math.floor((value - min) * 6 / (max - min));
return childColor[ci];
}
return colorArray[id];
}
var idw = new MapIDW();