leaflet.webgl-temperature-map-forked
Version:
Minimalist heat map Leaflet.js library using WebGL inspired by [temperature-map-gl](https://github.com/ham-systems/temperature-map-gl)
249 lines (208 loc) • 8.12 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import L from 'leaflet';
import earcut from 'earcut';
import TemperatureMapIdw from './temperature-map-idw';
var getPoints = function getPoints(map, points, _temp) {
if (points === void 0) {
points = [];
}
var _ref = _temp === void 0 ? {} : _temp,
isLatLng = _ref.isLatLng,
isValue = _ref.isValue;
if (isLatLng) {
return points.map(function (_ref2) {
var lat = _ref2[0],
lng = _ref2[1],
value = _ref2[2];
var point = map.latLngToLayerPoint(L.latLng(isValue ? lat : lng, isValue ? lng : lat));
return isValue ? [point.x, point.y, value] : [point.x, point.y];
});
} else {
return points;
}
};
L.WebGlTemperatureMapLayer = L.Layer.extend({
// -- initialized is called on prototype
initialize: function initialize(_temp2) {
var _ref3 = _temp2 === void 0 ? {} : _temp2,
idwOptions = _ref3.idwOptions,
options = _objectWithoutPropertiesLoose(_ref3, ["idwOptions"]);
this._map = null;
this._canvas = null;
this._frame = null;
this._delegate = null;
this._idwOptions = idwOptions || {};
L.setOptions(this, options);
},
delegate: function delegate(del) {
this._delegate = del;
return this;
},
needRedraw: function needRedraw() {
if (!this._frame) {
this._frame = L.Util.requestAnimFrame(this.drawLayer, this);
}
return this;
},
// -------------------------------------------------------------
setPoints: function setPoints(points, options) {
if (points === void 0) {
points = [];
}
if (options === void 0) {
options = {
isLatLng: false,
draw: true
};
}
if (this.tempMap && this._map) {
this.offsetState = this._map.containerPointToLatLng([0, 0]);
this.zoomState = this._map.getZoom();
var _points = getPoints(this._map, points, {
isValue: true,
isLatLng: options.isLatLng
});
this.tempMap.set_points(_points);
options.draw && this.needRedraw();
return this;
}
return undefined;
},
// -------------------------------------------------------------
setMask: function setMask(points, options) {
if (points === void 0) {
points = [];
}
if (options === void 0) {
options = {
isLatLng: false,
draw: true
};
}
if (this.tempMap && this._map) {
this.offsetState = this._map.containerPointToLatLng([0, 0]);
this.zoomState = this._map.getZoom();
var flattenPoints = earcut.flatten(points);
var result = earcut(flattenPoints.vertices, flattenPoints.holes, flattenPoints.dimensions);
var triangles = [];
for (var i = 0; i < result.length; i++) {
var index = result[i];
triangles.push([flattenPoints.vertices[index * flattenPoints.dimensions], flattenPoints.vertices[index * flattenPoints.dimensions + 1]]);
}
var _triangles = getPoints(this._map, triangles, {
isLatLng: options.isLatLng,
isValue: false
}); // console.log('deviation: ' + earcut.deviation(ttt.vertices, ttt.holes, ttt.dimensions, result));
this.tempMap.set_points(_triangles, undefined, undefined, undefined, {
mask: true
});
this.tempMap.resize();
options.draw && this.needRedraw();
return this;
}
return undefined;
},
// -------------------------------------------------------------
_onLayerDidResize: function _onLayerDidResize(resizeEvent) {
this._canvas.width = resizeEvent.newSize.x;
this._canvas.height = resizeEvent.newSize.y;
this.tempMap.resize();
},
// -------------------------------------------------------------
_onLayerDidMove: function _onLayerDidMove() {
var topLeft = this._map.containerPointToLayerPoint([0, 0]);
L.DomUtil.setPosition(this._canvas, topLeft);
this.drawLayer();
},
// -------------------------------------------------------------
getEvents: function getEvents() {
var events = {
resize: this._onLayerDidResize,
moveend: this._onLayerDidMove
};
if (this._map.options.zoomAnimation && L.Browser.any3d) {
events.zoomanim = this._animateZoom;
}
return events;
},
// -------------------------------------------------------------
onAdd: function onAdd(map) {
this._map = map;
this._canvas = L.DomUtil.create('canvas', 'leaflet-layer');
this.tiles = {};
var size = this._map.getSize();
this._canvas.width = size.x;
this._canvas.height = size.y;
var animated = this._map.options.zoomAnimation && L.Browser.any3d;
L.DomUtil.addClass(this._canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));
map._panes.overlayPane.appendChild(this._canvas);
map.on(this.getEvents(), this);
this.tempMap = new TemperatureMapIdw(_extends(_extends({}, this._idwOptions), {}, {
canvas: this._canvas
}));
var del = this._delegate || this;
del.onLayerDidMount && del.onLayerDidMount(); // -- callback
this.needRedraw();
},
// -------------------------------------------------------------
onRemove: function onRemove(map) {
var del = this._delegate || this;
del.onLayerWillUnmount && del.onLayerWillUnmount(); // -- callback
map.getPanes().overlayPane.removeChild(this._canvas);
map.off(this.getEvents(), this);
this._canvas = null;
},
// ------------------------------------------------------------
addTo: function addTo(map) {
map.addLayer(this);
return this;
},
// --------------------------------------------------------------------------------
LatLonToMercator: function LatLonToMercator(latlon) {
return {
x: latlon.lng * 6378137 * Math.PI / 180,
y: Math.log(Math.tan((90 + latlon.lat) * Math.PI / 360)) * 6378137
};
},
// ------------------------------------------------------------------------------
drawLayer: function drawLayer() {
// -- todo make the viewInfo properties flat objects.
var size = this._map.getSize();
var bounds = this._map.getBounds();
var zoom = this._map.getZoom();
var center = this.LatLonToMercator(this._map.getCenter());
var corner = this.LatLonToMercator(this._map.containerPointToLatLng(this._map.getSize()));
var del = this._delegate || this;
if (this.offsetState && this.zoomState) {
var params = {};
params.scale = this._map.getZoomScale(zoom, this.zoomState);
var oldOffset = this._map.latLngToLayerPoint(this.offsetState);
var offset = this._map.containerPointToLayerPoint([0, 0]);
params.transform = [offset.x - oldOffset.x, offset.y - oldOffset.y];
this.tempMap && this.tempMap.draw(params);
}
del.onDrawLayer && del.onDrawLayer({
layer: this,
canvas: this._canvas,
bounds: bounds,
size: size,
zoom: zoom,
center: center,
ce: this._map.getCenter(),
ce_b: bounds.getCenter(),
corner: corner
});
this._frame = null;
},
// ------------------------------------------------------------------------------
_animateZoom: function _animateZoom(e) {
var scale = this._map.getZoomScale(e.zoom);
var offset = this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), e.zoom, e.center);
L.DomUtil.setTransform(this._canvas, offset, scale);
}
});
L.webGlTemperatureMapLayer = function (options) {
return new L.WebGlTemperatureMapLayer(options);
};
export default L.WebGlTemperatureMapLayer;