@wayz/react-gl/esm/components/icon-layer-in-viewport/icon-layer-in-viewport.js

React Component for DeckGL, Base on AMap, Mapbox GL

import { CompositeLayer } from '@deck.gl/core';
import { IconLayer } from '@deck.gl/layers';
import { point } from '@turf/helpers';
import bboxPolygon from '@turf/bbox-polygon';
import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
class IconLayerInViewport extends CompositeLayer {
    shouldUpdateState({ changeFlags }) {
        return changeFlags.somethingChanged;
    }
    updateState({ props, oldProps, changeFlags }) {
        const rebuildIndex = changeFlags.viewportChanged || props.sizeScale !== oldProps.sizeScale;
        // @ts-expect-error
        const bbox = this.context.viewport.getBounds();
        const poly = bboxPolygon(bbox);
        const data = props.data.filter((d) => {
            const pt = point(props.getPosition(d));
            return booleanPointInPolygon(pt, poly);
        });
        if (rebuildIndex) {
            this.setState({ data });
        }
    }
    renderLayers() {
        const { data = [] } = this.state;
        const { updateTriggers } = this.props;
        const IconLayerInViewport = this.getSubLayerClass('viewport', IconLayer);
        return new IconLayerInViewport(this.props, this.getSubLayerProps({
            id: 'viewport',
            updateTriggers: {
                getIcon: updateTriggers.getIcon,
                getPosition: updateTriggers.getPosition,
                getColor: updateTriggers.getColor,
                getAngle: updateTriggers.getAngle,
                getPixelOffset: updateTriggers.getPixelOffset,
                getSize: updateTriggers.getSize,
            },
        }), {
            data,
        });
    }
}
IconLayerInViewport.layerName = 'IconLayerInViewport';
export default IconLayerInViewport;