Skip to content
This repository has been archived by the owner on Jul 6, 2023. It is now read-only.

Commit

Permalink
feat(simplification): Exposes shouldSimplify and shouldSplit (#51)
Browse files Browse the repository at this point in the history 
* feat(simplification): Exposes shouldSimplify

* Exposes shouldSplit to polygon and line symbolizer

* Uses shouldSimplify and adds comment to clarify
  • Loading branch information
@ibesora
ibesora authored Sep 8, 2022
1 parent 88e8e43 commit 217f32e
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 12 deletions.
34 changes: 30 additions & 4 deletions src/symbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ import { lineCells, simpleLabel } from "./line";
import { Label, Layout } from "./labeler";

// https://bugs.webkit.org/show_bug.cgi?id=230751
// This ^ has now been resolved (see https://bugs.webkit.org/show_bug.cgi?id=231157)
// PmtilesSource and ZxySource now expose a shouldSimplify boolean
// flag that defaults to false that disables the simplification
// Similarly, Polygon and Line symbolizers now expose a shouldSplit boolean
// flag that defaults to false that disables splitting features
// in multiple draw calls
export const MAX_VERTICES_PER_DRAW_CALL = 4000;

export interface GroupedGeometries {
Expand Down Expand Up @@ -78,6 +84,7 @@ export class PolygonSymbolizer implements PaintSymbolizer {
width: NumberAttr;
per_feature: boolean;
do_stroke: boolean;
shouldSplit: boolean;

constructor(options: any) {
this.pattern = options.pattern;
Expand All @@ -92,6 +99,7 @@ export class PolygonSymbolizer implements PaintSymbolizer {
this.width.per_feature ||
options.per_feature;
this.do_stroke = false;
this.shouldSplit = options.shouldSplit ?? false;
}

public before(ctx: any, z: number) {
Expand Down Expand Up @@ -132,7 +140,10 @@ export class PolygonSymbolizer implements PaintSymbolizer {
var vertices_in_path = 0;
ctx.beginPath();
for (var poly of geom) {
if (vertices_in_path + poly.length > MAX_VERTICES_PER_DRAW_CALL) {
if (
vertices_in_path + poly.length > MAX_VERTICES_PER_DRAW_CALL &&
this.shouldSplit
) {
drawPath();
vertices_in_path = 0;
ctx.beginPath();
Expand All @@ -155,6 +166,7 @@ export class GroupedPolygonSymbolizer implements PaintSymbolizer {
stroke: StringAttr;
width: NumberAttr;
do_stroke: boolean;
shouldSplit: boolean;

constructor(options: any) {
this.pattern = options.pattern;
Expand All @@ -163,6 +175,7 @@ export class GroupedPolygonSymbolizer implements PaintSymbolizer {
this.stroke = new StringAttr(options.stroke, "black");
this.width = new NumberAttr(options.width, 0);
this.do_stroke = false;
this.shouldSplit = options.shouldSplit ?? false;
}

public before(ctx: any, z: number) {
Expand Down Expand Up @@ -200,7 +213,10 @@ export class GroupedPolygonSymbolizer implements PaintSymbolizer {
if (inside(feature) && filter(feature)) {
const geom = transform(feature.geom);
const verticesInGeom = geom.reduce((sum, r) => sum + r.length, 0);
if (verticesInPath + verticesInGeom > MAX_VERTICES_PER_DRAW_CALL) {
if (
verticesInPath + verticesInGeom > MAX_VERTICES_PER_DRAW_CALL &&
this.shouldSplit
) {
drawPath();
ctx.beginPath();
verticesInPath = 0;
Expand Down Expand Up @@ -319,6 +335,7 @@ export class LineSymbolizer implements PaintSymbolizer {
per_feature: boolean;
lineCap: StringAttr;
lineJoin: StringAttr;
shouldSplit: boolean;

constructor(options: any) {
this.color = new StringAttr(options.color, "black");
Expand All @@ -338,6 +355,7 @@ export class LineSymbolizer implements PaintSymbolizer {
this.lineCap.per_feature ||
this.lineJoin.per_feature ||
options.per_feature;
this.shouldSplit = options.shouldSplit ?? false;
}

public before(ctx: any, z: number) {
Expand Down Expand Up @@ -385,7 +403,10 @@ export class LineSymbolizer implements PaintSymbolizer {
ctx.beginPath();
setStyle();
for (var ls of geom) {
if (vertices_in_path + ls.length > MAX_VERTICES_PER_DRAW_CALL) {
if (
vertices_in_path + ls.length > MAX_VERTICES_PER_DRAW_CALL &&
this.shouldSplit
) {
ctx.stroke();
vertices_in_path = 0;
ctx.beginPath();
Expand Down Expand Up @@ -413,6 +434,7 @@ export class GroupedLineSymbolizer implements PaintSymbolizer {
per_feature: boolean;
lineCap: StringAttr;
lineJoin: StringAttr;
shouldSplit: boolean;

constructor(options: any) {
this.color = new StringAttr(options.color, "black");
Expand All @@ -425,6 +447,7 @@ export class GroupedLineSymbolizer implements PaintSymbolizer {
this.lineJoin = new StringAttr(options.lineJoin, "miter");
this.skip = false;
this.per_feature = false;
this.shouldSplit = false;
}

public before(ctx: any, z: number) {
Expand Down Expand Up @@ -464,7 +487,10 @@ export class GroupedLineSymbolizer implements PaintSymbolizer {
if (inside(feature) && filter(feature)) {
const geom = transform(feature.geom);
geom.forEach((ls) => {
if (verticesInPath + ls.length > MAX_VERTICES_PER_DRAW_CALL) {
if (
verticesInPath + ls.length > MAX_VERTICES_PER_DRAW_CALL &&
this.shouldSplit
) {
ctx.stroke();
ctx.beginPath();
verticesInPath = 0;
Expand Down
18 changes: 13 additions & 5 deletions src/tilecache.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ const loadGeomAndBbox = (pbf: any, geometry: number, scale: number) => {

function parseTile(
buffer: ArrayBuffer,
tileSize: number
tileSize: number,
shouldSimplify: boolean
): Map<string, Feature[]> {
let v = new VectorTile(new Protobuf(buffer));
let result = new Map<string, Feature[]>();
Expand All @@ -109,6 +110,7 @@ function parseTile(

let split: Point[][] = [];
if (
shouldSimplify &&
numVertices > MAX_VERTICES_PER_DRAW_CALL &&
layer.feature(i).type != GeomType.Point
) {
Expand Down Expand Up @@ -149,12 +151,14 @@ export class PmtilesSource implements TileSource {
shouldCancelZooms: boolean;
headers: { [key: string]: string };
subdomains: string[];
shouldSimplify: boolean;

constructor(
url: any,
shouldCancelZooms: boolean,
headers: { [key: string]: string },
subdomains = ["a", "b", "c"]
subdomains = ["a", "b", "c"],
shouldSimplify = false
) {
if (url.url) {
this.p = url;
Expand All @@ -165,6 +169,7 @@ export class PmtilesSource implements TileSource {
this.shouldCancelZooms = shouldCancelZooms;
this.headers = headers || {};
this.subdomains = subdomains;
this.shouldSimplify = shouldSimplify;
}

public async get(c: Zxy, tileSize: number): Promise<Map<string, Feature[]>> {
Expand Down Expand Up @@ -195,7 +200,7 @@ export class PmtilesSource implements TileSource {
return resp.arrayBuffer();
})
.then((buffer) => {
let result = parseTile(buffer, tileSize);
let result = parseTile(buffer, tileSize, this.shouldSimplify);
resolve(result);
})
.catch((e) => {
Expand All @@ -211,18 +216,21 @@ export class ZxySource implements TileSource {
shouldCancelZooms: boolean;
headers: { [key: string]: string };
subdomains: string[];
shouldSimplify: boolean;

constructor(
url: string,
shouldCancelZooms: boolean,
headers: { [key: string]: string },
subdomains = ["a", "b", "c"]
subdomains = ["a", "b", "c"],
shouldSimplify = false
) {
this.url = url;
this.controllers = [];
this.shouldCancelZooms = shouldCancelZooms;
this.headers = headers || {};
this.subdomains = subdomains;
this.shouldSimplify = shouldSimplify;
}

public async get(c: Zxy, tileSize: number): Promise<Map<string, Feature[]>> {
Expand Down Expand Up @@ -254,7 +262,7 @@ export class ZxySource implements TileSource {
return resp.arrayBuffer();
})
.then((buffer) => {
let result = parseTile(buffer, tileSize);
let result = parseTile(buffer, tileSize, this.shouldSimplify);
resolve(result);
})
.catch((e) => {
Expand Down
9 changes: 6 additions & 3 deletions src/view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,21 +278,24 @@ export const sourceToView = (o: any) => {
o.url,
o.shouldCancelZooms ?? true,
o.headers,
o.subdomains
o.subdomains,
o.shouldSimplify
);
} else if (o.url.endsWith(".pmtiles")) {
source = new PmtilesSource(
o.url,
o.shouldCancelZooms ?? true,
o.headers,
o.subdomains
o.subdomains,
o.shouldSimplify
);
} else {
source = new ZxySource(
o.url,
o.shouldCancelZooms ?? true,
o.headers,
o.subdomains
o.subdomains,
o.shouldSimplify
);
}
const cache = new TileCache(source, (256 * 1) << level_diff);
Expand Down

0 comments on commit 217f32e

Please sign in to comment.