Merge pull request #26 from 2gis/TILES-5566

TILES-5566 fix text layer textured flip
2gis · Sep 1, 2023 · 96b82e3 · 96b82e3
2 parents 6f798e9 + 3feb347
commit 96b82e3
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 43 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -17,7 +17,7 @@
     </head>
     <body>
         <div id="container"></div>
-        <script src="map.js"></script>
+        <script src="https://mapgl.2gis.com/api/js/v1"></script>
         <script src="demo.js"></script>
     </body>
 </html>
diff --git a/demo/index.ts b/demo/index.ts
@@ -1,5 +1,6 @@
 import { Deck2gisLayer } from '../src';
 import { HeatmapLayer, HexagonLayer } from '@deck.gl/aggregation-layers/typed';
+import { TextLayer } from '@deck.gl/layers';
 import { Color, Deck } from '@deck.gl/core/typed';
 import { data } from './data';
 import { initDeck2gisProps } from '../src/utils';
@@ -14,18 +15,20 @@ const map = new mapgl.Map('container', {
     webglVersion: 2,
 });
 
-const deck = new Deck(initDeck2gisProps(map, { antialiasing: 'msaa' }));
-map.once('ready', () => {
-    initDeckGL();
+const deck = new Deck(initDeck2gisProps(map, { antialiasing: 'none' }));
+map.once('styleload', () => {
+    setTimeout(() => initDeckGL(), 3000);
 });
 
 function initDeckGL() {
-    const deckLayer = createHeatmapLayer(data);
-    map.addLayer(deckLayer);
+    const deckLayer1 = createHeatmapLayer(data);
+    map.addLayer(deckLayer1);
     const deckLayer2 = createHexagonLayer(data);
     map.addLayer(deckLayer2);
     const deckLayer3 = createHexagonLayer2(data);
     map.addLayer(deckLayer3);
+    const deckLayer4 = createTextlayer(data);
+    map.addLayer(deckLayer4);
 }
 
 const COLOR_RANGE: Color[] = [
@@ -37,6 +40,38 @@ const COLOR_RANGE: Color[] = [
     [209, 55, 78],
 ];
 
+function getCharacters() {
+    const charSet = 'МмЛлРрДдНнKkMmКкМм1234567890'.split('');
+
+    for (let i = 32; i < 128; i++) {
+        // eslint-disable-next-line functional/immutable-data
+        charSet.push(String.fromCharCode(i));
+    }
+
+    return charSet;
+}
+
+export const characterSet = getCharacters();
+
+function createTextlayer(data) {
+    const layer = new Deck2gisLayer<TextLayer>({
+        id: 'text-layer',
+        data,
+        deck,
+        type: TextLayer,
+        characterSet,
+        fontFamily: 'SBSansText, Helvetica, Arial, sans-serif',
+        getBackgroundColor: [66, 0, 255, 66],
+        getColor: [255, 128, 0],
+        getPosition: (d) => [d.point.lon, d.point.lat],
+        getText: (d) => '' + d.values.capacity,
+        getSize: 14,
+        background: true,
+    });
+
+    return layer;
+}
+
 function createHeatmapLayer(data) {
     const layer = new Deck2gisLayer<HeatmapLayer>({
         id: 'deckgl-HeatmapLayer',
@@ -59,12 +94,11 @@ function createHexagonLayer(data) {
         type: HexagonLayer,
         data,
         parameters: { depthTest: true },
-        opacity: 1,
+        opacity: 0.4,
         radius: 380,
         elevationScale: 2,
         getPosition: (d: any) => [d.point.lon, d.point.lat],
         extruded: true,
-        antialiasing: true,
     });
 
     return layer;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@2gis/deck2gis-layer",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "",
   "main": "dist/deck2gislayer.js",
   "typings": "dist/types/index.d.ts",

diff --git a/src/deckgl2gisLayer.ts b/src/deckgl2gisLayer.ts
@@ -105,30 +105,37 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
      * MapGL calls this method after adding a layer to a map.
      */
     public onAdd = () => {
-        if (!this.map && this.props?.deck && !this.isDestroyed) {
-            const deck = this.props?.deck;
-            const map = (this.props.deck.props as CustomRenderInternalProps)._2gisData._2gisMap;
-            this.map = map;
-            const gl = (this.gl = map.getWebGLContext());
-            if ((map as any).__deck) {
-                this.deck = (map as any).__deck;
-                this.renderTarget = (this.deck as any).props._2glRenderTarget;
-                this.msaaFrameBuffer = (this.deck as any).props._2glMsaaFrameBuffer;
+        const map: Map = (this.props?.deck.props as CustomRenderInternalProps)._2gisData._2gisMap;
+
+        // fix wrong initRender use when add layer in map on move
+        const initBeforeAdd = () => {
+            if (!this.map && this.props?.deck && !this.isDestroyed) {
+                const deck = this.props?.deck;
+                this.map = map;
+                const gl = (this.gl = map.getWebGLContext());
+                if ((map as any).__deck) {
+                    this.deck = (map as any).__deck;
+                    this.renderTarget = (this.deck as any).props._2glRenderTarget;
+                    this.msaaFrameBuffer = (this.deck as any).props._2glMsaaFrameBuffer;
+                }
+                if (!this.renderTarget || !this.deck) {
+                    this.initRenderTarget(gl, map, deck);
+                }
+                if (this.deck) {
+                    this.program = (this.deck as any).props._2glProgram;
+                    this.vao = (this.deck as any).props._2glVao;
+                }
             }
-            if (!this.renderTarget || !this.deck) {
-                this.initRenderTarget(gl, map, deck);
-            }
-            if (this.deck) {
-                this.program = (this.deck as any).props._2glProgram;
-                this.vao = (this.deck as any).props._2glVao;
+
+            if (this.deck && !this.isDestroyed) {
+                addLayer(this.deck, this);
             }
-        }
+        };
 
-        if (this.deck && !this.isDestroyed) {
-            addLayer(this.deck, this);
-        }
+        if ((map as any).__deck) {
+            initBeforeAdd();
+        } else [map.once('idle', () => initBeforeAdd())];
     };
-
     /**
      * @hidden
      * @internal

diff --git a/src/utils.ts b/src/utils.ts
@@ -118,7 +118,7 @@ export function drawLayer(deck: Deck, map: Map, layer: Deck2gisLayer<any>): void
         return;
     }
 
-    stateBinder(map, layer);
+    stateBinder(map.getWebGLContext(), layer);
 
     deck._drawLayers('2gis-repaint', {
         viewports: [currentViewport],
@@ -228,6 +228,8 @@ function updateLayers(deck: Deck): void {
     if (deck['layerManager']) {
         const layers: Layer<any>[] = [];
         let layerIndex = 0;
+        const gl = deck.props.gl;
+        gl && stateBinder(gl);
         (deck.props as CustomRenderInternalProps)._2gisData._2gisCustomLayers.forEach(
             (deckLayer) => {
                 const LayerType = deckLayer.props.type;
@@ -350,13 +352,16 @@ export function initDeck2gisProps(map: Map, deckProps?: CustomRenderProps): Deck
  * @hidden
  * @internal
  */
-function stateBinder(map: Map, layer: Deck2gisLayer<any>) {
-    const gl = map.getWebGLContext();
-    if (!layer.props?.parameters?.cullFaceEnabled) {
+function stateBinder(
+    gl: WebGLRenderingContext | WebGL2RenderingContext,
+    layer?: Deck2gisLayer<any>,
+) {
+    if (!layer?.props?.parameters?.cullFaceEnabled) {
         gl.disable(gl.CULL_FACE);
     }
     gl.clearDepth(1);
     gl.clear(gl.DEPTH_BUFFER_BIT);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
 }
 
 /**