Merge pull request #10083 from MoonE/example-webgl

webgl points layer example fixes

doc/errors/index.md

@@ -241,10 +241,6 @@ Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL
 
 Layer opacity must be a number.
 
-### 65
-
-A symbol literal representation must be defined on the style supplied to a `WebGLPointsLayer` instance.
-
 ### 66
 
 `forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has not been enabled.

examples/webgl-points-layer.html

@@ -24,15 +24,13 @@ experimental: true
 <div id="map" class="map"></div>
 <label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
 <select id="style-select">
-  <option>Predefined styles</option>
   <option value="icons">Icons</option>
   <option value="triangles">Triangles, color related to population</option>
   <option value="circles">Circles, size related to population</option>
 </select>
 <textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
-<small id="style-valid" style="display: none; color: forestgreen">
+<small>
-  ✓ style is valid
+  <span id="style-valid" style="display: none; color: forestgreen">✓ style is valid</span>
-</small>
+  <span id="style-invalid" style="display: none; color: grey">✗ <span>style not yet valid...</span></span>
-<small id="style-invalid" style="display: none; color: grey">
+  &nbsp;
-  ✗ style not yet valid...
 </small>

examples/webgl-points-layer.js

@@ -46,8 +46,6 @@ const predefinedStyles = {
     }
   }
 };
-let literalStyle = predefinedStyles['circles'];
-let pointsLayer;
 
 const map = new Map({
   layers: [
@@ -62,45 +60,57 @@ const map = new Map({
   })
 });
 
-const editor = document.getElementById('style-editor');
+let literalStyle;
-editor.value = JSON.stringify(literalStyle, null, 2);
+let pointsLayer;
-
+function refreshLayer(newStyle) {
-function refreshLayer() {
+  const previousLayer = pointsLayer;
-  if (pointsLayer) {
-    map.removeLayer(pointsLayer);
-  }
   pointsLayer = new WebGLPointsLayer({
     source: vectorSource,
-    style: literalStyle
+    style: newStyle
   });
   map.addLayer(pointsLayer);
+
+  if (previousLayer) {
+    map.removeLayer(previousLayer);
+  }
+  literalStyle = newStyle;
 }
 
-function setStyleStatus(valid) {
+const spanValid = document.getElementById('style-valid');
-  document.getElementById('style-valid').style.display = valid ? 'initial' : 'none';
+const spanInvalid = document.getElementById('style-invalid');
-  document.getElementById('style-invalid').style.display = !valid ? 'initial' : 'none';
+function setStyleStatus(errorMsg) {
+  const isError = typeof errorMsg === 'string';
+  spanValid.style.display = errorMsg === null ? 'initial' : 'none';
+  spanInvalid.firstElementChild.innerText = isError ? errorMsg : '';
+  spanInvalid.style.display = isError ? 'initial' : 'none';
 }
 
+const editor = document.getElementById('style-editor');
 editor.addEventListener('input', function() {
   const textStyle = editor.value;
-  if (JSON.stringify(JSON.parse(textStyle)) === JSON.stringify(literalStyle)) {
-    return;
-  }
-
   try {
-    literalStyle = JSON.parse(textStyle);
+    const newLiteralStyle = JSON.parse(textStyle);
-    refreshLayer();
+    if (JSON.stringify(newLiteralStyle) !== JSON.stringify(literalStyle)) {
-    setStyleStatus(true);
+      refreshLayer(newLiteralStyle);
+    }
+    setStyleStatus(null);
   } catch (e) {
-    setStyleStatus(false);
+    setStyleStatus(e.message);
   }
 });
-refreshLayer();
 
 const select = document.getElementById('style-select');
-select.addEventListener('change', function() {
+select.value = 'circles';
+function onSelectChange() {
   const style = select.value;
-  literalStyle = predefinedStyles[style];
+  const newLiteralStyle = predefinedStyles[style];
-  editor.value = JSON.stringify(literalStyle, null, 2);
+  editor.value = JSON.stringify(newLiteralStyle, null, 2);
-  refreshLayer();
+  try {
-});
+    refreshLayer(newLiteralStyle);
+    setStyleStatus();
+  } catch (e) {
+    setStyleStatus(e.message);
+  }
+}
+onSelectChange();
+select.addEventListener('change', onSelectChange);

src/ol/layer/WebGLPoints.js

@@ -4,7 +4,6 @@
 import {assign} from '../obj.js';
 import WebGLPointsLayerRenderer from '../renderer/webgl/PointsLayer.js';
 import {getSymbolFragmentShader, getSymbolVertexShader, parseSymbolStyle} from '../webgl/ShaderBuilder.js';
-import {assert} from '../asserts.js';
 import Layer from './Layer.js';
 
 
@@ -72,24 +71,21 @@ class WebGLPointsLayer extends Layer {
     super(baseOptions);
 
     /**
-     * @type {import('../style/LiteralStyle.js').LiteralStyle}
+     * @private
+     * @type {import('../webgl/ShaderBuilder.js').StyleParseResult}
      */
-    this.style = options.style;
+    this.parseResult_ = parseSymbolStyle(options.style.symbol);
-
-    assert(this.style.symbol !== undefined, 65);
   }
 
   /**
    * @inheritDoc
    */
   createRenderer() {
-    const parseResult = parseSymbolStyle(this.style.symbol);
-
     return new WebGLPointsLayerRenderer(this, {
-      vertexShader: getSymbolVertexShader(parseResult.params),
+      vertexShader: getSymbolVertexShader(this.parseResult_.params),
-      fragmentShader: getSymbolFragmentShader(parseResult.params),
+      fragmentShader: getSymbolFragmentShader(this.parseResult_.params),
-      uniforms: parseResult.uniforms,
+      uniforms: this.parseResult_.uniforms,
-      attributes: parseResult.attributes
+      attributes: this.parseResult_.attributes
     });
   }
 }