Only check if point is in extent for MultiPoint and TextLabels

src/ol/render/canvas/Builder.js

@@ -6,7 +6,12 @@ import GeometryType from '../../geom/GeometryType.js';
 import Relationship from '../../extent/Relationship.js';
 import VectorContext from '../VectorContext.js';
 import {asColorLike} from '../../colorlike.js';
-import {buffer, clone, coordinateRelationship} from '../../extent.js';
+import {
+  buffer,
+  clone,
+  containsCoordinate,
+  coordinateRelationship,
+} from '../../extent.js';
 import {
   defaultFillStyle,
   defaultLineCap,
@@ -139,6 +144,30 @@ class CanvasBuilder extends VectorContext {
         });
   }
 
+  /**
+   * @param {Array<number>} flatCoordinates Flat coordinates.
+   * @param {number} offset Offset.
+   * @param {number} end End.
+   * @param {number} stride Stride.
+   * @protected
+   * @return {number} My end
+   */
+  appendFlatPointCoordinates(flatCoordinates, offset, end, stride) {
+    const extent = this.getBufferedMaxExtent();
+    const tmpCoord = this.tmpCoordinate_;
+    const coordinates = this.coordinates;
+    let myEnd = coordinates.length;
+    for (let i = offset; i < end; i += stride) {
+      tmpCoord[0] = flatCoordinates[i];
+      tmpCoord[1] = flatCoordinates[i + 1];
+      if (containsCoordinate(extent, tmpCoord)) {
+        coordinates[myEnd++] = tmpCoord[0];
+        coordinates[myEnd++] = tmpCoord[1];
+      }
+    }
+    return myEnd;
+  }
+
   /**
    * @param {Array<number>} flatCoordinates Flat coordinates.
    * @param {number} offset Offset.
@@ -285,10 +314,7 @@ class CanvasBuilder extends VectorContext {
         renderer,
         inflateCoordinatesArray,
       ]);
-    } else if (
-      type == GeometryType.LINE_STRING ||
-      type == GeometryType.MULTI_POINT
-    ) {
+    } else if (type == GeometryType.LINE_STRING) {
       flatCoordinates = geometry.getFlatCoordinates();
       builderEnd = this.appendFlatLineCoordinates(
         flatCoordinates,
@@ -306,6 +332,24 @@ class CanvasBuilder extends VectorContext {
         renderer,
         inflateCoordinates,
       ]);
+    } else if (type == GeometryType.MULTI_POINT) {
+      flatCoordinates = geometry.getFlatCoordinates();
+      builderEnd = this.appendFlatPointCoordinates(
+        flatCoordinates,
+        0,
+        flatCoordinates.length,
+        stride
+      );
+      if (builderEnd > builderBegin) {
+        this.instructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnd,
+          geometry,
+          renderer,
+          inflateCoordinates,
+        ]);
+      }
     } else if (type == GeometryType.POINT) {
       flatCoordinates = geometry.getFlatCoordinates();
       this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);

src/ol/render/canvas/ImageBuilder.js

@@ -99,25 +99,6 @@ class CanvasImageBuilder extends CanvasBuilder {
     this.width_ = undefined;
   }
 
-  /**
-   * @param {Array<number>} flatCoordinates Flat coordinates.
-   * @param {number} offset Offset.
-   * @param {number} end End.
-   * @param {number} stride Stride.
-   * @private
-   * @return {number} My end.
-   */
-  drawCoordinates_(flatCoordinates, offset, end, stride) {
-    return this.appendFlatLineCoordinates(
-      flatCoordinates,
-      offset,
-      end,
-      stride,
-      false,
-      false
-    );
-  }
-
   /**
    * @param {import("../../geom/Point.js").default|import("../Feature.js").default} pointGeometry Point geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
@@ -130,7 +111,7 @@ class CanvasImageBuilder extends CanvasBuilder {
     const flatCoordinates = pointGeometry.getFlatCoordinates();
     const stride = pointGeometry.getStride();
     const myBegin = this.coordinates.length;
-    const myEnd = this.drawCoordinates_(
+    const myEnd = this.appendFlatPointCoordinates(
       flatCoordinates,
       0,
       flatCoordinates.length,
@@ -190,7 +171,7 @@ class CanvasImageBuilder extends CanvasBuilder {
     const flatCoordinates = multiPointGeometry.getFlatCoordinates();
     const stride = multiPointGeometry.getStride();
     const myBegin = this.coordinates.length;
-    const myEnd = this.drawCoordinates_(
+    const myEnd = this.appendFlatPointCoordinates(
       flatCoordinates,
       0,
       flatCoordinates.length,

src/ol/render/canvas/TextBuilder.js

@@ -276,13 +276,11 @@ class CanvasTextBuilder extends CanvasBuilder {
           break;
         default:
       }
-      end = this.appendFlatLineCoordinates(
+      end = this.appendFlatPointCoordinates(
         flatCoordinates,
         0,
         end,
-        stride,
-        false,
-        false
+        stride
       );
 
       this.saveTextStates_();