visgl / deck.gl

WebGL2 powered visualization framework
https://deck.gl
MIT License
12.2k stars 2.09k forks source link

[Bug] 9.0.1: Deck.pickObject with unproject3D==true returns a 2d coordinate #8704

Closed Jonas-Witt closed 6 months ago

Jonas-Witt commented 7 months ago

Description

After upgrading to 9.0.1 (from 8.9.32), Deck.pickObject does not seem to work correctly anymore with unproject3D==true. It returns a 2d [lng,lat] coordinate instead of a 3d [lng, lat, alt] one. Downgrading back to 8.9.32 fixes it.

Flavors

Expected Behavior

Get a pick with a 3d coordinate [lng, lat, alt]

Steps to Reproduce

index.html

<!doctype html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>deck.gl example</title>
    <style>
    #map {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    </style>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src='app.js'></script>
  </body>
</html>

package.json

{
  "name": "deckgl-example-pure-js-mapbox",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "start": "vite --open",
    "start-local": "vite --config ../../../vite.config.local.mjs",
    "build": "vite build"
  },
  "dependencies": {
    "@deck.gl/core": "9.0.1",
    "@deck.gl/layers": "9.0.1",
    "@deck.gl/mapbox": "9.0.1",
    "mapbox-gl": "3.2.0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

app.js

import { MapboxOverlay as DeckOverlay } from "@deck.gl/mapbox";
import { GeoJsonLayer, ArcLayer } from "@deck.gl/layers";
import mapboxgl from "mapbox-gl";

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const AIR_PORTS =
  "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson";

const map = new mapboxgl.Map({
  container: "map",
  style:
    "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
  center: [0.45, 51.47],
  zoom: 4,
  bearing: 0,
  pitch: 30,
});

const deckOverlay = new DeckOverlay({
  layers: [
    new GeoJsonLayer({
      id: "airports",
      data: AIR_PORTS,
      // Styles
      filled: true,
      pointRadiusMinPixels: 2,
      pointRadiusScale: 2000,
      getPointRadius: (f) => 11 - f.properties.scalerank,
      getFillColor: [200, 0, 80, 180],
      // Interactive props
      pickable: true,
      autoHighlight: true,
      onClick: (info) =>
        // eslint-disable-next-line
        info.object &&
        alert(
          `${info.object.properties.name} (${info.object.properties.abbrev})`
        ),
    }),
    new ArcLayer({
      id: "arcs",
      data: AIR_PORTS,
      dataTransform: (d) =>
        d.features.filter((f) => f.properties.scalerank < 4),
      // Styles
      getSourcePosition: (f) => [-0.4531566, 51.4709959], // London
      getTargetPosition: (f) => f.geometry.coordinates,
      getSourceColor: [0, 128, 200],
      getTargetColor: [200, 0, 80],
      getWidth: 1,
    }),
  ],
});

map.addControl(deckOverlay);
map.addControl(new mapboxgl.NavigationControl());

map.on("mousemove", (event) => {
  const heightPick = deckOverlay.pickObject({
    x: event.point.x,
    y: event.point.y,
    radius: 1,
    layerIds: undefined,
    unproject3D: true,
  });
  console.log(heightPick?.coordinate);
});

Environment

Logs

No response

Pessimistress commented 6 months ago

Fixed in 9.0.4.