add(worldview) text montage debugger

visgl · Oct 13, 2021 · 8f1e183 · 8f1e183
1 parent 4cbd790
commit 8f1e183
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 10 deletions.
diff --git a/examples/worldview/src/app/App.js b/examples/worldview/src/app/App.js
@@ -78,14 +78,14 @@ const WindowSize = styled.div`
 
 const KEPLER_MAP_ID = 'map';
 const selectMapStyle = createSelectMapStyle(KEPLER_MAP_ID);
-const sceneLayers = [];
+let sceneLayers = [];
 const App = ({}) => {
-  useScene();
+  sceneLayers = useScene();
   const keplerDeckLayers = useKeplerDeckLayers(KEPLER_MAP_ID);
   const deckProps = useMemo(() => {
     return {
-      // layers: [...keplerDeckLayers, ...sceneLayers]
-      layers: [...sceneLayers, ...keplerDeckLayers]
+      layers: [...keplerDeckLayers, ...sceneLayers]
+      // layers: [...sceneLayers, ...keplerDeckLayers]
       // layers: []
       // layers: keplerDeckLayers
     };

diff --git a/examples/worldview/src/features/map/Map.js b/examples/worldview/src/features/map/Map.js
@@ -61,7 +61,7 @@ export class Map extends Component {
 
   _resizeVideo() {
     const {previewSize, resolution} = this.props;
-    this._setDevicePixelRatio(nearestEven(resolution.width / previewSize.width));
+    this._setDevicePixelRatio(nearestEven(resolution.width / previewSize.width, 9));
     if (this.mapRef.current) {
       const map = this.mapRef.current.getMap();
       map.resize();

diff --git a/examples/worldview/src/scenes/montage/index.js b/examples/worldview/src/scenes/montage/index.js
@@ -5,16 +5,25 @@ import {useKepler, loadKeplerJson} from '../../features/kepler';
 import {updateViewState} from '../../features/map';
 import {useEffect} from 'react';
 import {WebMercatorViewport} from '@deck.gl/core';
+import {TextLayer} from '@deck.gl/layers';
 import {hold} from 'hubble.gl';
 
 const CENTER = {
-  latitude: 40.76150677393161,
-  longitude: -73.97924658159985,
-  zoom: 17.531339846811306,
+  latitude: 40.76944617081325,
+  longitude: -73.98095085938715,
+  zoom: 17.88047290176511,
   bearing: 0,
   pitch: 0
 };
 
+// const CENTER = {
+//   latitude: 40.76150677393161,
+//   longitude: -73.97924658159985,
+//   zoom: 17.531339846811306,
+//   bearing: 0,
+//   pitch: 0
+// };
+
 function ajacentTile({centerViewState, canvasWidth, canvasHeight, xOffsetScalar, yOffsetScalar}) {
   const viewport = new WebMercatorViewport({
     ...centerViewState,
@@ -41,7 +50,8 @@ function ajacentTile({centerViewState, canvasWidth, canvasHeight, xOffsetScalar,
   const ajacentViewState = {
     ...CENTER,
     longitude: ajacent[0],
-    latitude: ajacent[1]
+    latitude: ajacent[1],
+    label: `${xOffsetScalar}_${yOffsetScalar}`
   };
   return ajacentViewState;
 }
@@ -165,5 +175,26 @@ export const useScene = () => {
     dispatch(formatChange('png'));
   }, []);
 
-  return [];
+  return [
+    new TextLayer({
+      id: 'montage',
+      data: [
+        TOP_LEFT,
+        TOP_MIDDLE,
+        TOP_RIGHT,
+        CENTER_LEFT,
+        CENTER_MIDDLE,
+        CENTER_RIGHT,
+        BOTTOM_LEFT,
+        BOTTOM_MIDDLE,
+        BOTTOM_RIGHT
+      ],
+      getPosition: d => [d.longitude, d.latitude],
+      getText: d => d.label,
+      getColor: d => [255, 255, 255, 255],
+      getSize: 32,
+      getTextAnchor: 'middle',
+      getAlignmentBaseline: 'center'
+    })
+  ];
 };