diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md index 9202e30952..15bdd418f1 100644 --- a/docs/api/scene.en.md +++ b/docs/api/scene.en.md @@ -320,7 +320,10 @@ scene.setPitch(pitch); - `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]] ```javascript -scene.fitBounds([[112, 32], [114, 35]]); +scene.fitBounds([ + [112, 32], + [114, 35], +]); ``` ### getContainer diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index d3b4955e49..751ede9225 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -354,7 +354,10 @@ scene.setPitch(pitch); - `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]] ```javascript -scene.fitBounds([[112, 32], [114, 35]]); +scene.fitBounds([ + [112, 32], + [114, 35], +]); ``` ### removeLayer diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index 2126e13405..6859cd3e89 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -33,9 +33,12 @@ export default class InteractionService extends EventEmitter private clickTimer: number; + private $containter: HTMLElement; + public init() { // 注册事件在地图底图上 this.addEventListenerOnMap(); + this.$containter = this.mapService.getMapContainer() as HTMLElement; } public destroy() { @@ -147,7 +150,10 @@ export default class InteractionService extends EventEmitter const lngLat = this.mapService.containerToLngLat([clientX, clientY]); return { x: clientX, y: clientY, lngLat, type }; } - private onHover = ({ x, y, type }: MouseEvent) => { + private onHover = (event: MouseEvent) => { + let { x, y } = event; + const type = event.type; + const $containter = this.mapService.getMapContainer(); if ($containter) { const { top, left } = $containter.getBoundingClientRect(); diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 336262509d..459293de29 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -46,8 +46,12 @@ export default class PickingService implements IPickingService { createTexture2D, createFramebuffer, getViewportSize, + getContainer, } = this.rendererService; - const { width, height } = getViewportSize(); + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); this.pickBufferScale = this.configService.getSceneConfig(id).pickBufferScale || 1; // 创建 picking framebuffer，后续实时 resize @@ -76,9 +80,16 @@ export default class PickingService implements IPickingService { this.alreadyInPicking = false; } private async pickingLayers(target: IInteractionTarget) { - const { getViewportSize, useFramebuffer, clear } = this.rendererService; - const { width, height } = getViewportSize(); - + const { + getViewportSize, + useFramebuffer, + clear, + getContainer, + } = this.rendererService; + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); if (this.width !== width || this.height !== height) { this.pickingFBO.resize({ width: Math.round(width / this.pickBufferScale), @@ -113,8 +124,11 @@ export default class PickingService implements IPickingService { { x, y, lngLat, type }: IInteractionTarget, ) => { let isPicked = false; - const { getViewportSize, readPixels } = this.rendererService; - const { width, height } = getViewportSize(); + const { getViewportSize, readPixels, getContainer } = this.rendererService; + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); const { enableHighlight, enableSelect } = layer.getLayerConfig(); const xInDevicePixel = x * window.devicePixelRatio; diff --git a/packages/core/src/services/renderer/IRendererService.ts b/packages/core/src/services/renderer/IRendererService.ts index bf6c9de393..1480a30544 100644 --- a/packages/core/src/services/renderer/IRendererService.ts +++ b/packages/core/src/services/renderer/IRendererService.ts @@ -42,7 +42,7 @@ export interface IReadPixelsOptions { } export interface IRendererService { - init($container: HTMLDivElement, cfg: IRenderConfig): Promise; + init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise; clear(options: IClearOptions): void; createModel(options: IModelInitializationOptions): IModel; createAttribute(options: IAttributeInitializationOptions): IAttribute; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 2f6ee4c7df..0cdf457612 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -100,6 +100,8 @@ export default class Scene extends EventEmitter implements ISceneService { */ private $container: HTMLDivElement | null; + private canvas: HTMLCanvasElement; + private hooks: { init: AsyncParallelHook; }; @@ -170,11 +172,17 @@ export default class Scene extends EventEmitter implements ISceneService { this.configService.getSceneConfig(this.id).id || '', ); this.$container = $container; + if ($container) { + this.canvas = DOM.create('canvas', '', $container) as HTMLCanvasElement; + this.setCanvas(); await this.rendererService.init( - $container, + // @ts-ignore + this.canvas, this.configService.getSceneConfig(this.id) as IRenderConfig, ); + // this.initContainer(); + // window.addEventListener('resize', this.handleWindowResized); elementResizeEvent( this.$container as HTMLDivElement, this.handleWindowResized, @@ -279,35 +287,42 @@ export default class Scene extends EventEmitter implements ISceneService { this.emit('resize'); // @ts-check if (this.$container) { - // recalculate the viewport's size and call gl.viewport - // @see https://github.com/regl-project/regl/blob/master/lib/webgl.js#L24-L38 - const pixelRatio = window.devicePixelRatio; - let w = window.innerWidth; - let h = window.innerHeight; - if (this.$container !== document.body) { - const bounds = this.$container.getBoundingClientRect(); - w = bounds.right - bounds.left; - h = bounds.bottom - bounds.top; - } - const canvas = this.$container?.getElementsByTagName('canvas')[0]; - // this.$container. - this.rendererService.viewport({ - x: 0, - y: 0, - width: pixelRatio * w, - height: pixelRatio * h, - }); - // 触发 Map， canvas - DOM.triggerResize(); + this.initContainer(); this.coordinateSystemService.needRefresh = true; - if (canvas) { - canvas.width = w * pixelRatio; - canvas.height = h * pixelRatio; - } + // repaint layers this.render(); } }; + private initContainer() { + const pixelRatio = window.devicePixelRatio; + const w = this.$container?.clientWidth || 400; + const h = this.$container?.clientHeight || 300; + const canvas = this.canvas; + if (canvas) { + canvas.width = w * pixelRatio; + canvas.height = h * pixelRatio; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; + } + this.rendererService.viewport({ + x: 0, + y: 0, + width: pixelRatio * w, + height: pixelRatio * h, + }); + } + + private setCanvas() { + const pixelRatio = window.devicePixelRatio; + const w = this.$container?.clientWidth || 400; + const h = this.$container?.clientHeight || 300; + const canvas = this.canvas; + canvas.width = w * pixelRatio; + canvas.height = h * pixelRatio; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; + } private handleMapCameraChanged = (viewport: IViewport) => { this.cameraService.update(viewport); diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index 7e0e17310c..082c98c34c 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.2.22'; +const version = '2.2.23'; export { version }; diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts index 43dc6f1027..95b798ccb7 100644 --- a/packages/renderer/src/regl/index.ts +++ b/packages/renderer/src/regl/index.ts @@ -36,19 +36,21 @@ import ReglTexture2D from './ReglTexture2D'; export default class ReglRendererService implements IRendererService { private gl: regl.Regl; private $container: HTMLDivElement | null; + private canvas: HTMLCanvasElement; private width: number; private height: number; private isDirty: boolean; public async init( - $container: HTMLDivElement, + canvas: HTMLCanvasElement, cfg: IRenderConfig, ): Promise { - this.$container = $container; + // this.$container = $container; + this.canvas = canvas; // tslint:disable-next-line:typedef this.gl = await new Promise((resolve, reject) => { regl({ - container: $container, + canvas: this.canvas, attributes: { alpha: true, // use TAA instead of MSAA @@ -141,13 +143,6 @@ export default class ReglRendererService implements IRendererService { }) => { // use WebGL context directly // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch - const renderCanvas = this.$container?.getElementsByTagName('canvas')[0]; - if (renderCanvas) { - renderCanvas.width = width; - renderCanvas.height = height; - renderCanvas.style.width = width / 2 + 'px'; - renderCanvas.style.height = height / 2 + 'px'; - } this.gl._gl.viewport(x, y, width, height); this.width = width; this.height = height; @@ -176,11 +171,12 @@ export default class ReglRendererService implements IRendererService { }; public getContainer = () => { - return this.$container; + return this.canvas?.parentElement; }; public getCanvas = () => { - return this.$container?.getElementsByTagName('canvas')[0] || null; + // return this.$container?.getElementsByTagName('canvas')[0] || null; + return this.canvas; }; public getGLContext = () => { diff --git a/stories/Layers/components/AnimatePoint.tsx b/stories/Layers/components/AnimatePoint.tsx index b68a68d83d..286315de26 100644 --- a/stories/Layers/components/AnimatePoint.tsx +++ b/stories/Layers/components/AnimatePoint.tsx @@ -14,7 +14,7 @@ export default class AnimatePoint extends React.Component { public async componentDidMount() { const scene = new Scene({ id: document.getElementById('map') as HTMLDivElement, - map: new GaodeMap({ + map: new Mapbox({ pitch: 0, style: 'dark', center: [112, 23.69], @@ -61,6 +61,7 @@ export default class AnimatePoint extends React.Component { left: 0, right: 0, bottom: 0, + transform: 'scale(1.5)', }} /> ); diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index e6fbdbc964..c92e44bcd0 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -72,6 +72,7 @@ export default class PointImage extends React.Component { left: 0, right: 0, bottom: 0, + transform: 'scale(0.8)', }} /> ); diff --git a/stories/Layers/components/polygon.tsx b/stories/Layers/components/polygon.tsx index 9b6301401a..b098683fa9 100644 --- a/stories/Layers/components/polygon.tsx +++ b/stories/Layers/components/polygon.tsx @@ -141,8 +141,8 @@ export default class TextLayerDemo extends React.Component { }); scene.addLayer(layer); this.scene = scene; - layer.on('remapping', ()=>{ - console.log('remapinbg event') + layer.on('remapping', () => { + console.log('remapinbg event'); }); const gui = new dat.GUI(); this.gui = gui;