From 1fbfcd606f7a8e30344c5954f96bc900f3dd9dc4 Mon Sep 17 00:00:00 2001 From: Andrey Kuznecov Date: Sun, 27 Aug 2023 17:58:10 +0700 Subject: [PATCH 1/4] fix text layer --- demo/index.html | 2 +- demo/index.ts | 30 ++++++++++++++++++++++++++---- src/utils.ts | 10 ++++++---- 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/demo/index.html b/demo/index.html index b59692f..5a4e6a1 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,7 +17,7 @@
- + diff --git a/demo/index.ts b/demo/index.ts index df1f0dc..c107123 100644 --- 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'; @@ -22,10 +23,12 @@ map.once('ready', () => { function initDeckGL() { const deckLayer = createHeatmapLayer(data); map.addLayer(deckLayer); - const deckLayer2 = createHexagonLayer(data); - map.addLayer(deckLayer2); + const deckLayer3 = createHexagonLayer2(data); map.addLayer(deckLayer3); + + const deckLayer2 = createTextlayer(data); + map.addLayer(deckLayer2); } const COLOR_RANGE: Color[] = [ @@ -37,6 +40,26 @@ const COLOR_RANGE: Color[] = [ [209, 55, 78], ]; +function createTextlayer(data) { + const layer = new Deck2gisLayer({ + id: 'text-layer', + data, + deck, + type: TextLayer, + characterSet: 'auto', + 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, + parameters: { depthTest: true }, + }); + + return layer; +} + function createHeatmapLayer(data) { const layer = new Deck2gisLayer({ id: 'deckgl-HeatmapLayer', @@ -59,12 +82,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/src/utils.ts b/src/utils.ts index b0c8198..e73452b 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -118,7 +118,7 @@ export function drawLayer(deck: Deck, map: Map, layer: Deck2gisLayer): 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[] = []; 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,13 @@ export function initDeck2gisProps(map: Map, deckProps?: CustomRenderProps): Deck * @hidden * @internal */ -function stateBinder(map: Map, layer: Deck2gisLayer) { - const gl = map.getWebGLContext(); - if (!layer.props?.parameters?.cullFaceEnabled) { +function stateBinder(gl: WebGLRenderingContext | WebGL2RenderingContext, layer?: Deck2gisLayer) { + 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); } /** From 4ee72818be16d19c8b0495119fc9ae1256f56b17 Mon Sep 17 00:00:00 2001 From: Andrey Kuznecov Date: Sun, 27 Aug 2023 18:07:20 +0700 Subject: [PATCH 2/4] up version --- package-lock.json | 19 +++++++++---------- package.json | 2 +- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 297f34f..1396ded 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,16 @@ { "name": "@2gis/deck2gis-layer", - "version": "1.2.0", + "version": "1.2.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@2gis/deck2gis-layer", - "version": "1.2.0", + "version": "1.2.1", "license": "BSD-2-Clause", "dependencies": { "@deck.gl/core": "8.8.17", - "2gl": "0.10.2", - "fsevents": "2.3.2" + "2gl": "0.10.2" }, "devDependencies": { "@2gis/mapgl": "1.32.1", @@ -2693,9 +2692,9 @@ "license": "ISC" }, "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "hasInstallScript": true, "optional": true, "os": [ @@ -9724,9 +9723,9 @@ "dev": true }, "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "optional": true }, "function-bind": { diff --git a/package.json b/package.json index d645bca..70c1512 100644 --- 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", From 889f1e29a98fec1b5c629fb8cbb84d2422c3e884 Mon Sep 17 00:00:00 2001 From: Andrey Kuznecov Date: Sun, 27 Aug 2023 18:11:19 +0700 Subject: [PATCH 3/4] fix demo --- demo/index.ts | 12 ++++++------ src/utils.ts | 5 ++++- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/demo/index.ts b/demo/index.ts index c107123..3b5a947 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -21,14 +21,14 @@ map.once('ready', () => { }); 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 deckLayer2 = createTextlayer(data); - map.addLayer(deckLayer2); + const deckLayer4 = createTextlayer(data); + map.addLayer(deckLayer4); } const COLOR_RANGE: Color[] = [ diff --git a/src/utils.ts b/src/utils.ts index e73452b..885f7c6 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -352,7 +352,10 @@ export function initDeck2gisProps(map: Map, deckProps?: CustomRenderProps): Deck * @hidden * @internal */ -function stateBinder(gl: WebGLRenderingContext | WebGL2RenderingContext, layer?: Deck2gisLayer) { +function stateBinder( + gl: WebGLRenderingContext | WebGL2RenderingContext, + layer?: Deck2gisLayer, +) { if (!layer?.props?.parameters?.cullFaceEnabled) { gl.disable(gl.CULL_FACE); } From 3feb347f2e9447d6dd4bfe8a82545f5cb937b9c5 Mon Sep 17 00:00:00 2001 From: Andrey Kuznecov Date: Thu, 31 Aug 2023 15:20:01 +0700 Subject: [PATCH 4/4] fix add layer --- demo/index.ts | 22 +++++++++++++++----- src/deckgl2gisLayer.ts | 47 ++++++++++++++++++++++++------------------ 2 files changed, 44 insertions(+), 25 deletions(-) diff --git a/demo/index.ts b/demo/index.ts index 3b5a947..1c4d944 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -15,9 +15,9 @@ 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() { @@ -40,13 +40,26 @@ 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({ id: 'text-layer', data, deck, type: TextLayer, - characterSet: 'auto', + characterSet, fontFamily: 'SBSansText, Helvetica, Arial, sans-serif', getBackgroundColor: [66, 0, 255, 66], getColor: [255, 128, 0], @@ -54,7 +67,6 @@ function createTextlayer(data) { getText: (d) => '' + d.values.capacity, getSize: 14, background: true, - parameters: { depthTest: true }, }); return layer; diff --git a/src/deckgl2gisLayer.ts b/src/deckgl2gisLayer.ts index a365ea6..4194801 100644 --- a/src/deckgl2gisLayer.ts +++ b/src/deckgl2gisLayer.ts @@ -105,30 +105,37 @@ export class Deck2gisLayer 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