ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add layer background

Browse Source
This commit is contained in:
Andreas Hocevar
2021-12-05 19:09:56 +01:00
parent 4ed1226411
commit 3638df90f8
9 changed files with 230 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/ol/layer/Base.js
View File

@@ -8,6 +8,13 @@ import {assert} from '../asserts.js';
import {assign} from '../obj.js';
import {clamp} from '../math.js';
/**
* A css color, or a function called with a view resolution returning a css color.
*
* @typedef {string|function(number):string} BackgroundColor
* @api
*/
/**
* @typedef {import("../ObjectEventType").Types|'change:extent'|'change:maxResolution'|'change:maxZoom'|
* 'change:minResolution'|'change:minZoom'|'change:opacity'|'change:visible'|'change:zIndex'} BaseLayerObjectEventTypes
@@ -39,6 +46,8 @@ import {clamp} from '../math.js';
* visible.
* @property {number} [maxZoom] The maximum view zoom level (inclusive) at which this layer will
* be visible.
* @property {BackgroundColor} [background] Background color for the layer. If not specified, no background
* will be rendered.
* @property {Object<string, *>} [properties] Arbitrary observable properties. Can be accessed with `#get()` and `#set()`.
*/
@@ -74,6 +83,12 @@ class BaseLayer extends BaseObject {
*/
this.un;
/**
* @type {BackgroundColor|false}
* @private
*/
this.background_ = options.background;
/**
* @type {Object<string, *>}
*/
@@ -116,6 +131,14 @@ class BaseLayer extends BaseObject {
this.state_ = null;
}
/**
* Get the background for this layer.
* @return {BackgroundColor|false} Layer background.
*/
getBackground() {
return this.background_;
}
/**
* @return {string} CSS class name.
*/
@@ -265,6 +288,15 @@ class BaseLayer extends BaseObject {
return /** @type {number} */ (this.get(LayerProperty.Z_INDEX));
}
/**
* Sets the backgrlound color.
* @param {BackgroundColor} [opt_background] Background color.
*/
setBackground(opt_background) {
this.background_ = opt_background;
this.changed();
}
/**
* Set the extent at which the layer is visible. If `undefined`, the layer
* will be visible at all extents.

2
src/ol/layer/BaseVector.js
View File

@@ -48,6 +48,8 @@ import {
* @property {import("../style/Style.js").StyleLike|null} [style] Layer style. When set to `null`, only
* features that have their own style will be rendered. See {@link module:ol/style/Style~Style} for the default style
* which will be used if this is not set.
* @property {import("./Base.js").BackgroundColor} [background] Background color for the layer. If not specified, no background
* will be rendered.
* @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will
* be recreated during animations. This means that no vectors will be shown clipped, but the
* setting will have a performance impact for large amounts of vector data. When set to `false`,

79
src/ol/layer/MapboxVector.js
View File

@@ -3,17 +3,13 @@
*/
import BaseEvent from '../events/Event.js';
import EventType from '../events/EventType.js';
import GeometryType from '../geom/GeometryType.js';
import MVT from '../format/MVT.js';
import RenderFeature from '../render/Feature.js';
import SourceState from '../source/State.js';
import TileEventType from '../source/TileEventType.js';
import VectorTileLayer from '../layer/VectorTile.js';
import VectorTileSource from '../source/VectorTile.js';
import {Fill, Style} from '../style.js';
import {applyStyle, setupVectorSource} from 'ol-mapbox-style';
import {fromExtent} from '../geom/Polygon.js';
import {getValue} from 'ol-mapbox-style/dist/stylefunction.js';
import {toString} from '../color.js';
const mapboxBaseUrl = 'https://api.mapbox.com';
@@ -188,6 +184,9 @@ const SourceType = {
* is defined by the z-index of the layer, the `zIndex` of the style and the render order of features.
* Higher z-index means higher priority. Within the same z-index, a feature rendered before another has
* higher priority.
* @property {import("./Base.js").BackgroundColor|false} [background] Background color for the layer.
* If not specified, the background from the Mapbox style object will be used. Set to `false` to prevent
* the Mapbox style's background from being used.
* @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.
@@ -283,6 +282,7 @@ class MapboxVectorLayer extends VectorTileLayer {
super({
source: source,
background: options.background,
declutter: declutter,
className: options.className,
opacity: options.opacity,
@@ -493,53 +493,36 @@ class MapboxVectorLayer extends VectorTileLayer {
(layer) => layer.type === 'background'
);
if (
this.getBackground() === undefined &&
background &&
(!background.layout || background.layout.visibility !== 'none')
) {
const style = new Style({
fill: new Fill(),
});
targetSource.addEventListener(TileEventType.TILELOADEND, (event) => {
const tile = /** @type {import("../VectorTile.js").default} */ (
/** @type {import("../source/Tile.js").TileSourceEvent} */ (event)
.tile
const colorFunction = (resolution) => {
const opacity =
/** @type {number} */ (
getValue(
background,
'paint',
'background-opacity',
this.getSource().getTileGrid().getZForResolution(resolution)
)
) || 1;
const color = /** @type {*} */ (
getValue(
background,
'paint',
'background-color',
this.getSource().getTileGrid().getZForResolution(resolution)
)
);
const styleFuntion = () => {
const opacity =
/** @type {number} */ (
getValue(
background,
'paint',
'background-opacity',
tile.tileCoord[0]
)
) || 1;
const color = /** @type {*} */ (
getValue(background, 'paint', 'background-color', tile.tileCoord[0])
);
style
.getFill()
.setColor([
color.r * 255,
color.g * 255,
color.b * 255,
color.a * opacity,
]);
return style;
};
const extentGeometry = fromExtent(
targetSource.tileGrid.getTileCoordExtent(tile.tileCoord)
);
const renderFeature = new RenderFeature(
GeometryType.POLYGON,
extentGeometry.getFlatCoordinates(),
extentGeometry.getEnds(),
{layer: background.id},
undefined
);
renderFeature.styleFunction = styleFuntion;
tile.getFeatures().unshift(renderFeature);
});
return toString([
color.r * 255,
color.g * 255,
color.b * 255,
color.a * opacity,
]);
};
this.setBackground(colorFunction);
}
if (this.setMaxResolutionFromTileGrid_) {
const tileGrid = targetSource.getTileGrid();

16
src/ol/layer/VectorTile.js
View File

@@ -65,6 +65,8 @@ import {assign} from '../obj.js';
* @property {import("../style/Style.js").StyleLike|null} [style] Layer style. When set to `null`, only
* features that have their own style will be rendered. See {@link module:ol/style/Style~Style} for the default style
* which will be used if this is not set.
* @property {import("./Base.js").BackgroundColor|false} [background] Background color for the layer. If not specified, no
* background will be rendered.
* @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will be
* recreated during animations. This means that no vectors will be shown clipped, but the setting
* will have a performance impact for large amounts of vector data. When set to `false`, batches
@@ -145,6 +147,20 @@ class VectorTileLayer extends BaseVectorLayer {
? options.useInterimTilesOnError
: true
);
/**
* @return {import("./Base.js").BackgroundColor} Background color.
* @function
* @api
*/
this.getBackground;
/**
* @param {import("./Base.js").BackgroundColor} background Background color.
* @function
* @api
*/
this.setBackground;
}
createRenderer() {