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..1c4d944 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'; @@ -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({ + 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({ 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 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", 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 diff --git a/src/utils.ts b/src/utils.ts index b0c8198..885f7c6 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,16 @@ 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); } /**