From a01fd8c7d620d187db7ccd14ea7c6bf541c22bae Mon Sep 17 00:00:00 2001 From: Olivia Date: Fri, 17 Oct 2025 12:16:04 +0200 Subject: [PATCH 1/3] misc minor fixes --- cases/common.js | 3 ++- cases/vector-tiles-rendering/main.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/cases/common.js b/cases/common.js index f08aa66..c2db358 100644 --- a/cases/common.js +++ b/cases/common.js @@ -285,7 +285,7 @@ const guiParams = {}; * The `id` and `values` will show up in the url * @param {string} id Id * @param {string} label Label - * @param {Array|Array} values Either two string values for true/false, or two numbers defining a range + * @param {Array|Array} values Either two string values for true/false, or two numbers defining a range + optional step value * @param {boolean|number|function(): void} defaultValue Default value * @param {function(boolean|number|function(): void, boolean|null): void} callback Called when the parameter changes, and also on initialization * First argument is the current value, second argument is true if this is the initial call @@ -454,6 +454,7 @@ function animate() { }, 1000); } +/** @type {string} */ export const olVersion = new URL(window.location.href).searchParams.get('olVersion') ?? // @ts-ignore diff --git a/cases/vector-tiles-rendering/main.js b/cases/vector-tiles-rendering/main.js index 812b351..d31d36d 100644 --- a/cases/vector-tiles-rendering/main.js +++ b/cases/vector-tiles-rendering/main.js @@ -34,7 +34,7 @@ function generateStyle() { defaultStylesCount; // use a single style rule for OpenLayers versions < 10.4.1 - if (compareVersions(olVersion, '10.4.1') < 0) { + if (olVersion.match(/^[0-9]/) && compareVersions(olVersion, '10.4.1') < 0) { const colorExpr = [ 'match', ['get', 'propValue'], From 4f1f34f4487ced86548dc6d994441abc87d74fcb Mon Sep 17 00:00:00 2001 From: Olivia Date: Sat, 8 Mar 2025 23:01:43 +0100 Subject: [PATCH 2/3] Add labels on geometries & show them in the various examples --- cases/common.js | 7 +++++++ cases/line-rendering/main.js | 7 +++++++ cases/point-rendering/main.js | 7 ++++++- cases/polygon-rendering/main.js | 5 +++++ cases/vector-tiles-rendering/main.js | 10 ++++++++++ package-lock.json | 12 +++++++++++- package.json | 1 + 7 files changed, 47 insertions(+), 2 deletions(-) diff --git a/cases/common.js b/cases/common.js index c2db358..466c48c 100644 --- a/cases/common.js +++ b/cases/common.js @@ -6,6 +6,7 @@ import { trackPerformance, // @ts-ignore } from '@camptocamp/rendering-analyzer'; +import randomName from '@scaleway/random-name'; import lilGui from 'lil-gui'; import Map from 'ol/Map.js'; import View from 'ol/View.js'; @@ -164,11 +165,13 @@ export function generatePolygons(count, numVertices) { // Close the polygon by adding the first vertex at the end polygonCoordinates.push(polygonCoordinates[0]); + const label = `This area covers ${randomName()}`; features.push({ type: 'Feature', properties: { color: getRandomPaletteColor(), ratio: Math.round(Math.random() * 100), + label, }, geometry: { type: 'Polygon', @@ -197,11 +200,13 @@ export function generatePoints(count, radius) { for (let lon = -180; lon < 180 - size / 4; lon += size) { for (let lat = -90; lat < 90 - size / 4; lat += size) { const buffer = (0.3 + Math.random() * 0.2) * size * (radius / 5); // Increase the buffer for larger points + const label = randomName(); features.push({ type: 'Feature', properties: { color: getRandomPaletteColor(), radius, + label, }, geometry: { type: 'Point', @@ -254,11 +259,13 @@ export function generateLines(lineCount, curveComplexity, width) { } coordinates.push(...singleCurve); } + const label = `This leads to ${randomName()}`; features.push({ type: 'Feature', properties: { color: getRandomPaletteColor(), // Use deterministic color selection width, + label, }, geometry: { type: 'LineString', diff --git a/cases/line-rendering/main.js b/cases/line-rendering/main.js index 026eeab..3b682a2 100644 --- a/cases/line-rendering/main.js +++ b/cases/line-rendering/main.js @@ -23,6 +23,13 @@ const style = { 'stroke-width': ['get', 'width'], 'stroke-color': ['get', 'color'], 'stroke-line-dash': [15, 15], + 'text-value': ['get', 'label'], + 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', + 'text-fill-color': '#333', + 'text-stroke-color': 'rgba(255,255,255,0.8)', + 'text-stroke-width': 2, + 'text-placement': 'line', + 'text-repeat': 2000, }; /** diff --git a/cases/point-rendering/main.js b/cases/point-rendering/main.js index d26bc30..9b77343 100644 --- a/cases/point-rendering/main.js +++ b/cases/point-rendering/main.js @@ -19,11 +19,16 @@ const source = new VectorSource({ */ const style = { // This has to be fixed upstream - // @ts-ignore 'circle-radius': ['get', 'radius'], 'circle-fill-color': ['get', 'color'], 'circle-stroke-color': 'gray', 'circle-stroke-width': 0.5, + 'text-value': ['get', 'label'], + 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', + 'text-fill-color': '#333', + 'text-stroke-color': 'rgba(255,255,255,0.8)', + 'text-stroke-width': 2, + 'text-offset-y': -12, }; /** diff --git a/cases/polygon-rendering/main.js b/cases/polygon-rendering/main.js index 6d5e873..8c971e1 100644 --- a/cases/polygon-rendering/main.js +++ b/cases/polygon-rendering/main.js @@ -20,6 +20,11 @@ const source = new VectorSource({ */ const style = { 'fill-color': ['get', 'color'], + 'text-value': ['get', 'label'], + 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', + 'text-fill-color': '#333', + 'text-stroke-color': 'rgba(255,255,255,0.8)', + 'text-stroke-width': 2, }; /** diff --git a/cases/vector-tiles-rendering/main.js b/cases/vector-tiles-rendering/main.js index d31d36d..3dc06f8 100644 --- a/cases/vector-tiles-rendering/main.js +++ b/cases/vector-tiles-rendering/main.js @@ -115,6 +115,7 @@ function makeData( (width + height) / 4 / (Math.ceil(Math.sqrt(countPoints)) + 1); // Generate polygons on the left bottom corner + let number = 1; for (let lon = bbox[0] + gridSpacing; lon < centerLon; lon += gridSpacing) { for (let lat = bbox[1] + gridSpacing; lat < centerLat; lat += gridSpacing) { const buffer = (0.3 + Math.random() * 0.2) * gridSpacing; @@ -129,11 +130,13 @@ function makeData( polygonCoordinates.push([x, y]); } polygonCoordinates.push(polygonCoordinates[0]); + const label = `polygon n°${number++}`; features.push({ type: 'Feature', properties: { propValue: propValues[Math.floor(Math.random() * propValues.length)], + label, }, geometry: { type: 'Polygon', @@ -148,6 +151,7 @@ function makeData( type: 'Feature', properties: { propValue: propValues[Math.floor(Math.random() * propValues.length)], + label: '', }, geometry: { type: 'LineString', @@ -162,14 +166,17 @@ function makeData( }); // Generate points on the right top corner + number = 1; for (let lon = centerLon + gridSpacing; lon < bbox[2]; lon += gridSpacing) { for (let lat = bbox[1] + gridSpacing; lat < centerLat; lat += gridSpacing) { const point = [lon, lat]; + const label = `point n°${number++}`; features.push({ type: 'Feature', properties: { propValue: propValues[Math.floor(Math.random() * propValues.length)], + label, }, geometry: { type: 'Point', @@ -190,6 +197,7 @@ function makeData( */ let singleCurve = []; // Create a singleCurve array outside the loop + number = 1; for (let j = 0; j < countLines; j++) { const coordinates = []; for (let i = 0; i < periodCount; i++) { @@ -207,11 +215,13 @@ function makeData( } coordinates.push(...singleCurve); } + const label = `line n°${number++}`; features.push({ type: 'Feature', properties: { propValue: propValues[Math.floor(Math.random() * propValues.length)], + label, }, geometry: { type: 'LineString', diff --git a/package-lock.json b/package-lock.json index 5f17430..aeaebe7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,8 @@ "name": "bench", "dependencies": { "@camptocamp/rendering-analyzer": "^0.2.0", - "ol": "10.6.1" + "@scaleway/random-name": "^5.1.2", + "ol": "file:../openlayers/build/ol" }, "devDependencies": { "@types/geojson": "^7946.0.10", @@ -1023,6 +1024,15 @@ "dev": true, "license": "MIT" }, + "node_modules/@scaleway/random-name": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@scaleway/random-name/-/random-name-5.1.2.tgz", + "integrity": "sha512-WBiqKPnJdncl2mcA7t89rZrxaSIRF/eiyo69sbIiVsOj413+zg3Royzv4ddkRdNTnNg0l21GZpA6O8pfZyPAQQ==", + "license": "MIT", + "engines": { + "node": ">=20.x" + } + }, "node_modules/@types/estree": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", diff --git a/package.json b/package.json index b84f7c5..86f333d 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ }, "dependencies": { "@camptocamp/rendering-analyzer": "^0.2.0", + "@scaleway/random-name": "^5.1.2", "ol": "10.6.1" } } From 6d67bbe0eae744dde355ad79cb3a1fca86b9ce1d Mon Sep 17 00:00:00 2001 From: Olivia Date: Fri, 17 Oct 2025 12:17:17 +0200 Subject: [PATCH 3/3] add text toggle for some cases --- cases/line-rendering/main.js | 35 +++++++++++++++++++----- cases/point-rendering/main.js | 27 ++++++++++++++++++- cases/polygon-rendering/main.js | 40 ++++++++++++++++++++++++---- cases/vector-tiles-rendering/main.js | 32 +++++++++++++++++++++- 4 files changed, 121 insertions(+), 13 deletions(-) diff --git a/cases/line-rendering/main.js b/cases/line-rendering/main.js index 3b682a2..8f377c0 100644 --- a/cases/line-rendering/main.js +++ b/cases/line-rendering/main.js @@ -16,13 +16,18 @@ const source = new VectorSource({ }); /** - * * @type {import('ol/style/flat.js').FlatStyle} */ -const style = { +const baseStyle = { 'stroke-width': ['get', 'width'], 'stroke-color': ['get', 'color'], 'stroke-line-dash': [15, 15], +}; + +/** + * @type {import('ol/style/flat.js').FlatStyle} + */ +const textStyle = { 'text-value': ['get', 'label'], 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', 'text-fill-color': '#333', @@ -44,9 +49,15 @@ function resetData(lineCount, curveComplexity, width) { function main() { createMap( (map) => { + const style = getGuiParameterValue('text') + ? {...baseStyle, ...textStyle} + : baseStyle; map.addLayer(new WebGLVectorLayer({source, properties: {style}})); }, (map) => { + const style = getGuiParameterValue('text') + ? {...baseStyle, ...textStyle} + : baseStyle; map.addLayer(new VectorLayer({source, style})); }, ); @@ -54,8 +65,8 @@ function main() { registerGuiParameter( 'count', 'Line count', - [2, 100, 10], - 2, + [2, 10000, 10], + 10, (value, initial) => { if (initial) { return; @@ -100,9 +111,21 @@ function main() { false, (value, initial) => { if (value) { - style['stroke-line-dash'] = [15, 15]; + baseStyle['stroke-line-dash'] = [15, 15]; } else { - delete style['stroke-line-dash']; + delete baseStyle['stroke-line-dash']; + } + regenerateLayer(); + }, + ); + registerGuiParameter( + 'text', + 'Show labels', + ['yes', 'no'], + false, + (value, initial) => { + if (initial) { + return; } regenerateLayer(); }, diff --git a/cases/point-rendering/main.js b/cases/point-rendering/main.js index 9b77343..fc8d314 100644 --- a/cases/point-rendering/main.js +++ b/cases/point-rendering/main.js @@ -7,6 +7,7 @@ import { generatePoints, getGuiParameterValue, initializeGui, + regenerateLayer, registerGuiParameter, } from '../common.js'; @@ -17,12 +18,18 @@ const source = new VectorSource({ /** * @type {import('ol/style/flat.js').FlatStyle} */ -const style = { +const baseStyle = { // This has to be fixed upstream 'circle-radius': ['get', 'radius'], 'circle-fill-color': ['get', 'color'], 'circle-stroke-color': 'gray', 'circle-stroke-width': 0.5, +}; + +/** + * @type {import('ol/style/flat.js').FlatStyle} + */ +const textStyle = { 'text-value': ['get', 'label'], 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', 'text-fill-color': '#333', @@ -43,9 +50,15 @@ function resetData(count, radius) { function main() { createMap( (map) => { + const style = getGuiParameterValue('text') + ? {...baseStyle, ...textStyle} + : baseStyle; map.addLayer(new WebGLVectorLayer({source, properties: {style}})); }, (map) => { + const style = getGuiParameterValue('text') + ? {...baseStyle, ...textStyle} + : baseStyle; map.addLayer(new VectorLayer({source, style})); }, ); @@ -74,6 +87,18 @@ function main() { /** @type {number} */ (value), ); }); + registerGuiParameter( + 'text', + 'Show labels', + ['yes', 'no'], + false, + (value, initial) => { + if (initial) { + return; + } + regenerateLayer(); + }, + ); resetData( /** @type {number} */ (getGuiParameterValue('count')), diff --git a/cases/polygon-rendering/main.js b/cases/polygon-rendering/main.js index 8c971e1..f6381dd 100644 --- a/cases/polygon-rendering/main.js +++ b/cases/polygon-rendering/main.js @@ -18,7 +18,7 @@ const source = new VectorSource({ /** * @type {import('ol/style/flat.js').FlatStyle} */ -const style = { +const baseStyle = { 'fill-color': ['get', 'color'], 'text-value': ['get', 'label'], 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', @@ -27,6 +27,18 @@ const style = { 'text-stroke-width': 2, }; +/** + * @type {import('ol/style/flat.js').FlatStyle} + */ +const textStyle = { + 'text-value': ['get', 'label'], + 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', + 'text-fill-color': '#333', + 'text-stroke-color': 'rgba(255,255,255,0.8)', + 'text-stroke-width': 2, + 'text-offset-y': -12, +}; + /** * @param {number} count The number of features to create. * @param {number} numVertices Number of vertices for polygons @@ -38,9 +50,15 @@ function resetData(count, numVertices) { function main() { createMap( (map) => { + const style = getGuiParameterValue('text') + ? {...baseStyle, ...textStyle} + : baseStyle; map.addLayer(new WebGLVectorLayer({source, properties: {style}})); }, (map) => { + const style = getGuiParameterValue('text') + ? {...baseStyle, ...textStyle} + : baseStyle; map.addLayer(new VectorLayer({source, style})); }, ); @@ -82,11 +100,23 @@ function main() { true, (value, initial) => { if (value) { - style['stroke-width'] = 2; - style['stroke-color'] = 'gray'; + baseStyle['stroke-width'] = 2; + baseStyle['stroke-color'] = 'gray'; } else { - delete style['stroke-width']; - delete style['stroke-color']; + delete baseStyle['stroke-width']; + delete baseStyle['stroke-color']; + } + regenerateLayer(); + }, + ); + registerGuiParameter( + 'text', + 'Show labels', + ['yes', 'no'], + false, + (value, initial) => { + if (initial) { + return; } regenerateLayer(); }, diff --git a/cases/vector-tiles-rendering/main.js b/cases/vector-tiles-rendering/main.js index 3dc06f8..c836dca 100644 --- a/cases/vector-tiles-rendering/main.js +++ b/cases/vector-tiles-rendering/main.js @@ -25,6 +25,21 @@ const format = new GeoJSON({featureProjection: 'EPSG:3857'}); const defaultStylesCount = 10; +/** + * @type {Array} + */ +const textStyles = [ + { + style: { + 'text-value': ['get', 'label'], + 'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif', + 'text-fill-color': '#333', + 'text-stroke-color': 'rgba(255,255,255,0.8)', + 'text-stroke-width': 2, + }, + }, +]; + /** * @type {function(): Array|import('ol/style/flat.js').FlatStyle} */ @@ -61,7 +76,7 @@ function generateStyle() { 'circle-stroke-width': 2, }; } - return new Array(totalStylesCount).fill(0).map((_, i) => { + const colorStyles = new Array(totalStylesCount).fill(0).map((_, i) => { const color = getRandomColor(); return { style: { @@ -82,6 +97,9 @@ function generateStyle() { filter: ['==', ['get', 'propValue'], i], }; }); + return getGuiParameterValue('text') + ? [...colorStyles, ...textStyles] + : colorStyles; } /** @@ -321,6 +339,18 @@ function main() { source.setKey(Date.now().toString()); }, ); + registerGuiParameter( + 'text', + 'Show labels', + ['yes', 'no'], + false, + (value, initial) => { + if (initial) { + return; + } + regenerateLayer(); + }, + ); } main();