From 416632c2110aaf202a0f226a8767450fc4dbeefb Mon Sep 17 00:00:00 2001
From: rot1024 <aayhrot@gmail.com>
Date: Mon, 5 Feb 2024 16:55:01 +0900
Subject: [PATCH 1/2] feat: support line string and point click (#13)

---
 src/index.ts | 42 +++++++++++++++++++++++++++++++++++++-----
 src/util.ts  | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 src/util.ts

diff --git a/src/index.ts b/src/index.ts
index b09446d..4b6ada6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,6 +16,7 @@ import {
 import Pbf from "pbf";
 
 import { isFeatureClicked } from "./terria";
+import { isLineStringClicked, isPointClicked } from "./util";
 
 const defaultParseTile = async (url?: string) => {
   const ab = await fetchResourceAsArrayBuffer(url);
@@ -25,6 +26,8 @@ const defaultParseTile = async (url?: string) => {
   const tile = parseMVT(ab);
   return tile;
 };
+const defaultPickPointRadius = 5;
+const defaultPickLineWidth = 5;
 
 type TileCoordinates = {
   x: number;
@@ -56,6 +59,8 @@ export type ImageryProviderOption = {
   style?: FeatureHandler<Style>;
   onSelectFeature?: FeatureHandler<ImageryLayerFeatureInfo | void>;
   parseTile?: (url?: string) => Promise<VectorTile | undefined>;
+  pickPointRadius?: number | FeatureHandler<number>;
+  pickLineWidth?: number | FeatureHandler<number>;
 };
 
 type ImageryProviderTrait = ImageryProvider;
@@ -76,6 +81,8 @@ export class MVTImageryProvider implements ImageryProviderTrait {
   private _style?: FeatureHandler<Style>;
   private _onSelectFeature?: FeatureHandler<ImageryLayerFeatureInfo | void>;
   private _parseTile: (url?: string) => Promise<VectorTile | undefined>;
+  private _pickPointRadius: number | FeatureHandler<number>;
+  private _pickLineWidth: number | FeatureHandler<number>;
 
   // Internal variables
   private readonly _tilingScheme: WebMercatorTilingScheme;
@@ -99,6 +106,8 @@ export class MVTImageryProvider implements ImageryProviderTrait {
     this._style = options.style;
     this._onSelectFeature = options.onSelectFeature;
     this._parseTile = options.parseTile ?? defaultParseTile;
+    this._pickPointRadius = options.pickPointRadius ?? defaultPickPointRadius;
+    this._pickLineWidth = options.pickLineWidth ?? defaultPickLineWidth;
 
     this._tilingScheme = new WebMercatorTilingScheme();
 
@@ -435,10 +444,9 @@ export class MVTImageryProvider implements ImageryProviderTrait {
         new Cartesian2(),
       );
     };
-
-    const features: ImageryLayerFeatureInfo[] = [];
-
     const vt_range = [0, layer.extent - 1];
+    const pixelScaleX = (vt_range[1] - vt_range[0]) / this._tileWidth;
+    // const pixelScaleY = (vt_range[1] - vt_range[0]) / this._tileHeight;
     const pos = map(
       Cartesian2.fromCartesian3(
         this._tilingScheme.projection.project(new Cartographic(longitude, latitude)),
@@ -450,11 +458,24 @@ export class MVTImageryProvider implements ImageryProviderTrait {
     );
     const point = new Point(pos.x, pos.y);
 
+    const features: ImageryLayerFeatureInfo[] = [];
     for (let i = 0; i < layer.length; i++) {
       const feature = layer.feature(i);
       if (
-        VectorTileFeature.types[feature.type] === "Polygon" &&
-        isFeatureClicked(feature.loadGeometry(), point)
+        (VectorTileFeature.types[feature.type] === "Polygon" &&
+          isFeatureClicked(feature.loadGeometry(), point)) ||
+        (VectorTileFeature.types[feature.type] === "LineString" &&
+          isLineStringClicked(
+            feature.loadGeometry(),
+            point,
+            featureHandlerOrNumber(this._pickLineWidth, feature, requestedTile) * pixelScaleX,
+          )) ||
+        (VectorTileFeature.types[feature.type] === "Point" &&
+          isPointClicked(
+            feature.loadGeometry(),
+            point,
+            featureHandlerOrNumber(this._pickPointRadius, feature, requestedTile) * pixelScaleX,
+          ))
       ) {
         if (this._onSelectFeature) {
           const feat = this._onSelectFeature(feature, requestedTile);
@@ -524,3 +545,14 @@ const fetchResourceAsArrayBuffer = (url?: string) => {
 
   return Resource.fetchArrayBuffer({ url })?.catch(() => {});
 };
+
+function featureHandlerOrNumber(
+  f: FeatureHandler<number> | number,
+  feature: VectorTileFeature,
+  tileCoords: TileCoordinates,
+): number {
+  if (typeof f === "number") {
+    return f;
+  }
+  return f(feature, tileCoords);
+}
diff --git a/src/util.ts b/src/util.ts
new file mode 100644
index 0000000..8552536
--- /dev/null
+++ b/src/util.ts
@@ -0,0 +1,49 @@
+import Point from "@mapbox/point-geometry";
+
+const tempPoint = new Point(0, 0);
+
+export function isPointClicked(feature: Point[][], clicked: Point, radius: number): boolean {
+  if (feature.length === 0 || feature[0].length === 0) return false;
+  const point = feature[0][0];
+  const distSquared = point.distSqr(clicked);
+  return distSquared <= radius ** 2;
+}
+
+export function isLineStringClicked(feature: Point[][], mouse: Point, lineWidth: number): boolean {
+  if (feature.length === 0) return false;
+  const points = feature[0];
+  const dist = lineWidth / 2;
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const start = points[i];
+    const end = points[i + 1];
+    if (isLineSegmentClicked(start, end, mouse, dist, tempPoint)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function isLineSegmentClicked(
+  start: Point,
+  end: Point,
+  mouse: Point,
+  dist: number,
+  tempPoint = new Point(0, 0),
+): boolean {
+  const lineLengthSquared = start.distSqr(end);
+  if (lineLengthSquared === 0) return false;
+
+  const t =
+    ((mouse.x - start.x) * (end.x - start.x) + (mouse.y - start.y) * (end.y - start.y)) /
+    lineLengthSquared;
+  const tClamped = Math.max(0, Math.min(1, t));
+
+  const nearest = tempPoint;
+  nearest.x = start.x + tClamped * (end.x - start.x);
+  nearest.y = start.y + tClamped * (end.y - start.y);
+
+  const distanceSquared = mouse.distSqr(nearest);
+  return distanceSquared <= dist ** 2;
+}

From 23a6ddcbfb7985916db306cad28ee69b7f171099 Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Mon, 5 Feb 2024 16:56:56 +0900
Subject: [PATCH 2/2] 1.4.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f70a768..bf971aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cesium-mvt-imagery-provider",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Custom ImageryProvider for mapbox vector tile",
   "source": "./src/index.ts",
   "main": "./dist/cesium-mvt-imagery-provider.umd.js",