rlayers/dist/RMap.js

React Components for OpenLayers

import React from 'react';
import { Map, View } from 'ol';
import { RContext } from './context';
import { RlayersBase } from './REvent';
/**
 * Main map component
 *
 * All other components, except `RStyle` should be part of an `RMap`
 */
export default class RMap extends RlayersBase {
    constructor(props) {
        super(props);
        this.updateView = (e) => {
            var _a;
            const view = this.ol.getView();
            if (typeof ((_a = this.props) === null || _a === void 0 ? void 0 : _a.view[1]) === 'function')
                this.props.view[1]({
                    center: view.getCenter(),
                    zoom: view.getZoom(),
                    resolution: view.getResolution()
                });
        };
        this.target = React.createRef();
        this.ol = new Map({
            controls: props.noDefaultControls ? [] : undefined,
            interactions: props.noDefaultInteractions ? [] : undefined,
            view: new View({
                projection: props.projection,
                center: props.initial.center,
                zoom: props.initial.resolution === undefined ? props.initial.zoom : undefined,
                resolution: props.initial.resolution,
                extent: props.extent,
                minResolution: props.minResolution,
                maxResolution: props.maxResolution,
                constrainResolution: props.constrainResolution,
                minZoom: props.minZoom,
                maxZoom: props.maxZoom,
                enableRotation: props.enableRotation,
                constrainRotation: props.constrainRotation
            })
        });
        if (this.props.view)
            this.ol.on('moveend', this.updateView);
    }
    componentDidMount() {
        super.componentDidMount();
        this.ol.setTarget(this.target.current);
    }
    refresh(prevProps) {
        super.refresh(prevProps);
        const view = this.ol.getView();
        for (const p of ['minZoom', 'maxZoom', 'constrainResolution']) {
            const m = p.charAt(0).toUpperCase() + p.substring(1);
            if (!prevProps || this.props[p] !== prevProps[p])
                view['set' + m](this.props[p]);
        }
        if (this.props.view) {
            view.setCenter(this.props.view[0].center);
            if (this.props.view[0].resolution === undefined)
                view.setZoom(this.props.view[0].zoom);
            else
                view.setResolution(this.props.view[0].resolution);
        }
        if (this.props.properties)
            this.ol.setProperties(this.props.properties);
        if (this.props.view)
            this.ol.on('moveend', this.updateView);
        else
            this.ol.un('moveend', this.updateView);
    }
    render() {
        return (React.createElement("div", { className: this.props.className, style: { width: this.props.width, height: this.props.height }, ref: this.target },
            React.createElement(RContext.Provider, { value: { map: this.ol, rMap: this } }, this.props.children)));
    }
}
//# sourceMappingURL=RMap.js.map