rlayers/dist/layer/RLayerVectorTile.js

React Components for OpenLayers

import React from 'react';
import { VectorTile as LayerVectorTile } from 'ol/layer';
import { VectorTile as SourceVectorTile } from 'ol/source';
import { RContext } from '../context';
import { default as RLayer } from './RLayer';
import { default as RFeature } from '../RFeature';
import { RlayersBase } from '../REvent';
import { featureHandlersSymbol } from './RLayerBaseVector';
import RStyle from '../style/RStyle';
/**
 * A vector tile layer
 *
 * Supports loading of features from vector tile servers.
 *
 * Only the handlers can be dynamically modified.
 *
 * Requires an `RMap` context.
 *
 * It does not provide a vector layer context for JSX-declared `RFeature`s
 * and it is not compatible with RLayerVector.
 *
 * Since 3.0, RLayerVectorTile uses OpenLayers light-weight RenderFeatures by default.
 *
 * @example
 * <RLayerVectorTile url={url} format={new MVT()} />
 *
 * If you need advanced feature functions, you can switch to using full blown OpenLayers features
 * by using a `format` parser that returns Features and, if using TSX, specifying the right
 * generic argument.
 *
 * @example
 * <RLayerVectorTile<Feature> url={url} format={new MVT({featureClass: Feature})} />
 */
export default class RLayerVectorTile extends RLayer {
    constructor(props) {
        super(props);
        this.source = new SourceVectorTile({
            url: this.props.url,
            format: this.props.format,
            projection: this.props.projection,
            cacheSize: this.props.cacheSize,
            extent: this.props.extent,
            overlaps: this.props.overlaps,
            state: this.props.state,
            tileClass: this.props.tileClass,
            tileSize: this.props.tileSize,
            tileGrid: this.props.tileGrid,
            tileLoadFunction: this.props.tileLoadFunction,
            tileUrlFunction: this.props.tileUrlFunction,
            transition: this.props.transition,
            wrapX: this.props.wrapX,
            zDirection: this.props.zDirection
        });
        this.ol = new LayerVectorTile({
            style: RStyle.getStyle(this.props.style),
            source: this.source,
            renderBuffer: this.props.renderBuffer
        });
        this.eventSources = [this.ol, this.source];
    }
    incrementHandlers(ev) {
        var _a;
        const featureHandlers = RlayersBase.getOLObject(featureHandlersSymbol, this.ol);
        featureHandlers[ev] = ((_a = featureHandlers[ev]) !== null && _a !== void 0 ? _a : 0) + 1;
    }
    decrementHandlers(ev) {
        const featureHandlers = RlayersBase.getOLObject(featureHandlersSymbol, this.ol);
        featureHandlers[ev]--;
    }
    refresh(prevProps) {
        super.refresh(prevProps);
        const handlers = Object.keys(this.props)
            .filter((ev) => ev.startsWith('on'))
            .reduce((ac, x) => (Object.assign(Object.assign({}, ac), { ['_' + x.toLowerCase()]: this.props[x] })), {});
        this.ol.setProperties(handlers);
        if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.style) !== this.props.style)
            this.ol.setStyle(RStyle.getStyle(this.props.style));
        if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.url) !== this.props.url) {
            this.source.setUrl(this.props.url);
            this.source.refresh();
        }
    }
    render() {
        super.render();
        RFeature.initEventRelay(this.context.map);
        return (React.createElement("div", { className: '_rlayers_RLayerVectorTile' },
            React.createElement(RContext.Provider, { value: Object.assign(Object.assign({}, this.context), { layer: this.ol, vectortilelayer: this.ol, rLayer: this, rLayerVectorTile: this }) }, this.props.children)));
    }
}
//# sourceMappingURL=RLayerVectorTile.js.map