/** * @module ol/render/webgl/PolygonReplay */ import {getUid, inherits} from '../../index.js'; import {equals} from '../../array.js'; import {asArray} from '../../color.js'; import {intersects} from '../../extent.js'; import {isEmpty} from '../../obj.js'; import {linearRingContainsXY} from '../../geom/flat/contains.js'; import {linearRingIsClockwise} from '../../geom/flat/orient.js'; import {translate} from '../../geom/flat/transform.js'; import {fragment, vertex} from '../webgl/polygonreplay/defaultshader.js'; import Locations from '../webgl/polygonreplay/defaultshader/Locations.js'; import WebGLLineStringReplay from '../webgl/LineStringReplay.js'; import WebGLReplay from '../webgl/Replay.js'; import {triangleIsCounterClockwise, EPSILON, DEFAULT_FILLSTYLE} from '../webgl.js'; import Stroke from '../../style/Stroke.js'; import LinkedList from '../../structs/LinkedList.js'; import RBush from '../../structs/RBush.js'; import {FLOAT} from '../../webgl.js'; import WebGLBuffer from '../../webgl/Buffer.js'; /** * @typedef {Object} PolygonVertex * @property {number} x * @property {number} y * @property {number} i * @property {boolean} [reflex] */ /** * @typedef {Object} PolygonSegment * @property {module:ol/render/webgl/PolygonReplay~PolygonVertex} p0 * @property {module:ol/render/webgl/PolygonReplay~PolygonVertex} p1 */ /** * @constructor * @extends {module:ol/render/webgl/Replay} * @param {number} tolerance Tolerance. * @param {module:ol/extent~Extent} maxExtent Max extent. * @struct */ const WebGLPolygonReplay = function(tolerance, maxExtent) { WebGLReplay.call(this, tolerance, maxExtent); this.lineStringReplay = new WebGLLineStringReplay( tolerance, maxExtent); /** * @private * @type {module:ol/render/webgl/polygonreplay/defaultshader/Locations} */ this.defaultLocations_ = null; /** * @private * @type {Array.>} */ this.styles_ = []; /** * @private * @type {Array.} */ this.styleIndices_ = []; /** * @private * @type {{fillColor: (Array.|null), * changed: boolean}|null} */ this.state_ = { fillColor: null, changed: false }; }; inherits(WebGLPolygonReplay, WebGLReplay); /** * Draw one polygon. * @param {Array.} flatCoordinates Flat coordinates. * @param {Array.>} holeFlatCoordinates Hole flat coordinates. * @param {number} stride Stride. * @private */ WebGLPolygonReplay.prototype.drawCoordinates_ = function( flatCoordinates, holeFlatCoordinates, stride) { // Triangulate the polygon const outerRing = new LinkedList(); const rtree = new RBush(); // Initialize the outer ring this.processFlatCoordinates_(flatCoordinates, stride, outerRing, rtree, true); const maxCoords = this.getMaxCoords_(outerRing); // Eliminate holes, if there are any if (holeFlatCoordinates.length) { let i, ii; const holeLists = []; for (i = 0, ii = holeFlatCoordinates.length; i < ii; ++i) { const holeList = { list: new LinkedList(), maxCoords: undefined, rtree: new RBush() }; holeLists.push(holeList); this.processFlatCoordinates_(holeFlatCoordinates[i], stride, holeList.list, holeList.rtree, false); this.classifyPoints_(holeList.list, holeList.rtree, true); holeList.maxCoords = this.getMaxCoords_(holeList.list); } holeLists.sort(function(a, b) { return b.maxCoords[0] === a.maxCoords[0] ? a.maxCoords[1] - b.maxCoords[1] : b.maxCoords[0] - a.maxCoords[0]; }); for (i = 0; i < holeLists.length; ++i) { const currList = holeLists[i].list; const start = currList.firstItem(); let currItem = start; let intersection; do { //TODO: Triangulate holes when they intersect the outer ring. if (this.getIntersections_(currItem, rtree).length) { intersection = true; break; } currItem = currList.nextItem(); } while (start !== currItem); if (!intersection) { if (this.bridgeHole_(currList, holeLists[i].maxCoords[0], outerRing, maxCoords[0], rtree)) { rtree.concat(holeLists[i].rtree); this.classifyPoints_(outerRing, rtree, false); } } } } else { this.classifyPoints_(outerRing, rtree, false); } this.triangulate_(outerRing, rtree); }; /** * Inserts flat coordinates in a linked list and adds them to the vertex buffer. * @private * @param {Array.} flatCoordinates Flat coordinates. * @param {number} stride Stride. * @param {module:ol/structs/LinkedList} list Linked list. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @param {boolean} clockwise Coordinate order should be clockwise. */ WebGLPolygonReplay.prototype.processFlatCoordinates_ = function( flatCoordinates, stride, list, rtree, clockwise) { const isClockwise = linearRingIsClockwise(flatCoordinates, 0, flatCoordinates.length, stride); let i, ii; let n = this.vertices.length / 2; /** @type {module:ol/render/webgl/PolygonReplay~PolygonVertex} */ let start; /** @type {module:ol/render/webgl/PolygonReplay~PolygonVertex} */ let p0; /** @type {module:ol/render/webgl/PolygonReplay~PolygonVertex} */ let p1; const extents = []; const segments = []; if (clockwise === isClockwise) { start = this.createPoint_(flatCoordinates[0], flatCoordinates[1], n++); p0 = start; for (i = stride, ii = flatCoordinates.length; i < ii; i += stride) { p1 = this.createPoint_(flatCoordinates[i], flatCoordinates[i + 1], n++); segments.push(this.insertItem_(p0, p1, list)); extents.push([Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)]); p0 = p1; } segments.push(this.insertItem_(p1, start, list)); extents.push([Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)]); } else { const end = flatCoordinates.length - stride; start = this.createPoint_(flatCoordinates[end], flatCoordinates[end + 1], n++); p0 = start; for (i = end - stride, ii = 0; i >= ii; i -= stride) { p1 = this.createPoint_(flatCoordinates[i], flatCoordinates[i + 1], n++); segments.push(this.insertItem_(p0, p1, list)); extents.push([Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)]); p0 = p1; } segments.push(this.insertItem_(p1, start, list)); extents.push([Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)]); } rtree.load(extents, segments); }; /** * Returns the rightmost coordinates of a polygon on the X axis. * @private * @param {module:ol/structs/LinkedList} list Polygons ring. * @return {Array.} Max X coordinates. */ WebGLPolygonReplay.prototype.getMaxCoords_ = function(list) { const start = list.firstItem(); let seg = start; let maxCoords = [seg.p0.x, seg.p0.y]; do { seg = list.nextItem(); if (seg.p0.x > maxCoords[0]) { maxCoords = [seg.p0.x, seg.p0.y]; } } while (seg !== start); return maxCoords; }; /** * Classifies the points of a polygon list as convex, reflex. Removes collinear vertices. * @private * @param {module:ol/structs/LinkedList} list Polygon ring. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @param {boolean} ccw The orientation of the polygon is counter-clockwise. * @return {boolean} There were reclassified points. */ WebGLPolygonReplay.prototype.classifyPoints_ = function(list, rtree, ccw) { let start = list.firstItem(); let s0 = start; let s1 = list.nextItem(); let pointsReclassified = false; do { const reflex = ccw ? triangleIsCounterClockwise(s1.p1.x, s1.p1.y, s0.p1.x, s0.p1.y, s0.p0.x, s0.p0.y) : triangleIsCounterClockwise(s0.p0.x, s0.p0.y, s0.p1.x, s0.p1.y, s1.p1.x, s1.p1.y); if (reflex === undefined) { this.removeItem_(s0, s1, list, rtree); pointsReclassified = true; if (s1 === start) { start = list.getNextItem(); } s1 = s0; list.prevItem(); } else if (s0.p1.reflex !== reflex) { s0.p1.reflex = reflex; pointsReclassified = true; } s0 = s1; s1 = list.nextItem(); } while (s0 !== start); return pointsReclassified; }; /** * @private * @param {module:ol/structs/LinkedList} hole Linked list of the hole. * @param {number} holeMaxX Maximum X value of the hole. * @param {module:ol/structs/LinkedList} list Linked list of the polygon. * @param {number} listMaxX Maximum X value of the polygon. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @return {boolean} Bridging was successful. */ WebGLPolygonReplay.prototype.bridgeHole_ = function(hole, holeMaxX, list, listMaxX, rtree) { let seg = hole.firstItem(); while (seg.p1.x !== holeMaxX) { seg = hole.nextItem(); } const p1 = seg.p1; /** @type {module:ol/render/webgl/PolygonReplay~PolygonVertex} */ const p2 = {x: listMaxX, y: p1.y, i: -1}; let minDist = Infinity; let i, ii, bestPoint; /** @type {module:ol/render/webgl/PolygonReplay~PolygonVertex} */ let p5; const intersectingSegments = this.getIntersections_({p0: p1, p1: p2}, rtree, true); for (i = 0, ii = intersectingSegments.length; i < ii; ++i) { const currSeg = intersectingSegments[i]; const intersection = this.calculateIntersection_(p1, p2, currSeg.p0, currSeg.p1, true); const dist = Math.abs(p1.x - intersection[0]); if (dist < minDist && triangleIsCounterClockwise(p1.x, p1.y, currSeg.p0.x, currSeg.p0.y, currSeg.p1.x, currSeg.p1.y) !== undefined) { minDist = dist; p5 = {x: intersection[0], y: intersection[1], i: -1}; seg = currSeg; } } if (minDist === Infinity) { return false; } bestPoint = seg.p1; if (minDist > 0) { const pointsInTriangle = this.getPointsInTriangle_(p1, p5, seg.p1, rtree); if (pointsInTriangle.length) { let theta = Infinity; for (i = 0, ii = pointsInTriangle.length; i < ii; ++i) { const currPoint = pointsInTriangle[i]; const currTheta = Math.atan2(p1.y - currPoint.y, p2.x - currPoint.x); if (currTheta < theta || (currTheta === theta && currPoint.x < bestPoint.x)) { theta = currTheta; bestPoint = currPoint; } } } } seg = list.firstItem(); while (seg.p1.x !== bestPoint.x || seg.p1.y !== bestPoint.y) { seg = list.nextItem(); } //We clone the bridge points as they can have different convexity. const p0Bridge = {x: p1.x, y: p1.y, i: p1.i, reflex: undefined}; const p1Bridge = {x: seg.p1.x, y: seg.p1.y, i: seg.p1.i, reflex: undefined}; hole.getNextItem().p0 = p0Bridge; this.insertItem_(p1, seg.p1, hole, rtree); this.insertItem_(p1Bridge, p0Bridge, hole, rtree); seg.p1 = p1Bridge; hole.setFirstItem(); list.concat(hole); return true; }; /** * @private * @param {module:ol/structs/LinkedList} list Linked list of the polygon. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. */ WebGLPolygonReplay.prototype.triangulate_ = function(list, rtree) { let ccw = false; let simple = this.isSimple_(list, rtree); // Start clipping ears while (list.getLength() > 3) { if (simple) { if (!this.clipEars_(list, rtree, simple, ccw)) { if (!this.classifyPoints_(list, rtree, ccw)) { // Due to the behavior of OL's PIP algorithm, the ear clipping cannot // introduce touching segments. However, the original data may have some. if (!this.resolveSelfIntersections_(list, rtree, true)) { break; } } } } else { if (!this.clipEars_(list, rtree, simple, ccw)) { // We ran out of ears, try to reclassify. if (!this.classifyPoints_(list, rtree, ccw)) { // We have a bad polygon, try to resolve local self-intersections. if (!this.resolveSelfIntersections_(list, rtree)) { simple = this.isSimple_(list, rtree); if (!simple) { // We have a really bad polygon, try more time consuming methods. this.splitPolygon_(list, rtree); break; } else { ccw = !this.isClockwise_(list); this.classifyPoints_(list, rtree, ccw); } } } } } } if (list.getLength() === 3) { let numIndices = this.indices.length; this.indices[numIndices++] = list.getPrevItem().p0.i; this.indices[numIndices++] = list.getCurrItem().p0.i; this.indices[numIndices++] = list.getNextItem().p0.i; } }; /** * @private * @param {module:ol/structs/LinkedList} list Linked list of the polygon. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @param {boolean} simple The polygon is simple. * @param {boolean} ccw Orientation of the polygon is counter-clockwise. * @return {boolean} There were processed ears. */ WebGLPolygonReplay.prototype.clipEars_ = function(list, rtree, simple, ccw) { let numIndices = this.indices.length; let start = list.firstItem(); let s0 = list.getPrevItem(); let s1 = start; let s2 = list.nextItem(); let s3 = list.getNextItem(); let p0, p1, p2; let processedEars = false; do { p0 = s1.p0; p1 = s1.p1; p2 = s2.p1; if (p1.reflex === false) { // We might have a valid ear let variableCriterion; if (simple) { variableCriterion = this.getPointsInTriangle_(p0, p1, p2, rtree, true).length === 0; } else { variableCriterion = ccw ? this.diagonalIsInside_(s3.p1, p2, p1, p0, s0.p0) : this.diagonalIsInside_(s0.p0, p0, p1, p2, s3.p1); } if ((simple || this.getIntersections_({p0: p0, p1: p2}, rtree).length === 0) && variableCriterion) { //The diagonal is completely inside the polygon if (simple || p0.reflex === false || p2.reflex === false || linearRingIsClockwise([s0.p0.x, s0.p0.y, p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, s3.p1.x, s3.p1.y], 0, 10, 2) === !ccw) { //The diagonal is persumably valid, we have an ear this.indices[numIndices++] = p0.i; this.indices[numIndices++] = p1.i; this.indices[numIndices++] = p2.i; this.removeItem_(s1, s2, list, rtree); if (s2 === start) { start = s3; } processedEars = true; } } } // Else we have a reflex point. s0 = list.getPrevItem(); s1 = list.getCurrItem(); s2 = list.nextItem(); s3 = list.getNextItem(); } while (s1 !== start && list.getLength() > 3); return processedEars; }; /** * @private * @param {module:ol/structs/LinkedList} list Linked list of the polygon. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @param {boolean=} opt_touch Resolve touching segments. * @return {boolean} There were resolved intersections. */ WebGLPolygonReplay.prototype.resolveSelfIntersections_ = function( list, rtree, opt_touch) { const start = list.firstItem(); list.nextItem(); let s0 = start; let s1 = list.nextItem(); let resolvedIntersections = false; do { const intersection = this.calculateIntersection_(s0.p0, s0.p1, s1.p0, s1.p1, opt_touch); if (intersection) { let breakCond = false; const numVertices = this.vertices.length; let numIndices = this.indices.length; const n = numVertices / 2; const seg = list.prevItem(); list.removeItem(); rtree.remove(seg); breakCond = (seg === start); let p; if (opt_touch) { if (intersection[0] === s0.p0.x && intersection[1] === s0.p0.y) { list.prevItem(); p = s0.p0; s1.p0 = p; rtree.remove(s0); breakCond = breakCond || (s0 === start); } else { p = s1.p1; s0.p1 = p; rtree.remove(s1); breakCond = breakCond || (s1 === start); } list.removeItem(); } else { p = this.createPoint_(intersection[0], intersection[1], n); s0.p1 = p; s1.p0 = p; rtree.update([Math.min(s0.p0.x, s0.p1.x), Math.min(s0.p0.y, s0.p1.y), Math.max(s0.p0.x, s0.p1.x), Math.max(s0.p0.y, s0.p1.y)], s0); rtree.update([Math.min(s1.p0.x, s1.p1.x), Math.min(s1.p0.y, s1.p1.y), Math.max(s1.p0.x, s1.p1.x), Math.max(s1.p0.y, s1.p1.y)], s1); } this.indices[numIndices++] = seg.p0.i; this.indices[numIndices++] = seg.p1.i; this.indices[numIndices++] = p.i; resolvedIntersections = true; if (breakCond) { break; } } s0 = list.getPrevItem(); s1 = list.nextItem(); } while (s0 !== start); return resolvedIntersections; }; /** * @private * @param {module:ol/structs/LinkedList} list Linked list of the polygon. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @return {boolean} The polygon is simple. */ WebGLPolygonReplay.prototype.isSimple_ = function(list, rtree) { const start = list.firstItem(); let seg = start; do { if (this.getIntersections_(seg, rtree).length) { return false; } seg = list.nextItem(); } while (seg !== start); return true; }; /** * @private * @param {module:ol/structs/LinkedList} list Linked list of the polygon. * @return {boolean} Orientation is clockwise. */ WebGLPolygonReplay.prototype.isClockwise_ = function(list) { const length = list.getLength() * 2; const flatCoordinates = new Array(length); const start = list.firstItem(); let seg = start; let i = 0; do { flatCoordinates[i++] = seg.p0.x; flatCoordinates[i++] = seg.p0.y; seg = list.nextItem(); } while (seg !== start); return linearRingIsClockwise(flatCoordinates, 0, length, 2); }; /** * @private * @param {module:ol/structs/LinkedList} list Linked list of the polygon. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. */ WebGLPolygonReplay.prototype.splitPolygon_ = function(list, rtree) { const start = list.firstItem(); let s0 = start; do { const intersections = this.getIntersections_(s0, rtree); if (intersections.length) { const s1 = intersections[0]; const n = this.vertices.length / 2; const intersection = this.calculateIntersection_(s0.p0, s0.p1, s1.p0, s1.p1); const p = this.createPoint_(intersection[0], intersection[1], n); const newPolygon = new LinkedList(); const newRtree = new RBush(); this.insertItem_(p, s0.p1, newPolygon, newRtree); s0.p1 = p; rtree.update([Math.min(s0.p0.x, p.x), Math.min(s0.p0.y, p.y), Math.max(s0.p0.x, p.x), Math.max(s0.p0.y, p.y)], s0); let currItem = list.nextItem(); while (currItem !== s1) { this.insertItem_(currItem.p0, currItem.p1, newPolygon, newRtree); rtree.remove(currItem); list.removeItem(); currItem = list.getCurrItem(); } this.insertItem_(s1.p0, p, newPolygon, newRtree); s1.p0 = p; rtree.update([Math.min(s1.p1.x, p.x), Math.min(s1.p1.y, p.y), Math.max(s1.p1.x, p.x), Math.max(s1.p1.y, p.y)], s1); this.classifyPoints_(list, rtree, false); this.triangulate_(list, rtree); this.classifyPoints_(newPolygon, newRtree, false); this.triangulate_(newPolygon, newRtree); break; } s0 = list.nextItem(); } while (s0 !== start); }; /** * @private * @param {number} x X coordinate. * @param {number} y Y coordinate. * @param {number} i Index. * @return {module:ol/render/webgl/PolygonReplay~PolygonVertex} List item. */ WebGLPolygonReplay.prototype.createPoint_ = function(x, y, i) { let numVertices = this.vertices.length; this.vertices[numVertices++] = x; this.vertices[numVertices++] = y; /** @type {module:ol/render/webgl/PolygonReplay~PolygonVertex} */ const p = { x: x, y: y, i: i, reflex: undefined }; return p; }; /** * @private * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p0 First point of segment. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p1 Second point of segment. * @param {module:ol/structs/LinkedList} list Polygon ring. * @param {module:ol/structs/RBush=} opt_rtree Insert the segment into the R-Tree. * @return {module:ol/render/webgl/PolygonReplay~PolygonSegment} segment. */ WebGLPolygonReplay.prototype.insertItem_ = function(p0, p1, list, opt_rtree) { const seg = { p0: p0, p1: p1 }; list.insertItem(seg); if (opt_rtree) { opt_rtree.insert([Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)], seg); } return seg; }; /** * @private * @param {module:ol/render/webgl/PolygonReplay~PolygonSegment} s0 Segment before the remove candidate. * @param {module:ol/render/webgl/PolygonReplay~PolygonSegment} s1 Remove candidate segment. * @param {module:ol/structs/LinkedList} list Polygon ring. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. */ WebGLPolygonReplay.prototype.removeItem_ = function(s0, s1, list, rtree) { if (list.getCurrItem() === s1) { list.removeItem(); s0.p1 = s1.p1; rtree.remove(s1); rtree.update([Math.min(s0.p0.x, s0.p1.x), Math.min(s0.p0.y, s0.p1.y), Math.max(s0.p0.x, s0.p1.x), Math.max(s0.p0.y, s0.p1.y)], s0); } }; /** * @private * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p0 First point. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p1 Second point. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p2 Third point. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @param {boolean=} opt_reflex Only include reflex points. * @return {Array.} Points in the triangle. */ WebGLPolygonReplay.prototype.getPointsInTriangle_ = function(p0, p1, p2, rtree, opt_reflex) { const result = []; const segmentsInExtent = rtree.getInExtent([Math.min(p0.x, p1.x, p2.x), Math.min(p0.y, p1.y, p2.y), Math.max(p0.x, p1.x, p2.x), Math.max(p0.y, p1.y, p2.y)]); for (let i = 0, ii = segmentsInExtent.length; i < ii; ++i) { for (const j in segmentsInExtent[i]) { const p = segmentsInExtent[i][j]; if (typeof p === 'object' && (!opt_reflex || p.reflex)) { if ((p.x !== p0.x || p.y !== p0.y) && (p.x !== p1.x || p.y !== p1.y) && (p.x !== p2.x || p.y !== p2.y) && result.indexOf(p) === -1 && linearRingContainsXY([p0.x, p0.y, p1.x, p1.y, p2.x, p2.y], 0, 6, 2, p.x, p.y)) { result.push(p); } } } } return result; }; /** * @private * @param {module:ol/render/webgl/PolygonReplay~PolygonSegment} segment Segment. * @param {module:ol/structs/RBush} rtree R-Tree of the polygon. * @param {boolean=} opt_touch Touching segments should be considered an intersection. * @return {Array.} Intersecting segments. */ WebGLPolygonReplay.prototype.getIntersections_ = function(segment, rtree, opt_touch) { const p0 = segment.p0; const p1 = segment.p1; const segmentsInExtent = rtree.getInExtent([Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)]); const result = []; for (let i = 0, ii = segmentsInExtent.length; i < ii; ++i) { const currSeg = segmentsInExtent[i]; if (segment !== currSeg && (opt_touch || currSeg.p0 !== p1 || currSeg.p1 !== p0) && this.calculateIntersection_(p0, p1, currSeg.p0, currSeg.p1, opt_touch)) { result.push(currSeg); } } return result; }; /** * Line intersection algorithm by Paul Bourke. * @see http://paulbourke.net/geometry/pointlineplane/ * * @private * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p0 First point. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p1 Second point. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p2 Third point. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p3 Fourth point. * @param {boolean=} opt_touch Touching segments should be considered an intersection. * @return {Array.|undefined} Intersection coordinates. */ WebGLPolygonReplay.prototype.calculateIntersection_ = function(p0, p1, p2, p3, opt_touch) { const denom = (p3.y - p2.y) * (p1.x - p0.x) - (p3.x - p2.x) * (p1.y - p0.y); if (denom !== 0) { const ua = ((p3.x - p2.x) * (p0.y - p2.y) - (p3.y - p2.y) * (p0.x - p2.x)) / denom; const ub = ((p1.x - p0.x) * (p0.y - p2.y) - (p1.y - p0.y) * (p0.x - p2.x)) / denom; if ((!opt_touch && ua > EPSILON && ua < 1 - EPSILON && ub > EPSILON && ub < 1 - EPSILON) || (opt_touch && ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1)) { return [p0.x + ua * (p1.x - p0.x), p0.y + ua * (p1.y - p0.y)]; } } return undefined; }; /** * @private * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p0 Point before the start of the diagonal. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p1 Start point of the diagonal. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p2 Ear candidate. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p3 End point of the diagonal. * @param {module:ol/render/webgl/PolygonReplay~PolygonVertex} p4 Point after the end of the diagonal. * @return {boolean} Diagonal is inside the polygon. */ WebGLPolygonReplay.prototype.diagonalIsInside_ = function(p0, p1, p2, p3, p4) { if (p1.reflex === undefined || p3.reflex === undefined) { return false; } const p1IsLeftOf = (p2.x - p3.x) * (p1.y - p3.y) > (p2.y - p3.y) * (p1.x - p3.x); const p1IsRightOf = (p4.x - p3.x) * (p1.y - p3.y) < (p4.y - p3.y) * (p1.x - p3.x); const p3IsLeftOf = (p0.x - p1.x) * (p3.y - p1.y) > (p0.y - p1.y) * (p3.x - p1.x); const p3IsRightOf = (p2.x - p1.x) * (p3.y - p1.y) < (p2.y - p1.y) * (p3.x - p1.x); const p1InCone = p3.reflex ? p1IsRightOf || p1IsLeftOf : p1IsRightOf && p1IsLeftOf; const p3InCone = p1.reflex ? p3IsRightOf || p3IsLeftOf : p3IsRightOf && p3IsLeftOf; return p1InCone && p3InCone; }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) { const endss = multiPolygonGeometry.getEndss(); const stride = multiPolygonGeometry.getStride(); const currIndex = this.indices.length; const currLineIndex = this.lineStringReplay.getCurrentIndex(); const flatCoordinates = multiPolygonGeometry.getFlatCoordinates(); let i, ii, j, jj; let start = 0; for (i = 0, ii = endss.length; i < ii; ++i) { const ends = endss[i]; if (ends.length > 0) { const outerRing = translate(flatCoordinates, start, ends[0], stride, -this.origin[0], -this.origin[1]); if (outerRing.length) { const holes = []; let holeFlatCoords; for (j = 1, jj = ends.length; j < jj; ++j) { if (ends[j] !== ends[j - 1]) { holeFlatCoords = translate(flatCoordinates, ends[j - 1], ends[j], stride, -this.origin[0], -this.origin[1]); holes.push(holeFlatCoords); } } this.lineStringReplay.drawPolygonCoordinates(outerRing, holes, stride); this.drawCoordinates_(outerRing, holes, stride); } } start = ends[ends.length - 1]; } if (this.indices.length > currIndex) { this.startIndices.push(currIndex); this.startIndicesFeature.push(feature); if (this.state_.changed) { this.styleIndices_.push(currIndex); this.state_.changed = false; } } if (this.lineStringReplay.getCurrentIndex() > currLineIndex) { this.lineStringReplay.setPolygonStyle(feature, currLineIndex); } }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) { const ends = polygonGeometry.getEnds(); const stride = polygonGeometry.getStride(); if (ends.length > 0) { const flatCoordinates = polygonGeometry.getFlatCoordinates().map(Number); const outerRing = translate(flatCoordinates, 0, ends[0], stride, -this.origin[0], -this.origin[1]); if (outerRing.length) { const holes = []; let i, ii, holeFlatCoords; for (i = 1, ii = ends.length; i < ii; ++i) { if (ends[i] !== ends[i - 1]) { holeFlatCoords = translate(flatCoordinates, ends[i - 1], ends[i], stride, -this.origin[0], -this.origin[1]); holes.push(holeFlatCoords); } } this.startIndices.push(this.indices.length); this.startIndicesFeature.push(feature); if (this.state_.changed) { this.styleIndices_.push(this.indices.length); this.state_.changed = false; } this.lineStringReplay.setPolygonStyle(feature); this.lineStringReplay.drawPolygonCoordinates(outerRing, holes, stride); this.drawCoordinates_(outerRing, holes, stride); } } }; /** * @inheritDoc **/ WebGLPolygonReplay.prototype.finish = function(context) { // create, bind, and populate the vertices buffer this.verticesBuffer = new WebGLBuffer(this.vertices); // create, bind, and populate the indices buffer this.indicesBuffer = new WebGLBuffer(this.indices); this.startIndices.push(this.indices.length); this.lineStringReplay.finish(context); //Clean up, if there is nothing to draw if (this.styleIndices_.length === 0 && this.styles_.length > 0) { this.styles_ = []; } this.vertices = null; this.indices = null; }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.getDeleteResourcesFunction = function(context) { const verticesBuffer = this.verticesBuffer; const indicesBuffer = this.indicesBuffer; const lineDeleter = this.lineStringReplay.getDeleteResourcesFunction(context); return function() { context.deleteBuffer(verticesBuffer); context.deleteBuffer(indicesBuffer); lineDeleter(); }; }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) { // get the program const program = context.getProgram(fragment, vertex); // get the locations let locations; if (!this.defaultLocations_) { locations = new Locations(gl, program); this.defaultLocations_ = locations; } else { locations = this.defaultLocations_; } context.useProgram(program); // enable the vertex attrib arrays gl.enableVertexAttribArray(locations.a_position); gl.vertexAttribPointer(locations.a_position, 2, FLOAT, false, 8, 0); return locations; }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.shutDownProgram = function(gl, locations) { gl.disableVertexAttribArray(locations.a_position); }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) { //Save GL parameters. const tmpDepthFunc = /** @type {number} */ (gl.getParameter(gl.DEPTH_FUNC)); const tmpDepthMask = /** @type {boolean} */ (gl.getParameter(gl.DEPTH_WRITEMASK)); if (!hitDetection) { gl.enable(gl.DEPTH_TEST); gl.depthMask(true); gl.depthFunc(gl.NOTEQUAL); } if (!isEmpty(skippedFeaturesHash)) { this.drawReplaySkipping_(gl, context, skippedFeaturesHash); } else { //Draw by style groups to minimize drawElements() calls. let i, start, end, nextStyle; end = this.startIndices[this.startIndices.length - 1]; for (i = this.styleIndices_.length - 1; i >= 0; --i) { start = this.styleIndices_[i]; nextStyle = this.styles_[i]; this.setFillStyle_(gl, nextStyle); this.drawElements(gl, context, start, end); end = start; } } if (!hitDetection) { gl.disable(gl.DEPTH_TEST); gl.clear(gl.DEPTH_BUFFER_BIT); //Restore GL parameters. gl.depthMask(tmpDepthMask); gl.depthFunc(tmpDepthFunc); } }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) { let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex; featureIndex = this.startIndices.length - 2; end = this.startIndices[featureIndex + 1]; for (i = this.styleIndices_.length - 1; i >= 0; --i) { nextStyle = this.styles_[i]; this.setFillStyle_(gl, nextStyle); groupStart = this.styleIndices_[i]; while (featureIndex >= 0 && this.startIndices[featureIndex] >= groupStart) { start = this.startIndices[featureIndex]; feature = this.startIndicesFeature[featureIndex]; featureUid = getUid(feature).toString(); if (skippedFeaturesHash[featureUid] === undefined && feature.getGeometry() && (opt_hitExtent === undefined || intersects( /** @type {Array} */ (opt_hitExtent), feature.getGeometry().getExtent()))) { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); this.drawElements(gl, context, start, end); const result = featureCallback(feature); if (result) { return result; } } featureIndex--; end = start; } } return undefined; }; /** * @private * @param {WebGLRenderingContext} gl gl. * @param {module:ol/webgl/Context} context Context. * @param {Object} skippedFeaturesHash Ids of features to skip. */ WebGLPolygonReplay.prototype.drawReplaySkipping_ = function(gl, context, skippedFeaturesHash) { let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart; featureIndex = this.startIndices.length - 2; end = start = this.startIndices[featureIndex + 1]; for (i = this.styleIndices_.length - 1; i >= 0; --i) { nextStyle = this.styles_[i]; this.setFillStyle_(gl, nextStyle); groupStart = this.styleIndices_[i]; while (featureIndex >= 0 && this.startIndices[featureIndex] >= groupStart) { featureStart = this.startIndices[featureIndex]; feature = this.startIndicesFeature[featureIndex]; featureUid = getUid(feature).toString(); if (skippedFeaturesHash[featureUid]) { if (start !== end) { this.drawElements(gl, context, start, end); gl.clear(gl.DEPTH_BUFFER_BIT); } end = featureStart; } featureIndex--; start = featureStart; } if (start !== end) { this.drawElements(gl, context, start, end); gl.clear(gl.DEPTH_BUFFER_BIT); } start = end = groupStart; } }; /** * @private * @param {WebGLRenderingContext} gl gl. * @param {Array.} color Color. */ WebGLPolygonReplay.prototype.setFillStyle_ = function(gl, color) { gl.uniform4fv(this.defaultLocations_.u_color, color); }; /** * @inheritDoc */ WebGLPolygonReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) { let fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0]; if (!(fillStyleColor instanceof CanvasGradient) && !(fillStyleColor instanceof CanvasPattern)) { fillStyleColor = asArray(fillStyleColor).map(function(c, i) { return i != 3 ? c / 255 : c; }) || DEFAULT_FILLSTYLE; } else { fillStyleColor = DEFAULT_FILLSTYLE; } if (!this.state_.fillColor || !equals(fillStyleColor, this.state_.fillColor)) { this.state_.fillColor = fillStyleColor; this.state_.changed = true; this.styles_.push(fillStyleColor); } //Provide a null stroke style, if no strokeStyle is provided. Required for the draw interaction to work. if (strokeStyle) { this.lineStringReplay.setFillStrokeStyle(null, strokeStyle); } else { const nullStrokeStyle = new Stroke({ color: [0, 0, 0, 0], lineWidth: 0 }); this.lineStringReplay.setFillStrokeStyle(null, nullStrokeStyle); } }; export default WebGLPolygonReplay;