407 lines
12 KiB
JavaScript
407 lines
12 KiB
JavaScript
(function (global, factory) {
|
||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||
typeof define === 'function' && define.amd ? define(factory) :
|
||
(global.Temperature = factory());
|
||
}(this, (function () { 'use strict';
|
||
|
||
var tool = {
|
||
merge: function merge(settings, defaults) {
|
||
Object.keys(settings).forEach(function (key) {
|
||
defaults[key] = settings[key];
|
||
});
|
||
},
|
||
//计算两点间距离
|
||
getDistance: function getDistance(p1, p2) {
|
||
return Math.sqrt((p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1]));
|
||
},
|
||
//判断点是否在线段上
|
||
containStroke: function containStroke(x0, y0, x1, y1, lineWidth, x, y) {
|
||
if (lineWidth === 0) {
|
||
return false;
|
||
}
|
||
var _l = lineWidth;
|
||
var _a = 0;
|
||
var _b = x0;
|
||
// Quick reject
|
||
if (y > y0 + _l && y > y1 + _l || y < y0 - _l && y < y1 - _l || x > x0 + _l && x > x1 + _l || x < x0 - _l && x < x1 - _l) {
|
||
return false;
|
||
}
|
||
|
||
if (x0 !== x1) {
|
||
_a = (y0 - y1) / (x0 - x1);
|
||
_b = (x0 * y1 - x1 * y0) / (x0 - x1);
|
||
} else {
|
||
return Math.abs(x - x0) <= _l / 2;
|
||
}
|
||
var tmp = _a * x - y + _b;
|
||
var _s = tmp * tmp / (_a * _a + 1);
|
||
return _s <= _l / 2 * _l / 2;
|
||
},
|
||
|
||
//是否在矩形内
|
||
isPointInRect: function isPointInRect(point, bound) {
|
||
var wn = bound.wn; //西北
|
||
var es = bound.es; //东南
|
||
return point.x >= wn.x && point.x <= es.x && point.y >= wn.y && point.y <= es.y;
|
||
},
|
||
|
||
//是否在圆内
|
||
isPointInCircle: function isPointInCircle(point, center, radius) {
|
||
var dis = this.getDistanceNew(point, center);
|
||
return dis <= radius;
|
||
},
|
||
|
||
//两点间距离
|
||
getDistanceNew: function getDistanceNew(point1, point2) {
|
||
return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
|
||
}
|
||
};
|
||
|
||
var resolutionScale = function (context) {
|
||
var devicePixelRatio = window.devicePixelRatio || 1;
|
||
context.canvas.width = context.canvas.width * devicePixelRatio;
|
||
context.canvas.height = context.canvas.height * devicePixelRatio;
|
||
context.canvas.style.width = context.canvas.width / devicePixelRatio + 'px';
|
||
context.canvas.style.height = context.canvas.height / devicePixelRatio + 'px';
|
||
context.scale(devicePixelRatio, devicePixelRatio);
|
||
};
|
||
|
||
/**
|
||
* @author https://github.com/chengquan223
|
||
* @Date 2019-3-29
|
||
* 创建一个canvas，width，height为地图的大小，填充颜色，并获取到imageData
|
||
* for循环width、height，i+=2;
|
||
* 判断point(x,y)是否在地图范围内，矩形或边界地图都适用
|
||
* fasle，不在地图范围内，将color设置为透明色rgba(0,0,0,0)，且point(x,y) = point(x+1,y) = point(x,y+1) = point(x+1,y+1)
|
||
* true，在地图范围内，将point(x,y)转换成经纬度坐标point(lon,lat)
|
||
* 由point(lon,lat)与grid网格关系换算得出point(lon,lat)相对于grid的网格点g(x,y)
|
||
* g00 g10
|
||
* g(x,y)
|
||
* g10 g11
|
||
* 双线性插值计算出点g(x,y)的value
|
||
* 将value作为参数传入颜色带，根据比例换算得出rgb
|
||
* 最终将rba回填至canvas图层的imageData
|
||
*/
|
||
var Temperature = function Temperature(map, userOptions) {
|
||
this.map = map;
|
||
this.lines = [];
|
||
this.pixelList = [];
|
||
|
||
//默认参数
|
||
var options = {
|
||
//线条宽度
|
||
lineWidth: 1
|
||
};
|
||
|
||
this.init(userOptions, options);
|
||
|
||
//全局变量
|
||
this.baseCtx = this.options.baseCanvas.getContext("2d");
|
||
this.width = map.width;
|
||
this.height = map.height;
|
||
|
||
this.clickEvent = this.clickEvent.bind(this);
|
||
|
||
this.bindEvent();
|
||
};
|
||
|
||
Temperature.prototype.init = function (settings, defaults) {
|
||
//合并参数
|
||
tool.merge(settings, defaults);
|
||
this.options = defaults;
|
||
|
||
this.legend = new Legend();
|
||
};
|
||
|
||
Temperature.prototype.createMask = function () {
|
||
var canvas = document.createElement('canvas'),
|
||
context = canvas.getContext('2d'),
|
||
width = this.width,
|
||
height = this.height;
|
||
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
context.fillStyle = "rgba(255, 0, 0, 1)";
|
||
context.fillRect(0, 0, width, height);
|
||
|
||
var imageData = context.getImageData(0, 0, width, height);
|
||
var data = imageData.data;
|
||
var mask = this.mask = {
|
||
imageData: imageData,
|
||
isVisible: function isVisible(x, y) {
|
||
var i = (y * width + x) * 4;
|
||
return data[i + 3] > 0;
|
||
},
|
||
set: function set(x, y, rgba) {
|
||
var i = (y * width + x) * 4;
|
||
data[i] = rgba[0];
|
||
data[i + 1] = rgba[1];
|
||
data[i + 2] = rgba[2];
|
||
data[i + 3] = rgba[3];
|
||
return this;
|
||
}
|
||
};
|
||
return mask;
|
||
};
|
||
|
||
Temperature.prototype.createView = function () {
|
||
var options = this.options,
|
||
extent = options.extent,
|
||
Point = options.Point,
|
||
start = map.toScreen(new Point({
|
||
x: extent[0],
|
||
y: extent[1],
|
||
spatialReference: {
|
||
wkid: 4326
|
||
}
|
||
})),
|
||
end = map.toScreen(new Point({
|
||
x: extent[2],
|
||
y: extent[3],
|
||
spatialReference: {
|
||
wkid: 4326
|
||
}
|
||
}));
|
||
|
||
return {
|
||
x: start.x,
|
||
y: start.y,
|
||
xMax: end.x,
|
||
yMax: end.y
|
||
};
|
||
};
|
||
|
||
Temperature.prototype.interpolateField = function () {
|
||
var self = this,
|
||
map = this.map,
|
||
xMax = this.width,
|
||
yMax = this.height,
|
||
opts = this.options,
|
||
view = this.createView(),
|
||
extent = opts.extent,
|
||
grid = opts.data,
|
||
legend = this.legend,
|
||
x = 0,
|
||
ScreenPoint = opts.ScreenPoint,
|
||
webMercatorUtils = opts.webMercatorUtils;
|
||
var mask = this.mask || this.createMask();
|
||
|
||
function interpolateColumn(x) {
|
||
for (var y = 0; y < yMax; y += 2) {
|
||
var color = [0, 0, 0, 0];
|
||
if (mask.isVisible(x, y)) {
|
||
//判断该点是否在矩形区域范围内，true则插值计算出value得到rgba并更新imageData，false则设置透明
|
||
if (x >= view.x && x <= view.xMax && y >= view.y && y <= view.yMax) {
|
||
var coord = map.toMap(new ScreenPoint(x, y)),
|
||
lonlat = webMercatorUtils.xyToLngLat(coord.x, coord.y),
|
||
value = interpolate(lonlat[0], lonlat[1]),
|
||
rgb = legend.getColor(value).rgb;
|
||
color = [rgb[0], rgb[1], rgb[2], 150];
|
||
}
|
||
mask.set(x, y, color).set(x + 1, y, color).set(x, y + 1, color).set(x + 1, y + 1, color);
|
||
} else {
|
||
console.error(x, y);
|
||
}
|
||
}
|
||
}
|
||
|
||
function interpolate(lon, lat) {
|
||
var i = floorMod(Math.abs(lon - extent[0]), 360) / opts.dx;
|
||
var j = (extent[1] - lat) / opts.dy;
|
||
|
||
var fi = Math.floor(i),
|
||
ci = fi + 1,
|
||
fj = Math.floor(j),
|
||
cj = fj + 1;
|
||
|
||
var row;
|
||
if (row = grid[fj]) {
|
||
var g00 = row[fi];
|
||
var g10 = row[ci];
|
||
if (isValue(g00) && isValue(g10) && (row = grid[cj])) {
|
||
var g01 = row[fi];
|
||
var g11 = row[ci];
|
||
if (isValue(g01) && isValue(g11)) {
|
||
return bilinearInterpolateScalar(i - fi, j - fj, g00, g10, g01, g11);
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function floorMod(a, n) {
|
||
var f = a - n * Math.floor(a / n);
|
||
return f === n ? 0 : f;
|
||
}
|
||
|
||
function isValue(x) {
|
||
return x !== null && x !== undefined;
|
||
}
|
||
|
||
function bilinearInterpolateScalar(x, y, g00, g10, g01, g11) {
|
||
var rx = 1 - x;
|
||
var ry = 1 - y;
|
||
return g00 * rx * ry + g10 * x * ry + g01 * rx * y + g11 * x * y;
|
||
}
|
||
|
||
(function batchInterpolate() {
|
||
var start = Date.now();
|
||
while (x < xMax) {
|
||
interpolateColumn(x);
|
||
x += 2;
|
||
if (Date.now() - start > 100) {
|
||
setTimeout(batchInterpolate, 25);
|
||
return;
|
||
}
|
||
}
|
||
self.renderBaselayer(mask);
|
||
})();
|
||
};
|
||
|
||
Temperature.prototype.renderBaselayer = function (mask) {
|
||
var context = this.baseCtx;
|
||
context.putImageData(mask.imageData, 0, 0);
|
||
};
|
||
|
||
Temperature.prototype.start = function () {
|
||
var self = this;
|
||
self.adjustSize();
|
||
|
||
//插值
|
||
self.interpolateField();
|
||
|
||
// self.renderBaselayer(); //底层canvas渲染
|
||
|
||
// (function drawFrame() {
|
||
// self.timer = setTimeout(function () {
|
||
// self.animationId = requestAnimationFrame(drawFrame);
|
||
// self.renderAnimatelayer(); //动画层canvas渲染
|
||
// }, 1000 / 10);
|
||
// }());
|
||
};
|
||
|
||
Temperature.prototype.adjustSize = function () {
|
||
var width = this.width;
|
||
var height = this.height;
|
||
this.baseCtx.canvas.width = width;
|
||
this.baseCtx.canvas.height = height;
|
||
this.baseCtx.clearRect(0, 0, width, height);
|
||
resolutionScale(this.baseCtx);
|
||
};
|
||
|
||
Temperature.prototype.bindEvent = function (e) {
|
||
var map = this.map;
|
||
if (this.options.methods) {
|
||
if (this.options.methods.mousemove) {
|
||
map.on('mouse-move', this.clickEvent);
|
||
}
|
||
}
|
||
};
|
||
|
||
Temperature.prototype.clickEvent = function (e) {
|
||
var self = this,
|
||
flag = false,
|
||
lines = self.pixelList;
|
||
|
||
if (lines.length > 0) {
|
||
lines.forEach(function (line, i) {
|
||
for (var j = 0; j < line.data.length; j++) {
|
||
var beginPt = line.data[j].pixel;
|
||
if (line.data[j + 1] == undefined) return;
|
||
var curPt = e;
|
||
var inCircle = tool.isPointInCircle(curPt, beginPt, self.options.lineWidth);
|
||
if (inCircle) {
|
||
self.options.methods.mousemove(e, line.data[j]);
|
||
flag = true;
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
if (!flag) {
|
||
document.getElementById('tooltips').style.visibility = 'hidden';
|
||
}
|
||
}
|
||
};
|
||
|
||
function Legend() {
|
||
this.options = {
|
||
width: 400,
|
||
height: 15,
|
||
range: [0, 220],
|
||
gradient: {
|
||
0.1: '#96f3ff',
|
||
0.2: '#00c3ff',
|
||
0.3: '#00e68c',
|
||
0.4: '#00e600',
|
||
0.5: '#fffa00',
|
||
0.6: '#ffbe00',
|
||
0.7: '#ff7300',
|
||
0.8: '#fa1400',
|
||
0.9: '#c80091',
|
||
1.0: '#8200a0'
|
||
// gradient: {
|
||
// 0.1: '#38a702',
|
||
// 0.4: '#b0e000',
|
||
// 0.7: '#ffaa01',
|
||
// 1.0: '#fe0000'
|
||
// }
|
||
} };
|
||
this.init();
|
||
}
|
||
|
||
Legend.prototype.init = function () {
|
||
var options = this.options,
|
||
canvas = this.canvas = document.createElement('canvas'),
|
||
width = canvas.width = options.width,
|
||
height = canvas.height = options.height,
|
||
context = canvas.getContext('2d'),
|
||
grad = context.createLinearGradient(0, 0, width, height);
|
||
for (var gradient in options.gradient) {
|
||
grad.addColorStop(gradient, options.gradient[gradient]);
|
||
}
|
||
context.fillStyle = grad;
|
||
context.fillRect(0, 0, width, height);
|
||
this.imageData = context.getImageData(0, 0, width, height);
|
||
};
|
||
|
||
Legend.prototype.d2Hex = function (d) {
|
||
var hex = Number(d).toString(16);
|
||
while (hex.length < 2) {
|
||
hex = "0" + hex;
|
||
}
|
||
return hex.toUpperCase();
|
||
};
|
||
|
||
Legend.prototype.getRgbColor = function (point) {
|
||
var imageData = this.imageData;
|
||
var data = imageData.data;
|
||
var i = (point.y * this.canvas.width + point.x) * 4;
|
||
var rgb = [],
|
||
color = '#',
|
||
objRgbColor = {
|
||
"rgb": rgb,
|
||
"color": color
|
||
};
|
||
for (var j = 0; j < 3; j++) {
|
||
rgb.push(data[i + j]);
|
||
color += this.d2Hex(data[i + j]);
|
||
}
|
||
objRgbColor.color = color;
|
||
return objRgbColor;
|
||
};
|
||
|
||
Legend.prototype.getColor = function (value) {
|
||
var options = this.options,
|
||
range = options.range,
|
||
colorValue = value - range[0],
|
||
point = {
|
||
x: Math.round(colorValue * this.canvas.width / (range[range.length - 1] - range[0])),
|
||
y: 1
|
||
};
|
||
return this.getRgbColor(point);
|
||
};
|
||
|
||
return Temperature;
|
||
|
||
})));
|