Make code prettier
This updates ESLint and our shared eslint-config-openlayers to use Prettier. Most formatting changes were automatically applied with this:
npm run lint -- --fix
A few manual changes were required:
* In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
* In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason. While editing this, I reworked `ExampleBuilder` to be a class.
* In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.
This commit is contained in:
Tim Schaub
@@ -1,13 +1,13 @@
|
||||
import MVT from '../src/ol/format/MVT.js';
|
||||
import TileQueue from '../src/ol/TileQueue.js';
|
||||
import VectorTileLayer from '../src/ol/layer/VectorTile.js';
|
||||
import VectorTileSource from '../src/ol/source/VectorTile.js';
|
||||
import MVT from '../src/ol/format/MVT.js';
|
||||
import {Projection} from '../src/ol/proj.js';
|
||||
import TileQueue from '../src/ol/TileQueue.js';
|
||||
import {getTilePriority as tilePriorityFunction} from '../src/ol/TileQueue.js';
|
||||
import {renderDeclutterItems} from '../src/ol/render.js';
|
||||
import styleFunction from 'ol-mapbox-style/dist/stylefunction.js';
|
||||
import {inView} from '../src/ol/layer/Layer.js';
|
||||
import stringify from 'json-stringify-safe';
|
||||
import styleFunction from 'ol-mapbox-style/dist/stylefunction.js';
|
||||
import {Projection} from '../src/ol/proj.js';
|
||||
import {inView} from '../src/ol/layer/Layer.js';
|
||||
import {renderDeclutterItems} from '../src/ol/render.js';
|
||||
import {getTilePriority as tilePriorityFunction} from '../src/ol/TileQueue.js';
|
||||
|
||||
/** @type {any} */
|
||||
const worker = self;
|
||||
@@ -22,89 +22,113 @@ const sources = {
|
||||
landcover: new VectorTileSource({
|
||||
maxZoom: 9,
|
||||
format: new MVT(),
|
||||
url: 'https://api.maptiler.com/tiles/landcover/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
|
||||
url:
|
||||
'https://api.maptiler.com/tiles/landcover/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB',
|
||||
}),
|
||||
contours: new VectorTileSource({
|
||||
minZoom: 9,
|
||||
maxZoom: 14,
|
||||
format: new MVT(),
|
||||
url: 'https://api.maptiler.com/tiles/contours/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
|
||||
url:
|
||||
'https://api.maptiler.com/tiles/contours/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB',
|
||||
}),
|
||||
openmaptiles: new VectorTileSource({
|
||||
format: new MVT(),
|
||||
maxZoom: 14,
|
||||
url: 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
|
||||
})
|
||||
url:
|
||||
'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB',
|
||||
}),
|
||||
};
|
||||
const layers = [];
|
||||
|
||||
// Font replacement so we do not need to load web fonts in the worker
|
||||
function getFont(font) {
|
||||
return font[0]
|
||||
.replace('Noto Sans', 'serif')
|
||||
.replace('Roboto', 'sans-serif');
|
||||
return font[0].replace('Noto Sans', 'serif').replace('Roboto', 'sans-serif');
|
||||
}
|
||||
|
||||
function loadStyles() {
|
||||
const styleUrl = 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB';
|
||||
const styleUrl =
|
||||
'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB';
|
||||
|
||||
fetch(styleUrl).then(data => data.json()).then(styleJson => {
|
||||
const buckets = [];
|
||||
let currentSource;
|
||||
styleJson.layers.forEach(layer => {
|
||||
if (!layer.source) {
|
||||
return;
|
||||
}
|
||||
if (currentSource !== layer.source) {
|
||||
currentSource = layer.source;
|
||||
buckets.push({
|
||||
source: layer.source,
|
||||
layers: []
|
||||
});
|
||||
}
|
||||
buckets[buckets.length - 1].layers.push(layer.id);
|
||||
});
|
||||
|
||||
const spriteUrl = styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.json';
|
||||
const spriteImageUrl = styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.png';
|
||||
fetch(spriteUrl).then(data => data.json()).then(spriteJson => {
|
||||
buckets.forEach(bucket => {
|
||||
const source = sources[bucket.source];
|
||||
if (!source) {
|
||||
fetch(styleUrl)
|
||||
.then((data) => data.json())
|
||||
.then((styleJson) => {
|
||||
const buckets = [];
|
||||
let currentSource;
|
||||
styleJson.layers.forEach((layer) => {
|
||||
if (!layer.source) {
|
||||
return;
|
||||
}
|
||||
const layer = new VectorTileLayer({
|
||||
declutter: true,
|
||||
source,
|
||||
minZoom: source.getTileGrid().getMinZoom()
|
||||
});
|
||||
layer.getRenderer().useContainer = function(target, transform) {
|
||||
this.containerReused = this.getLayer() !== layers[0];
|
||||
this.canvas = canvas;
|
||||
this.context = context;
|
||||
this.container = {
|
||||
firstElementChild: canvas
|
||||
};
|
||||
rendererTransform = transform;
|
||||
};
|
||||
styleFunction(layer, styleJson, bucket.layers, undefined, spriteJson, spriteImageUrl, getFont);
|
||||
layers.push(layer);
|
||||
if (currentSource !== layer.source) {
|
||||
currentSource = layer.source;
|
||||
buckets.push({
|
||||
source: layer.source,
|
||||
layers: [],
|
||||
});
|
||||
}
|
||||
buckets[buckets.length - 1].layers.push(layer.id);
|
||||
});
|
||||
worker.postMessage({action: 'requestRender'});
|
||||
|
||||
const spriteUrl =
|
||||
styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.json';
|
||||
const spriteImageUrl =
|
||||
styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.png';
|
||||
fetch(spriteUrl)
|
||||
.then((data) => data.json())
|
||||
.then((spriteJson) => {
|
||||
buckets.forEach((bucket) => {
|
||||
const source = sources[bucket.source];
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
const layer = new VectorTileLayer({
|
||||
declutter: true,
|
||||
source,
|
||||
minZoom: source.getTileGrid().getMinZoom(),
|
||||
});
|
||||
layer.getRenderer().useContainer = function (target, transform) {
|
||||
this.containerReused = this.getLayer() !== layers[0];
|
||||
this.canvas = canvas;
|
||||
this.context = context;
|
||||
this.container = {
|
||||
firstElementChild: canvas,
|
||||
};
|
||||
rendererTransform = transform;
|
||||
};
|
||||
styleFunction(
|
||||
layer,
|
||||
styleJson,
|
||||
bucket.layers,
|
||||
undefined,
|
||||
spriteJson,
|
||||
spriteImageUrl,
|
||||
getFont
|
||||
);
|
||||
layers.push(layer);
|
||||
});
|
||||
worker.postMessage({action: 'requestRender'});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Minimal map-like functionality for rendering
|
||||
|
||||
const tileQueue = new TileQueue(
|
||||
(tile, tileSourceKey, tileCenter, tileResolution) => tilePriorityFunction(frameState, tile, tileSourceKey, tileCenter, tileResolution),
|
||||
() => worker.postMessage({action: 'requestRender'}));
|
||||
(tile, tileSourceKey, tileCenter, tileResolution) =>
|
||||
tilePriorityFunction(
|
||||
frameState,
|
||||
tile,
|
||||
tileSourceKey,
|
||||
tileCenter,
|
||||
tileResolution
|
||||
),
|
||||
() => worker.postMessage({action: 'requestRender'})
|
||||
);
|
||||
|
||||
const maxTotalLoading = 8;
|
||||
const maxNewLoads = 2;
|
||||
|
||||
worker.addEventListener('message', event => {
|
||||
worker.addEventListener('message', (event) => {
|
||||
if (event.data.action !== 'render') {
|
||||
return;
|
||||
}
|
||||
@@ -115,7 +139,7 @@ worker.addEventListener('message', event => {
|
||||
}
|
||||
frameState.tileQueue = tileQueue;
|
||||
frameState.viewState.projection.__proto__ = Projection.prototype;
|
||||
layers.forEach(layer => {
|
||||
layers.forEach((layer) => {
|
||||
if (inView(layer.getLayerState(), frameState.viewState)) {
|
||||
const renderer = layer.getRenderer();
|
||||
renderer.renderFrame(frameState, canvas);
|
||||
@@ -127,10 +151,13 @@ worker.addEventListener('message', event => {
|
||||
tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads);
|
||||
}
|
||||
const imageData = canvas.transferToImageBitmap();
|
||||
worker.postMessage({
|
||||
action: 'rendered',
|
||||
imageData: imageData,
|
||||
transform: rendererTransform,
|
||||
frameState: JSON.parse(stringify(frameState))
|
||||
}, [imageData]);
|
||||
worker.postMessage(
|
||||
{
|
||||
action: 'rendered',
|
||||
imageData: imageData,
|
||||
transform: rendererTransform,
|
||||
frameState: JSON.parse(stringify(frameState)),
|
||||
},
|
||||
[imageData]
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user