@wayz/react-gl
Version:
React Component for DeckGL, Base on AMap, Mapbox GL
81 lines (80 loc) • 4.09 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { ArcLayer } from '@deck.gl/layers';
var vsDeclaration = "\n attribute float instanceFrequency;\n varying float vArcLength;\n varying float vFrequency;\n";
var vsMain = "\n vArcLength = distance(source, target);\n vFrequency = instanceFrequency;\n";
var fsDeclaration = "\n uniform float tailLength;\n uniform float timestamp;\n uniform float animationSpeed;\n\n varying float vArcLength;\n varying float vFrequency;\n";
var fsColorFilter = "\n float tripDuration = vArcLength / animationSpeed;\n float flightInterval = 1.0 / vFrequency;\n float r = mod(geometry.uv.x, flightInterval);\n\n // Head of the trip (alpha = 1.0)\n float rMax = mod(fract(timestamp / tripDuration), flightInterval);\n // Tail of the trip (alpha = 0.0)\n float rMin = rMax - tailLength / vArcLength;\n // Two consecutive trips can overlap\n float alpha = (r > rMax ? 0.0 : smoothstep(rMin, rMax, r)) + smoothstep(rMin + flightInterval, rMax + flightInterval, r);\n if (alpha == 0.0) {\n discard;\n }\n color.a *= alpha;\n";
var defaultProps = __assign(__assign({}, ArcLayer.defaultProps), {
// Frequency of the running light
getFrequency: { type: 'accessor', value: 1 },
// Speed of the running light
animationSpeed: { type: 'number', min: 0, value: 1 },
// Size of the blob
tailLength: { type: 'number', min: 0, value: 1 } });
// Our custom layer class
var AnimatedArcLayer = /** @class */ (function (_super) {
__extends(AnimatedArcLayer, _super);
function AnimatedArcLayer() {
return _super !== null && _super.apply(this, arguments) || this;
}
AnimatedArcLayer.prototype.getShaders = function () {
var shaders = _super.prototype.getShaders.call(this);
shaders.inject = {
'vs:#decl': vsDeclaration,
'vs:#main-end': vsMain,
'fs:#decl': fsDeclaration,
'fs:DECKGL_FILTER_COLOR': fsColorFilter,
};
return shaders;
};
AnimatedArcLayer.prototype.initializeState = function (params) {
_super.prototype.initializeState.call(this, params);
this.getAttributeManager().addInstanced({
instanceFrequency: {
size: 1,
accessor: 'getFrequency',
defaultValue: 1,
},
});
};
AnimatedArcLayer.prototype.draw = function (opts) {
this.state.model.setUniforms({
tailLength: this.props.tailLength,
animationSpeed: this.props.animationSpeed,
timestamp: (Date.now() / 1000) % 86400,
});
_super.prototype.draw.call(this, opts);
// By default, the needsRedraw flag is cleared at each render. We want the layer to continue
// refreshing.
this.setNeedsRedraw();
};
return AnimatedArcLayer;
}(ArcLayer));
AnimatedArcLayer.layerName = 'AnimatedArcLayer';
AnimatedArcLayer.defaultProps = defaultProps;
export default AnimatedArcLayer;