rlayers
Version:
React Components for OpenLayers
98 lines • 3.99 kB
JavaScript
import React from 'react';
import { VectorTile as LayerVectorTile } from 'ol/layer';
import { RContext } from '../context';
import { default as RLayerRaster } from './RLayerRaster';
import { default as RFeature } from '../RFeature';
import RStyle from '../style/RStyle';
import debug from '../debug';
/**
* A layer from a remote MBTiles vector source
*
* WARNING: Using this module requires manually installing `ol-mbtiles`
*
* `npm install ol-mbtiles`
*
* Be sure to read its own documentation for tips on how to improve
* its performance (COOP/COEP, WASM compression, preloading...)
*
* It does not provide a vector layer context for JSX-declared `RFeature`s
* and it is not compatible with RLayerVector
*
* Requires an `RMap` context
*/
export default class RLayerVectorMBTiles extends RLayerRaster {
constructor(props, context) {
super(props, context);
this.addon = import('ol-mbtiles');
this.ol = new LayerVectorTile({
style: RStyle.getStyle(this.props.style),
renderBuffer: this.props.renderBuffer
});
this.eventSources = [this.ol];
RFeature.initEventRelay(this.context.map);
}
createSource() {
debug('createSource start', this);
this.metadata = this.addon.then((mod) => {
var _a, _b, _c, _d;
return mod.importMBTiles({
url: this.props.url,
sqlWorkers: (_a = this.props.workers) !== null && _a !== void 0 ? _a : 4,
sqlCacheSize: (_b = this.props.sqlCacheSize) !== null && _b !== void 0 ? _b : 4096,
maxSqlPageSize: (_c = this.props.maxSqlPageSize) !== null && _c !== void 0 ? _c : 4096,
backendType: (_d = this.props.backend) !== null && _d !== void 0 ? _d : 'sync'
});
});
const abort = new AbortController();
this.abort = abort;
Promise.all([this.addon, this.metadata]).then(([addon, md]) => {
if (abort.signal.aborted) {
debug('createSource aborted', this);
md.pool.then((p) => p.close());
return;
}
this.source = new addon.MBTilesVectorSource(md);
this.eventSources = [this.ol, this.source];
this.ol.setSource(this.source);
this.attachOldEventHandlers(this.source);
if (this.props.onMetadataReady)
this.props.onMetadataReady.call(this, md);
return this.source;
});
}
destroySource() {
debug('destroySource', this, this.abort);
if (this.source) {
this.source.dispose();
this.source = null;
if (this.ol)
this.ol.setSource(null);
}
if (this.abort) {
this.abort.abort();
this.abort = null;
}
}
componentWillUnmount() {
super.componentWillUnmount();
this.destroySource();
}
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.destroySource();
this.createSource();
}
}
render() {
return (React.createElement("div", { className: '_rlayers_RLayerVectorMBTiles' },
React.createElement(RContext.Provider, { value: Object.assign(Object.assign({}, this.context), { layer: this.ol, vectortilelayer: this.ol, rLayer: this }) }, this.props.children)));
}
}
//# sourceMappingURL=RLayerVectorMBTiles.js.map