@mapwhit/tilerenderer 1.2.0 → 1.2.2

package/src/symbol/collision_index.js

@@ -1,4 +1,3 @@
-import Point from '@mapbox/point-geometry';
 import { polygonIntersectsPolygon } from '@mapwhit/geometry';
 import * as projection from '../symbol/projection.js';
 import Grid from './grid_index.js';
@@ -20,10 +19,9 @@ const viewportPadding = 100;
  * there's room for a symbol, then insertCollisionBox/Circles actually puts the
  * symbol in the index. The two step process allows paired symbols to be inserted
  * together even if they overlap.
- *
- * @private
  */
-class CollisionIndex {
+
+export default class CollisionIndex {
   constructor(
     transform,
     grid = new Grid(transform.width + 2 * viewportPadding, transform.height + 2 * viewportPadding, 25),
@@ -116,7 +114,7 @@ class CollisionIndex {
     const lineOffsetX = symbol.lineOffsetX * fontSize;
     const lineOffsetY = symbol.lineOffsetY * fontSize;
 
-    const tileUnitAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
+    const tileUnitAnchorPoint = { x: symbol.anchorX, y: symbol.anchorY };
     // projection.project generates NDC coordinates, as opposed to the
     // pixel-based grid coordinates generated by this.projectPoint
     const labelPlaneAnchorPoint = projection.project(tileUnitAnchorPoint, labelPlaneMatrix).point;
@@ -253,18 +251,28 @@ class CollisionIndex {
       return {};
     }
 
-    const query = [];
+    const query = new Array(viewportQueryGeometry.length);
     let minX = Number.POSITIVE_INFINITY;
     let minY = Number.POSITIVE_INFINITY;
     let maxX = Number.NEGATIVE_INFINITY;
     let maxY = Number.NEGATIVE_INFINITY;
-    for (const point of viewportQueryGeometry) {
-      const gridPoint = new Point(point.x + viewportPadding, point.y + viewportPadding);
-      minX = Math.min(minX, gridPoint.x);
-      minY = Math.min(minY, gridPoint.y);
-      maxX = Math.max(maxX, gridPoint.x);
-      maxY = Math.max(maxY, gridPoint.y);
-      query.push(gridPoint);
+    for (let i = 0; i < viewportQueryGeometry.length; i++) {
+      let { x, y } = viewportQueryGeometry[i];
+      x += viewportPadding;
+      y += viewportPadding;
+      if (x < minX) {
+        minX = x;
+      }
+      if (x > maxX) {
+        maxX = x;
+      }
+      if (y < minY) {
+        minY = y;
+      }
+      if (y > maxY) {
+        maxY = y;
+      }
+      query[i] = { x, y };
     }
 
     const features = this.grid.query(minX, minY, maxX, maxY).concat(this.ignoredGrid.query(minX, minY, maxX, maxY));
@@ -288,10 +296,10 @@ class CollisionIndex {
       // distinction doesn't matter as much, and box geometry is easier
       // to work with.
       const bbox = [
-        new Point(feature.x1, feature.y1),
-        new Point(feature.x2, feature.y1),
-        new Point(feature.x2, feature.y2),
-        new Point(feature.x1, feature.y2)
+        { x: feature.x1, y: feature.y1 },
+        { x: feature.x2, y: feature.y1 },
+        { x: feature.x2, y: feature.y2 },
+        { x: feature.x1, y: feature.y2 }
       ];
       if (!polygonIntersectsPolygon(query, bbox)) {
         continue;
@@ -343,19 +351,19 @@ class CollisionIndex {
   projectPoint(posMatrix, x, y) {
     const p = [x, y, 0, 1];
     projection.xyTransformMat4(p, p, posMatrix);
-    return new Point(
-      ((p[0] / p[3] + 1) / 2) * this.transform.width + viewportPadding,
-      ((-p[1] / p[3] + 1) / 2) * this.transform.height + viewportPadding
-    );
+    return {
+      x: ((p[0] / p[3] + 1) / 2) * this.transform.width + viewportPadding,
+      y: ((-p[1] / p[3] + 1) / 2) * this.transform.height + viewportPadding
+    };
   }
 
   projectAndGetPerspectiveRatio(posMatrix, x, y) {
     const p = [x, y, 0, 1];
     projection.xyTransformMat4(p, p, posMatrix);
-    const a = new Point(
-      ((p[0] / p[3] + 1) / 2) * this.transform.width + viewportPadding,
-      ((-p[1] / p[3] + 1) / 2) * this.transform.height + viewportPadding
-    );
+    const a = {
+      x: ((p[0] / p[3] + 1) / 2) * this.transform.width + viewportPadding,
+      y: ((-p[1] / p[3] + 1) / 2) * this.transform.height + viewportPadding
+    };
     return {
       point: a,
       // See perspective ratio comment in symbol_sdf.vertex
@@ -379,5 +387,3 @@ class CollisionIndex {
 function markCollisionCircleUsed(collisionCircles, index, used) {
   collisionCircles[index + 4] = used ? 1 : 0;
 }
-
-export default CollisionIndex;

package/src/symbol/get_anchors.js

@@ -1,3 +1,4 @@
+import { angleTo, dist } from '@mapwhit/point-geometry';
 import Anchor from '../symbol/anchor.js';
 import interpolate from '../util/interpolate.js';
 import checkMaxAngle from './check_max_angle.js';
@@ -5,7 +6,7 @@ import checkMaxAngle from './check_max_angle.js';
 function getLineLength(line) {
   let lineLength = 0;
   for (let k = 0; k < line.length - 1; k++) {
-    lineLength += line[k].dist(line[k + 1]);
+    lineLength += dist(line[k], line[k + 1]);
   }
   return lineLength;
 }
@@ -32,7 +33,7 @@ export function getCenterAnchor(line, maxAngle, shapedText, shapedIcon, glyphSiz
     const a = line[i];
     const b = line[i + 1];
 
-    const segmentDistance = a.dist(b);
+    const segmentDistance = dist(a, b);
 
     if (prevDistance + segmentDistance > centerDistance) {
       // The center is on this segment
@@ -40,7 +41,7 @@ export function getCenterAnchor(line, maxAngle, shapedText, shapedIcon, glyphSiz
       const x = interpolate(a.x, b.x, t);
       const y = interpolate(a.y, b.y, t);
 
-      const anchor = new Anchor(x, y, b.angleTo(a), i);
+      const anchor = new Anchor(x, y, angleTo(b, a), i);
       anchor._round();
       if (!angleWindowSize || checkMaxAngle(line, anchor, labelLength, angleWindowSize, maxAngle)) {
         return anchor;
@@ -117,8 +118,8 @@ function resample(
     const a = line[i];
     const b = line[i + 1];
 
-    const segmentDist = a.dist(b);
-    const angle = b.angleTo(a);
+    const segmentDist = dist(a, b);
+    const angle = angleTo(b, a);
 
     while (markedDistance + spacing < distance + segmentDist) {
       markedDistance += spacing;

package/src/symbol/projection.js

@@ -1,5 +1,5 @@
 import glMatrix from '@mapbox/gl-matrix';
-import Point from '@mapbox/point-geometry';
+import { Point } from '@mapwhit/point-geometry';
 import { addDynamicAttributes } from '../data/bucket/symbol_bucket.js';
 import properties from '../style/style_layer/symbol_style_layer_properties.js';
 import { WritingMode } from '../symbol/shaping.js';
@@ -448,10 +448,10 @@ function projectTruncatedLineSegment(
   // point near the plane of the camera. We wouldn't be able to render the label anyway once it crossed the
   // plane of the camera.
   const projectedUnitVertex = project(
-    previousTilePoint.add(previousTilePoint.sub(currentTilePoint)._unit()),
+    Point.clone(previousTilePoint)._add(Point.clone(previousTilePoint)._sub(currentTilePoint)._unit()),
     projectionMatrix
   ).point;
-  const projectedUnitSegment = previousProjectedPoint.sub(projectedUnitVertex);
+  const projectedUnitSegment = Point.clone(previousProjectedPoint)._sub(projectedUnitVertex);
 
   return previousProjectedPoint.add(projectedUnitSegment._mult(minimumLength / projectedUnitSegment.mag()));
 }

package/src/symbol/quads.js

@@ -1,4 +1,4 @@
-import Point from '@mapbox/point-geometry';
+import { Point } from '@mapwhit/point-geometry';
 import { GLYPH_PBF_BORDER } from '../style/parse_glyph_pbf.js';
 
 /**

package/src/symbol/symbol_layout.js

@@ -1,4 +1,4 @@
-import { findPoleOfInaccessibility } from '@mapwhit/geometry';
+import { clipLine, findPoleOfInaccessibility } from '@mapwhit/geometry';
 import murmur3 from 'murmurhash-js';
 import SymbolBucket from '../data/bucket/symbol_bucket.js';
 import EXTENT from '../data/extent.js';
@@ -7,7 +7,6 @@ import classifyRings from '../util/classify_rings.js';
 import { allowsLetterSpacing, allowsVerticalWritingMode } from '../util/script_detection.js';
 import warn from '../util/warn.js';
 import Anchor from './anchor.js';
-import clipLine from './clip_line.js';
 import CollisionFeature from './collision_feature.js';
 import { getAnchors, getCenterAnchor } from './get_anchors.js';
 import { getGlyphQuads, getIconQuads } from './quads.js';

package/src/ui/camera.js

@@ -1,5 +1,5 @@
-import Point from '@mapbox/point-geometry';
 import { Event, Evented } from '@mapwhit/events';
+import { Point } from '@mapwhit/point-geometry';
 import LngLat from '../geo/lng_lat.js';
 import LngLatBounds from '../geo/lng_lat_bounds.js';
 import browser from '../util/browser.js';

package/src/ui/map.js

@@ -1,4 +1,3 @@
-import Point from '@mapbox/point-geometry';
 import { ErrorEvent, Event } from '@mapwhit/events';
 import LngLat from '../geo/lng_lat.js';
 import LngLatBounds from '../geo/lng_lat_bounds.js';
@@ -287,10 +286,10 @@ class Map extends Camera {
    */
   getBounds() {
     return new LngLatBounds()
-      .extend(this.transform.pointLocation(new Point(0, 0)))
-      .extend(this.transform.pointLocation(new Point(this.transform.width, 0)))
-      .extend(this.transform.pointLocation(new Point(this.transform.width, this.transform.height)))
-      .extend(this.transform.pointLocation(new Point(0, this.transform.height)));
+      .extend(this.transform.pointLocation({ x: 0, y: 0 }))
+      .extend(this.transform.pointLocation({ x: this.transform.width, y: 0 }))
+      .extend(this.transform.pointLocation({ x: this.transform.width, y: this.transform.height }))
+      .extend(this.transform.pointLocation({ x: 0, y: this.transform.height }));
   }
 
   /**
@@ -453,7 +452,7 @@ class Map extends Camera {
    * @see [Show polygon information on click](https://www.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/)
    */
   unproject(point) {
-    return this.transform.pointLocation(Point.convert(point));
+    return this.transform.pointLocation(toPoint(point));
   }
 
   /**
@@ -577,33 +576,26 @@ class Map extends Camera {
     }
 
     return this.style.queryRenderedFeatures(this._makeQueryGeometry(geometry), options, this.transform) || [];
-
-    function isPointLike(input) {
-      return input instanceof Point || Array.isArray(input);
-    }
   }
 
-  _makeQueryGeometry(pointOrBox) {
-    if (pointOrBox === undefined) {
-      // bounds was omitted: use full viewport
-      pointOrBox = [Point.convert([0, 0]), Point.convert([this.transform.width, this.transform.height])];
-    }
-
+  _makeQueryGeometry(
+    pointOrBox = [
+      { x: 0, y: 0 },
+      { x: this.transform.width, y: this.transform.height }
+    ]
+  ) {
     let queryGeometry;
 
-    if (pointOrBox instanceof Point || typeof pointOrBox[0] === 'number') {
-      const point = Point.convert(pointOrBox);
-      queryGeometry = [point];
+    if (typeof pointOrBox.x === 'number' || typeof pointOrBox[0] === 'number') {
+      queryGeometry = [toPoint(pointOrBox)];
     } else {
-      const box = [Point.convert(pointOrBox[0]), Point.convert(pointOrBox[1])];
-      queryGeometry = [box[0], new Point(box[1].x, box[0].y), box[1], new Point(box[0].x, box[1].y), box[0]];
+      const box = [toPoint(pointOrBox[0]), toPoint(pointOrBox[1])];
+      queryGeometry = [box[0], { x: box[1].x, y: box[0].y }, box[1], { x: box[0].x, y: box[1].y }, box[0]];
     }
 
     return {
       viewport: queryGeometry,
-      worldCoordinate: queryGeometry.map(p => {
-        return this.transform.pointCoordinate(p);
-      })
+      worldCoordinate: queryGeometry.map(p => this.transform.pointCoordinate(p))
     };
   }
 
@@ -1558,6 +1550,14 @@ function removeNode(node) {
   }
 }
 
+function toPoint(p) {
+  return Array.isArray(p) ? { x: p[0], y: p[1] } : p;
+}
+
+function isPointLike(input) {
+  return Array.isArray(input) || (typeof input.x === 'number' && typeof input.y === 'number');
+}
+
 /**
  * Interface for interactive controls added to the map. This is an
  * specification for implementers to model: it is not

package/src/util/classify_rings.js

@@ -2,7 +2,7 @@ import { calculateSignedArea } from '@mapwhit/geometry';
 import quickselect from 'quickselect';
 
 // classifies an array of rings into polygons with outer rings and holes
-export default function classifyRings(rings, maxRings) {
+export default function classifyRings(rings, maxRings = -1) {
   if (rings.length <= 1) {
     return [rings];
   }
@@ -19,9 +19,7 @@ export default function classifyRings(rings, maxRings) {
 
     ring.area = Math.abs(area);
 
-    if (ccw === undefined) {
-      ccw = area < 0;
-    }
+    ccw ??= area < 0;
 
     if (ccw === area < 0) {
       append(polygon);

package/src/util/vectortile_to_geojson.js

@@ -1,11 +1,16 @@
-class Feature {
+import { VectorTileFeature } from '@mapwhit/vector-tile';
+import classifyRings from './classify_rings.js';
+
+export default class GeoJSONFeature {
+  #vectorTileFeature;
+  #geometry;
+  #xyz;
+
   constructor(vectorTileFeature, z, x, y) {
     this.type = 'Feature';
 
-    this._vectorTileFeature = vectorTileFeature;
-    vectorTileFeature._z = z;
-    vectorTileFeature._x = x;
-    vectorTileFeature._y = y;
+    this.#vectorTileFeature = vectorTileFeature;
+    this.#xyz = { z, x, y };
 
     this.properties = vectorTileFeature.properties;
 
@@ -15,32 +20,66 @@ class Feature {
   }
 
   get geometry() {
-    if (this._geometry === undefined) {
-      this._geometry = this._vectorTileFeature.toGeoJSON(
-        this._vectorTileFeature._x,
-        this._vectorTileFeature._y,
-        this._vectorTileFeature._z
-      ).geometry;
+    this.#geometry ??= toGeoJSONGeometry(this.#vectorTileFeature, this.#xyz);
+    return this.#geometry;
+  }
+}
+
+const invPi = 360 / Math.PI;
+
+function toGeoJSONGeometry(vtf, { x, y, z }) {
+  const size = vtf.extent * 2 ** z;
+  const scale = 360 / size;
+  const x0 = vtf.extent * x;
+  const y0 = vtf.extent * y;
+  let coords = vtf.loadGeometry();
+  let type = VectorTileFeature.types[vtf.type];
+
+  switch (vtf.type) {
+    case 1: {
+      const points = new Array(coords.length);
+      for (let i = 0; i < coords.length; i++) {
+        points[i] = coords[i][0];
+      }
+      coords = points;
+      project(coords);
+      break;
     }
-    return this._geometry;
+
+    case 2:
+      for (let i = 0; i < coords.length; i++) {
+        project(coords[i]);
+      }
+      break;
+
+    case 3:
+      coords = classifyRings(coords);
+      for (let i = 0; i < coords.length; i++) {
+        for (let j = 0; j < coords[i].length; j++) {
+          project(coords[i][j]);
+        }
+      }
+      break;
   }
 
-  set geometry(g) {
-    this._geometry = g;
+  if (coords.length === 1) {
+    coords = coords[0];
+  } else {
+    type = `Multi${type}`;
   }
 
-  toJSON() {
-    const json = {
-      geometry: this.geometry
-    };
-    for (const i in this) {
-      if (i === '_geometry' || i === '_vectorTileFeature') {
-        continue;
-      }
-      json[i] = this[i];
+  return {
+    type,
+    coordinates: coords
+  };
+
+  function project(line) {
+    for (let i = 0; i < line.length; i++) {
+      const { x, y } = line[i];
+      const lon = (x + x0) * scale - 180;
+      const y2 = 180 - (y + y0) * scale;
+      const lat = invPi * Math.atan(Math.exp((y2 * Math.PI) / 180)) - 90;
+      line[i] = [lon, lat];
     }
-    return json;
   }
 }
-
-export default Feature;

package/src/symbol/clip_line.js

@@ -1,72 +0,0 @@
-import Point from '@mapbox/point-geometry';
-export default clipLine;
-
-/**
- * Returns the part of a multiline that intersects with the provided rectangular box.
- *
- * @param lines
- * @param x1 the left edge of the box
- * @param y1 the top edge of the box
- * @param x2 the right edge of the box
- * @param y2 the bottom edge of the box
- * @returns lines
- * @private
- */
-function clipLine(lines, x1, y1, x2, y2) {
-  const clippedLines = [];
-
-  for (let l = 0; l < lines.length; l++) {
-    const line = lines[l];
-    let clippedLine;
-
-    for (let i = 0; i < line.length - 1; i++) {
-      let p0 = line[i];
-      let p1 = line[i + 1];
-
-      if (p0.x < x1 && p1.x < x1) {
-        continue;
-      }
-      if (p0.x < x1) {
-        p0 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
-      } else if (p1.x < x1) {
-        p1 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
-      }
-
-      if (p0.y < y1 && p1.y < y1) {
-        continue;
-      }
-      if (p0.y < y1) {
-        p0 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
-      } else if (p1.y < y1) {
-        p1 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
-      }
-
-      if (p0.x >= x2 && p1.x >= x2) {
-        continue;
-      }
-      if (p0.x >= x2) {
-        p0 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
-      } else if (p1.x >= x2) {
-        p1 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
-      }
-
-      if (p0.y >= y2 && p1.y >= y2) {
-        continue;
-      }
-      if (p0.y >= y2) {
-        p0 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
-      } else if (p1.y >= y2) {
-        p1 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
-      }
-
-      if (!clippedLine || !p0.equals(clippedLine[clippedLine.length - 1])) {
-        clippedLine = [p0];
-        clippedLines.push(clippedLine);
-      }
-
-      clippedLine.push(p1);
-    }
-  }
-
-  return clippedLines;
-}