From 5579166a877dd15a792e20308f2fdc4dd2a6686a Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 21 Feb 2020 00:37:03 +0800 Subject: [PATCH] fix: amap webgl force --- packages/core/src/services/map/IMapService.ts | 2 ++ packages/core/src/services/scene/SceneService.ts | 3 +-- packages/maps/src/amap/map.ts | 10 +++++++++- packages/maps/src/mapbox/map.ts | 8 ++++++++ packages/react/src/component/LayerAttribute/Layer.tsx | 1 + packages/renderer/src/regl/index.ts | 11 +++++++---- stories/Layers/components/Point.tsx | 4 +--- stories/Layers/components/PointImage.tsx | 8 ++++---- stories/Layers/components/hexagon.tsx | 2 +- stories/Layers/components/polygon.tsx | 4 +--- 10 files changed, 35 insertions(+), 18 deletions(-) diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index f397f86d41..a5d87ff54a 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -52,6 +52,8 @@ export interface IMapService { panBy(pixel: Point): void; fitBounds(bound: Bounds): void; setZoomAndCenter(zoom: number, center: Point): void; + setCenter(center: [number, number]): void; + setPitch(pitch: number): void; setZoom(zoom: number): void; setMapStyle(style: string): void; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index d026c724c2..e33b26dcda 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -234,8 +234,7 @@ export default class Scene extends EventEmitter implements ISceneService { public exportPng(): string { const renderCanvas = this.$container?.getElementsByTagName('canvas')[0]; - // this.render(); - DOM.printCanvas(renderCanvas as HTMLCanvasElement); + this.render(); const layersPng = renderCanvas?.toDataURL('image/png') as string; return layersPng; } diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index 5cd103d55e..adef62a652 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -22,6 +22,8 @@ import { IAMapEvent, IAMapInstance } from '../../typings/index'; import { MapTheme } from './theme'; import Viewport from './Viewport'; let mapdivCount = 0; +// @ts-ignore +window.forceWebGL = true; const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200'; const AMAP_VERSION: string = '1.4.15'; @@ -129,7 +131,9 @@ export default class AMapService lat: center.getLat(), }; } - + public setCenter(lnglat: [number, number]): void { + this.map.setCenter(lnglat); + } public getPitch(): number { return this.map.getPitch(); } @@ -165,10 +169,14 @@ export default class AMapService const zooms = this.map.get('zooms') as [number, number]; return zooms[1] - 1; } + public setRotation(rotation: number): void { return this.map.setRotation(rotation); } + public setPitch(pitch: number) { + return this.map.setPitch(pitch); + } public zoomIn(): void { this.map.zoomIn(); } diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index 6b8798b420..e42d104724 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -107,6 +107,10 @@ export default class MapboxService return this.map.getCenter(); } + public setCenter(lnglat: [number, number]): void { + this.map.setCenter(lnglat); + } + public getPitch(): number { return this.map.getPitch(); } @@ -135,6 +139,10 @@ export default class MapboxService this.map.zoomIn(); } + public setPitch(pitch: number) { + return this.map.setPitch(pitch); + } + public zoomOut(): void { this.map.zoomOut(); } diff --git a/packages/react/src/component/LayerAttribute/Layer.tsx b/packages/react/src/component/LayerAttribute/Layer.tsx index 82bf6db5cc..55aec053da 100644 --- a/packages/react/src/component/LayerAttribute/Layer.tsx +++ b/packages/react/src/component/LayerAttribute/Layer.tsx @@ -55,6 +55,7 @@ export default function BaseLayer(type: string, props: ILayerProps) { }; }, []); useEffect(() => { + // 重绘layer if (layer) { mapScene.render(); } diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts index 2991980163..030fd4286c 100644 --- a/packages/renderer/src/regl/index.ts +++ b/packages/renderer/src/regl/index.ts @@ -48,18 +48,21 @@ export default class ReglRendererService implements IRendererService { // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1 antialias: true, premultipliedAlpha: true, + preserveDrawingBuffer: false, }, // TODO: use extensions extensions: [ 'OES_element_index_uint', 'EXT_blend_minmax', 'OES_standard_derivatives', // wireframe - // 'OES_texture_float', // shadow map 兼容性问题 'WEBGL_depth_texture', - 'angle_instanced_arrays', - 'EXT_texture_filter_anisotropic', // VSM shadow map + 'angle_instanced_arrays', // VSM shadow map + ], + optionalExtensions: [ + 'oes_texture_float_linear', + 'OES_texture_float', + 'EXT_texture_filter_anisotropic', ], - optionalExtensions: ['oes_texture_float_linear', 'OES_texture_float'], profile: true, onDone: (err: Error | null, r?: regl.Regl | undefined): void => { if (err || !r) { diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index 8745065282..8c677278a7 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -51,9 +51,7 @@ export default class Point3D extends React.Component { strokeWidth: 1, }); scene.addLayer(pointLayer); - const items = pointLayer.getLegendItems('color'); - console.log(items); - console.log(pointLayer.getLegendItems('size')); + // scene.on('loaded', () => { // const newData = { // type: 'FeatureCollection', diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index 1db177d9e3..c52aec2637 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -37,7 +37,7 @@ export default class PointImage extends React.Component { ); let i = 0; const data = await response.json(); - while (i < 50) { + while (i < 1) { const imageLayer = new PointLayer() .source(data, { parser: { @@ -46,9 +46,9 @@ export default class PointImage extends React.Component { y: 'latitude', }, }) - // .shape('name', ['00', '01', '02']) - .shape('name', 'text') - .color('red') + .shape('name', ['00', '01', '02']) + // .shape('name', 'text') + // .color('red') .active(false) .size(20); // imageLayer.on('click', (e) => { diff --git a/stories/Layers/components/hexagon.tsx b/stories/Layers/components/hexagon.tsx index 77b7b003e5..8b97ff3701 100644 --- a/stories/Layers/components/hexagon.tsx +++ b/stories/Layers/components/hexagon.tsx @@ -23,7 +23,7 @@ export default class HexagonLayerDemo extends React.Component { const scene = new Scene({ id: 'map', - map: new Mapbox({ + map: new GaodeMap({ center: [120.19382669582967, 30.258134], pitch: 0, style: 'light', diff --git a/stories/Layers/components/polygon.tsx b/stories/Layers/components/polygon.tsx index c322d0ec7c..bb8b8c3a30 100644 --- a/stories/Layers/components/polygon.tsx +++ b/stories/Layers/components/polygon.tsx @@ -162,9 +162,7 @@ export default class TextLayerDemo extends React.Component { opacity, }); scene.render(); - setTimeout(() => { - scene.render(); - }, 10); + scene.exportPng(); }); rasterFolder.addColor(styleOptions, 'color').onChange((color: string) => { layer.color(color);