359 lines
11 KiB
JavaScript
359 lines
11 KiB
JavaScript
import {
|
|
BaseTile_default
|
|
} from "./chunk-4V7XJAUG.js";
|
|
import {
|
|
Attributes,
|
|
PALETTE_TEXTURE_ARRAY,
|
|
TileLayer_default,
|
|
Uniforms,
|
|
expressionToGlsl,
|
|
getStringNumberEquivalent,
|
|
newCompilationContext,
|
|
uniformNameForVariable
|
|
} from "./chunk-PZZAKLYX.js";
|
|
import {
|
|
ColorType,
|
|
NumberType
|
|
} from "./chunk-E5F6ZCFZ.js";
|
|
import {
|
|
Property_default
|
|
} from "./chunk-S5OMZ56B.js";
|
|
|
|
// node_modules/ol/layer/WebGLTile.js
|
|
function parseStyle(style, bandCount) {
|
|
const vertexShader = `
|
|
attribute vec2 ${Attributes.TEXTURE_COORD};
|
|
uniform mat4 ${Uniforms.TILE_TRANSFORM};
|
|
uniform float ${Uniforms.TEXTURE_PIXEL_WIDTH};
|
|
uniform float ${Uniforms.TEXTURE_PIXEL_HEIGHT};
|
|
uniform float ${Uniforms.TEXTURE_RESOLUTION};
|
|
uniform float ${Uniforms.TEXTURE_ORIGIN_X};
|
|
uniform float ${Uniforms.TEXTURE_ORIGIN_Y};
|
|
uniform float ${Uniforms.DEPTH};
|
|
|
|
varying vec2 v_textureCoord;
|
|
varying vec2 v_mapCoord;
|
|
|
|
void main() {
|
|
v_textureCoord = ${Attributes.TEXTURE_COORD};
|
|
v_mapCoord = vec2(
|
|
${Uniforms.TEXTURE_ORIGIN_X} + ${Uniforms.TEXTURE_RESOLUTION} * ${Uniforms.TEXTURE_PIXEL_WIDTH} * v_textureCoord[0],
|
|
${Uniforms.TEXTURE_ORIGIN_Y} - ${Uniforms.TEXTURE_RESOLUTION} * ${Uniforms.TEXTURE_PIXEL_HEIGHT} * v_textureCoord[1]
|
|
);
|
|
gl_Position = ${Uniforms.TILE_TRANSFORM} * vec4(${Attributes.TEXTURE_COORD}, ${Uniforms.DEPTH}, 1.0);
|
|
}
|
|
`;
|
|
const context = {
|
|
...newCompilationContext(),
|
|
bandCount
|
|
};
|
|
const pipeline = [];
|
|
if (style.color !== void 0) {
|
|
const color = expressionToGlsl(context, style.color, ColorType);
|
|
pipeline.push(`color = ${color};`);
|
|
}
|
|
if (style.contrast !== void 0) {
|
|
const contrast = expressionToGlsl(context, style.contrast, NumberType);
|
|
pipeline.push(
|
|
`color.rgb = clamp((${contrast} + 1.0) * color.rgb - (${contrast} / 2.0), vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0));`
|
|
);
|
|
}
|
|
if (style.exposure !== void 0) {
|
|
const exposure = expressionToGlsl(context, style.exposure, NumberType);
|
|
pipeline.push(
|
|
`color.rgb = clamp((${exposure} + 1.0) * color.rgb, vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0));`
|
|
);
|
|
}
|
|
if (style.saturation !== void 0) {
|
|
const saturation = expressionToGlsl(context, style.saturation, NumberType);
|
|
pipeline.push(`
|
|
float saturation = ${saturation} + 1.0;
|
|
float sr = (1.0 - saturation) * 0.2126;
|
|
float sg = (1.0 - saturation) * 0.7152;
|
|
float sb = (1.0 - saturation) * 0.0722;
|
|
mat3 saturationMatrix = mat3(
|
|
sr + saturation, sr, sr,
|
|
sg, sg + saturation, sg,
|
|
sb, sb, sb + saturation
|
|
);
|
|
color.rgb = clamp(saturationMatrix * color.rgb, vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0));
|
|
`);
|
|
}
|
|
if (style.gamma !== void 0) {
|
|
const gamma = expressionToGlsl(context, style.gamma, NumberType);
|
|
pipeline.push(`color.rgb = pow(color.rgb, vec3(1.0 / ${gamma}));`);
|
|
}
|
|
if (style.brightness !== void 0) {
|
|
const brightness = expressionToGlsl(context, style.brightness, NumberType);
|
|
pipeline.push(
|
|
`color.rgb = clamp(color.rgb + ${brightness}, vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0));`
|
|
);
|
|
}
|
|
const uniforms = {};
|
|
const numVariables = Object.keys(context.variables).length;
|
|
if (numVariables > 1 && !style.variables) {
|
|
throw new Error(
|
|
`Missing variables in style (expected ${context.variables})`
|
|
);
|
|
}
|
|
for (let i = 0; i < numVariables; ++i) {
|
|
const variable = context.variables[Object.keys(context.variables)[i]];
|
|
if (!(variable.name in style.variables)) {
|
|
throw new Error(`Missing '${variable.name}' in style variables`);
|
|
}
|
|
const uniformName = uniformNameForVariable(variable.name);
|
|
uniforms[uniformName] = function() {
|
|
let value = style.variables[variable.name];
|
|
if (typeof value === "string") {
|
|
value = getStringNumberEquivalent(value);
|
|
}
|
|
return value !== void 0 ? value : -9999999;
|
|
};
|
|
}
|
|
const uniformDeclarations = Object.keys(uniforms).map(function(name) {
|
|
return `uniform float ${name};`;
|
|
});
|
|
const textureCount = Math.ceil(bandCount / 4);
|
|
uniformDeclarations.push(
|
|
`uniform sampler2D ${Uniforms.TILE_TEXTURE_ARRAY}[${textureCount}];`
|
|
);
|
|
if (context.paletteTextures) {
|
|
uniformDeclarations.push(
|
|
`uniform sampler2D ${PALETTE_TEXTURE_ARRAY}[${context.paletteTextures.length}];`
|
|
);
|
|
}
|
|
const functionDefintions = Object.keys(context.functions).map(
|
|
function(name) {
|
|
return context.functions[name];
|
|
}
|
|
);
|
|
const fragmentShader = `
|
|
#ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
precision highp float;
|
|
#else
|
|
precision mediump float;
|
|
#endif
|
|
|
|
varying vec2 v_textureCoord;
|
|
varying vec2 v_mapCoord;
|
|
uniform vec4 ${Uniforms.RENDER_EXTENT};
|
|
uniform float ${Uniforms.TRANSITION_ALPHA};
|
|
uniform float ${Uniforms.TEXTURE_PIXEL_WIDTH};
|
|
uniform float ${Uniforms.TEXTURE_PIXEL_HEIGHT};
|
|
uniform float ${Uniforms.RESOLUTION};
|
|
uniform float ${Uniforms.ZOOM};
|
|
|
|
${uniformDeclarations.join("\n")}
|
|
|
|
${functionDefintions.join("\n")}
|
|
|
|
void main() {
|
|
if (
|
|
v_mapCoord[0] < ${Uniforms.RENDER_EXTENT}[0] ||
|
|
v_mapCoord[1] < ${Uniforms.RENDER_EXTENT}[1] ||
|
|
v_mapCoord[0] > ${Uniforms.RENDER_EXTENT}[2] ||
|
|
v_mapCoord[1] > ${Uniforms.RENDER_EXTENT}[3]
|
|
) {
|
|
discard;
|
|
}
|
|
|
|
vec4 color = texture2D(${Uniforms.TILE_TEXTURE_ARRAY}[0], v_textureCoord);
|
|
|
|
${pipeline.join("\n")}
|
|
|
|
gl_FragColor = color;
|
|
gl_FragColor.rgb *= gl_FragColor.a;
|
|
gl_FragColor *= ${Uniforms.TRANSITION_ALPHA};
|
|
}`;
|
|
return {
|
|
vertexShader,
|
|
fragmentShader,
|
|
uniforms,
|
|
paletteTextures: context.paletteTextures
|
|
};
|
|
}
|
|
var WebGLTileLayer = class extends BaseTile_default {
|
|
/**
|
|
* @param {Options} [options] Tile layer options.
|
|
*/
|
|
constructor(options) {
|
|
options = options ? Object.assign({}, options) : {};
|
|
const style = options.style || {};
|
|
delete options.style;
|
|
super(options);
|
|
this.sources_ = options.sources;
|
|
this.renderedSource_ = null;
|
|
this.renderedResolution_ = NaN;
|
|
this.style_ = style;
|
|
this.styleVariables_ = this.style_.variables || {};
|
|
this.handleSourceUpdate_();
|
|
this.addChangeListener(Property_default.SOURCE, this.handleSourceUpdate_);
|
|
}
|
|
/**
|
|
* Gets the sources for this layer, for a given extent and resolution.
|
|
* @param {import("../extent.js").Extent} extent Extent.
|
|
* @param {number} resolution Resolution.
|
|
* @return {Array<SourceType>} Sources.
|
|
*/
|
|
getSources(extent, resolution) {
|
|
const source = this.getSource();
|
|
return this.sources_ ? typeof this.sources_ === "function" ? this.sources_(extent, resolution) : this.sources_ : source ? [source] : [];
|
|
}
|
|
/**
|
|
* @return {SourceType} The source being rendered.
|
|
* @override
|
|
*/
|
|
getRenderSource() {
|
|
return this.renderedSource_ || this.getSource();
|
|
}
|
|
/**
|
|
* @return {import("../source/Source.js").State} Source state.
|
|
* @override
|
|
*/
|
|
getSourceState() {
|
|
const source = this.getRenderSource();
|
|
return source ? source.getState() : "undefined";
|
|
}
|
|
/**
|
|
* @private
|
|
*/
|
|
handleSourceUpdate_() {
|
|
if (this.hasRenderer()) {
|
|
this.getRenderer().clearCache();
|
|
}
|
|
const source = this.getSource();
|
|
if (source) {
|
|
if (source.getState() === "loading") {
|
|
const onChange = () => {
|
|
if (source.getState() === "ready") {
|
|
source.removeEventListener("change", onChange);
|
|
this.setStyle(this.style_);
|
|
}
|
|
};
|
|
source.addEventListener("change", onChange);
|
|
} else {
|
|
this.setStyle(this.style_);
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* @private
|
|
* @return {number} The number of source bands.
|
|
*/
|
|
getSourceBandCount_() {
|
|
const max = Number.MAX_SAFE_INTEGER;
|
|
const sources = this.getSources([-max, -max, max, max], max);
|
|
return sources && sources.length && "bandCount" in sources[0] ? sources[0].bandCount : 4;
|
|
}
|
|
/**
|
|
* @override
|
|
*/
|
|
createRenderer() {
|
|
const parsedStyle = parseStyle(this.style_, this.getSourceBandCount_());
|
|
return new TileLayer_default(this, {
|
|
vertexShader: parsedStyle.vertexShader,
|
|
fragmentShader: parsedStyle.fragmentShader,
|
|
uniforms: parsedStyle.uniforms,
|
|
cacheSize: this.getCacheSize(),
|
|
paletteTextures: parsedStyle.paletteTextures
|
|
});
|
|
}
|
|
/**
|
|
* @param {import("../Map").FrameState} frameState Frame state.
|
|
* @param {Array<SourceType>} sources Sources.
|
|
* @return {HTMLElement} Canvas.
|
|
*/
|
|
renderSources(frameState, sources) {
|
|
const layerRenderer = this.getRenderer();
|
|
let canvas;
|
|
for (let i = 0, ii = sources.length; i < ii; ++i) {
|
|
this.renderedSource_ = sources[i];
|
|
if (layerRenderer.prepareFrame(frameState)) {
|
|
canvas = layerRenderer.renderFrame(frameState);
|
|
}
|
|
}
|
|
return canvas;
|
|
}
|
|
/**
|
|
* @param {?import("../Map.js").FrameState} frameState Frame state.
|
|
* @param {HTMLElement} target Target which the renderer may (but need not) use
|
|
* for rendering its content.
|
|
* @return {HTMLElement} The rendered element.
|
|
* @override
|
|
*/
|
|
render(frameState, target) {
|
|
this.rendered = true;
|
|
const viewState = frameState.viewState;
|
|
const sources = this.getSources(frameState.extent, viewState.resolution);
|
|
let ready = true;
|
|
for (let i = 0, ii = sources.length; i < ii; ++i) {
|
|
const source = sources[i];
|
|
const sourceState = source.getState();
|
|
if (sourceState == "loading") {
|
|
const onChange = () => {
|
|
if (source.getState() == "ready") {
|
|
source.removeEventListener("change", onChange);
|
|
this.changed();
|
|
}
|
|
};
|
|
source.addEventListener("change", onChange);
|
|
}
|
|
ready = ready && sourceState == "ready";
|
|
}
|
|
const canvas = this.renderSources(frameState, sources);
|
|
if (this.getRenderer().renderComplete && ready) {
|
|
this.renderedResolution_ = viewState.resolution;
|
|
return canvas;
|
|
}
|
|
if (this.renderedResolution_ > 0.5 * viewState.resolution) {
|
|
const altSources = this.getSources(
|
|
frameState.extent,
|
|
this.renderedResolution_
|
|
).filter((source) => !sources.includes(source));
|
|
if (altSources.length > 0) {
|
|
return this.renderSources(frameState, altSources);
|
|
}
|
|
}
|
|
return canvas;
|
|
}
|
|
/**
|
|
* Update the layer style. The `updateStyleVariables` function is a more efficient
|
|
* way to update layer rendering. In cases where the whole style needs to be updated,
|
|
* this method may be called instead. Note that calling this method will also replace
|
|
* any previously set variables, so the new style also needs to include new variables,
|
|
* if needed.
|
|
* @param {Style} style The new style.
|
|
*/
|
|
setStyle(style) {
|
|
this.styleVariables_ = style.variables || {};
|
|
this.style_ = style;
|
|
if (this.hasRenderer()) {
|
|
const parsedStyle = parseStyle(this.style_, this.getSourceBandCount_());
|
|
const renderer = this.getRenderer();
|
|
renderer.reset({
|
|
vertexShader: parsedStyle.vertexShader,
|
|
fragmentShader: parsedStyle.fragmentShader,
|
|
uniforms: parsedStyle.uniforms,
|
|
paletteTextures: parsedStyle.paletteTextures
|
|
});
|
|
this.changed();
|
|
}
|
|
}
|
|
/**
|
|
* Update any variables used by the layer style and trigger a re-render.
|
|
* @param {Object<string, number>} variables Variables to update.
|
|
* @api
|
|
*/
|
|
updateStyleVariables(variables) {
|
|
Object.assign(this.styleVariables_, variables);
|
|
this.changed();
|
|
}
|
|
};
|
|
WebGLTileLayer.prototype.dispose;
|
|
var WebGLTile_default = WebGLTileLayer;
|
|
|
|
export {
|
|
WebGLTile_default
|
|
};
|
|
//# sourceMappingURL=chunk-JV6MJGV5.js.map
|