From 22eb96637ff87ec62d2d9268854f9453bd934167 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Mon, 12 Nov 2018 18:27:18 +0100 Subject: [PATCH] Add new className property to ol/layer/Base --- examples/semi-transparent-layer.css | 3 + examples/semi-transparent-layer.html | 2 +- examples/semi-transparent-layer.js | 1 + .../linestring-style-css-filter/expected.png | Bin 0 -> 8843 bytes .../linestring-style-css-filter/index.html | 25 +++++++ .../cases/linestring-style-css-filter/main.js | 70 ++++++++++++++++++ src/ol/layer/Base.js | 15 ++++ src/ol/renderer/canvas/IntermediateCanvas.js | 5 +- src/ol/renderer/canvas/VectorLayer.js | 1 + 9 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 examples/semi-transparent-layer.css create mode 100644 rendering/cases/linestring-style-css-filter/expected.png create mode 100644 rendering/cases/linestring-style-css-filter/index.html create mode 100644 rendering/cases/linestring-style-css-filter/main.js diff --git a/examples/semi-transparent-layer.css b/examples/semi-transparent-layer.css new file mode 100644 index 0000000000..fa8d7cfa3f --- /dev/null +++ b/examples/semi-transparent-layer.css @@ -0,0 +1,3 @@ +.bw { + filter: grayscale(100%); +} diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html index 5367196352..3a96d2b9cc 100644 --- a/examples/semi-transparent-layer.html +++ b/examples/semi-transparent-layer.html @@ -3,7 +3,7 @@ layout: example.html title: Semi-Transparent Layer shortdesc: Example of a map with a semi-transparent layer. docs: > - This example will display a tiled MaxBox layer semi-transparently over an OSM background. + This example will display a tiled MaxBox layer semi-transparently over an OSM background. The OSM layer is changed to back and white by using a CSS filter. tags: "transparent, osm, tilejson" ---
diff --git a/examples/semi-transparent-layer.js b/examples/semi-transparent-layer.js index 08505b6520..776653a781 100644 --- a/examples/semi-transparent-layer.js +++ b/examples/semi-transparent-layer.js @@ -9,6 +9,7 @@ import TileJSON from '../src/ol/source/TileJSON.js'; const map = new Map({ layers: [ new TileLayer({ + className: 'bw', source: new OSM() }), new TileLayer({ diff --git a/rendering/cases/linestring-style-css-filter/expected.png b/rendering/cases/linestring-style-css-filter/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..c2d039de8bd80913e4986a764144d7efb4df378c GIT binary patch literal 8843 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 E2g*;USO5S3 literal 0 HcmV?d00001 diff --git a/rendering/cases/linestring-style-css-filter/index.html b/rendering/cases/linestring-style-css-filter/index.html new file mode 100644 index 0000000000..11dee51983 --- /dev/null +++ b/rendering/cases/linestring-style-css-filter/index.html @@ -0,0 +1,25 @@ + + + + + + +
+ + + + diff --git a/rendering/cases/linestring-style-css-filter/main.js b/rendering/cases/linestring-style-css-filter/main.js new file mode 100644 index 0000000000..925909548b --- /dev/null +++ b/rendering/cases/linestring-style-css-filter/main.js @@ -0,0 +1,70 @@ +import Map from '../../../src/ol/CompositeMap.js'; +import View from '../../../src/ol/View.js'; +import Feature from '../../../src/ol/Feature.js'; +import LineString from '../../../src/ol/geom/LineString.js'; +import VectorLayer from '../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import Style from '../../../src/ol/style/Style.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; + + +const vectorSource = new VectorSource(); +let feature; + +feature = new Feature({ + geometry: new LineString([[-60, 60], [45, 60]]) +}); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([[-60, -50], [30, 10]]) +}); +feature.setStyle(new Style({ + stroke: new Stroke({color: '#f00', width: 3}) +})); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([[-110, -100], [0, 100], [100, -90]]) +}); +feature.setStyle(new Style({ + stroke: new Stroke({ + color: 'rgba(55, 55, 55, 0.75)', + width: 5, + lineCap: 'square', + lineDash: [4, 8], + lineJoin: 'round' + }) +})); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([[-80, 80], [80, 80], [-40, -90]]) +}); +feature.setStyle([ + new Style({ + stroke: new Stroke({color: '#F2F211', width: 5}) + }), + new Style({ + stroke: new Stroke({color: '#292921', width: 1}) + }) +]); +vectorSource.addFeature(feature); + + +new Map({ + pixelRatio: 1, + layers: [ + new VectorLayer({ + className: 'bw', + source: vectorSource + }) + ], + target: 'map', + view: new View({ + center: [0, 0], + resolution: 1 + }) +}); + +render(); diff --git a/src/ol/layer/Base.js b/src/ol/layer/Base.js index 124841f1e9..e601b7a3a7 100644 --- a/src/ol/layer/Base.js +++ b/src/ol/layer/Base.js @@ -10,6 +10,7 @@ import {assign} from '../obj.js'; /** * @typedef {Object} Options + * @property {string} [className='ol-layer'] A CSS class name to set to the layer element. * @property {number} [opacity=1] Opacity (0, 1). * @property {boolean} [visible=true] Visibility. * @property {import("../extent.js").Extent} [extent] The bounding extent for layer rendering. The layer will not be @@ -57,6 +58,13 @@ class BaseLayer extends BaseObject { properties[LayerProperty.MIN_RESOLUTION] = options.minResolution !== undefined ? options.minResolution : 0; + /** + * @type {string} + * @private + */ + this.className_ = properties.className !== undefined ? options.className : 'ol-layer'; + delete properties.className; + this.setProperties(properties); /** @@ -67,6 +75,13 @@ class BaseLayer extends BaseObject { } + /** + * @return {string} CSS class name. + */ + getClassName() { + return this.className_; + } + /** * @return {import("./Layer.js").State} Layer state. */ diff --git a/src/ol/renderer/canvas/IntermediateCanvas.js b/src/ol/renderer/canvas/IntermediateCanvas.js index 8ebb13a8c1..bd79c2860f 100644 --- a/src/ol/renderer/canvas/IntermediateCanvas.js +++ b/src/ol/renderer/canvas/IntermediateCanvas.js @@ -44,7 +44,10 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer { * @type {CanvasRenderingContext2D} */ this.layerContext = createCanvasContext2D(); - this.layerContext.canvas.style.position = 'absolute'; + + const canvas = this.layerContext.canvas; + canvas.style.position = 'absolute'; + canvas.className = this.getLayer().getClassName(); } /** diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js index e845c8ba74..da06981f6f 100644 --- a/src/ol/renderer/canvas/VectorLayer.js +++ b/src/ol/renderer/canvas/VectorLayer.js @@ -83,6 +83,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer { const canvas = this.context.canvas; canvas.style.position = 'absolute'; + canvas.className = this.getLayer().getClassName(); listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this); }