Examples for evaluating performance

openlayers · Sep 12, 2023 · 5fbe9f6 · 5fbe9f6
commit 5fbe9f6
Show file tree

Hide file tree

Showing 8 changed files with 3,431 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/cases/vector-rendering/index.html b/cases/vector-rendering/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+  <title>Vector Rendering</title>
+  <link rel="stylesheet" href="../../style.css">
+</head>
+
+<body>
+  <div id="map" class="map"></div>
+  <div id="controls">
+    <label><input type="checkbox" id="renderer"> Use WebGL</label>
+    <br>
+    <label>
+      <select id="count">
+        <option value="500000">500,000</option>
+        <option value="300000" selected>300,000</option>
+        <option value="100000">100,000</option>
+      </select>
+      Feature count
+    </label>
+  </div>
+
+  <script src="./main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/cases/vector-rendering/main.js b/cases/vector-rendering/main.js
@@ -0,0 +1,172 @@
+/* eslint-disable no-console */
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Layer from 'ol/layer/Layer.js';
+import Link from 'ol/interaction/Link.js';
+import Map from 'ol/Map.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import View from 'ol/View.js';
+import WebGLVectorLayerRenderer from 'ol/renderer/webgl/VectorLayer.js';
+import {useGeographic} from 'ol/proj.js';
+
+useGeographic();
+
+const map = new Map({
+  layers: [],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 4,
+  }),
+});
+
+const source = new VectorSource();
+
+const colors = ['#6ff05b', '#00AAFF', '#faa91e'];
+
+const style = {
+  'fill-color': ['get', 'color'],
+  'stroke-color': 'gray',
+  'stroke-width': 0.5,
+};
+
+class WebGLLayer extends Layer {
+  /**
+   * @return {WebGLVectorLayerRenderer} The renderer.
+   */
+  createRenderer() {
+    return new WebGLVectorLayerRenderer(this, {
+      style,
+    });
+  }
+}
+
+function useWebGL() {
+  map.getLayers().clear();
+  map.addLayer(new WebGLLayer({source}));
+}
+
+function useCanvas() {
+  map.getLayers().clear();
+  map.addLayer(new VectorLayer({source, style}));
+}
+
+const link = new Link();
+
+const webglToggle = /** @type {HTMLInputElement} */ (
+  document.getElementById('renderer')
+);
+webglToggle.addEventListener('change', function () {
+  if (webglToggle.checked) {
+    link.update('renderer', 'webgl');
+    useWebGL();
+  } else {
+    link.update('renderer', 'canvas');
+    useCanvas();
+  }
+});
+
+const initialRenderer = link.track('renderer', (newRenderer) => {
+  if (newRenderer === 'webgl') {
+    webglToggle.checked = true;
+    useWebGL();
+  } else {
+    webglToggle.checked = false;
+    useCanvas();
+  }
+});
+webglToggle.checked = initialRenderer === 'webgl';
+
+const countSelect = /** @type {HTMLSelectElement} */ (
+  document.getElementById('count')
+);
+countSelect.addEventListener('change', function () {
+  link.update('count', countSelect.value);
+  main(parseInt(countSelect.value));
+});
+
+const initialCount = link.track('count', (newCount) => {
+  main(parseInt(newCount));
+});
+if (initialCount) {
+  countSelect.value = initialCount;
+}
+
+map.addInteraction(link);
+
+/**
+ * @param {number} count The number of features to create.
+ * @return {import('geojson').FeatureCollection} The features.
+ */
+function makeData(count) {
+  const size = 180 / Math.floor(Math.sqrt(count / 2));
+  /**
+   * @type {Array<import('geojson').Feature>}
+   */
+  const features = [];
+  for (let lon = -180; lon < 180 - size / 4; lon += size) {
+    for (let lat = -90; lat < 90 - size / 4; lat += size) {
+      const buffer = (0.1 + Math.random() * 0.1) * size;
+      features.push({
+        type: 'Feature',
+        properties: {
+          color: colors[Math.floor(Math.random() * colors.length)],
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: [
+            [
+              [lon + buffer, lat + buffer],
+              [lon + size - buffer, lat + buffer],
+              [lon + size - buffer, lat + size - buffer],
+              [lon + buffer, lat + size - buffer],
+              [lon + buffer, lat + buffer],
+            ],
+          ],
+        },
+      });
+    }
+  }
+  return {
+    type: 'FeatureCollection',
+    features,
+  };
+}
+
+const format = new GeoJSON();
+/**
+ * @param {import('geojson').FeatureCollection} data The GeoJSON data.
+ * @return {Array<import('ol/Feature.js').default>} The features.
+ */
+function parseFeatures(data) {
+  console.time('parse features');
+  const features = format.readFeatures(data);
+  console.timeEnd('parse features');
+  return features;
+}
+
+/**
+ * @param {Array<import('ol/Feature.js').default>} features The features.
+ */
+async function addFeatures(features) {
+  console.time('add features');
+  source.addFeatures(features);
+  console.timeEnd('add features');
+}
+
+/**
+ * @param {number} count The number of features to create.
+ */
+function main(count) {
+  source.clear();
+  const data = makeData(count);
+  const features = parseFeatures(data);
+  addFeatures(features);
+  if (initialRenderer === 'webgl') {
+    useWebGL();
+  } else {
+    useCanvas();
+  }
+}
+
+main(initialCount ? parseInt(initialCount) : parseInt(countSelect.value));
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+  <title>Benchmark Examples</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <ul>
+    <li>
+      <a href="./cases/vector-rendering/">Vector Rendering</a>
+    </li>
+  </ul>
+</body>
+
+</html>