From c490745ff0774e47f4b766683f7edf9228cb23c3 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Tue, 23 Jun 2020 19:49:33 +0200 Subject: [PATCH 1/5] Faster clockwise check and better documentation --- src/ol/geom/flat/orient.js | 77 ++++++++++++++++++++++++++++++++------ 1 file changed, 65 insertions(+), 12 deletions(-) diff --git a/src/ol/geom/flat/orient.js b/src/ol/geom/flat/orient.js index 9fbe8fd26a..2a7d36cb08 100644 --- a/src/ol/geom/flat/orient.js +++ b/src/ol/geom/flat/orient.js @@ -4,6 +4,9 @@ import {coordinates as reverseCoordinates} from './reverse.js'; /** + * Is the linear ring oriented clockwise in a coordinate system with a bottom-left + * coordinate origin? For a coordinate system with a top-left coordinate origin, + * the ring's orientation is clockwise when this function returns false. * @param {Array} flatCoordinates Flat coordinates. * @param {number} offset Offset. * @param {number} end End. @@ -11,19 +14,69 @@ import {coordinates as reverseCoordinates} from './reverse.js'; * @return {boolean} Is clockwise. */ export function linearRingIsClockwise(flatCoordinates, offset, end, stride) { - // http://tinyurl.com/clockwise-method - // https://github.com/OSGeo/gdal/blob/trunk/gdal/ogr/ogrlinearring.cpp - let edge = 0; - let x1 = flatCoordinates[end - stride]; - let y1 = flatCoordinates[end - stride + 1]; - for (; offset < end; offset += stride) { - const x2 = flatCoordinates[offset]; - const y2 = flatCoordinates[offset + 1]; - edge += (x2 - x1) * (y2 + y1); - x1 = x2; - y1 = y2; + // https://stackoverflow.com/a/1180256/2389327 + // https://en.wikipedia.org/wiki/Curve_orientation#Orientation_of_a_simple_polygon + + let firstVertexRepeated = true; + for (let i = 0; i < stride; ++i) { + if (flatCoordinates[offset + i] !== flatCoordinates[end - stride + i]) { + firstVertexRepeated = false; + break; + } } - return edge > 0; + if (firstVertexRepeated) { + end -= stride; + } + const iMinVertex = findCornerVertex(flatCoordinates, offset, end, stride); + // Orientation matrix: + // [ 1 xa ya ] + // O = | 1 xb yb | + // [ 1 xc yc ] + let iPreviousVertex = iMinVertex - stride; + if (iPreviousVertex < offset) { + iPreviousVertex = end - stride; + } + let iNextVertex = iMinVertex + stride; + if (iNextVertex >= end) { + iNextVertex = offset; + } + const aX = flatCoordinates[iPreviousVertex]; + const aY = flatCoordinates[iPreviousVertex + 1]; + const bX = flatCoordinates[iMinVertex]; + const bY = flatCoordinates[iMinVertex + 1]; + const cX = flatCoordinates[iNextVertex]; + const cY = flatCoordinates[iNextVertex + 1]; + const determinant = + bX * cY + aX * bY + aY * cX - (aY * bX + bY * cX + aX * cY); + + return determinant < 0; +} + +// Find vertex along one edge of bounding box. +// In this case, we find smallest y; in case of tie also smallest x. +function findCornerVertex(flatCoordinates, offset, end, stride) { + let iMinVertex = -1; + let minY = Infinity; + let minXAtMinY = Infinity; + for (let i = offset; i < end; i += stride) { + const x = flatCoordinates[i]; + const y = flatCoordinates[i + 1]; + if (y > minY) { + continue; + } + if (y == minY) { + if (x >= minXAtMinY) { + continue; + } + } + + // Minimum so far. + iMinVertex = i; + minY = y; + minXAtMinY = x; + } + + return iMinVertex; } /** From b606878d57a6d686fe44a18171704649278b8fd9 Mon Sep 17 00:00:00 2001 From: songyumeng Date: Mon, 22 Jun 2020 00:50:37 +0800 Subject: [PATCH 2/5] fixes #8148 judge whether it is multiPolygon or Polygon:https://github.com/mapbox/vector-tile-js/blob/a9a9102/lib/vectortilefeature.js#L195-L223 --- src/ol/format/MVT.js | 37 +++++++++++++++++++++++++++++---- test/spec/ol/format/mvt.test.js | 6 +++--- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/ol/format/MVT.js b/src/ol/format/MVT.js index 69350830d4..e987911087 100644 --- a/src/ol/format/MVT.js +++ b/src/ol/format/MVT.js @@ -19,7 +19,6 @@ import RenderFeature from '../render/Feature.js'; import Units from '../proj/Units.js'; import {assert} from '../asserts.js'; import {get} from '../proj.js'; -import {linearRingIsClockwise} from '../geom/flat/orient.js'; /** * @typedef {Object} Options @@ -203,10 +202,16 @@ class MVT extends FeatureFormat { let prevEndIndex = 0; for (let i = 0, ii = ends.length; i < ii; ++i) { const end = ends[i]; - if (!linearRingIsClockwise(flatCoordinates, offset, end, 2)) { - endss.push(ends.slice(prevEndIndex, i)); - prevEndIndex = i; + // classifies an array of rings into polygons with outer rings and holes + if (linearRingIsClockwise(flatCoordinates, offset, end, 2)) { + endss.push(ends.slice(prevEndIndex, i + 1)); + } else { + if (endss.length === 0) { + continue; + } + endss[endss.length - 1].push(ends[prevEndIndex]); } + prevEndIndex = i + 1; offset = end; } if (endss.length > 1) { @@ -440,4 +445,28 @@ function getGeometryType(type, numEnds) { return geometryType; } +/** + * Determines Flat coordinates is clockwise in MVT. + * @param {Array} flatCoordinates Flat coordinates. + * @param {number} offset Offset. + * @param {number} end End. + * @param {number} stride Stride. + * @return {boolean} Is clockwise in MVT. + */ +function linearRingIsClockwise(flatCoordinates, offset, end, stride) { + let edge = 0; + let x1 = flatCoordinates[end - stride]; + let y1 = flatCoordinates[end - stride + 1]; + for (; offset < end; offset += stride) { + const x2 = flatCoordinates[offset]; + const y2 = flatCoordinates[offset + 1]; + edge += (x2 - x1) * (y2 + y1); + x1 = x2; + y1 = y2; + } + // http://tinyurl.com/clockwise-method + // MVT has an inverted Y-axis. Then the rule has to be flipped: if the area is negative, the curve is clockwise. + return edge < 0; +} + export default MVT; diff --git a/test/spec/ol/format/mvt.test.js b/test/spec/ol/format/mvt.test.js index 05b4644d69..9041f25da1 100644 --- a/test/spec/ol/format/mvt.test.js +++ b/test/spec/ol/format/mvt.test.js @@ -181,7 +181,7 @@ describe('ol.format.MVT', function () { flatCoordinates, ends ) { - flatCoordinates.push(0, 0, 3, 0, 3, 3, 3, 0, 0, 0); + flatCoordinates.push(0, 0, 3, 0, 3, 3, 0, 4, 0, 0); flatCoordinates.push(1, 1, 1, 2, 2, 2, 2, 1, 1, 1); ends.push(10, 20); }; @@ -207,8 +207,8 @@ describe('ol.format.MVT', function () { flatCoordinates, ends ) { - flatCoordinates.push(0, 0, 1, 0, 1, 1, 1, 0, 0, 0); - flatCoordinates.push(1, 1, 2, 1, 2, 2, 2, 1, 1, 1); + flatCoordinates.push(0, 0, 1, 0, 1, 1, 0, 1, 0, 0); + flatCoordinates.push(1, 1, 2, 1, 2, 2, 1, 2, 1, 1); ends.push(10, 20); }; const feature = format.createFeature_({}, rawFeature); From 40ab8405c1f4933443c056c495eb4cc93e84c52b Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Tue, 23 Jun 2020 21:17:37 +0200 Subject: [PATCH 3/5] Do not use a separate isClockwise check --- src/ol/format/MVT.js | 27 ++------------------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/src/ol/format/MVT.js b/src/ol/format/MVT.js index e987911087..08a77e5f97 100644 --- a/src/ol/format/MVT.js +++ b/src/ol/format/MVT.js @@ -19,6 +19,7 @@ import RenderFeature from '../render/Feature.js'; import Units from '../proj/Units.js'; import {assert} from '../asserts.js'; import {get} from '../proj.js'; +import {linearRingIsClockwise} from '../geom/flat/orient.js'; /** * @typedef {Object} Options @@ -203,7 +204,7 @@ class MVT extends FeatureFormat { for (let i = 0, ii = ends.length; i < ii; ++i) { const end = ends[i]; // classifies an array of rings into polygons with outer rings and holes - if (linearRingIsClockwise(flatCoordinates, offset, end, 2)) { + if (!linearRingIsClockwise(flatCoordinates, offset, end, 2)) { endss.push(ends.slice(prevEndIndex, i + 1)); } else { if (endss.length === 0) { @@ -445,28 +446,4 @@ function getGeometryType(type, numEnds) { return geometryType; } -/** - * Determines Flat coordinates is clockwise in MVT. - * @param {Array} flatCoordinates Flat coordinates. - * @param {number} offset Offset. - * @param {number} end End. - * @param {number} stride Stride. - * @return {boolean} Is clockwise in MVT. - */ -function linearRingIsClockwise(flatCoordinates, offset, end, stride) { - let edge = 0; - let x1 = flatCoordinates[end - stride]; - let y1 = flatCoordinates[end - stride + 1]; - for (; offset < end; offset += stride) { - const x2 = flatCoordinates[offset]; - const y2 = flatCoordinates[offset + 1]; - edge += (x2 - x1) * (y2 + y1); - x1 = x2; - y1 = y2; - } - // http://tinyurl.com/clockwise-method - // MVT has an inverted Y-axis. Then the rule has to be flipped: if the area is negative, the curve is clockwise. - return edge < 0; -} - export default MVT; From 79c318d262d384db7fc0dd04a60b521bfb505cb7 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Tue, 23 Jun 2020 21:20:03 +0200 Subject: [PATCH 4/5] Make test polygons squares --- test/spec/ol/format/mvt.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/spec/ol/format/mvt.test.js b/test/spec/ol/format/mvt.test.js index 9041f25da1..660ed1b579 100644 --- a/test/spec/ol/format/mvt.test.js +++ b/test/spec/ol/format/mvt.test.js @@ -181,7 +181,7 @@ describe('ol.format.MVT', function () { flatCoordinates, ends ) { - flatCoordinates.push(0, 0, 3, 0, 3, 3, 0, 4, 0, 0); + flatCoordinates.push(0, 0, 3, 0, 3, 3, 0, 3, 0, 0); flatCoordinates.push(1, 1, 1, 2, 2, 2, 2, 1, 1, 1); ends.push(10, 20); }; From 18e2044b580d499a4bcbe8f98d2092b4c6bebf9e Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Tue, 23 Jun 2020 21:20:46 +0200 Subject: [PATCH 5/5] Add rendering tests for MVT, comparing with GeoJSON --- .../cases/format-mvt-geojson/expected.png | Bin 0 -> 7920 bytes rendering/cases/format-mvt-geojson/main.js | 47 ++++++++++++++++++ rendering/data/7-64-55.geojson | 11 ++++ rendering/data/7-64-55.mvt | Bin 0 -> 249 bytes 4 files changed, 58 insertions(+) create mode 100644 rendering/cases/format-mvt-geojson/expected.png create mode 100644 rendering/cases/format-mvt-geojson/main.js create mode 100644 rendering/data/7-64-55.geojson create mode 100644 rendering/data/7-64-55.mvt diff --git a/rendering/cases/format-mvt-geojson/expected.png b/rendering/cases/format-mvt-geojson/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..432f88face30fccbd83b0909d16e7ec60a333541 GIT binary patch literal 7920 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 literal 0 HcmV?d00001 diff --git a/rendering/cases/format-mvt-geojson/main.js b/rendering/cases/format-mvt-geojson/main.js new file mode 100644 index 0000000000..711214dff5 --- /dev/null +++ b/rendering/cases/format-mvt-geojson/main.js @@ -0,0 +1,47 @@ +import {Feature, Map, View} from '../../../src/ol/index.js'; +import {GeoJSON, MVT} from '../../../src/ol/format.js'; +import {VectorTile as VectorTileLayer} from '../../../src/ol/layer.js'; +import {VectorTile as VectorTileSource} from '../../../src/ol/source.js'; +import {fromLonLat} from '../../../src/ol/proj.js'; + +const center = fromLonLat([0.26, 24.08]); + +const map = new Map({ + layers: [ + new VectorTileLayer({ + source: new VectorTileSource({ + format: new MVT(), + url: '/data/{z}-{x}-{y}.mvt', + minZoom: 7, + maxZoom: 7, + }), + }), + new VectorTileLayer({ + source: new VectorTileSource({ + format: new MVT({ + featureClass: Feature, + }), + url: '/data/{z}-{x}-{y}.mvt', + minZoom: 7, + maxZoom: 7, + }), + }), + new VectorTileLayer({ + source: new VectorTileSource({ + format: new GeoJSON(), + url: '/data/{z}-{x}-{y}.geojson', + minZoom: 7, + maxZoom: 7, + }), + }), + ], + target: 'map', + view: new View({ + center: center, + zoom: 10, + }), +}); + +map.getTargetElement().style.background = 'gray'; + +render(); diff --git a/rendering/data/7-64-55.geojson b/rendering/data/7-64-55.geojson new file mode 100644 index 0000000000..a52212c2cb --- /dev/null +++ b/rendering/data/7-64-55.geojson @@ -0,0 +1,11 @@ +{ +"type": "FeatureCollection", +"name": "7-64-55", +"features": [ +{ "type": "Feature", "properties": { "mvt_id": 1 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 0.11810302734375, 24.046463999666589 ], [ 0.237579345703125, 24.046463999666589 ], [ 0.237579345703125, 23.956136333969283 ], [ 0.11810302734375, 23.956136333969283 ], [ 0.11810302734375, 24.046463999666589 ] ], [ [ 0.153121948242188, 24.01949779624486 ], [ 0.153121948242188, 23.979978958263413 ], [ 0.2032470703125, 23.979978958263413 ], [ 0.2032470703125, 24.01949779624486 ], [ 0.153121948242188, 24.01949779624486 ] ] ] ] } }, +{ "type": "Feature", "properties": { "mvt_id": 26 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 0.293197631835938, 24.036430724667376 ], [ 0.389328002929688, 24.036430724667376 ], [ 0.3570556640625, 23.95864629158493 ], [ 0.260238647460938, 23.95864629158493 ], [ 0.293197631835938, 24.036430724667376 ] ], [ [ 0.342636108398438, 24.0332951655089 ], [ 0.32684326171875, 23.988761970899695 ], [ 0.352935791015625, 23.988761970899695 ], [ 0.369415283203125, 24.0332951655089 ], [ 0.342636108398438, 24.0332951655089 ] ], [ [ 0.291824340820312, 24.018870607907278 ], [ 0.291824340820312, 23.971195346707443 ], [ 0.319290161132813, 23.971195346707443 ], [ 0.319290161132813, 24.018870607907278 ], [ 0.291824340820312, 24.018870607907278 ] ] ] ] } }, +{ "type": "Feature", "properties": { "mvt_id": 30 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 0.287704467773438, 24.219414393426444 ], [ 0.350875854492188, 24.219414393426444 ], [ 0.33233642578125, 24.147380157655896 ], [ 0.268478393554688, 24.147380157655896 ], [ 0.287704467773438, 24.219414393426444 ] ] ], [ [ [ 0.3460693359375, 24.166802085303235 ], [ 0.372848510742188, 24.166802085303235 ], [ 0.383148193359375, 24.144873887414654 ], [ 0.355682373046875, 24.144873887414654 ], [ 0.3460693359375, 24.166802085303235 ] ] ], [ [ [ 0.352249145507812, 24.218161971731128 ], [ 0.377655029296875, 24.218161971731128 ], [ 0.383834838867187, 24.186847428521244 ], [ 0.358428955078125, 24.186847428521244 ], [ 0.352249145507812, 24.218161971731128 ] ] ] ] } }, +{ "type": "Feature", "properties": { "mvt_id": 33 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 0.10986328125, 24.168055011483165 ], [ 0.199813842773438, 24.168055011483165 ], [ 0.199813842773438, 24.075305297879073 ], [ 0.10986328125, 24.075305297879073 ], [ 0.10986328125, 24.168055011483165 ] ] ], [ [ [ 0.202560424804687, 24.16742854993004 ], [ 0.240325927734375, 24.16742854993004 ], [ 0.240325927734375, 24.128581933124689 ], [ 0.202560424804687, 24.128581933124689 ], [ 0.202560424804687, 24.16742854993004 ] ] ] ] } }, +{ "type": "Feature", "properties": { "mvt_id": 48 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 0.268478393554688, 24.136101554583817 ], [ 0.336456298828125, 24.136101554583817 ], [ 0.31585693359375, 24.047718103928766 ], [ 0.247879028320312, 24.047718103928766 ], [ 0.268478393554688, 24.136101554583817 ] ], [ [ 0.27191162109375, 24.123568606548453 ], [ 0.27191162109375, 24.07279761626851 ], [ 0.31585693359375, 24.07279761626851 ], [ 0.31585693359375, 24.123568606548453 ], [ 0.27191162109375, 24.123568606548453 ] ] ], [ [ [ 0.328216552734375, 24.077812930451806 ], [ 0.357742309570313, 24.077812930451806 ], [ 0.3680419921875, 24.05085331099432 ], [ 0.339202880859375, 24.05085331099432 ], [ 0.328216552734375, 24.077812930451806 ] ] ] ] } } +] +} diff --git a/rendering/data/7-64-55.mvt b/rendering/data/7-64-55.mvt new file mode 100644 index 0000000000000000000000000000000000000000..f399c4c6bfb2deba798544f12d258e0b5bb72f2d GIT binary patch literal 249 zcmb38#>mB6oS9pYlNxX6P?B0)BBad0D8Z~G%Xx#Tfk)~N69dBnrrS&m{G4eg8KoHN zCNVNF)ba}%b4URd>2h9UTfieVgNY&b2jfhTq7RI38Krdl7=0KFdKvjSA2RAmG0b2L zU|^We$SQ%#;Wfbk literal 0 HcmV?d00001