@wayz/react-gl/esm/components/pulse-arc-layer/pulse-arc-layer.js

React Component for DeckGL, Base on AMap, Mapbox GL

import { ArcLayer } from '@deck.gl/layers';
import { CompositeLayer } from '@deck.gl/core';
import AnimatedArcLayer from '../animate-arc-layer/animate-arc-layer';
const DEFAULT_COLOR = [250, 226, 255, 255];
const defaultProps = {
    ...AnimatedArcLayer.defaultProps,
    // color of the source pulse
    getPulseSourceColor: { type: 'accessor', value: DEFAULT_COLOR },
    // color of the target pulse
    getPulseTargetColor: { type: 'accessor', value: DEFAULT_COLOR },
    //  Width of the blob
    getPulseWidth: { type: 'accessor', min: 0, value: 1 },
};
class PulseArcLayer extends CompositeLayer {
    renderLayers() {
        // Layer prop
        const { data } = this.props;
        // Rendering props underlying layer
        const { 
        // @ts-ignore
        greatCircle, widthUnits, widthMaxPixels, widthMinPixels, widthScale, animationSpeed, tailLength,
        // zIndex,
         } = this.props;
        // Accessor props for underlying layers
        const { updateTriggers, getSourceColor, getTargetColor, getSourcePosition, getTargetPosition, getPulseSourceColor, getPulseTargetColor, getWidth, getHeight, getTilt, getFrequency, getPulseWidth, } = this.props;
        const LinkArcLayer = this.getSubLayerClass('link-arc', ArcLayer);
        const PulseArcLayer = this.getSubLayerClass('pulse-arc', AnimatedArcLayer);
        return [
            new LinkArcLayer({
                greatCircle,
                widthUnits,
                widthMaxPixels,
                widthMinPixels,
                widthScale,
                getSourceColor,
                getTargetColor,
                getSourcePosition,
                getTargetPosition,
                getWidth,
                getHeight,
                getTilt,
            }, this.getSubLayerProps({
                id: 'link-arc',
                updateTriggers: {
                    getSourceColor: updateTriggers.getSourceColor,
                    getTargetColor: updateTriggers.getTargetColor,
                    getSourcePosition: updateTriggers.getSourcePosition,
                    getTargetPosition: updateTriggers.getTargetPosition,
                    getWidth: updateTriggers.getWidth,
                    getTilt: updateTriggers.getTilt,
                },
            }), {
                data,
            }),
            new PulseArcLayer({
                greatCircle,
                widthUnits,
                widthMaxPixels,
                widthMinPixels,
                widthScale,
                animationSpeed,
                tailLength,
                getSourcePosition,
                getTargetPosition,
                getHeight,
                getTilt,
                getFrequency,
            }, this.getSubLayerProps({
                id: 'pulse-arc',
                updateTriggers: {
                    getSourceColor: updateTriggers.getSourceColor,
                    getTargetColor: updateTriggers.getTargetColor,
                    getSourcePosition: updateTriggers.getSourcePosition,
                    getTargetPosition: updateTriggers.getTargetPosition,
                    getWidth: updateTriggers.getWidth,
                    getTilt: updateTriggers.getTilt,
                    getFrequency: updateTriggers.getFrequency,
                },
            }), {
                data,
                getWidth: this.getSubLayerAccessor(getPulseWidth),
                getSourceColor: this.getSubLayerAccessor(getPulseSourceColor),
                getTargetColor: this.getSubLayerAccessor(getPulseTargetColor),
            }),
        ];
    }
}
PulseArcLayer.layerName = 'PulseArcLayer';
PulseArcLayer.defaultProps = defaultProps;
export default PulseArcLayer;