Stub Function To Find Pixel Color

jbeuckm · Apr 7, 2022 · 30dfd30 · 30dfd30
1 parent 4cf892e
commit 30dfd30
Show file tree

Hide file tree

Showing 5 changed files with 2,460 additions and 946 deletions.
diff --git a/debug/query-raster.html b/debug/query-raster.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Mapbox GL JS debug page</title>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, user-scalable=no"
+        />
+        <link rel="stylesheet" href="../dist/mapbox-gl.css" />
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+            }
+            html,
+            body,
+            #map {
+                height: 100%;
+            }
+            #checkbox {
+                position: absolute;
+                top: 0;
+                left: 0;
+                padding: 10px;
+                background: #fff;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="map"></div>
+        <div id="checkbox">
+            <label
+                ><input id="terrain" type="checkbox" checked /> terrain</label
+            >
+        </div>
+
+        <script src="../dist/mapbox-gl-dev.js"></script>
+        <script src="../debug/access_token_generated.js"></script>
+        <script>
+            var map = (window.map = new mapboxgl.Map({
+                container: "map",
+                zoom: 12.5,
+                center: [-77.01866, 38.888],
+                style: "mapbox://styles/mapbox/satellite-v9",
+                hash: true,
+            }));
+            map.on("load", function () {
+                map.addSource("mapbox-dem", {
+                    type: "raster-dem",
+                    url: "mapbox://mapbox.terrain-rgb",
+                    tileSize: 512,
+                    maxzoom: 14,
+                });
+                document.getElementById("terrain").onclick();
+
+                map.on("mousemove", (event) => {
+                    map.queryRasterSource("mapbox-dem", event.point);
+                });
+            });
+
+            document.getElementById("terrain").onclick = function () {
+                map.setTerrain(
+                    this.checked ? { source: "mapbox-dem" } : undefined
+                );
+            };
+        </script>
+    </body>
+</html>
diff --git a/src/source/query_raster_values.js b/src/source/query_raster_values.js
@@ -0,0 +1,80 @@
+// @flow
+
+import type SourceCache from "./source_cache.js";
+import type StyleLayer from "../style/style_layer.js";
+import type CollisionIndex from "../symbol/collision_index.js";
+import type Transform from "../geo/transform.js";
+import type { RetainedQueryData } from "../symbol/placement.js";
+import type { FilterSpecification } from "../style-spec/types.js";
+import type { QueryGeometry } from "../style/query_geometry.js";
+import assert from "assert";
+import { mat4 } from "gl-matrix";
+
+import type Point from "@mapbox/point-geometry";
+import type { QueryResult } from "../data/feature_index.js";
+import type { QueryFeature } from "../util/vectortile_to_geojson.js";
+
+/*
+ * Returns a matrix that can be used to convert from tile coordinates to viewport pixel coordinates.
+ */
+function getPixelPosMatrix(transform, tileID) {
+    const t = mat4.identity([]);
+    mat4.scale(t, t, [transform.width * 0.5, -transform.height * 0.5, 1]);
+    mat4.translate(t, t, [1, -1, 0]);
+    mat4.multiply(t, t, transform.calculateProjMatrix(tileID.toUnwrapped()));
+    return Float32Array.from(t);
+}
+
+export function queryRasterSource(
+    sourceCache: SourceCache,
+    styleLayers: { [_: string]: StyleLayer },
+    serializedLayers: { [_: string]: Object },
+    queryGeometry: QueryGeometry,
+    params: {
+        filter: FilterSpecification,
+        layers: Array<string>,
+        availableImages: Array<string>,
+    },
+    transform: Transform,
+    use3DQuery: boolean,
+    visualizeQueryGeometry: boolean = false
+): QueryResult {
+    const tileResults = sourceCache.tilesIn(
+        queryGeometry,
+        use3DQuery,
+        visualizeQueryGeometry
+    );
+    tileResults.sort(sortTilesIn);
+    const results = [];
+    for (const tileResult of tileResults) {
+        results.push({
+            wrappedTileID: tileResult.tile.tileID.wrapped().key,
+            queryResults: tileResult.tile.queryRasterValues(
+                styleLayers,
+                serializedLayers,
+                sourceCache._state,
+                tileResult,
+                params,
+                transform,
+                getPixelPosMatrix(
+                    sourceCache.transform,
+                    tileResult.tile.tileID
+                ),
+                visualizeQueryGeometry
+            ),
+        });
+    }
+
+    return results;
+}
+
+function sortTilesIn(a, b) {
+    const idA = a.tileID;
+    const idB = b.tileID;
+    return (
+        idA.overscaledZ - idB.overscaledZ ||
+        idA.canonical.y - idB.canonical.y ||
+        idA.wrap - idB.wrap ||
+        idA.canonical.x - idB.canonical.x
+    );
+}