12047891011

Committed 27 Nov 2024 09:59AM UTC coverage: 86.711% (-0.08%) from 86.793%

Build # 12047891011

Build Type

Pull #2469

github

Committed by

web-flow

Commit Message

Merge f1bd8aa48 into 83eb0d92c

Pull Request Pull Request #2469: MapBox VectorTile: bug fixes using an official MapBox stream

Run Details

2779 of 3702 branches covered (75.07%)

Branch coverage included in aggregate %.

115 of 159 new or added lines in 7 files covered. (72.33%)

5 existing lines in 2 files now uncovered.

24325 of 27556 relevant lines covered (88.27%)

1020.72 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

85.31

/src/Converter/Feature2Texture.js

import * as THREE from 'three';
import { FEATURE_TYPES } from 'Core/Feature';
import Extent from 'Core/Geographic/Extent';
import Coordinates from 'Core/Geographic/Coordinates';
import Style, { StyleContext } from 'Core/Style';

const defaultStyle = new Style();
const context = new StyleContext();
let style;

/**
 * Draw polygon (contour, line edge and fill) based on feature vertices into canvas
 * using the given style(s). Several styles will re-draws the polygon each one with
 * a different style.
 * @param      {CanvasRenderingContext2D} ctx - canvas' 2D rendering context.
 * @param      {Number[]} vertices - All the vertices of the Feature.
 * @param      {Object[]} indices - Contains the indices that define the geometry.
 * Objects stored in this array have two properties, an `offset` and a `count`.
* The offset is related to the overall number of vertices in the Feature.
 * @param      {Number} size - The size of the feature.
 * @param      {Number} extent - The extent.
 * @param      {Number} invCtxScale - The ration to scale line width and radius circle.
 * @param      {Boolean} canBeFilled - true if feature.type == FEATURE_TYPES.POLYGON
 */
function drawPolygon(ctx, vertices, indices = [{ offset: 0, count: 1 }], size, extent, invCtxScale, canBeFilled) {
    if (vertices.length === 0) {
        return;
    }
    // build contour
    const path = new Path2D();

    for (const indice of indices) {
        if (indice.extent && Extent.intersectsExtent(indice.extent, extent)) {
            const offset = indice.offset * size;
            const count = offset + indice.count * size;
            path.moveTo(vertices[offset], vertices[offset + 1]);
            for (let j = offset + size; j < count; j += size) {
                path.lineTo(vertices[j], vertices[j + 1]);
            }
        }
    }
    style.applyToCanvasPolygon(ctx, path, invCtxScale, canBeFilled);
}

function drawPoint(ctx, x, y, invCtxScale) {
    ctx.beginPath();
    const opacity = style.point.opacity == undefined ? 1.0 : style.point.opacity;
    if (opacity !== ctx.globalAlpha) {
        ctx.globalAlpha = opacity;
    }

    ctx.arc(x, y, (style.point.radius || 3.0) * invCtxScale, 0, 2 * Math.PI, false);
    if (style.point.color) {
        ctx.fillStyle = style.point.color;
        ctx.fill();
    }
    if (style.point.line) {
        ctx.lineWidth = (style.point.width || 1.0) * invCtxScale;
        ctx.strokeStyle = style.point.line;
        ctx.stroke();
    }
}

const coord = new Coordinates('EPSG:4326', 0, 0, 0);

function drawFeature(ctx, feature, extent, invCtxScale) {
    const extentDim = extent.planarDimensions();
    const scaleRadius = extentDim.x / ctx.canvas.width;

    for (const geometry of feature.geometries) {
        if (Extent.intersectsExtent(geometry.extent, extent)) {
            context.setGeometry(geometry);
            if (style.zoom.min > style.context.zoom || style.zoom.max <= style.context.zoom) {
                return;
            }

            if (
                feature.type === FEATURE_TYPES.POINT && style.point
            ) {
                // cross multiplication to know in the extent system the real size of
                // the point
                const px = (Math.round(style.point.radius * invCtxScale) || 3 * invCtxScale) * scaleRadius;
                for (const indice of geometry.indices) {
                    const offset = indice.offset * feature.size;
                    const count = offset + indice.count * feature.size;
                    for (let j = offset; j < count; j += feature.size) {
                        coord.setFromArray(feature.vertices, j);
                        if (extent.isPointInside(coord, px)) {
                            drawPoint(ctx, feature.vertices[j], feature.vertices[j + 1], invCtxScale);
                        }
                    }
                }
            } else {
                drawPolygon(ctx, feature.vertices, geometry.indices, feature.size, extent, invCtxScale, (feature.type == FEATURE_TYPES.POLYGON));
            }
        }
    }
}

const origin = new THREE.Vector3();
const dimension = new THREE.Vector3(0, 0, 1);
const scale = new THREE.Vector3();
const quaternion = new THREE.Quaternion();
const world2texture = new THREE.Matrix4();
const feature2texture = new THREE.Matrix4();
const worldTextureOrigin = new THREE.Vector3();

const featureExtent = new Extent('EPSG:4326', 0, 0, 0, 0);

export default {
    // backgroundColor is a THREE.Color to specify a color to fill the texture
    // with, given there is no feature passed in parameter
    createTextureFromFeature(collection, extent, sizeTexture, layerStyle, backgroundColor) {
        style = layerStyle || defaultStyle;
        style.setContext(context);
        let texture;

        if (collection) {
            // A texture is instancied drawn canvas
            // origin and dimension are used to transform the feature's coordinates to canvas's space
            extent.planarDimensions(dimension);
            const c = document.createElement('canvas');

            coord.crs = extent.crs;

            c.width = sizeTexture;
            c.height = sizeTexture;
            const ctx = c.getContext('2d');
            if (backgroundColor) {
                ctx.fillStyle = backgroundColor.getStyle();
                ctx.fillRect(0, 0, sizeTexture, sizeTexture);
            }

            // Documentation needed !!
            ctx.globalCompositeOperation = layerStyle.globalCompositeOperation || 'source-over';
            ctx.imageSmoothingEnabled = false;
            ctx.lineJoin = 'round';

            // transform extent to feature projection
            extent.as(collection.crs, featureExtent);
            // transform extent to local system
            featureExtent.applyMatrix4(collection.matrixWorldInverse);

            // compute matrix transformation `world2texture` to convert coordinates to texture coordinates
            if (collection.isInverted) {
                worldTextureOrigin.set(extent.west, extent.north, 0);
                scale.set(ctx.canvas.width, -ctx.canvas.height, 1.0).divide(dimension);
            } else {
                worldTextureOrigin.set(extent.west, extent.south, 0);
                scale.set(ctx.canvas.width, ctx.canvas.height, 1.0).divide(dimension);
            }

            world2texture.compose(worldTextureOrigin.multiply(scale).negate(), quaternion, scale);

            // compute matrix transformation `feature2texture` to convert features coordinates to texture coordinates
            feature2texture.multiplyMatrices(world2texture, collection.matrixWorld);
            feature2texture.decompose(origin, quaternion, scale);

            ctx.setTransform(scale.x, 0, 0, scale.y, origin.x, origin.y);

            // to scale line width and radius circle
            const invCtxScale = Math.abs(1 / scale.x);

            context.setZoom(extent.zoom);

            // Draw the canvas
            for (const feature of collection.features) {
                context.setFeature(feature);
                drawFeature(ctx, feature, featureExtent, invCtxScale);
            }

            texture = new THREE.CanvasTexture(c);
            texture.flipY = collection.isInverted;
        } else if (backgroundColor) {
            const data = new Uint8Array(3);
            data[0] = backgroundColor.r * 255;
            data[1] = backgroundColor.g * 255;
            data[2] = backgroundColor.b * 255;
            texture = new THREE.DataTexture(data, 1, 1, THREE.RGBAFormat);
        } else {
            texture = new THREE.Texture();
        }

        return texture;
    },
};

1	import * as THREE from 'three';	1✔
2	import { FEATURE_TYPES } from 'Core/Feature';	1✔
3	import Extent from 'Core/Geographic/Extent';	1✔
4	import Coordinates from 'Core/Geographic/Coordinates';	1✔
5	import Style, { StyleContext } from 'Core/Style';	1✔
6		1✔
7	const defaultStyle = new Style();	1✔
8	const context = new StyleContext();	1✔
9	let style;	1✔
10		1✔
11	/**	1✔
12	* Draw polygon (contour, line edge and fill) based on feature vertices into canvas	1✔
13	* using the given style(s). Several styles will re-draws the polygon each one with	1✔
14	* a different style.	1✔
15	* @param {CanvasRenderingContext2D} ctx - canvas' 2D rendering context.	1✔
16	* @param {Number[]} vertices - All the vertices of the Feature.	1✔
17	* @param {Object[]} indices - Contains the indices that define the geometry.	1✔
18	* Objects stored in this array have two properties, an `offset` and a `count`.	1✔
19	* The offset is related to the overall number of vertices in the Feature.	1✔
20	* @param {Number} size - The size of the feature.	1✔
21	* @param {Number} extent - The extent.	1✔
22	* @param {Number} invCtxScale - The ration to scale line width and radius circle.	1✔
23	* @param {Boolean} canBeFilled - true if feature.type == FEATURE_TYPES.POLYGON	1✔
24	*/	1✔
25	function drawPolygon(ctx, vertices, indices = [{ offset: 0, count: 1 }], size, extent, invCtxScale, canBeFilled) {	3!
26	if (vertices.length === 0) {	3!
27	return;	×
28	}	×
29	// build contour	3✔
30	const path = new Path2D();	3✔
31		3✔
32	for (const indice of indices) {	3✔
33	if (indice.extent && Extent.intersectsExtent(indice.extent, extent)) {	4✔
34	const offset = indice.offset * size;	4✔
35	const count = offset + indice.count * size;	4✔
36	path.moveTo(vertices[offset], vertices[offset + 1]);	4✔
37	for (let j = offset + size; j < count; j += size) {	4✔
38	path.lineTo(vertices[j], vertices[j + 1]);	12✔
39	}	12✔
40	}	4✔
41	}	4✔
42	style.applyToCanvasPolygon(ctx, path, invCtxScale, canBeFilled);	3✔
43	}	3✔
44		1✔
45	function drawPoint(ctx, x, y, invCtxScale) {	1✔
46	ctx.beginPath();	1✔
47	const opacity = style.point.opacity == undefined ? 1.0 : style.point.opacity;	1!
48	if (opacity !== ctx.globalAlpha) {	1✔
49	ctx.globalAlpha = opacity;	1✔
50	}	1✔
51		1✔
52	ctx.arc(x, y, (style.point.radius \|\| 3.0) * invCtxScale, 0, 2 * Math.PI, false);	1!
53	if (style.point.color) {	1✔
54	ctx.fillStyle = style.point.color;	1✔
55	ctx.fill();	1✔
56	}	1✔
57	if (style.point.line) {	1✔
58	ctx.lineWidth = (style.point.width \|\| 1.0) * invCtxScale;	1✔
59	ctx.strokeStyle = style.point.line;	1✔
60	ctx.stroke();	1✔
61	}	1✔
62	}	1✔
63		1✔
64	const coord = new Coordinates('EPSG:4326', 0, 0, 0);	1✔
65		1✔
66	function drawFeature(ctx, feature, extent, invCtxScale) {	2✔
67	const extentDim = extent.planarDimensions();	2✔
68	const scaleRadius = extentDim.x / ctx.canvas.width;	2✔
69		2✔
70	for (const geometry of feature.geometries) {	2✔
71	if (Extent.intersectsExtent(geometry.extent, extent)) {	4✔
72	context.setGeometry(geometry);	4✔
73	if (style.zoom.min > style.context.zoom \|\| style.zoom.max <= style.context.zoom) {	4!
NEW 74	return;	×
NEW 75	}	×
76		4✔
77	if (	4✔
78	feature.type === FEATURE_TYPES.POINT && style.point	4✔
79	) {	4✔
80	// cross multiplication to know in the extent system the real size of	1✔
81	// the point	1✔
82	const px = (Math.round(style.point.radius * invCtxScale) \|\| 3 * invCtxScale) * scaleRadius;	1!
83	for (const indice of geometry.indices) {	1✔
84	const offset = indice.offset * feature.size;	1✔
85	const count = offset + indice.count * feature.size;	1✔
86	for (let j = offset; j < count; j += feature.size) {	1✔
87	coord.setFromArray(feature.vertices, j);	1✔
88	if (extent.isPointInside(coord, px)) {	1✔
89	drawPoint(ctx, feature.vertices[j], feature.vertices[j + 1], invCtxScale);	1✔
90	}	1✔
91	}	1✔
92	}	1✔
93	} else {	4✔
94	drawPolygon(ctx, feature.vertices, geometry.indices, feature.size, extent, invCtxScale, (feature.type == FEATURE_TYPES.POLYGON));	3✔
95	}	3✔
96	}	4✔
97	}	4✔
98	}	2✔
99		1✔
100	const origin = new THREE.Vector3();	1✔
101	const dimension = new THREE.Vector3(0, 0, 1);	1✔
102	const scale = new THREE.Vector3();	1✔
103	const quaternion = new THREE.Quaternion();	1✔
104	const world2texture = new THREE.Matrix4();	1✔
105	const feature2texture = new THREE.Matrix4();	1✔
106	const worldTextureOrigin = new THREE.Vector3();	1✔
107		1✔
108	const featureExtent = new Extent('EPSG:4326', 0, 0, 0, 0);	1✔
109		1✔
110	export default {	1✔
111	// backgroundColor is a THREE.Color to specify a color to fill the texture	1✔
112	// with, given there is no feature passed in parameter	1✔
113	createTextureFromFeature(collection, extent, sizeTexture, layerStyle, backgroundColor) {	1✔
114	style = layerStyle \|\| defaultStyle;	1!
115	style.setContext(context);	1✔
116	let texture;	1✔
117		1✔
118	if (collection) {	1✔
119	// A texture is instancied drawn canvas	1✔
120	// origin and dimension are used to transform the feature's coordinates to canvas's space	1✔
121	extent.planarDimensions(dimension);	1✔
122	const c = document.createElement('canvas');	1✔
123		1✔
124	coord.crs = extent.crs;	1✔
125		1✔
126	c.width = sizeTexture;	1✔
127	c.height = sizeTexture;	1✔
128	const ctx = c.getContext('2d');	1✔
129	if (backgroundColor) {	1!
130	ctx.fillStyle = backgroundColor.getStyle();	×
131	ctx.fillRect(0, 0, sizeTexture, sizeTexture);	×
132	}	×
133		1✔
134	// Documentation needed !!	1✔
135	ctx.globalCompositeOperation = layerStyle.globalCompositeOperation \|\| 'source-over';	1✔
136	ctx.imageSmoothingEnabled = false;	1✔
137	ctx.lineJoin = 'round';	1✔
138		1✔
139	// transform extent to feature projection	1✔
140	extent.as(collection.crs, featureExtent);	1✔
141	// transform extent to local system	1✔
142	featureExtent.applyMatrix4(collection.matrixWorldInverse);	1✔
143		1✔
144	// compute matrix transformation `world2texture` to convert coordinates to texture coordinates	1✔
145	if (collection.isInverted) {	1!
146	worldTextureOrigin.set(extent.west, extent.north, 0);	×
147	scale.set(ctx.canvas.width, -ctx.canvas.height, 1.0).divide(dimension);	×
148	} else {	1✔
149	worldTextureOrigin.set(extent.west, extent.south, 0);	1✔
150	scale.set(ctx.canvas.width, ctx.canvas.height, 1.0).divide(dimension);	1✔
151	}	1✔
152		1✔
153	world2texture.compose(worldTextureOrigin.multiply(scale).negate(), quaternion, scale);	1✔
154		1✔
155	// compute matrix transformation `feature2texture` to convert features coordinates to texture coordinates	1✔
156	feature2texture.multiplyMatrices(world2texture, collection.matrixWorld);	1✔
157	feature2texture.decompose(origin, quaternion, scale);	1✔
158		1✔
159	ctx.setTransform(scale.x, 0, 0, scale.y, origin.x, origin.y);	1✔
160		1✔
161	// to scale line width and radius circle	1✔
162	const invCtxScale = Math.abs(1 / scale.x);	1✔
163		1✔
164	context.setZoom(extent.zoom);	1✔
165		1✔
166	// Draw the canvas	1✔
167	for (const feature of collection.features) {	1✔
168	context.setFeature(feature);	2✔
169	drawFeature(ctx, feature, featureExtent, invCtxScale);	2✔
170	}	2✔
171		1✔
172	texture = new THREE.CanvasTexture(c);	1✔
173	texture.flipY = collection.isInverted;	1✔
174	} else if (backgroundColor) {	1!
175	const data = new Uint8Array(3);	×
176	data[0] = backgroundColor.r * 255;	×
177	data[1] = backgroundColor.g * 255;	×
178	data[2] = backgroundColor.b * 255;	×
179	texture = new THREE.DataTexture(data, 1, 1, THREE.RGBAFormat);	×
180	} else {	×
181	texture = new THREE.Texture();	×
182	}	×
183		1✔
184	return texture;	1✔
185	},	1✔
186	};	1✔

iTowns / itowns / 12047891011

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous