From 4db42a1814a72784086cfb5cbc61e99ebf3aeb20 Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Tue, 14 Feb 2023 18:01:02 +0800 Subject: [PATCH] Chore lint update (#1600) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: update lint config * fix: 移除空行 * fix: util export * chore: 优化lint 配置 --- package.json | 8 +- packages/component/__tests__/control.spec.ts | 4 +- packages/component/__tests__/mapTheme.spec.ts | 8 +- packages/component/__tests__/popup.spec.ts | 2 +- .../component/__tests__/selectControl.spec.ts | 1 + packages/component/package.json | 3 +- .../src/control/baseControl/buttonControl.ts | 2 +- .../src/control/baseControl/control.ts | 1 - .../src/control/baseControl/index.ts | 2 +- .../src/control/baseControl/popperControl.ts | 9 +- .../src/control/baseControl/selectControl.ts | 2 +- packages/component/src/index.ts | 16 +- packages/component/src/marker-layer.ts | 18 +- packages/component/src/marker.ts | 7 +- packages/core/src/index.ts | 67 +++--- packages/core/src/inversify.config.ts | 15 +- .../core/src/services/asset/FontService.ts | 46 ++-- .../core/src/services/asset/IIconService.ts | 2 +- .../src/services/asset/ITextureService.ts | 13 +- .../core/src/services/camera/CameraService.ts | 14 +- .../core/src/services/config/ConfigService.ts | 29 +-- .../src/services/config/IConfigService.ts | 25 ++- .../coordinate/CoordinateSystemService.ts | 29 +-- .../core/src/services/debug/DebugService.ts | 14 +- .../services/interaction/IPickingService.ts | 28 ++- .../interaction/InteractionService.ts | 6 +- .../services/interaction/PickingService.ts | 19 +- .../core/src/services/layer/ILayerService.ts | 110 +++++----- .../services/layer/IStyleAttributeService.ts | 4 +- .../services/layer/StyleAttributeService.ts | 46 ++-- .../src/services/renderer/IRendererService.ts | 2 +- .../core/src/services/renderer/ITexture2D.ts | 2 +- .../renderer/passes/BaseNormalPass.ts | 3 +- .../renderer/passes/BasePostProcessingPass.ts | 7 +- .../src/services/renderer/passes/ClearPass.ts | 2 +- .../renderer/passes/PixelPickingPass.ts | 16 +- .../services/renderer/passes/RenderPass.ts | 2 +- .../src/services/renderer/passes/TAAPass.ts | 11 +- .../passes/post-processing/BloomPass.ts | 13 +- .../passes/post-processing/BlurHPass.ts | 13 +- .../passes/post-processing/BlurVPass.ts | 13 +- .../post-processing/ColorHalfTonePass.ts | 9 +- .../post-processing/HexagonalPixelatePass.ts | 4 +- .../passes/post-processing/NoisePass.ts | 4 +- .../passes/post-processing/SepiaPass.ts | 4 +- .../core/src/services/scene/ISceneService.ts | 4 +- .../core/src/services/scene/SceneService.ts | 20 +- .../src/services/source/ISourceService.ts | 12 +- packages/l7/src/index.ts | 9 +- packages/layers/package.json | 3 +- .../layers/src/Geometry/models/billboard.ts | 38 ++-- packages/layers/src/Geometry/models/plane.ts | 43 ++-- packages/layers/src/Geometry/models/sprite.ts | 37 ++-- packages/layers/src/canvas/models/canvas.ts | 22 +- .../layers/src/citybuliding/models/build.ts | 35 ++- .../layers/src/earth/models/atmosphere.ts | 32 ++- packages/layers/src/earth/models/base.ts | 27 +-- .../layers/src/earth/models/bloomsphere.ts | 32 ++- packages/layers/src/heatmap/models/grid.ts | 46 ++-- packages/layers/src/heatmap/models/grid3d.ts | 53 ++--- packages/layers/src/heatmap/models/heatmap.ts | 83 +++---- packages/layers/src/heatmap/models/hexagon.ts | 48 ++-- packages/layers/src/image/models/image.ts | 38 ++-- packages/layers/src/index.ts | 3 +- packages/layers/src/line/models/arc.ts | 42 ++-- packages/layers/src/line/models/arc_3d.ts | 40 ++-- .../layers/src/line/models/earthArc_3d.ts | 41 ++-- .../layers/src/line/models/great_circle.ts | 39 ++-- packages/layers/src/line/models/half.ts | 33 ++- packages/layers/src/line/models/line.ts | 4 +- packages/layers/src/line/models/linearline.ts | 34 ++- packages/layers/src/line/models/simpleLine.ts | 45 ++-- packages/layers/src/line/models/wall.ts | 33 ++- packages/layers/src/mask/models/fill.ts | 59 +++-- .../src/point/__tests__/layer_init.spec.ts | 88 ++++---- .../layers/src/point/models/earthExtrude.ts | 37 ++-- packages/layers/src/point/models/earthFill.ts | 7 +- packages/layers/src/point/models/extrude.ts | 42 ++-- packages/layers/src/point/models/normal.ts | 47 ++-- packages/layers/src/point/models/radar.ts | 54 ++--- .../layers/src/point/models/simplePoint.ts | 39 ++-- packages/layers/src/polygon/models/extrude.ts | 44 ++-- packages/layers/src/polygon/models/fill.ts | 38 ++-- packages/layers/src/polygon/models/index.ts | 2 +- packages/layers/src/polygon/models/ocean.ts | 38 ++-- packages/layers/src/polygon/models/water.ts | 49 ++--- .../src/raster/buffers/triangulation.ts | 2 +- packages/layers/src/raster/models/index.ts | 8 +- packages/layers/src/raster/models/raster.ts | 55 +++-- .../layers/src/raster/models/rasterRgb.ts | 69 +++--- .../src/raster/models/rasterTerrainRgb.ts | 205 +++++++++--------- .../src/tile/interaction/getRasterData.ts | 147 ++++++------- packages/layers/src/tile/interaction/utils.ts | 128 +++++------ packages/layers/src/tile/manager/base.ts | 54 +++-- .../src/tile/service/TileLayerService.ts | 119 +++++----- .../src/tile/service/TilePickService.ts | 4 +- .../src/tile/service/TileSourceService.ts | 1 + packages/layers/src/tile/style/constants.ts | 33 ++- packages/layers/src/tile/style/utils.ts | 27 ++- .../layers/src/tile/tileFactory/DebugTile.ts | 26 +-- .../layers/src/tile/tileFactory/ImageTile.ts | 17 +- .../layers/src/tile/tileFactory/MaskTile.ts | 26 ++- .../src/tile/tileFactory/RasterRGBTile.ts | 24 +- .../tile/tileFactory/RasterTerrainRGBTile.ts | 16 +- .../layers/src/tile/tileFactory/RasterTile.ts | 56 ++--- packages/layers/src/tile/tileFactory/Tile.ts | 29 +-- .../layers/src/tile/tileFactory/VectorTile.ts | 5 +- packages/layers/src/tile/tileFactory/index.ts | 23 +- .../tile/tileFactory/layers/TileDebugLayer.ts | 3 +- packages/layers/src/tile/tileFactory/util.ts | 29 ++- .../layers/src/tile/tileLayer/BaseLayer.ts | 142 ++++++------ packages/layers/src/wind/models/wind.ts | 31 ++- packages/map/src/camera.ts | 7 +- .../map/src/handler/mouse/mouse_handler.ts | 4 +- .../src/handler/tap/single_tap_recognizer.ts | 6 +- packages/map/src/handler/tap/tap_drag_zoom.ts | 6 +- .../map/src/handler/tap/tap_recognizer.ts | 2 +- packages/map/src/handler/touch/touch_pitch.ts | 4 +- .../map/src/handler/touch/touch_rotate.ts | 6 +- packages/map/src/handler/touch/touch_zoom.ts | 4 +- packages/map/src/handler/touch/two_touch.ts | 2 +- packages/map/src/index.ts | 4 +- packages/maps/src/index.ts | 7 +- .../maps/src/utils/amap/AMapBaseService.ts | 32 ++- packages/mini/src/index.ts | 2 +- .../src/regl/__tests__/attribute.spec.ts | 3 +- .../src/regl/__tests__/elements.spec.ts | 2 +- .../src/regl/__tests__/framebuffer.spec.ts | 2 +- .../src/regl/__tests__/model.draw.spec.ts | 2 +- .../renderer/src/regl/__tests__/model.spec.ts | 2 +- .../src/regl/__tests__/model.uniform.spec.ts | 2 +- .../src/regl/__tests__/renderer.spec.ts | 10 +- .../src/regl/__tests__/texture.spec.ts | 2 +- .../regl/__tests__/utils/create-context.ts | 2 +- packages/scene/__tests__/index.spec.ts | 19 +- packages/scene/__tests__/l7_map.spec.ts | 3 - packages/scene/src/IMapController.ts | 2 +- packages/scene/src/index.ts | 38 ++-- packages/source/__tests__/source.spec.ts | 4 +- packages/source/src/interface.ts | 63 ++++-- packages/source/src/source.ts | 4 +- .../source/src/utils/bandOperation/bands.ts | 138 +++++++----- .../source/src/utils/bandOperation/math.ts | 1 + .../utils/bandOperation/operationSchema.ts | 47 ++-- .../source/src/utils/tile/getCustomData.ts | 74 ++++--- .../source/src/utils/tile/getRasterData.ts | 74 ++++--- .../source/src/utils/tile/getRasterTile.ts | 49 +++-- packages/source/src/utils/tile/request.ts | 86 ++++---- packages/test-utils/src/create-context.ts | 4 +- packages/test-utils/src/index.ts | 4 +- packages/test-utils/src/test-scene.ts | 8 +- packages/utils/__tests__/geo.spec.ts | 9 +- packages/utils/__tests__/lineAtOffset.spec.ts | 133 ++++++------ packages/utils/src/ajax.ts | 57 ++--- packages/utils/src/color.ts | 3 +- packages/utils/src/geo.ts | 13 +- packages/utils/src/hash.ts | 13 +- packages/utils/src/index.ts | 14 +- .../src/mini-adapter/EventIniter/index.ts | 4 +- packages/utils/src/mini-adapter/util/mixin.ts | 2 +- 160 files changed, 2118 insertions(+), 2235 deletions(-) diff --git a/package.json b/package.json index 8a8ce02237..451defae3e 100644 --- a/package.json +++ b/package.json @@ -172,10 +172,10 @@ "build": " yarn worker && lerna run build", "postbuild": "yarn build:declarations", "build:declarations": "lerna run tsc --stream --no-bail", - "tslint": "tslint packages/**/src/**/*.ts -c tslint.prod.json", - "lint:tslint-fix": "tslint packages/**/src/**/*.ts -c tslint.prod.json --fix", - "lint:fix": "prettier --write packages/**/src/**/*.ts packages/site/docs/api/**/*.md packages/site/docs/api/*.md dev-demos/**/**/*.tsx *.md", - "lint:src": "eslint packages/**/src/ dev-demos/ --ext .ts,.tsx", + "lint:tslint": "tslint -p tsconfig.json -c tslint.prod.json", + "lint-tslint-fix": "tslint -p tsconfig.json -c tslint.prod.json --fix", + "lint-fix": "prettier --write packages/**/src/**/*.ts packages/site/docs/api/**/*.md packages/site/docs/api/*.md dev-demos/**/**/*.tsx *.md", + "lint:src": "eslint dev-demos/ --ext .ts,.tsx", "lint:examples": "eslint packages/site/examples --fix --ext .js", "lint:css": "stylelint 'packages/**/src/**/*.js{,x}'", "lint": "run-p -c lint:*", diff --git a/packages/component/__tests__/control.spec.ts b/packages/component/__tests__/control.spec.ts index 21b0a821c5..f117f8f366 100644 --- a/packages/component/__tests__/control.spec.ts +++ b/packages/component/__tests__/control.spec.ts @@ -7,7 +7,9 @@ class TestControl extends Control { public onAdd(): HTMLElement { return DOM.create('div'); } - public onRemove(): void {} + public onRemove(): void { + return; + } } describe('control', () => { diff --git a/packages/component/__tests__/mapTheme.spec.ts b/packages/component/__tests__/mapTheme.spec.ts index ab3edb55ed..68b83dee55 100644 --- a/packages/component/__tests__/mapTheme.spec.ts +++ b/packages/component/__tests__/mapTheme.spec.ts @@ -27,11 +27,11 @@ describe('mapTheme', () => { 'mapbox://styles/mapbox/streets-v11', ); - const optionList = ((control - .getPopper() - .getContent() as HTMLDivElement).querySelectorAll( + const optionList = ( + control.getPopper().getContent() as HTMLDivElement + ).querySelectorAll( '.l7-select-control-item', - ) as unknown) as HTMLDivElement[]; + ) as unknown as HTMLDivElement[]; optionList[1].click(); // expect(control.getSelectValue()).toEqual( diff --git a/packages/component/__tests__/popup.spec.ts b/packages/component/__tests__/popup.spec.ts index 54224cd6c3..c0ef20b904 100644 --- a/packages/component/__tests__/popup.spec.ts +++ b/packages/component/__tests__/popup.spec.ts @@ -8,7 +8,7 @@ describe('popup', () => { it('life cycle', () => { const popup = new Popup({ html: '123456', - className: className, + className, lngLat: { lng: 120, lat: 30, diff --git a/packages/component/__tests__/selectControl.spec.ts b/packages/component/__tests__/selectControl.spec.ts index 99846ce98b..2429d6a437 100644 --- a/packages/component/__tests__/selectControl.spec.ts +++ b/packages/component/__tests__/selectControl.spec.ts @@ -27,6 +27,7 @@ class SingleControl extends SelectControl { } } +// tslint:disable-next-line: max-classes-per-file class MultiControl extends SelectControl { public getDefault(option: any): any { return { diff --git a/packages/component/package.json b/packages/component/package.json index 9248862bba..ae77234b56 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -36,7 +36,8 @@ "supercluster": "^7.0.0" }, "devDependencies": { - "@antv/l7-test-utils": "2.13.6", + "@antv/l7-layers": "^2.13.6", + "@antv/l7-test-utils": "^2.13.6", "gcoord": "^0.3.2", "less": "^4.1.3" }, diff --git a/packages/component/src/control/baseControl/buttonControl.ts b/packages/component/src/control/baseControl/buttonControl.ts index c4d1d1e156..c4fae21e5d 100644 --- a/packages/component/src/control/baseControl/buttonControl.ts +++ b/packages/component/src/control/baseControl/buttonControl.ts @@ -11,7 +11,7 @@ export interface IButtonControlOption extends IControlOption { } export default class ButtonControl< - O extends IButtonControlOption = IButtonControlOption + O extends IButtonControlOption = IButtonControlOption, > extends Control { /** * 当前按钮是否禁用 diff --git a/packages/component/src/control/baseControl/control.ts b/packages/component/src/control/baseControl/control.ts index 11112c63db..991a62d296 100644 --- a/packages/component/src/control/baseControl/control.ts +++ b/packages/component/src/control/baseControl/control.ts @@ -16,7 +16,6 @@ import { Container } from 'inversify'; import { ControlEvent } from '../../interface'; export { PositionType } from '@antv/l7-core'; - export { Control }; export interface IControlOption { diff --git a/packages/component/src/control/baseControl/index.ts b/packages/component/src/control/baseControl/index.ts index c0c4b2fcda..001eaaee9e 100644 --- a/packages/component/src/control/baseControl/index.ts +++ b/packages/component/src/control/baseControl/index.ts @@ -1,4 +1,4 @@ -export * from './control'; export * from './buttonControl'; +export * from './control'; export * from './popperControl'; export * from './selectControl'; diff --git a/packages/component/src/control/baseControl/popperControl.ts b/packages/component/src/control/baseControl/popperControl.ts index b9acb99df8..3869d1fcdf 100644 --- a/packages/component/src/control/baseControl/popperControl.ts +++ b/packages/component/src/control/baseControl/popperControl.ts @@ -26,7 +26,7 @@ const PopperPlacementMap: Record = { }; export default class PopperControl< - O extends IPopperControlOption = IPopperControlOption + O extends IPopperControlOption = IPopperControlOption, > extends ButtonControl { /** * 气泡实例 @@ -70,11 +70,8 @@ export default class PopperControl< } public initPopper() { - const { - popperClassName, - popperPlacement, - popperTrigger, - } = this.controlOption; + const { popperClassName, popperPlacement, popperTrigger } = + this.controlOption; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const popperContainer = this.mapsService.getMapContainer()!; diff --git a/packages/component/src/control/baseControl/selectControl.ts b/packages/component/src/control/baseControl/selectControl.ts index 8e8022e0c1..2ab0b4626c 100644 --- a/packages/component/src/control/baseControl/selectControl.ts +++ b/packages/component/src/control/baseControl/selectControl.ts @@ -31,7 +31,7 @@ enum SelectControlConstant { } export default class SelectControl< - O extends ISelectControlOption = ISelectControlOption + O extends ISelectControlOption = ISelectControlOption, > extends PopperControl { /** * 当前选中的值 diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts index 73b78e37a6..96a1447f47 100644 --- a/packages/component/src/index.ts +++ b/packages/component/src/index.ts @@ -6,18 +6,16 @@ import './assets/iconfont/iconfont.js'; import './css/index.css'; export * from './control/baseControl'; -export * from './control/logo'; -export * from './control/fullscreen'; export * from './control/exportImage'; +export * from './control/fullscreen'; export * from './control/geoLocate'; -export * from './control/mapTheme'; export * from './control/layerSwitch'; +export * from './control/logo'; +export * from './control/mapTheme'; export * from './control/mouseLocation'; -export * from './control/zoom'; export * from './control/scale'; -export * from './popup/popup'; -export * from './popup/layerPopup'; - -export { Marker, MarkerLayer }; - +export * from './control/zoom'; export * from './interface'; +export * from './popup/layerPopup'; +export * from './popup/popup'; +export { Marker, MarkerLayer }; diff --git a/packages/component/src/marker-layer.ts b/packages/component/src/marker-layer.ts index 7778756b66..fa553cfdb8 100644 --- a/packages/component/src/marker-layer.ts +++ b/packages/component/src/marker-layer.ts @@ -83,7 +83,9 @@ export default class MarkerLayer extends EventEmitter { // 设置容器大小 private setContainerSize() { - if (!this.mapsService) return; + if (!this.mapsService) { + return; + } const container = this.mapsService.getContainer(); this.containerSize = { containerWidth: container?.scrollWidth || 0, @@ -117,7 +119,6 @@ export default class MarkerLayer extends EventEmitter { // if(this.inited) { // marker.addTo(this.scene); // } - } public removeMarker(marker: IMarker) { @@ -274,9 +275,8 @@ export default class MarkerLayer extends EventEmitter { private clusterMarker(feature: any) { const clusterOption = this.markerLayerOption.clusterOption; - const { - element = this.generateElement.bind(this), - } = clusterOption as IMarkerStyleOption; + const { element = this.generateElement.bind(this) } = + clusterOption as IMarkerStyleOption; const marker = new Marker({ element: element(feature), }).setLnglat({ @@ -292,9 +292,13 @@ export default class MarkerLayer extends EventEmitter { } private update() { - if (!this.mapsService) return; + if (!this.mapsService) { + return; + } // 当图层中无marker时，无需更新 - if (this.markers.length === 0) return; + if (this.markers.length === 0) { + return; + } const zoom = this.mapsService.getZoom(); const bbox = this.mapsService.getBounds(); diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 8f0cf360e7..42eeda59ee 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -27,6 +27,7 @@ export default class Marker extends EventEmitter { private lngLat: ILngLat; private scene: Container; private added: boolean = false; + // tslint:disable-next-line: no-empty public getMarkerLayerContainerSize(): IMarkerContainerAndBounds | void {} constructor(option?: Partial) { @@ -244,7 +245,9 @@ export default class Marker extends EventEmitter { const { containerHeight, containerWidth, bounds } = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(); - if (!bounds) return; + if (!bounds) { + return; + } // 当前可视区域包含跨日界线 if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) { if (pos.x > containerWidth) { @@ -349,7 +352,7 @@ export default class Marker extends EventEmitter { // eslint-disable-next-line @typescript-eslint/no-unused-vars private addDragHandler(e: MouseEvent) { - return null + return null; } // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 6f7ce85c72..6662f659bd 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -8,10 +8,38 @@ import BasePostProcessingPass from './services/renderer/passes/BasePostProcessin import { TYPES } from './types'; import { packCircleVertex } from './utils/vertex-compression'; +export * from './services/asset/IFontService'; +export * from './services/asset/IIconService'; +export * from './services/asset/ITextureService'; +export * from './services/camera/ICameraService'; +export * from './services/component/IControlService'; +export * from './services/component/IMarkerService'; +export * from './services/component/IPopupService'; +export * from './services/config/IConfigService'; +export * from './services/coordinate/ICoordinateSystemService'; +export * from './services/debug/IDebugService'; +export * from './services/interaction/IInteractionService'; +export * from './services/interaction/IPickingService'; +/** 暴露服务接口供其他 packages 实现 */ +export * from './services/layer/ILayerService'; +export * from './services/layer/IStyleAttributeService'; +export * from './services/map/IMapService'; +export * from './services/renderer/gl'; +/** 全部渲染服务接口 */ +export * from './services/renderer/IAttribute'; +export * from './services/renderer/IBuffer'; +export * from './services/renderer/IElements'; +export * from './services/renderer/IFramebuffer'; +export * from './services/renderer/IModel'; +export * from './services/renderer/IMultiPassRenderer'; +export * from './services/renderer/IRenderbuffer'; +export * from './services/renderer/IRendererService'; +export * from './services/renderer/ITexture2D'; +export * from './services/renderer/IUniform'; +export * from './services/scene/ISceneService'; +export * from './services/shader/IShaderModuleService'; +export * from './services/source/ISourceService'; export { - /** - * IoC 容器 - */ container, createSceneContainer, createLayerContainer, @@ -27,36 +55,3 @@ export { packCircleVertex, BasePostProcessingPass, }; - -/** 暴露服务接口供其他 packages 实现 */ -export * from './services/layer/ILayerService'; -export * from './services/debug/IDebugService'; -export * from './services/layer/IStyleAttributeService'; -export * from './services/source/ISourceService'; -export * from './services/map/IMapService'; -export * from './services/coordinate/ICoordinateSystemService'; -export * from './services/renderer/IRendererService'; -export * from './services/camera/ICameraService'; -export * from './services/config/IConfigService'; -export * from './services/scene/ISceneService'; -export * from './services/shader/IShaderModuleService'; -export * from './services/asset/IIconService'; -export * from './services/asset/IFontService'; -export * from './services/asset/ITextureService'; -export * from './services/component/IControlService'; -export * from './services/component/IMarkerService'; -export * from './services/component/IPopupService'; -export * from './services/interaction/IInteractionService'; -export * from './services/interaction/IPickingService'; - -/** 全部渲染服务接口 */ -export * from './services/renderer/IAttribute'; -export * from './services/renderer/IBuffer'; -export * from './services/renderer/IElements'; -export * from './services/renderer/IFramebuffer'; -export * from './services/renderer/IModel'; -export * from './services/renderer/IMultiPassRenderer'; -export * from './services/renderer/IRenderbuffer'; -export * from './services/renderer/ITexture2D'; -export * from './services/renderer/IUniform'; -export * from './services/renderer/gl'; diff --git a/packages/core/src/inversify.config.ts b/packages/core/src/inversify.config.ts index 313a5da798..9036a92e9e 100644 --- a/packages/core/src/inversify.config.ts +++ b/packages/core/src/inversify.config.ts @@ -16,10 +16,10 @@ import { ICameraService } from './services/camera/ICameraService'; import { IControlService } from './services/component/IControlService'; import { IGlobalConfigService } from './services/config/IConfigService'; import { ICoordinateSystemService } from './services/coordinate/ICoordinateSystemService'; +import { IDebugService } from './services/debug/IDebugService'; import { IInteractionService } from './services/interaction/IInteractionService'; import { IPickingService } from './services/interaction/IPickingService'; import { ILayerService } from './services/layer/ILayerService'; -import { IDebugService } from './services/debug/IDebugService'; import { IStyleAttributeService } from './services/layer/IStyleAttributeService'; import { ISceneService } from './services/scene/ISceneService'; import { IShaderModuleService } from './services/shader/IShaderModuleService'; @@ -33,10 +33,10 @@ import MarkerService from './services/component/MarkerService'; import PopupService from './services/component/PopupService'; import GlobalConfigService from './services/config/ConfigService'; import CoordinateSystemService from './services/coordinate/CoordinateSystemService'; +import DebugService from './services/debug/DebugService'; import InteractionService from './services/interaction/InteractionService'; import PickingService from './services/interaction/PickingService'; import LayerService from './services/layer/LayerService'; -import DebugService from './services/debug/DebugService'; import StyleAttributeService from './services/layer/StyleAttributeService'; import SceneService from './services/scene/SceneService'; import ShaderModuleService from './services/shader/ShaderModuleService'; @@ -95,7 +95,7 @@ export const lazyInject = ( const original = DECORATORS.lazyInject(serviceIdentifier); // the 'descriptor' parameter is actually always defined for class fields for Babel, but is considered undefined for TSC // so we just hack it with ?/! combination to avoid "TS1240: Unable to resolve signature of property decorator when called as an expression" - return function( + return function ( this: any, proto: any, key: string, @@ -117,7 +117,7 @@ export const lazyMultiInject = ( const original = DECORATORS.lazyMultiInject(serviceIdentifier); // the 'descriptor' parameter is actually always defined for class fields for Babel, but is considered undefined for TSC // so we just hack it with ?/! combination to avoid "TS1240: Unable to resolve signature of property decorator when called as an expression" - return function( + return function ( this: any, proto: any, key: string, @@ -220,8 +220,9 @@ export function createSceneContainer() { .whenTargetNamed('taa'); sceneContainer .bind>>(TYPES.IFactoryNormalPass) - .toFactory>((context) => (named: string) => - context.container.getNamed>(TYPES.INormalPass, named), + .toFactory>( + (context) => (named: string) => + context.container.getNamed>(TYPES.INormalPass, named), ); // 绑定 post processing passes @@ -282,7 +283,7 @@ export function createSceneContainer() { export function createLayerContainer(sceneContainer: Container) { const layerContainer = new Container(); layerContainer.parent = sceneContainer; - + layerContainer .bind(TYPES.IStyleAttributeService) .to(StyleAttributeService) diff --git a/packages/core/src/services/asset/FontService.ts b/packages/core/src/services/asset/FontService.ts index 6f47b2ad11..99974e10b5 100644 --- a/packages/core/src/services/asset/FontService.ts +++ b/packages/core/src/services/asset/FontService.ts @@ -1,6 +1,6 @@ import { $window, LRUCache } from '@antv/l7-utils'; -import { injectable } from 'inversify'; import { EventEmitter } from 'eventemitter3'; +import { injectable } from 'inversify'; import TinySDF from 'l7-tiny-sdf'; import 'reflect-metadata'; import { buildMapping } from '../../utils/font_util'; @@ -73,7 +73,7 @@ export default class FontService extends EventEmitter implements IFontService { public get mapping(): IFontMapping { const data = this.cache.get(this.key); - return data && data.mapping || {}; + return (data && data.mapping) || {}; } public fontAtlas: IFontAtlas; @@ -162,7 +162,7 @@ export default class FontService extends EventEmitter implements IFontService { * @param fontFamily * @param fontPath */ - public addFontFace(fontFamily: string, fontPath: string): void { + public addFontFace(fontFamily: string, fontPath: string): void { const style = document.createElement('style'); style.type = 'text/css'; style.innerText = ` @@ -172,28 +172,24 @@ export default class FontService extends EventEmitter implements IFontService { url('${fontPath}') format('woff'), url('${fontPath}') format('truetype'); }`; - style.onload=()=>{ - if ( document.fonts) { - try { - // @ts-ignore - document.fonts.load(`24px ${fontFamily}`, 'L7text'); - document.fonts.ready.then(()=>{ - this.emit('fontloaded',{ - fontFamily - }) - }) - - } catch (e) { - console.warn('当前环境不支持 document.fonts !'); - console.warn('当前环境不支持 iconfont !'); - console.warn(e); - } - } - + style.onload = () => { + if (document.fonts) { + try { + // @ts-ignore + document.fonts.load(`24px ${fontFamily}`, 'L7text'); + document.fonts.ready.then(() => { + this.emit('fontloaded', { + fontFamily, + }); + }); + } catch (e) { + console.warn('当前环境不支持 document.fonts !'); + console.warn('当前环境不支持 iconfont !'); + console.warn(e); } + } + }; document.getElementsByTagName('head')[0].appendChild(style); - - } public destroy(): void { this.cache.clear(); @@ -220,7 +216,9 @@ export default class FontService extends EventEmitter implements IFontService { canvas = $window.document.createElement('canvas'); canvas.width = MAX_CANVAS_WIDTH; } - const ctx = canvas.getContext('2d', { willReadFrequently: true }) as CanvasRenderingContext2D; + const ctx = canvas.getContext('2d', { + willReadFrequently: true, + }) as CanvasRenderingContext2D; setTextStyle(ctx, fontFamily, fontSize, fontWeight); // 1. build mapping diff --git a/packages/core/src/services/asset/IIconService.ts b/packages/core/src/services/asset/IIconService.ts index 931ef90cfd..d9da8fe6e8 100644 --- a/packages/core/src/services/asset/IIconService.ts +++ b/packages/core/src/services/asset/IIconService.ts @@ -20,7 +20,7 @@ export interface IIcon { export interface IICONMap { [key: string]: IIconValue; } -export interface IIconService extends EventEmitter { +export interface IIconService extends EventEmitter { canvasHeight: number; // on(event: string, fn: EventEmitter.ListenerFn, context?: any): this; // off(event: string, fn: EventEmitter.ListenerFn, context?: any): this; diff --git a/packages/core/src/services/asset/ITextureService.ts b/packages/core/src/services/asset/ITextureService.ts index acbfea9802..4b95c6121c 100644 --- a/packages/core/src/services/asset/ITextureService.ts +++ b/packages/core/src/services/asset/ITextureService.ts @@ -1,8 +1,11 @@ import { IColorRamp } from '@antv/l7-utils'; import { ITexture2D } from '../renderer/ITexture2D'; export interface ITextureService { - setColorTexture(texture: ITexture2D,colorRamp: IColorRamp,domain?:[number,number]):void; - getColorTexture(colorRamp: IColorRamp, domain?:[number,number]): ITexture2D - destroy():void; - -} \ No newline at end of file + setColorTexture( + texture: ITexture2D, + colorRamp: IColorRamp, + domain?: [number, number], + ): void; + getColorTexture(colorRamp: IColorRamp, domain?: [number, number]): ITexture2D; + destroy(): void; +} diff --git a/packages/core/src/services/camera/CameraService.ts b/packages/core/src/services/camera/CameraService.ts index e9f5fb6b95..398b2194cf 100644 --- a/packages/core/src/services/camera/CameraService.ts +++ b/packages/core/src/services/camera/CameraService.ts @@ -125,17 +125,17 @@ export default class CameraService implements ICameraService { public jitterProjectionMatrix(x: number, y: number) { const translation = mat4.fromTranslation(mat4.create(), [x, y, 0]); - this.jitteredProjectionMatrix = (mat4.multiply( + this.jitteredProjectionMatrix = mat4.multiply( mat4.create(), translation, - (this.viewport.getProjectionMatrix() as unknown) as mat4, - ) as unknown) as number[]; + this.viewport.getProjectionMatrix() as unknown as mat4, + ) as unknown as number[]; - this.jitteredViewProjectionMatrix = (mat4.multiply( + this.jitteredViewProjectionMatrix = mat4.multiply( mat4.create(), - (this.jitteredProjectionMatrix as unknown) as mat4, - (this.viewport.getViewMatrix() as unknown) as mat4, - ) as unknown) as number[]; + this.jitteredProjectionMatrix as unknown as mat4, + this.viewport.getViewMatrix() as unknown as mat4, + ) as unknown as number[]; } public clearJitterProjectionMatrix() { diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts index 637ab85dfd..7aef21e925 100644 --- a/packages/core/src/services/config/ConfigService.ts +++ b/packages/core/src/services/config/ConfigService.ts @@ -2,9 +2,9 @@ import { injectable } from 'inversify'; import { merge } from 'lodash'; import 'reflect-metadata'; -import { ILayerConfig,ILayerAttributesOption} from '../layer/ILayerService'; +import { ILayerAttributesOption, ILayerConfig } from '../layer/ILayerService'; import { IRenderConfig } from '../renderer/IRendererService'; -import { IGlobalConfigService, ISceneConfig, } from './IConfigService'; +import { IGlobalConfigService, ISceneConfig } from './IConfigService'; import WarnInfo from './warnInfo'; /** @@ -119,13 +119,12 @@ export default class GlobalConfigService implements IGlobalConfigService { [layerId: string]: Partial; } = {}; - /** * 数据映射缓存 */ private layerAttributeConfigCache: { - [layerId: string]: Partial + [layerId: string]: Partial; } = {}; /** @@ -175,19 +174,21 @@ export default class GlobalConfigService implements IGlobalConfigService { ...merge({}, this.sceneConfigCache[sceneId], defaultLayerConfig, config), }; } - - public getAttributeConfig(layerId: string,): Partial { - return this.layerAttributeConfigCache[layerId] - } + public getAttributeConfig(layerId: string): Partial { + return this.layerAttributeConfigCache[layerId]; + } - public setAttributeConfig(layerId: string, attr: Partial) { + public setAttributeConfig( + layerId: string, + attr: Partial, + ) { // TODO - this.layerAttributeConfigCache[layerId] = { - ...this.layerAttributeConfigCache[layerId], - ...attr - } - } + this.layerAttributeConfigCache[layerId] = { + ...this.layerAttributeConfigCache[layerId], + ...attr, + }; + } public clean() { this.sceneConfigCache = {}; diff --git a/packages/core/src/services/config/IConfigService.ts b/packages/core/src/services/config/IConfigService.ts index 65ac503668..e52d83f218 100644 --- a/packages/core/src/services/config/IConfigService.ts +++ b/packages/core/src/services/config/IConfigService.ts @@ -1,6 +1,6 @@ // import Ajv from 'ajv'; import { PositionName } from '../component/IControlService'; -import { ILayerConfig,ILayerAttributesOption } from '../layer/ILayerService'; +import { ILayerAttributesOption, ILayerConfig } from '../layer/ILayerService'; import { IMapWrapper } from '../map/IMapService'; import { IRenderConfig } from '../renderer/IRendererService'; export interface ISceneConfig extends IRenderConfig { @@ -64,18 +64,21 @@ export interface IGlobalConfigService { layerId: string, config: Partial, ): void; - /** + /** * 获取数据映射 */ - getAttributeConfig(layerId: string,): Partial - - /** - * 设置数据映射 - * @param layerId sh - * @param attr - */ - setAttributeConfig(layerId: string, attr: Partial):void - + getAttributeConfig(layerId: string): Partial; + + /** + * 设置数据映射 + * @param layerId sh + * @param attr + */ + setAttributeConfig( + layerId: string, + attr: Partial, + ): void; + /** * 清除场景和图层配置项 Cache，但是需要保留校验器 */ diff --git a/packages/core/src/services/coordinate/CoordinateSystemService.ts b/packages/core/src/services/coordinate/CoordinateSystemService.ts index f062d696c1..b38a933cea 100644 --- a/packages/core/src/services/coordinate/CoordinateSystemService.ts +++ b/packages/core/src/services/coordinate/CoordinateSystemService.ts @@ -14,7 +14,8 @@ const VECTOR_TO_POINT_MATRIX = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0]; @injectable() export default class CoordinateSystemService - implements ICoordinateSystemService { + implements ICoordinateSystemService +{ public needRefresh: boolean = true; @inject(TYPES.ICameraService) private readonly cameraService: ICameraService; @@ -152,9 +153,9 @@ export default class CoordinateSystemService let viewMatrix = this.cameraService.getViewMatrix(); const projectionMatrix = this.cameraService.getProjectionMatrix(); let viewProjectionMatrix = mat4.multiply( - ([] as unknown) as mat4, - (projectionMatrix as unknown) as mat4, - (viewMatrix as unknown) as mat4, + [] as unknown as mat4, + projectionMatrix as unknown as mat4, + viewMatrix as unknown as mat4, ); // 经纬度投影到 Web 墨卡托坐标系 @@ -164,30 +165,30 @@ export default class CoordinateSystemService ); // Web 墨卡托坐标系通过 VP 矩阵变换到世界坐标系 - this.viewportCenterProjection = (vec4.transformMat4( - ([] as unknown) as vec4, + this.viewportCenterProjection = vec4.transformMat4( + [] as unknown as vec4, [positionPixels[0], positionPixels[1], 0.0, 1.0], - (viewProjectionMatrix as unknown) as mat4, - ) as unknown) as [number, number, number, number]; + viewProjectionMatrix as unknown as mat4, + ) as unknown as [number, number, number, number]; // Always apply uncentered projection matrix if available (shader adds center) viewMatrix = this.cameraService.getViewMatrixUncentered() || viewMatrix; // Zero out 4th coordinate ("after" model matrix) - avoids further translations viewProjectionMatrix = mat4.multiply( - ([] as unknown) as mat4, - (projectionMatrix as unknown) as mat4, - (viewMatrix as unknown) as mat4, + [] as unknown as mat4, + projectionMatrix as unknown as mat4, + viewMatrix as unknown as mat4, ); viewProjectionMatrix = mat4.multiply( - ([] as unknown) as mat4, + [] as unknown as mat4, viewProjectionMatrix, - (VECTOR_TO_POINT_MATRIX as unknown) as mat4, + VECTOR_TO_POINT_MATRIX as unknown as mat4, ); // 重新计算相机 VP 矩阵 this.cameraService.setViewProjectionMatrix( - (viewProjectionMatrix as unknown) as number[], + viewProjectionMatrix as unknown as number[], ); this.pixelsPerMeter = ppm; diff --git a/packages/core/src/services/debug/DebugService.ts b/packages/core/src/services/debug/DebugService.ts index 9c8f94ec4b..79ebcaf627 100644 --- a/packages/core/src/services/debug/DebugService.ts +++ b/packages/core/src/services/debug/DebugService.ts @@ -79,23 +79,23 @@ export default class DebugService this.renderEnable = enable; } - public renderStart(guid: string) { + public renderStart(id: string) { if (!this.renderEnable || !this.enable) { return; } - const cacheRenderInfo = this.renderMap.get(guid) || {}; - this.renderMap.set(guid, { + const cacheRenderInfo = this.renderMap.get(id) || {}; + this.renderMap.set(id, { ...cacheRenderInfo, - renderUid: guid, + renderUid: id, renderStart: Date.now(), }); } - public renderEnd(guid: string) { + public renderEnd(id: string) { if (!this.renderEnable || !this.enable) { return; } - const cacheRenderInfo = this.renderMap.get(guid); + const cacheRenderInfo = this.renderMap.get(id); if (cacheRenderInfo) { const renderStart = cacheRenderInfo.renderStart as number; const renderEnd = Date.now(); @@ -104,7 +104,7 @@ export default class DebugService renderEnd, renderDuration: renderEnd - renderStart, }); - this.renderMap.delete(guid); + this.renderMap.delete(id); } } diff --git a/packages/core/src/services/interaction/IPickingService.ts b/packages/core/src/services/interaction/IPickingService.ts index b258964f71..09b8b62504 100644 --- a/packages/core/src/services/interaction/IPickingService.ts +++ b/packages/core/src/services/interaction/IPickingService.ts @@ -7,7 +7,8 @@ export interface IPickingService { init(id: string): void; pickFromPickingFBO(layer: ILayer, target: IInteractionTarget): boolean; pickBox(layer: ILayer, box: [number, number, number, number]): any[]; - triggerHoverOnLayer(layer: ILayer, + triggerHoverOnLayer( + layer: ILayer, target: { x: number; y: number; @@ -15,7 +16,8 @@ export interface IPickingService { lngLat: ILngLat; feature?: unknown; featureId?: number | null; - }): void; + }, + ): void; boxPickLayer( layer: ILayer, @@ -26,7 +28,11 @@ export interface IPickingService { } export interface ILayerPickService { - pickRasterLayer(layer: ILayer, target: IInteractionTarget, parent?: ILayer): boolean; + pickRasterLayer( + layer: ILayer, + target: IInteractionTarget, + parent?: ILayer, + ): boolean; pick(layer: ILayer, target: IInteractionTarget): boolean; /** * 绘制拾取图层 @@ -35,21 +41,19 @@ export interface ILayerPickService { pickRender(target: IInteractionTarget): void; /** * 为图层设置选中对象 - * @param pickedColors + * @param pickedColors */ - selectFeature(pickedColors: Uint8Array | undefined):void + selectFeature(pickedColors: Uint8Array | undefined): void; /** * 为图层设置active对象 - * @param pickedColors + * @param pickedColors */ - highlightPickedFeature(pickedColors: Uint8Array | undefined):void - + highlightPickedFeature(pickedColors: Uint8Array | undefined): void; + /** * 获取选中的要素 * @param id q */ - getFeatureById(id: number, lngLat?: ILngLat):any - - -} \ No newline at end of file + getFeatureById(id: number, lngLat?: ILngLat): any; +} diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index 87e1da06cb..cb52841a9e 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -18,8 +18,10 @@ const DragEventMap: { [key: string]: string } = { * 除此之外，后续如果支持非地图场景，事件监听就需要注册在 L7 canvas 上。 */ @injectable() -export default class InteractionService extends EventEmitter - implements IInteractionService { +export default class InteractionService + extends EventEmitter + implements IInteractionService +{ public indragging: boolean = false; @inject(TYPES.IMapService) private readonly mapService: IMapService; diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 2e3f68f0bc..ea4ae45c50 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -303,8 +303,9 @@ export default class PickingService implements IPickingService { } private async pickingAllLayer(target: IInteractionTarget) { // 判断是否进行拾取操作 - if (!this.layerService.needPick(target.type) || !this.isPickingAllLayer()) + if (!this.layerService.needPick(target.type) || !this.isPickingAllLayer()) { return; + } this.alreadyInPicking = true; await this.pickingLayers(target); this.layerService.renderLayers(); @@ -313,13 +314,21 @@ export default class PickingService implements IPickingService { private isPickingAllLayer() { // this.alreadyInPicking 避免多次重复拾取 - if (this.alreadyInPicking) { return false; } + if (this.alreadyInPicking) { + return false; + } // this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作 - if (this.layerService.alreadyInRendering) { return false; } + if (this.layerService.alreadyInRendering) { + return false; + } // this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去） - if (this.interactionService.indragging) { return false; } + if (this.interactionService.indragging) { + return false; + } // 判断当前进行 shader pick 拾取判断 - if (!this.layerService.getShaderPickStat()) { return false; } + if (!this.layerService.getShaderPickStat()) { + return false; + } // 进行拾取 return true; diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 2bcc9de25f..b95155a527 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -1,12 +1,20 @@ // @ts-ignore -import { SyncBailHook, SyncHook, AsyncSeriesBailHook, AsyncWaterfallHook} from '@antv/async-hook'; +import { + AsyncSeriesBailHook, + AsyncWaterfallHook, + SyncBailHook, + SyncHook, +} from '@antv/async-hook'; import { IColorRamp, SourceTile, TilesetManager } from '@antv/l7-utils'; import { Container } from 'inversify'; import Clock from '../../utils/clock'; import { ITextureService } from '../asset/ITextureService'; import { ISceneConfig } from '../config/IConfigService'; import { IInteractionTarget } from '../interaction/IInteractionService'; -import { ILayerPickService, IPickingService } from '../interaction/IPickingService'; +import { + ILayerPickService, + IPickingService, +} from '../interaction/IPickingService'; import { IMapService } from '../map/IMapService'; import { IAttribute } from '../renderer/IAttribute'; import { @@ -22,7 +30,12 @@ import { import { IRendererService } from '../renderer/IRendererService'; import { ITexture2D } from '../renderer/ITexture2D'; import { IUniform } from '../renderer/IUniform'; -import { ISource, ISourceCFG, ITransform, IParseDataItem } from '../source/ISourceService'; +import { + IParseDataItem, + ISource, + ISourceCFG, + ITransform, +} from '../source/ISourceService'; import { IAnimateOption, IEncodeFeature, @@ -80,7 +93,7 @@ export interface ILayerModel { getAnimateUniforms(): IModelUniform; buildModels(): Promise; initModels(): Promise; - needUpdate():Promise + needUpdate(): Promise; clearModels(refresh?: boolean): void; // canvasLayer @@ -92,13 +105,13 @@ export interface ILayerModel { } export interface ILayerAttributesOption { - shape: IAttrbuteOptions, - color: IAttrbuteOptions, - texture:IAttrbuteOptions, - rotate:IAttrbuteOptions, - size:IAttrbuteOptions, - filter:IAttrbuteOptions, - label:IAttrbuteOptions, + shape: IAttrbuteOptions; + color: IAttrbuteOptions; + texture: IAttrbuteOptions; + rotate: IAttrbuteOptions; + size: IAttrbuteOptions; + filter: IAttrbuteOptions; + label: IAttrbuteOptions; } export interface IModelUniform { @@ -119,15 +132,15 @@ export interface IActiveOption { type ILngLat = [number, number]; -export interface ILegend { - type: ScaleTypeName | undefined +export interface ILegend { + type: ScaleTypeName | undefined; field: StyleAttributeField | undefined; - items:LegendItems + items: LegendItems; } // 分段图例 export interface ILegendSegmentItem { - field:string;// 图例字段 + field: string; // 图例字段 value: [number, number]; [key: string]: any; } @@ -149,18 +162,18 @@ export interface ISubLayerStyles { } export interface IAttrbuteOptions { - field: StyleAttrField, - values:StyleAttributeOption + field: StyleAttrField; + values: StyleAttributeOption; } /** * For tile subLayer */ export interface ISubLayerInitOptions { - usage?: string|undefined; + usage?: string | undefined; layerType: string; transforms?: ITransform[]; - visible: boolean, + visible: boolean; shape?: string | string[] | IScaleValue; // options zIndex: number; @@ -203,7 +216,7 @@ export interface IBaseTileLayerManager { parent: ILayer; children: ILayer[]; - addTile(tile: SourceTile):Promise<{ layers: ILayer[]; }>; + addTile(tile: SourceTile): Promise<{ layers: ILayer[] }>; addChild(layer: ILayer): void; addChildren(layers: ILayer[]): void; @@ -232,10 +245,7 @@ export interface ITile { getFeatureById(id: number): any; styleUpdate(...args: any): void; initTileLayer(): Promise; - lnglatInBounds(lnglat: { - lng: number; - lat: number; - }): boolean; + lnglatInBounds(lnglat: { lng: number; lat: number }): boolean; updateVisible(value: boolean): void; updateOptions(key: string, value: any): void; destroy(): void; @@ -253,14 +263,14 @@ export interface IBaseTileLayer { tileLayerService: ITileLayerService; getLayers(): ILayer[]; getTiles(): ITile[]; - pickRender(target: IInteractionTarget):void; - selectFeature(pickedColors: Uint8Array | undefined):void; - highlightPickedFeature(pickedColors: Uint8Array | undefined):void; + pickRender(target: IInteractionTarget): void; + selectFeature(pickedColors: Uint8Array | undefined): void; + highlightPickedFeature(pickedColors: Uint8Array | undefined): void; render(isPicking?: boolean): void; destroy(): void; } -export interface ITileLayer extends IBaseTileLayer{ - pickRender(target: IInteractionTarget):void; +export interface ITileLayer extends IBaseTileLayer { + pickRender(target: IInteractionTarget): void; pickLayers(target: IInteractionTarget): boolean; clearPick(type: string): void; clearPickState(): void; @@ -304,7 +314,7 @@ export type LayerEventType = | any; export interface ILayer { - styleAttributeService: IStyleAttributeService, + styleAttributeService: IStyleAttributeService; layerPickService: ILayerPickService; textureService: ITextureService; sourceLayer?: string; @@ -314,7 +324,7 @@ export interface ILayer { coordCenter: number[]; name: string; // inited: boolean; // 是否初始化完成 - startInit: boolean // 是否开始初始化; + startInit: boolean; // 是否开始初始化; zIndex: number; clusterZoom: number; plugins: ILayerPlugin[]; @@ -327,15 +337,15 @@ export interface ILayer { sceneContainer: Container | undefined; dataState: IDataState; // 数据流状态 defaultSourceConfig: { - data: any[], - options: ISourceCFG | undefined, - }, + data: any[]; + options: ISourceCFG | undefined; + }; encodeDataLength: number; pickedFeatureID: number | null; hooks: { - init:AsyncSeriesBailHook; + init: AsyncSeriesBailHook; afterInit: SyncBailHook; - beforeRenderData: AsyncWaterfallHook ; + beforeRenderData: AsyncWaterfallHook; beforeRender: SyncBailHook; afterRender: SyncHook; beforePickingEncode: SyncHook; @@ -367,9 +377,7 @@ export interface ILayer { */ threeRenderService?: any; - postProcessingPassFactory: ( - name: string, - ) => IPostProcessingPass; + postProcessingPassFactory: (name: string) => IPostProcessingPass; normalPassFactory: (name: string) => IPass; getShaderPickStat: () => boolean; updateModelData(data: IAttributeAndElements): void; @@ -379,7 +387,7 @@ export interface ILayer { needPick(type: string): boolean; getAttribute(name: string): IStyleAttribute | undefined; getLayerConfig(): Partial; - getLayerAttributeConfig():Partial + getLayerAttributeConfig(): Partial; getContainer(): Container; setContainer(container: Container, sceneContainer: Container): void; setCurrentPickId(id: number | null): void; @@ -390,7 +398,7 @@ export interface ILayer { renderModels(isPicking?: boolean): void; buildModels(): void; rebuildModels(): void; - getModelType():string; + getModelType(): string; buildLayerModel( options: ILayerModelInitializationOptions & Partial, @@ -407,7 +415,7 @@ export interface ILayer { values?: StyleAttributeOption, updateOptions?: Partial, ): boolean; - setLayerPickService(layerPickService:ILayerPickService):void; + setLayerPickService(layerPickService: ILayerPickService): void; init(): Promise; scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer; getScale(name: string): any; @@ -434,8 +442,8 @@ export interface ILayer { style(options: unknown): ILayer; hide(): ILayer; show(): ILayer; - getLegendItems(name: string,index?: number): LegendItems; - getLegend(name: string):ILegend; + getLegendItems(name: string, index?: number): LegendItems; + getLegend(name: string): ILegend; setIndex(index: number): ILayer; isVisible(): boolean; setMaxZoom(min: number): ILayer; @@ -564,7 +572,7 @@ export interface ILayerConfig { maskfence: any; maskColor: string; maskOpacity: number; - sourceLayer:string; + sourceLayer: string; colors: string[]; size: number; @@ -636,7 +644,7 @@ export interface ILayerConfig { /** * 地球模式参数 */ - globalOptions: any; + globalOptions: any; /** * layer point text 是否是 iconfont 模式 */ @@ -678,14 +686,14 @@ export interface ILayerService { getRenderList(): ILayer[]; getLayer(id: string): ILayer | undefined; getLayerByName(name: string): ILayer | undefined; - remove(layer: ILayer, parentLayer?: ILayer):Promise; - removeAllLayers():Promise; + remove(layer: ILayer, parentLayer?: ILayer): Promise; + removeAllLayers(): Promise; updateLayerRenderList(): void; reRender(): void; beforeRenderData(layer: ILayer): Promise; - renderMask(masks:ILayer[]): void; - renderLayer(layer: ILayer): Promise - needPick(type:string):boolean; + renderMask(masks: ILayer[]): void; + renderLayer(layer: ILayer): Promise; + needPick(type: string): boolean; throttleRenderLayers(): void; renderLayers(): void; setEnableRender(flag: boolean): void; diff --git a/packages/core/src/services/layer/IStyleAttributeService.ts b/packages/core/src/services/layer/IStyleAttributeService.ts index 9ad3a78a4a..8deba3c66b 100644 --- a/packages/core/src/services/layer/IStyleAttributeService.ts +++ b/packages/core/src/services/layer/IStyleAttributeService.ts @@ -194,7 +194,7 @@ export interface IStyleAttributeService { registerStyleAttribute( options: Partial, ): IStyleAttribute; - updateScaleAttribute(scale: IScaleOptions):void; + updateScaleAttribute(scale: IScaleOptions): void; updateStyleAttribute( attributeName: string, attributeOptions: Partial, @@ -227,7 +227,7 @@ export interface IStyleAttributeService { features: IEncodeFeature[], startFeatureIdx?: number, endFeatureIdx?: number, - layer?: ILayer + layer?: ILayer, ): void; /** * 清除当前管理的所有属性 diff --git a/packages/core/src/services/layer/StyleAttributeService.ts b/packages/core/src/services/layer/StyleAttributeService.ts index 4b1067c209..545c6cacf4 100644 --- a/packages/core/src/services/layer/StyleAttributeService.ts +++ b/packages/core/src/services/layer/StyleAttributeService.ts @@ -9,8 +9,8 @@ import { IRendererService } from '../renderer/IRendererService'; import { ILayer, IWorkerOption } from './ILayerService'; import { IAttributeScale, - IScaleOptions, IEncodeFeature, + IScaleOptions, IStyleAttribute, IStyleAttributeInitializationOptions, IStyleAttributeService, @@ -67,21 +67,21 @@ export default class StyleAttributeService implements IStyleAttributeService { attributeToUpdate = new StyleAttribute(options); this.attributes.push(attributeToUpdate); } - + return attributeToUpdate; } public updateScaleAttribute(scaleOption: IScaleOptions) { - this.attributes.forEach((attr:IStyleAttribute)=>{ + this.attributes.forEach((attr: IStyleAttribute) => { const name = attr.name; - const field = attr.scale?.field as string; - if(scaleOption[name] || (field && scaleOption[field])) { // 字段类型和映射类型 + const field = attr.scale?.field as string; + if (scaleOption[name] || (field && scaleOption[field])) { + // 字段类型和映射类型 attr.needRescale = true; attr.needRemapping = true; attr.needRegenerateVertices = true; } - }) - + }); } public updateStyleAttribute( @@ -136,7 +136,7 @@ export default class StyleAttributeService implements IStyleAttributeService { features: IEncodeFeature[], startFeatureIdx: number = 0, endFeatureIdx?: number, - layer?:ILayer + layer?: ILayer, ) { const attributeToUpdate = this.attributes.find( (attribute) => attribute.name === attributeName, @@ -167,8 +167,8 @@ export default class StyleAttributeService implements IStyleAttributeService { vertexIdx++ ) { const normal = normals - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ? normals!.slice(vertexIdx * 3, vertexIdx * 3 + 3) + ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + normals!.slice(vertexIdx * 3, vertexIdx * 3 + 3) : []; featureData.push( ...update( @@ -196,10 +196,10 @@ export default class StyleAttributeService implements IStyleAttributeService { offset: bufferOffsetInBytes, }); // size color 触发更新事件 - layer?.emit(`legend:${attributeName}`,{ - type:attributeName, - attr:attributeToUpdate - }) + layer?.emit(`legend:${attributeName}`, { + type: attributeName, + attr: attributeToUpdate, + }); } } } @@ -223,11 +223,8 @@ export default class StyleAttributeService implements IStyleAttributeService { .filter((d) => d); const { modelType, ...restOptions } = workerOptions; - const { - createAttribute, - createBuffer, - createElements, - } = this.rendererService; + const { createAttribute, createBuffer, createElements } = + this.rendererService; const attributes: { [attributeName: string]: IAttribute; } = {}; @@ -361,7 +358,7 @@ export default class StyleAttributeService implements IStyleAttributeService { if (indexes && indexes[vertexIdx] !== undefined) { vertexIndex = indexes[vertexIdx]; } -// eslint-disable-next-line @typescript-eslint/no-unused-vars + // eslint-disable-next-line @typescript-eslint/no-unused-vars descriptors.forEach((descriptor, attributeIdx) => { if (descriptor && descriptor.update) { (descriptor.buffer.data as number[]).push( @@ -379,11 +376,8 @@ export default class StyleAttributeService implements IStyleAttributeService { }); // end for each } // end for }); // end features for Each - const { - createAttribute, - createBuffer, - createElements, - } = this.rendererService; + const { createAttribute, createBuffer, createElements } = + this.rendererService; const attributes: { [attributeName: string]: IAttribute; @@ -487,7 +481,7 @@ export default class StyleAttributeService implements IStyleAttributeService { if (indexes && indexes[vertexIdx] !== undefined) { vertexIndex = indexes[vertexIdx]; } -// eslint-disable-next-line @typescript-eslint/no-unused-vars + // eslint-disable-next-line @typescript-eslint/no-unused-vars descriptors.forEach((descriptor, attributeIdx) => { if (descriptor && descriptor.update) { (descriptor.buffer.data as number[]).push( diff --git a/packages/core/src/services/renderer/IRendererService.ts b/packages/core/src/services/renderer/IRendererService.ts index 31f6a29402..a25873ca1b 100644 --- a/packages/core/src/services/renderer/IRendererService.ts +++ b/packages/core/src/services/renderer/IRendererService.ts @@ -48,7 +48,7 @@ export interface IExtensions { export interface IRendererService { extensionObject: IExtensions; - init(canvas: HTMLCanvasElement, cfg: IRenderConfig,gl: any): Promise; + init(canvas: HTMLCanvasElement, cfg: IRenderConfig, gl: any): Promise; testExtension(name: string): boolean; clear(options: IClearOptions): void; createModel(options: IModelInitializationOptions): IModel; diff --git a/packages/core/src/services/renderer/ITexture2D.ts b/packages/core/src/services/renderer/ITexture2D.ts index c19e9ecb41..3a2295e34a 100644 --- a/packages/core/src/services/renderer/ITexture2D.ts +++ b/packages/core/src/services/renderer/ITexture2D.ts @@ -94,7 +94,7 @@ export interface ITexture2DInitializationOptions { export interface ITexture2D { get(): unknown; - getSize():[number,number]; + getSize(): [number, number]; update(options: any): void; bind(): void; resize(options: { width: number; height: number }): void; diff --git a/packages/core/src/services/renderer/passes/BaseNormalPass.ts b/packages/core/src/services/renderer/passes/BaseNormalPass.ts index 9229015341..5cc690da3e 100644 --- a/packages/core/src/services/renderer/passes/BaseNormalPass.ts +++ b/packages/core/src/services/renderer/passes/BaseNormalPass.ts @@ -14,7 +14,8 @@ import { IRendererService } from '../IRendererService'; */ @injectable() export default class BaseNormalPass - implements IPass { + implements IPass +{ // @inject(TYPES.IShaderModuleService) protected shaderModuleService: IShaderModuleService; diff --git a/packages/core/src/services/renderer/passes/BasePostProcessingPass.ts b/packages/core/src/services/renderer/passes/BasePostProcessingPass.ts index ec9ffa2a75..0bfa11e159 100644 --- a/packages/core/src/services/renderer/passes/BasePostProcessingPass.ts +++ b/packages/core/src/services/renderer/passes/BasePostProcessingPass.ts @@ -20,7 +20,8 @@ import { IUniform } from '../IUniform'; */ @injectable() export default class BasePostProcessingPass - implements IPostProcessingPass { + implements IPostProcessingPass +{ @inject(TYPES.IShaderModuleService) protected shaderModuleService: IShaderModuleService; @@ -166,9 +167,7 @@ export default class BasePostProcessingPass throw new Error('Method not implemented.'); } - protected convertOptionsToUniforms( - options: Partial, - ): { + protected convertOptionsToUniforms(options: Partial): { [uniformName: string]: IUniform; } | void { const uniforms: { diff --git a/packages/core/src/services/renderer/passes/ClearPass.ts b/packages/core/src/services/renderer/passes/ClearPass.ts index 5d54170cdc..ce3d23e70e 100644 --- a/packages/core/src/services/renderer/passes/ClearPass.ts +++ b/packages/core/src/services/renderer/passes/ClearPass.ts @@ -8,7 +8,7 @@ import BaseNormalPass from './BaseNormalPass'; */ @injectable() export default class ClearPass< - InitializationOptions = {} + InitializationOptions = {}, > extends BaseNormalPass { public getName() { return 'clear'; diff --git a/packages/core/src/services/renderer/passes/PixelPickingPass.ts b/packages/core/src/services/renderer/passes/PixelPickingPass.ts index a76f7c7e28..3927f61c45 100644 --- a/packages/core/src/services/renderer/passes/PixelPickingPass.ts +++ b/packages/core/src/services/renderer/passes/PixelPickingPass.ts @@ -18,7 +18,7 @@ import BaseNormalPass from './BaseNormalPass'; */ @injectable() export default class PixelPickingPass< - InitializationOptions = {} + InitializationOptions = {}, > extends BaseNormalPass { /** * picking framebuffer，供 attributes 颜色编码后输出 @@ -50,11 +50,8 @@ export default class PixelPickingPass< public init(layer: ILayer, config?: Partial) { super.init(layer, config); this.layer = layer; - const { - createTexture2D, - createFramebuffer, - getViewportSize, - } = this.rendererService; + const { createTexture2D, createFramebuffer, getViewportSize } = + this.rendererService; const { width, height } = getViewportSize(); // 创建 picking framebuffer，后续实时 resize this.pickingFBO = createFramebuffer({ @@ -129,11 +126,8 @@ export default class PixelPickingPass< if (!this.layer.isVisible() || !this.layer.needPick(type)) { return; } - const { - getViewportSize, - readPixels, - useFramebuffer, - } = this.rendererService; + const { getViewportSize, readPixels, useFramebuffer } = + this.rendererService; const { width, height } = getViewportSize(); const { enableHighlight, enableSelect } = this.layer.getLayerConfig(); diff --git a/packages/core/src/services/renderer/passes/RenderPass.ts b/packages/core/src/services/renderer/passes/RenderPass.ts index 972f0a5e2f..bca92a0468 100644 --- a/packages/core/src/services/renderer/passes/RenderPass.ts +++ b/packages/core/src/services/renderer/passes/RenderPass.ts @@ -9,7 +9,7 @@ import BaseNormalPass from './BaseNormalPass'; */ @injectable() export default class RenderPass< - InitializationOptions = {} + InitializationOptions = {}, > extends BaseNormalPass { public getType() { return PassType.Normal; diff --git a/packages/core/src/services/renderer/passes/TAAPass.ts b/packages/core/src/services/renderer/passes/TAAPass.ts index da21e15f50..18d9af07b7 100644 --- a/packages/core/src/services/renderer/passes/TAAPass.ts +++ b/packages/core/src/services/renderer/passes/TAAPass.ts @@ -37,9 +37,9 @@ let accumulatingId = 1; * @see https://yuque.antfin-inc.com/yuqi.pyq/fgetpa/ri52hv */ @injectable() -export default class TAAPass extends BaseNormalPass< - InitializationOptions -> { +export default class TAAPass< + InitializationOptions = {}, +> extends BaseNormalPass { @inject(TYPES.IShaderModuleService) protected readonly shaderModuleService: IShaderModuleService; @@ -305,9 +305,8 @@ export default class TAAPass extends BaseNormalPass< fs: fragmentShader, }); - const { vs, fs, uniforms } = this.shaderModuleService.getModule( - shaderModuleName, - ); + const { vs, fs, uniforms } = + this.shaderModuleService.getModule(shaderModuleName); const { createAttribute, createBuffer, createModel } = this.rendererService; return createModel({ vs, diff --git a/packages/core/src/services/renderer/passes/post-processing/BloomPass.ts b/packages/core/src/services/renderer/passes/post-processing/BloomPass.ts index 0775ae3bcc..2bae9968ce 100644 --- a/packages/core/src/services/renderer/passes/post-processing/BloomPass.ts +++ b/packages/core/src/services/renderer/passes/post-processing/BloomPass.ts @@ -13,18 +13,15 @@ export interface IBloomPassConfig { } @injectable() -export default class BloomPass extends BasePostProcessingPass< - IBloomPassConfig -> { +export default class BloomPass extends BasePostProcessingPass { protected setupShaders() { this.shaderModuleService.registerModule('blur-pass', { vs: quad, fs: blur, }); - const { vs, fs, uniforms } = this.shaderModuleService.getModule( - 'blur-pass', - ); + const { vs, fs, uniforms } = + this.shaderModuleService.getModule('blur-pass'); const { width, height } = this.rendererService.getViewportSize(); return { @@ -37,9 +34,7 @@ export default class BloomPass extends BasePostProcessingPass< }; } - protected convertOptionsToUniforms( - options: Partial, - ): { + protected convertOptionsToUniforms(options: Partial): { [uniformName: string]: IUniform; } | void { const uniforms: { diff --git a/packages/core/src/services/renderer/passes/post-processing/BlurHPass.ts b/packages/core/src/services/renderer/passes/post-processing/BlurHPass.ts index 6787c815ed..0cb0463c96 100644 --- a/packages/core/src/services/renderer/passes/post-processing/BlurHPass.ts +++ b/packages/core/src/services/renderer/passes/post-processing/BlurHPass.ts @@ -11,18 +11,15 @@ export interface IBlurHPassConfig { } @injectable() -export default class BlurHPass extends BasePostProcessingPass< - IBlurHPassConfig -> { +export default class BlurHPass extends BasePostProcessingPass { protected setupShaders() { this.shaderModuleService.registerModule('blur-pass', { vs: quad, fs: blur, }); - const { vs, fs, uniforms } = this.shaderModuleService.getModule( - 'blur-pass', - ); + const { vs, fs, uniforms } = + this.shaderModuleService.getModule('blur-pass'); const { width, height } = this.rendererService.getViewportSize(); return { @@ -35,9 +32,7 @@ export default class BlurHPass extends BasePostProcessingPass< }; } - protected convertOptionsToUniforms( - options: Partial, - ): { + protected convertOptionsToUniforms(options: Partial): { [uniformName: string]: IUniform; } | void { const uniforms: { diff --git a/packages/core/src/services/renderer/passes/post-processing/BlurVPass.ts b/packages/core/src/services/renderer/passes/post-processing/BlurVPass.ts index a7baa00aab..f2d5c0f5e3 100644 --- a/packages/core/src/services/renderer/passes/post-processing/BlurVPass.ts +++ b/packages/core/src/services/renderer/passes/post-processing/BlurVPass.ts @@ -10,18 +10,15 @@ export interface IBlurVPassConfig { } @injectable() -export default class BlurVPass extends BasePostProcessingPass< - IBlurVPassConfig -> { +export default class BlurVPass extends BasePostProcessingPass { public setupShaders() { this.shaderModuleService.registerModule('blur-pass', { vs: quad, fs: blur, }); - const { vs, fs, uniforms } = this.shaderModuleService.getModule( - 'blur-pass', - ); + const { vs, fs, uniforms } = + this.shaderModuleService.getModule('blur-pass'); const { width, height } = this.rendererService.getViewportSize(); return { @@ -34,9 +31,7 @@ export default class BlurVPass extends BasePostProcessingPass< }; } - protected convertOptionsToUniforms( - options: Partial, - ): { + protected convertOptionsToUniforms(options: Partial): { [uniformName: string]: IUniform; } | void { const uniforms: { diff --git a/packages/core/src/services/renderer/passes/post-processing/ColorHalfTonePass.ts b/packages/core/src/services/renderer/passes/post-processing/ColorHalfTonePass.ts index 00fe6dac2b..0bb0d3bdf1 100644 --- a/packages/core/src/services/renderer/passes/post-processing/ColorHalfTonePass.ts +++ b/packages/core/src/services/renderer/passes/post-processing/ColorHalfTonePass.ts @@ -11,18 +11,15 @@ export interface IColorHalftonePassConfig { } @injectable() -export default class ColorHalftonePass extends BasePostProcessingPass< - IColorHalftonePassConfig -> { +export default class ColorHalftonePass extends BasePostProcessingPass { protected setupShaders() { this.shaderModuleService.registerModule('colorhalftone-pass', { vs: quad, fs: colorHalftone, }); - const { vs, fs, uniforms } = this.shaderModuleService.getModule( - 'colorhalftone-pass', - ); + const { vs, fs, uniforms } = + this.shaderModuleService.getModule('colorhalftone-pass'); const { width, height } = this.rendererService.getViewportSize(); return { diff --git a/packages/core/src/services/renderer/passes/post-processing/HexagonalPixelatePass.ts b/packages/core/src/services/renderer/passes/post-processing/HexagonalPixelatePass.ts index 3c9aa395b3..e40253137f 100644 --- a/packages/core/src/services/renderer/passes/post-processing/HexagonalPixelatePass.ts +++ b/packages/core/src/services/renderer/passes/post-processing/HexagonalPixelatePass.ts @@ -10,9 +10,7 @@ export interface IHexagonalPixelatePassConfig { } @injectable() -export default class HexagonalPixelatePass extends BasePostProcessingPass< - IHexagonalPixelatePassConfig -> { +export default class HexagonalPixelatePass extends BasePostProcessingPass { protected setupShaders() { this.shaderModuleService.registerModule('hexagonalpixelate-pass', { vs: quad, diff --git a/packages/core/src/services/renderer/passes/post-processing/NoisePass.ts b/packages/core/src/services/renderer/passes/post-processing/NoisePass.ts index d20064f2c3..711becd6f3 100644 --- a/packages/core/src/services/renderer/passes/post-processing/NoisePass.ts +++ b/packages/core/src/services/renderer/passes/post-processing/NoisePass.ts @@ -9,9 +9,7 @@ export interface INoisePassConfig { } @injectable() -export default class NoisePass extends BasePostProcessingPass< - INoisePassConfig -> { +export default class NoisePass extends BasePostProcessingPass { public setupShaders() { this.shaderModuleService.registerModule('noise-pass', { vs: quad, diff --git a/packages/core/src/services/renderer/passes/post-processing/SepiaPass.ts b/packages/core/src/services/renderer/passes/post-processing/SepiaPass.ts index e4a54c4b9b..91048c9376 100644 --- a/packages/core/src/services/renderer/passes/post-processing/SepiaPass.ts +++ b/packages/core/src/services/renderer/passes/post-processing/SepiaPass.ts @@ -9,9 +9,7 @@ export interface ISepiaPassConfig { } @injectable() -export default class SepiaPass extends BasePostProcessingPass< - ISepiaPassConfig -> { +export default class SepiaPass extends BasePostProcessingPass { public setupShaders() { this.shaderModuleService.registerModule('sepia-pass', { vs: quad, diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index 307270935f..e9084d99ad 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/packages/core/src/services/scene/ISceneService.ts @@ -1,6 +1,6 @@ +import EventEmitter from 'eventemitter3'; import { ISceneConfig } from '../config/IConfigService'; import { ILayer } from '../layer/ILayerService'; -import EventEmitter from 'eventemitter3'; export interface ISceneService extends EventEmitter { destroyed: boolean; @@ -18,7 +18,7 @@ export interface ISceneService extends EventEmitter { render(): void; getSceneContainer(): HTMLDivElement; getMarkerContainer(): HTMLElement; - exportPng(type?: 'png' | 'jpg'): Promise ; + exportPng(type?: 'png' | 'jpg'): Promise; addFontFace(fontname: string, fontpath: string): void; destroy(): void; } diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 0f7d764828..cb3f98b2c3 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -15,6 +15,7 @@ import { IMarkerService } from '../component/IMarkerService'; import { IPopupService } from '../component/IPopupService'; import { IGlobalConfigService, ISceneConfig } from '../config/IConfigService'; import { ICoordinateSystemService } from '../coordinate/ICoordinateSystemService'; +import { IDebugService } from '../debug/IDebugService'; import { IInteractionService, IInteractionTarget, @@ -26,7 +27,6 @@ import { IMapService } from '../map/IMapService'; import { IRenderConfig, IRendererService } from '../renderer/IRendererService'; import { IShaderModuleService } from '../shader/IShaderModuleService'; import { ISceneService } from './ISceneService'; -import { IDebugService } from '../debug/IDebugService'; /** * will emit `loaded` `resize` `destroy` event panstart panmove panend @@ -139,15 +139,14 @@ export default class Scene extends EventEmitter implements ISceneService { */ this.hooks.init.tapPromise('initMap', async () => { this.debugService.log('map.mapInitStart', { - type: this.map.version - }) + type: this.map.version, + }); // 等待首次相机同步 await new Promise((resolve) => { this.map.onCameraChanged((viewport: IViewport) => { this.cameraService.init(); this.cameraService.update(viewport); resolve(); - }); this.map.init(); }); @@ -212,14 +211,16 @@ export default class Scene extends EventEmitter implements ISceneService { } this.pickingService.init(this.id); }); - + this.render(); } private registerContextLost() { const canvas = this.rendererService.getCanvas(); - if(canvas) { - canvas.addEventListener('webglcontextlost', () => this.emit('webglcontextlost')); + if (canvas) { + canvas.addEventListener('webglcontextlost', () => + this.emit('webglcontextlost'), + ); } } @@ -401,7 +402,6 @@ export default class Scene extends EventEmitter implements ISceneService { ?.removeListener(this.handleWindowResized); } - this.pickingService.destroy(); this.layerService.destroy(); @@ -413,8 +413,6 @@ export default class Scene extends EventEmitter implements ISceneService { this.fontService.destroy(); this.iconService.destroy(); - - this.removeAllListeners(); this.inited = false; @@ -427,7 +425,7 @@ export default class Scene extends EventEmitter implements ISceneService { // Tip: 把这一部分销毁放到写下一个事件循环中执行，兼容 L7React 中 scene 和 layer 同时销毁的情况 this.rendererService.destroy(); }); - // 销毁 container 容器 + // 销毁 container 容器 this.$container?.parentNode?.removeChild(this.$container); this.emit('destroy'); } diff --git a/packages/core/src/services/source/ISourceService.ts b/packages/core/src/services/source/ISourceService.ts index 54cd2144d5..f83fb493e3 100644 --- a/packages/core/src/services/source/ISourceService.ts +++ b/packages/core/src/services/source/ISourceService.ts @@ -30,7 +30,10 @@ export interface ITileParserCFG { minZoom?: number; maxZoom?: number; zoomOffset?: number; - getCustomData: (tile: { x: number, y: number, z: number },cb:(err:any,data:any)=>void)=>void, + getCustomData: ( + tile: { x: number; y: number; z: number }, + cb: (err: any, data: any) => void, + ) => void; extent?: [number, number, number, number]; requestParameters: Partial; updateStrategy?: 'overlap' | 'replace'; @@ -50,9 +53,12 @@ export interface ITileParserCFG { operation?: any; // 用户自定义请求url - getURLFromTemplate?: (template: string, properties: { x: number; y: number; z: number }) => string; + getURLFromTemplate?: ( + template: string, + properties: { x: number; y: number; z: number }, + ) => string; // 用户自定义处理返回数据回调 - transformResponse?: (response: Object) => any; + transformResponse?: (response: object) => any; } export interface IWMTSServiceOption { diff --git a/packages/l7/src/index.ts b/packages/l7/src/index.ts index fc535e244c..a42a891215 100644 --- a/packages/l7/src/index.ts +++ b/packages/l7/src/index.ts @@ -1,11 +1,10 @@ import Source from '@antv/l7-source'; -export * from '@antv/l7-core'; -export * from '@antv/l7-scene'; -export * from '@antv/l7-maps'; -export * from '@antv/l7-layers'; export * from '@antv/l7-component'; +export * from '@antv/l7-core'; +export * from '@antv/l7-layers'; +export * from '@antv/l7-maps'; +export * from '@antv/l7-scene'; export * from '@antv/l7-utils'; export * from './version'; - export { Source }; diff --git a/packages/layers/package.json b/packages/layers/package.json index 063a08c5a4..e4e3236579 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -59,7 +59,8 @@ "@types/d3-scale": "^2.1.1", "@types/earcut": "^2.1.0", "@types/gl-matrix": "^2.4.5", - "@types/lodash": "^4.14.138" + "@types/lodash": "^4.14.138", + "@antv/l7-test-utils":"^2.13.4" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", "publishConfig": { diff --git a/packages/layers/src/Geometry/models/billboard.ts b/packages/layers/src/Geometry/models/billboard.ts index f6551cae42..f4add26fdc 100644 --- a/packages/layers/src/Geometry/models/billboard.ts +++ b/packages/layers/src/Geometry/models/billboard.ts @@ -17,9 +17,8 @@ export default class BillBoardModel extends BaseModel { private radian: number = 0; // 旋转的弧度 public planeGeometryTriangulation = () => { - const { - center = [120, 30], - } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions; + const { center = [120, 30] } = + this.layer.getLayerConfig() as IGeometryLayerStyleOptions; return { size: 4, indices: [0, 1, 2, 2, 3, 0], @@ -98,31 +97,28 @@ export default class BillBoardModel extends BaseModel { this.updateTexture(drawCanvas); } - const model = await this.layer - .buildLayerModel({ - moduleName: 'geometryBillboard', - vertexShader: planeVert, - fragmentShader: planeFrag, - triangulation: this.planeGeometryTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: true }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'geometryBillboard', + vertexShader: planeVert, + fragmentShader: planeFrag, + triangulation: this.planeGeometryTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: true }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } - public async buildModels():Promise { - return await this.initModels(); + public async buildModels(): Promise { + return this.initModels(); } public updateTexture(drawCanvas: (canvas: HTMLCanvasElement) => void): void { const { createTexture2D } = this.rendererService; - const { - canvasWidth = 1, - canvasHeight = 1, - } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions; + const { canvasWidth = 1, canvasHeight = 1 } = + this.layer.getLayerConfig() as IGeometryLayerStyleOptions; const canvas = document.createElement('canvas'); canvas.width = canvasWidth; canvas.height = canvasHeight; diff --git a/packages/layers/src/Geometry/models/plane.ts b/packages/layers/src/Geometry/models/plane.ts index fcd55b64df..548d834fe2 100644 --- a/packages/layers/src/Geometry/models/plane.ts +++ b/packages/layers/src/Geometry/models/plane.ts @@ -151,26 +151,25 @@ export default class PlaneModel extends BaseModel { this.updateTexture(mapTexture); - const model = await this.layer - .buildLayerModel({ - moduleName: 'geometryPlane', - vertexShader: planeVert, - fragmentShader: planeFrag, - triangulation: this.planeGeometryTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: true }, - stencil: getMask(mask, maskInside), - blend: this.getBlend(), - cull: { - enable: true, - face: gl.BACK, // gl.FRONT | gl.BACK; - }, - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'geometryPlane', + vertexShader: planeVert, + fragmentShader: planeFrag, + triangulation: this.planeGeometryTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: true }, + stencil: getMask(mask, maskInside), + blend: this.getBlend(), + cull: { + enable: true, + face: gl.BACK, // gl.FRONT | gl.BACK; + }, + }); + return [model]; } - public async buildModels():Promise { - return await this.initModels(); + public async buildModels(): Promise { + return this.initModels(); } public createModelData(options?: any) { @@ -181,12 +180,8 @@ export default class PlaneModel extends BaseModel { width: oldwidth, height: oldheight, } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions; - const { - widthSegments, - heightSegments, - width, - height, - } = options as IGeometryLayerStyleOptions; + const { widthSegments, heightSegments, width, height } = + options as IGeometryLayerStyleOptions; this.layer.style({ widthSegments: widthSegments !== undefined ? widthSegments : oldwidthSegments, diff --git a/packages/layers/src/Geometry/models/sprite.ts b/packages/layers/src/Geometry/models/sprite.ts index 1373eaf1ce..bde579616f 100644 --- a/packages/layers/src/Geometry/models/sprite.ts +++ b/packages/layers/src/Geometry/models/sprite.ts @@ -1,9 +1,4 @@ -import { - gl, - IModel, - IModelUniform, - ITexture2D, -} from '@antv/l7-core'; +import { gl, IModel, IModelUniform, ITexture2D } from '@antv/l7-core'; import { Version } from '@antv/l7-maps'; import BaseModel from '../../core/BaseModel'; @@ -63,9 +58,8 @@ export default class SpriteModel extends BaseModel { } public planeGeometryUpdateTriangulation = () => { - const { - spriteBottom = -100000, - } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions; + const { spriteBottom = -100000 } = + this.layer.getLayerConfig() as IGeometryLayerStyleOptions; const updateZ = this.spriteUpdate; const bottomZ = spriteBottom; const topZ = this.spriteTop; @@ -175,21 +169,20 @@ export default class SpriteModel extends BaseModel { this.updateModel(); }, 100); - const model = await this.layer - .buildLayerModel({ - moduleName: 'geometrySprite', - vertexShader: spriteVert, - fragmentShader: spriteFrag, - triangulation: this.planeGeometryTriangulation, - primitive: gl.POINTS, - depth: { enable: false }, - blend: this.getBlend(), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'geometrySprite', + vertexShader: spriteVert, + fragmentShader: spriteFrag, + triangulation: this.planeGeometryTriangulation, + primitive: gl.POINTS, + depth: { enable: false }, + blend: this.getBlend(), + }); + return [model]; } - public async buildModels():Promise { - return await this.initModels(); + public async buildModels(): Promise { + return this.initModels(); } public updateTexture(mapTexture: string | undefined): void { diff --git a/packages/layers/src/canvas/models/canvas.ts b/packages/layers/src/canvas/models/canvas.ts index 8aef1503db..d0043446b9 100644 --- a/packages/layers/src/canvas/models/canvas.ts +++ b/packages/layers/src/canvas/models/canvas.ts @@ -61,9 +61,8 @@ export default class CanvaModel extends BaseModel { } public async initModels() { - const { - update = CanvasUpdateType.ALWAYS, - } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions; + const { update = CanvasUpdateType.ALWAYS } = + this.layer.getLayerConfig() as ICanvasLayerStyleOptions; this.updateMode = update as CanvasUpdateType; this.initCanvas(); @@ -79,10 +78,8 @@ export default class CanvaModel extends BaseModel { const { zIndex } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions; const size = this.mapService.getSize(); const [width, height] = size; - const { - width: viewWidth, - height: viewHeight, - } = this.rendererService.getViewportSize(); + const { width: viewWidth, height: viewHeight } = + this.rendererService.getViewportSize(); this.prevSize = [viewWidth, viewHeight]; const canvas = document.createElement('canvas'); @@ -110,10 +107,8 @@ export default class CanvaModel extends BaseModel { }; public renderCanvas = () => { - const { - width: viewWidth, - height: viewHeight, - } = this.rendererService.getViewportSize(); + const { width: viewWidth, height: viewHeight } = + this.rendererService.getViewportSize(); if (this.prevSize[0] !== viewWidth || this.prevSize[1] !== viewHeight) { this.prevSize = [viewWidth, viewHeight]; const size = this.mapService.getSize(); @@ -124,9 +119,8 @@ export default class CanvaModel extends BaseModel { this.canvas.style.height = height + 'px'; } - const { - drawingOnCanvas, - } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions; + const { drawingOnCanvas } = + this.layer.getLayerConfig() as ICanvasLayerStyleOptions; if (this.ctx) { drawingOnCanvas({ diff --git a/packages/layers/src/citybuliding/models/build.ts b/packages/layers/src/citybuliding/models/build.ts index 6c8f69c798..6436f3bdb6 100644 --- a/packages/layers/src/citybuliding/models/build.ts +++ b/packages/layers/src/citybuliding/models/build.ts @@ -1,10 +1,10 @@ import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core'; import { rgb2arr } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; +import { ICityBuildLayerStyleOptions } from '../../core/interface'; import { PolygonExtrudeTriangulation } from '../../core/triangulation'; import buildFrag from '../shaders/build_frag.glsl'; import buildVert from '../shaders/build_vert.glsl'; -import { ICityBuildLayerStyleOptions } from '../../core/interface'; export default class CityBuildModel extends BaseModel { private cityCenter: [number, number]; private cityMinSize: number; @@ -67,23 +67,22 @@ export default class CityBuildModel extends BaseModel { this.startModelAnimate(); - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { - const model = await this.layer - .buildLayerModel({ - moduleName: 'cityBuilding', - vertexShader: buildVert, - fragmentShader: buildFrag, - triangulation: PolygonExtrudeTriangulation, - depth: { enable: true }, - cull: { - enable: true, - face: gl.BACK, - }, - }) - return [model] + public async buildModels(): Promise { + const model = await this.layer.buildLayerModel({ + moduleName: 'cityBuilding', + vertexShader: buildVert, + fragmentShader: buildFrag, + triangulation: PolygonExtrudeTriangulation, + depth: { enable: true }, + cull: { + enable: true, + face: gl.BACK, + }, + }); + return [model]; } protected registerBuiltinAttributes() { @@ -124,9 +123,7 @@ export default class CityBuildModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 10 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, diff --git a/packages/layers/src/earth/models/atmosphere.ts b/packages/layers/src/earth/models/atmosphere.ts index 1ebde19eb3..5ecd7f7c26 100644 --- a/packages/layers/src/earth/models/atmosphere.ts +++ b/packages/layers/src/earth/models/atmosphere.ts @@ -17,35 +17,33 @@ interface IAtmoSphereLayerStyleOptions { export default class EarthAtomSphereModel extends BaseModel { public getUninforms(): IModelUniform { - const { - opacity = 1, - } = this.layer.getLayerConfig() as IAtmoSphereLayerStyleOptions; + const { opacity = 1 } = + this.layer.getLayerConfig() as IAtmoSphereLayerStyleOptions; return { u_opacity: isNumber(opacity) ? opacity : 1.0, }; } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } public clearModels() { return ''; } - public async buildModels():Promise { + public async buildModels(): Promise { // TODO: 调整图层的绘制顺序 地球大气层 this.layer.zIndex = -997; - const model = await this.layer - .buildLayerModel({ - moduleName: 'earthAtmoSphere', - vertexShader: atmoSphereVert, - fragmentShader: atmoSphereFrag, - triangulation: earthTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'earthAtmoSphere', + vertexShader: atmoSphereVert, + fragmentShader: atmoSphereFrag, + triangulation: earthTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + }); + return [model]; } protected registerBuiltinAttributes() { @@ -61,9 +59,7 @@ export default class EarthAtomSphereModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, diff --git a/packages/layers/src/earth/models/base.ts b/packages/layers/src/earth/models/base.ts index 0b29e60365..b501cec6e4 100644 --- a/packages/layers/src/earth/models/base.ts +++ b/packages/layers/src/earth/models/base.ts @@ -80,27 +80,26 @@ export default class BaseEarthModel extends BaseModel { this.layerService.reRender(); }); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { return ''; } - public async buildModels():Promise { + public async buildModels(): Promise { // Tip: 调整图层的绘制顺序 地球大气层 this.layer.zIndex = -998; - const model = await this.layer - .buildLayerModel({ - moduleName: 'earthBase', - vertexShader: baseVert, - fragmentShader: baseFrag, - triangulation: earthTriangulation, - depth: { enable: true }, - blend: this.getBlend(), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'earthBase', + vertexShader: baseVert, + fragmentShader: baseFrag, + triangulation: earthTriangulation, + depth: { enable: true }, + blend: this.getBlend(), + }); + return [model]; } protected registerBuiltinAttributes() { @@ -115,9 +114,7 @@ export default class BaseEarthModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, diff --git a/packages/layers/src/earth/models/bloomsphere.ts b/packages/layers/src/earth/models/bloomsphere.ts index ff3ec5afdf..85a2b518c2 100644 --- a/packages/layers/src/earth/models/bloomsphere.ts +++ b/packages/layers/src/earth/models/bloomsphere.ts @@ -17,35 +17,33 @@ interface IBloomLayerStyleOptions { export default class EarthBloomSphereModel extends BaseModel { public getUninforms(): IModelUniform { - const { - opacity = 1, - } = this.layer.getLayerConfig() as IBloomLayerStyleOptions; + const { opacity = 1 } = + this.layer.getLayerConfig() as IBloomLayerStyleOptions; return { u_opacity: isNumber(opacity) ? opacity : 1.0, }; } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } public clearModels() { return ''; } - public async buildModels():Promise { + public async buildModels(): Promise { // Tip: 调整图层的绘制顺序，让它保持在地球后面（减少锯齿现象） this.layer.zIndex = -999; - const model = await this.layer - .buildLayerModel({ - moduleName: 'earthBloom', - vertexShader: bloomSphereVert, - fragmentShader: bloomSphereFrag, - triangulation: earthOuterTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'earthBloom', + vertexShader: bloomSphereVert, + fragmentShader: bloomSphereFrag, + triangulation: earthOuterTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + }); + return [model]; } protected registerBuiltinAttributes() { @@ -60,9 +58,7 @@ export default class EarthBloomSphereModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, diff --git a/packages/layers/src/heatmap/models/grid.ts b/packages/layers/src/heatmap/models/grid.ts index 77dd542aa6..804be1a0ef 100644 --- a/packages/layers/src/heatmap/models/grid.ts +++ b/packages/layers/src/heatmap/models/grid.ts @@ -13,11 +13,8 @@ import heatmapGridVert from '../shaders/grid_vert.glsl'; import heatmapGridFrag from '../shaders/hexagon_frag.glsl'; export default class GridModel extends BaseModel { public getUninforms(): IModelUniform { - const { - opacity, - coverage, - angle, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { opacity, coverage, angle } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; return { u_opacity: opacity || 1.0, u_coverage: coverage || 0.9, @@ -30,25 +27,22 @@ export default class GridModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'heatmapGrid', - vertexShader: heatmapGridVert, - fragmentShader: heatmapGridFrag, - triangulation: HeatmapGridTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - stencil: getMask(mask, maskInside), - }) - return [model] + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const model = await this.layer.buildLayerModel({ + moduleName: 'heatmapGrid', + vertexShader: heatmapGridVert, + fragmentShader: heatmapGridFrag, + triangulation: HeatmapGridTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -63,9 +57,11 @@ export default class GridModel extends BaseModel { }, size: 3, update: (feature: IEncodeFeature) => { - const coordinates = (feature.version === 'GAODE2.x' - ? feature.originCoordinates - : feature.coordinates) as number[]; + const coordinates = ( + feature.version === 'GAODE2.x' + ? feature.originCoordinates + : feature.coordinates + ) as number[]; return [coordinates[0], coordinates[1], 0]; }, }, diff --git a/packages/layers/src/heatmap/models/grid3d.ts b/packages/layers/src/heatmap/models/grid3d.ts index 40c2371804..7451716750 100644 --- a/packages/layers/src/heatmap/models/grid3d.ts +++ b/packages/layers/src/heatmap/models/grid3d.ts @@ -13,11 +13,8 @@ import heatmapGrid3dVert from '../shaders/hexagon_3d_vert.glsl'; import heatmapGridFrag from '../shaders/hexagon_frag.glsl'; export default class Grid3DModel extends BaseModel { public getUninforms(): IModelUniform { - const { - opacity, - coverage, - angle, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { opacity, coverage, angle } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; return { u_opacity: opacity || 1.0, u_coverage: coverage || 1.0, @@ -30,27 +27,23 @@ export default class Grid3DModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'heatmapGrid3d', - vertexShader: heatmapGrid3dVert, - fragmentShader: heatmapGridFrag, - triangulation: PointExtrudeTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: true }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] - + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const model = await this.layer.buildLayerModel({ + moduleName: 'heatmapGrid3d', + vertexShader: heatmapGrid3dVert, + fragmentShader: heatmapGridFrag, + triangulation: PointExtrudeTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: true }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -64,9 +57,7 @@ export default class Grid3DModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -107,9 +98,11 @@ export default class Grid3DModel extends BaseModel { }, size: 3, update: (feature: IEncodeFeature) => { - const coordinates = (feature.version === 'GAODE2.x' - ? feature.originCoordinates - : feature.coordinates) as number[]; + const coordinates = ( + feature.version === 'GAODE2.x' + ? feature.originCoordinates + : feature.coordinates + ) as number[]; return [coordinates[0], coordinates[1], 0]; }, }, diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index 976c684185..ff22fb329a 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/packages/layers/src/heatmap/models/heatmap.ts @@ -60,15 +60,11 @@ export default class HeatMapModel extends BaseModel { throw new Error('Method not implemented.'); } - public async initModels(): Promise { - const { - createFramebuffer, - getViewportSize, - createTexture2D, - } = this.rendererService; - const shapeAttr = this.styleAttributeService.getLayerStyleAttribute( - 'shape', - ); + public async initModels(): Promise { + const { createFramebuffer, getViewportSize, createTexture2D } = + this.rendererService; + const shapeAttr = + this.styleAttributeService.getLayerStyleAttribute('shape'); const shapeType = shapeAttr?.scale?.field || 'heatmap'; this.shapeType = shapeType as string; // 生成热力图密度图 @@ -95,12 +91,11 @@ export default class HeatMapModel extends BaseModel { }); this.updateColorTexture(); - return [this.intensityModel, this.colorModel] - + return [this.intensityModel, this.colorModel]; } - public async buildModels():Promise { - return await this.initModels(); + public async buildModels(): Promise { + return this.initModels(); } protected registerBuiltinAttributes() { @@ -137,9 +132,7 @@ export default class HeatMapModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return [size as number]; }, @@ -174,24 +167,17 @@ export default class HeatMapModel extends BaseModel { } private buildHeatmapColor(): IModel { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; this.shaderModuleService.registerModule('heatmapColor', { vs: heatmapColorVert, fs: heatmapColorFrag, }); - const { vs, fs, uniforms } = this.shaderModuleService.getModule( - 'heatmapColor', - ); - const { - createAttribute, - createElements, - createBuffer, - createModel, - } = this.rendererService; + const { vs, fs, uniforms } = + this.shaderModuleService.getModule('heatmapColor'); + const { createAttribute, createElements, createBuffer, createModel } = + this.rendererService; return createModel({ vs, fs, @@ -236,7 +222,7 @@ export default class HeatMapModel extends BaseModel { this.layerService.beforeRenderData(this.layer); this.layer.hooks.beforeRender.call(); - + this.intensityModel?.draw({ uniforms: { u_opacity: opacity || 1.0, @@ -249,9 +235,8 @@ export default class HeatMapModel extends BaseModel { } private drawColorMode() { - const { - opacity, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { opacity } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; this.colorModel?.draw({ uniforms: { u_opacity: opacity || 1.0, @@ -262,9 +247,8 @@ export default class HeatMapModel extends BaseModel { } private draw3DHeatMap() { - const { - opacity, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { opacity } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; // const invert = mat4.invert( // mat4.create(), @@ -284,16 +268,15 @@ export default class HeatMapModel extends BaseModel { u_opacity: opacity || 1.0, u_colorTexture: this.colorTexture, u_texture: this.heatmapFramerBuffer, - u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(), + u_ViewProjectionMatrixUncentered: + this.cameraService.getViewProjectionMatrixUncentered(), u_InverseViewProjectionMatrix: [...invert], }, }); } private build3dHeatMap() { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; const { getViewportSize } = this.rendererService; const { width, height } = getViewportSize(); const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0); @@ -302,15 +285,10 @@ export default class HeatMapModel extends BaseModel { fs: heatmap3DFrag, }); - const { vs, fs, uniforms } = this.shaderModuleService.getModule( - 'heatmap3dColor', - ); - const { - createAttribute, - createElements, - createBuffer, - createModel, - } = this.rendererService; + const { vs, fs, uniforms } = + this.shaderModuleService.getModule('heatmap3dColor'); + const { createAttribute, createElements, createBuffer, createModel } = + this.rendererService; return createModel({ vs, fs, @@ -364,9 +342,8 @@ export default class HeatMapModel extends BaseModel { this.texture.destroy(); } - const { - rampColors, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { rampColors } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; const imageData = generateColorRamp(rampColors as IColorRamp); this.colorTexture = createTexture2D({ data: new Uint8Array(imageData.data), diff --git a/packages/layers/src/heatmap/models/hexagon.ts b/packages/layers/src/heatmap/models/hexagon.ts index b89968fd85..fdb374fc7b 100644 --- a/packages/layers/src/heatmap/models/hexagon.ts +++ b/packages/layers/src/heatmap/models/hexagon.ts @@ -14,11 +14,8 @@ import heatmapGridVert from '../shaders/hexagon_vert.glsl'; export default class HexagonModel extends BaseModel { public getUninforms(): IModelUniform { - const { - opacity, - coverage, - angle, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const { opacity, coverage, angle } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; return { u_opacity: opacity || 1.0, u_coverage: coverage || 0.9, @@ -31,26 +28,23 @@ export default class HexagonModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'heatmapHexagon', - vertexShader: heatmapGridVert, - fragmentShader: heatmapGridFrag, - triangulation: HeatmapGridTriangulation, - depth: { enable: false }, - primitive: gl.TRIANGLES, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; + const model = await this.layer.buildLayerModel({ + moduleName: 'heatmapHexagon', + vertexShader: heatmapGridVert, + fragmentShader: heatmapGridFrag, + triangulation: HeatmapGridTriangulation, + depth: { enable: false }, + primitive: gl.TRIANGLES, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -65,9 +59,11 @@ export default class HexagonModel extends BaseModel { }, size: 3, update: (feature: IEncodeFeature) => { - const coordinates = (feature.version === 'GAODE2.x' - ? feature.originCoordinates - : feature.coordinates) as number[]; + const coordinates = ( + feature.version === 'GAODE2.x' + ? feature.originCoordinates + : feature.coordinates + ) as number[]; return [coordinates[0], coordinates[1], 0]; }, }, diff --git a/packages/layers/src/image/models/image.ts b/packages/layers/src/image/models/image.ts index ba0e27570f..75b7645a3a 100644 --- a/packages/layers/src/image/models/image.ts +++ b/packages/layers/src/image/models/image.ts @@ -24,10 +24,8 @@ export default class ImageModel extends BaseModel { } public async initModels(): Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IImageLayerStyleOptions; + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IImageLayerStyleOptions; const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; @@ -61,24 +59,22 @@ export default class ImageModel extends BaseModel { mag: gl.LINEAR, min: gl.LINEAR, }); - } - const model = await this.layer - .buildLayerModel({ - moduleName: 'rasterImage', - vertexShader: ImageVert, - fragmentShader: ImageFrag, - triangulation: RasterImageTriangulation, - primitive: gl.TRIANGLES, - blend: { - // Tip: 优化显示效果 - enable: true, - }, - depth: { enable: false }, - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'rasterImage', + vertexShader: ImageVert, + fragmentShader: ImageFrag, + triangulation: RasterImageTriangulation, + primitive: gl.TRIANGLES, + blend: { + // Tip: 优化显示效果 + enable: true, + }, + depth: { enable: false }, + stencil: getMask(mask, maskInside), + }); + return [model]; } public clearModels(): void { @@ -86,7 +82,7 @@ export default class ImageModel extends BaseModel { } public async buildModels(): Promise { - return await this.initModels(); + return this.initModels(); } protected registerBuiltinAttributes() { diff --git a/packages/layers/src/index.ts b/packages/layers/src/index.ts index 2ce9939635..fd43768515 100644 --- a/packages/layers/src/index.ts +++ b/packages/layers/src/index.ts @@ -137,6 +137,7 @@ container .to(LayerModelPlugin) .inRequestScope(); +export * from './core/interface'; export { BaseLayer, BaseModel, @@ -154,5 +155,3 @@ export { MaskLayer, TileDebugLayer, }; - -export * from './core/interface'; diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index 6da89d90bd..e23685bdd8 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -133,7 +133,7 @@ export default class ArcModel extends BaseModel { this.updateTexture(); this.iconService.on('imageUpdate', this.updateTexture); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -143,11 +143,8 @@ export default class ArcModel extends BaseModel { } public getShaders(): { frag: string; vert: string; type: string } { - const { - sourceColor, - targetColor, - lineType, - } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { sourceColor, targetColor, lineType } = + this.layer.getLayerConfig() as ILineLayerStyleOptions; if (lineType === 'dash') { return { frag: arc_dash_frag, @@ -172,7 +169,7 @@ export default class ArcModel extends BaseModel { } } - public async buildModels():Promise { + public async buildModels(): Promise { const { segmentNumber = 30, mask = false, @@ -180,18 +177,17 @@ export default class ArcModel extends BaseModel { } = this.layer.getLayerConfig() as ILineLayerStyleOptions; const { frag, vert, type } = this.getShaders(); // - const model = await this.layer - .buildLayerModel({ - moduleName: 'lineArc2d' + type, - vertexShader: vert, - fragmentShader: frag, - triangulation: LineArcTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - segmentNumber, - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'lineArc2d' + type, + vertexShader: vert, + fragmentShader: frag, + triangulation: LineArcTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + segmentNumber, + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { @@ -207,9 +203,7 @@ export default class ArcModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -249,9 +243,7 @@ export default class ArcModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const iconMap = this.iconService.getIconMap(); const { texture } = feature; const { x, y } = iconMap[texture as string] || { x: 0, y: 0 }; diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index a08c810de3..b9c2f89bc0 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -124,11 +124,10 @@ export default class Arc3DModel extends BaseModel { } public async initModels(): Promise { - this.updateTexture(); this.iconService.on('imageUpdate', this.updateTexture); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -138,10 +137,8 @@ export default class Arc3DModel extends BaseModel { } public getShaders(): { frag: string; vert: string; type: string } { - const { - sourceColor, - targetColor, - } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { sourceColor, targetColor } = + this.layer.getLayerConfig() as ILineLayerStyleOptions; if (sourceColor && targetColor) { // 分离 linear 功能 @@ -159,7 +156,7 @@ export default class Arc3DModel extends BaseModel { } } - public async buildModels():Promise { + public async buildModels(): Promise { const { segmentNumber = 30, mask = false, @@ -167,17 +164,16 @@ export default class Arc3DModel extends BaseModel { } = this.layer.getLayerConfig() as ILineLayerStyleOptions; const { frag, vert, type } = this.getShaders(); - const model = await this.layer - .buildLayerModel({ - moduleName: 'lineArc3d' + type, - vertexShader: vert, - fragmentShader: frag, - triangulation: LineArcTriangulation, - blend: this.getBlend(), - segmentNumber, - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'lineArc3d' + type, + vertexShader: vert, + fragmentShader: frag, + triangulation: LineArcTriangulation, + blend: this.getBlend(), + segmentNumber, + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -192,9 +188,7 @@ export default class Arc3DModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -233,9 +227,7 @@ export default class Arc3DModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const iconMap = this.iconService.getIconMap(); const { texture } = feature; const { x, y } = iconMap[texture as string] || { x: 0, y: 0 }; diff --git a/packages/layers/src/line/models/earthArc_3d.ts b/packages/layers/src/line/models/earthArc_3d.ts index 89dfe2532e..bed6078d2a 100644 --- a/packages/layers/src/line/models/earthArc_3d.ts +++ b/packages/layers/src/line/models/earthArc_3d.ts @@ -127,7 +127,7 @@ export default class Arc3DModel extends BaseModel { this.updateTexture(); this.iconService.on('imageUpdate', this.updateTexture); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -137,10 +137,8 @@ export default class Arc3DModel extends BaseModel { } public getShaders(): { frag: string; vert: string; type: string } { - const { - sourceColor, - targetColor, - } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { sourceColor, targetColor } = + this.layer.getLayerConfig() as ILineLayerStyleOptions; if (sourceColor && targetColor) { // 分离 linear 功能 @@ -158,25 +156,24 @@ export default class Arc3DModel extends BaseModel { } } - public async buildModels():Promise { + public async buildModels(): Promise { const { segmentNumber = 30, mask = false, maskInside = true, } = this.layer.getLayerConfig() as ILineLayerStyleOptions; const { frag, vert, type } = this.getShaders(); - const model = await this.layer - .buildLayerModel({ - moduleName: 'lineEarthArc3d' + type, - vertexShader: vert, - fragmentShader: frag, - triangulation: LineArcTriangulation, - depth: { enable: true }, - blend: this.getBlend(), - segmentNumber, - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'lineEarthArc3d' + type, + vertexShader: vert, + fragmentShader: frag, + triangulation: LineArcTriangulation, + depth: { enable: true }, + blend: this.getBlend(), + segmentNumber, + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -191,9 +188,7 @@ export default class Arc3DModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -232,9 +227,7 @@ export default class Arc3DModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const iconMap = this.iconService.getIconMap(); const { texture } = feature; const { x, y } = iconMap[texture as string] || { x: 0, y: 0 }; diff --git a/packages/layers/src/line/models/great_circle.ts b/packages/layers/src/line/models/great_circle.ts index 3324bf809a..fedd96b224 100644 --- a/packages/layers/src/line/models/great_circle.ts +++ b/packages/layers/src/line/models/great_circle.ts @@ -116,7 +116,7 @@ export default class GreatCircleModel extends BaseModel { this.updateTexture(); this.iconService.on('imageUpdate', this.updateTexture); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -125,22 +125,19 @@ export default class GreatCircleModel extends BaseModel { this.iconService.off('imageUpdate', this.updateTexture); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as ILineLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'lineGreatCircle', - vertexShader: line_arc2d_vert, - fragmentShader: line_arc_frag, - triangulation: LineArcTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as ILineLayerStyleOptions; + const model = await this.layer.buildLayerModel({ + moduleName: 'lineGreatCircle', + vertexShader: line_arc2d_vert, + fragmentShader: line_arc_frag, + triangulation: LineArcTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -155,9 +152,7 @@ export default class GreatCircleModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -197,9 +192,7 @@ export default class GreatCircleModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const iconMap = this.iconService.getIconMap(); const { texture } = feature; // console.log('icon feature', feature) diff --git a/packages/layers/src/line/models/half.ts b/packages/layers/src/line/models/half.ts index 5fcb274e60..32f0c9e8a4 100644 --- a/packages/layers/src/line/models/half.ts +++ b/packages/layers/src/line/models/half.ts @@ -85,14 +85,14 @@ export default class LineModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } public clearModels() { this.dataTexture?.destroy(); } - public async buildModels(): Promise { + public async buildModels(): Promise { const { mask = false, maskInside = true, @@ -101,17 +101,16 @@ export default class LineModel extends BaseModel { const { frag, vert } = this.getShaders(); this.layer.triangulation = LineTriangulation; - const model = await this.layer - .buildLayerModel({ - moduleName: 'lineHalf', - vertexShader: vert, - fragmentShader: frag, - triangulation: LineTriangulation, - depth: { enable: depth }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'lineHalf', + vertexShader: vert, + fragmentShader: frag, + triangulation: LineTriangulation, + depth: { enable: depth }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } /** @@ -165,9 +164,7 @@ export default class LineModel extends BaseModel { type: gl.FLOAT, }, size: 4, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const startPoint = (feature.coordinates[0] || [0, 0]) as number[]; const endPoint = (feature.coordinates[3] || [0, 0]) as number[]; @@ -188,9 +185,7 @@ export default class LineModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0]; }, diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 6939195b16..6f856e839c 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -68,8 +68,8 @@ export default class LineModel extends BaseModel { dashArray.push(0, 0); } - if (this.rendererService.getDirty()) { - this.texture && this.texture.bind(); + if (this.rendererService.getDirty() && this.texture) { + this.texture.bind(); } // 转化渐变色 diff --git a/packages/layers/src/line/models/linearline.ts b/packages/layers/src/line/models/linearline.ts index 842a704c38..23bf3d44a3 100644 --- a/packages/layers/src/line/models/linearline.ts +++ b/packages/layers/src/line/models/linearline.ts @@ -78,7 +78,7 @@ export default class LinearLineModel extends BaseModel { public async initModels(): Promise { this.updateTexture(); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -86,7 +86,7 @@ export default class LinearLineModel extends BaseModel { this.dataTexture?.destroy(); } - public async buildModels():Promise { + public async buildModels(): Promise { const { mask = false, maskInside = true, @@ -95,17 +95,16 @@ export default class LinearLineModel extends BaseModel { this.layer.triangulation = LineTriangulation; - const model = await this.layer - .buildLayerModel({ - moduleName: 'lineRampColors', - vertexShader: linear_line_vert, - fragmentShader: linear_line_frag, - triangulation: LineTriangulation, - depth: { enable: depth }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'lineRampColors', + vertexShader: linear_line_vert, + fragmentShader: linear_line_frag, + triangulation: LineTriangulation, + depth: { enable: depth }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } protected registerBuiltinAttributes() { @@ -169,9 +168,7 @@ export default class LinearLineModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0]; }, @@ -231,9 +228,8 @@ export default class LinearLineModel extends BaseModel { if (this.colorTexture) { this.colorTexture.destroy(); } - const { - rampColors, - } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { rampColors } = + this.layer.getLayerConfig() as ILineLayerStyleOptions; const imageData = generateColorRamp(rampColors as IColorRamp); this.colorTexture = createTexture2D({ data: new Uint8Array(imageData.data), diff --git a/packages/layers/src/line/models/simpleLine.ts b/packages/layers/src/line/models/simpleLine.ts index 3015638722..2ccd449e57 100644 --- a/packages/layers/src/line/models/simpleLine.ts +++ b/packages/layers/src/line/models/simpleLine.ts @@ -79,7 +79,7 @@ export default class SimpleLineModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -87,10 +87,8 @@ export default class SimpleLineModel extends BaseModel { } public getShaders(): { frag: string; vert: string; type: string } { - const { - sourceColor, - targetColor, - } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { sourceColor, targetColor } = + this.layer.getLayerConfig() as ILineLayerStyleOptions; if (sourceColor && targetColor) { // 分离 linear 功能 return { @@ -107,27 +105,24 @@ export default class SimpleLineModel extends BaseModel { } } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as ILineLayerStyleOptions; const { frag, vert, type } = this.getShaders(); - const model = await this.layer - .buildLayerModel({ - moduleName: type, - vertexShader: vert, - fragmentShader: frag, - triangulation: SimpleLineTriangulation, - primitive: gl.LINES, - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - pick: false, - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: type, + vertexShader: vert, + fragmentShader: frag, + triangulation: SimpleLineTriangulation, + primitive: gl.LINES, + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + pick: false, + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -185,9 +180,7 @@ export default class SimpleLineModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0]; }, diff --git a/packages/layers/src/line/models/wall.ts b/packages/layers/src/line/models/wall.ts index c368c3a399..3ddd1cfc74 100644 --- a/packages/layers/src/line/models/wall.ts +++ b/packages/layers/src/line/models/wall.ts @@ -45,7 +45,7 @@ export default class LineWallModel extends BaseModel { return { u_heightfixed: Number(heightfixed), - + u_opacity: isNumber(opacity) ? opacity : 1.0, u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0, @@ -74,7 +74,7 @@ export default class LineWallModel extends BaseModel { this.updateTexture(); this.iconService.on('imageUpdate', this.updateTexture); - return await this.buildModels(); + return this.buildModels(); } public clearModels() { @@ -82,17 +82,16 @@ export default class LineWallModel extends BaseModel { this.iconService.off('imageUpdate', this.updateTexture); } - public async buildModels():Promise { - const model = await this.layer - .buildLayerModel({ - moduleName: 'lineWall', - vertexShader: line_vert, - fragmentShader: line_frag, - triangulation: LineTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - }) - return [model] + public async buildModels(): Promise { + const model = await this.layer.buildLayerModel({ + moduleName: 'lineWall', + vertexShader: line_vert, + fragmentShader: line_frag, + triangulation: LineTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + }); + return [model]; } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ @@ -150,9 +149,7 @@ export default class LineWallModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0]; }, @@ -219,9 +216,7 @@ export default class LineWallModel extends BaseModel { type: gl.FLOAT, }, size: 2, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const iconMap = this.iconService.getIconMap(); const { texture } = feature; const { x, y } = iconMap[texture as string] || { x: 0, y: 0 }; diff --git a/packages/layers/src/mask/models/fill.ts b/packages/layers/src/mask/models/fill.ts index 8a93571738..d14c6a9378 100644 --- a/packages/layers/src/mask/models/fill.ts +++ b/packages/layers/src/mask/models/fill.ts @@ -9,10 +9,8 @@ import mask_vert from '../shaders/mask_vert.glsl'; export default class MaskModel extends BaseModel { public getUninforms() { - const { - opacity = 0, - color = '#000' - } = this.layer.getLayerConfig() as IMaskLayerStyleOptions; + const { opacity = 0, color = '#000' } = + this.layer.getLayerConfig() as IMaskLayerStyleOptions; return { u_opacity: isNumber(opacity) ? opacity : 0.0, u_color: rgb2arr(color), @@ -20,39 +18,40 @@ export default class MaskModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } - public async buildModels(): Promise { - const model = await this.layer - .buildLayerModel({ - moduleName: 'mask', - vertexShader: mask_vert, - fragmentShader: mask_frag, - triangulation: polygonTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - stencil: { - enable: true, + public async buildModels(): Promise { + const model = await this.layer.buildLayerModel({ + moduleName: 'mask', + vertexShader: mask_vert, + fragmentShader: mask_frag, + triangulation: polygonTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + stencil: { + enable: true, + mask: 0xff, + func: { + cmp: gl.ALWAYS, + ref: 1, mask: 0xff, - func: { - cmp: gl.ALWAYS, - ref: 1, - mask: 0xff, - }, - opFront: { - fail: gl.REPLACE, - zfail: gl.REPLACE, - zpass: gl.REPLACE, - }, }, - pick: false - }) - return [model] + opFront: { + fail: gl.REPLACE, + zfail: gl.REPLACE, + zpass: gl.REPLACE, + }, + }, + pick: false, + }); + return [model]; } public clearModels(refresh = true) { - refresh && this.layerService.clear(); + if (refresh) { + this.layerService.clear(); + } } protected registerBuiltinAttributes() { diff --git a/packages/layers/src/point/__tests__/layer_init.spec.ts b/packages/layers/src/point/__tests__/layer_init.spec.ts index 0aaf61a4a3..7c94d1d179 100644 --- a/packages/layers/src/point/__tests__/layer_init.spec.ts +++ b/packages/layers/src/point/__tests__/layer_init.spec.ts @@ -8,92 +8,88 @@ describe('template', () => { const body = document.querySelector('body') as HTMLBodyElement; body.appendChild(el); const scene = TestScene({}); - const testData = [ + const testData = [ { x: 112, y: 30, - name:'text1', - v:10, + name: 'text1', + v: 10, }, { x: 112, y: 32, - name:'text2', - v:20 + name: 'text2', + v: 20, }, ]; it('scene layer fill', async () => { - const layer = new PointLayer().source( - testData, - { + const layer = new PointLayer() + .source(testData, { parser: { type: 'json', x: 'x', y: 'y', }, - }, - ).shape('circle') - .color('red') - .size(10) - scene.on('loaded', () =>{ - scene.addLayer(layer) - }) + }) + .shape('circle') + .color('red') + .size(10); + scene.on('loaded', () => { + scene.addLayer(layer); + }); }); it('scene layer text', async () => { - const layer = new PointLayer({name:'text'}).source( - testData, - { + const layer = new PointLayer({ name: 'text' }) + .source(testData, { parser: { type: 'json', x: 'x', y: 'y', }, - }, - ).shape('name','text') - .color('name',['red','blue']) - .size('v',[10,20]) + }) + .shape('name', 'text') + .color('name', ['red', 'blue']) + .size('v', [10, 20]); - scene.on('loaded', () =>{ - scene.addLayer(layer) - expect(layer.name).toEqual('text') - }) + scene.on('loaded', () => { + scene.addLayer(layer); + expect(layer.name).toEqual('text'); + }); }); it('scene layer extrude', async () => { - const layer = new PointLayer().source( - testData, - { + const layer = new PointLayer() + .source(testData, { parser: { type: 'json', x: 'x', y: 'y', }, - }, - ).shape('cloumn') - .color('red') - .size([5,5,10]) - scene.on('loaded', () =>{ - scene.addLayer(layer) - }) + }) + .shape('cloumn') + .color('red') + .size([5, 5, 10]); + scene.on('loaded', () => { + scene.addLayer(layer); + }); }); it('scene layer simplePoint', async () => { - const layer = new PointLayer().source( - testData, - { + const layer = new PointLayer() + .source(testData, { parser: { type: 'json', x: 'x', y: 'y', }, - }, - ).shape('simple') - .color('red') - .size(1) - scene.on('loaded', () =>{ - scene.addLayer(layer) - }) + }) + .shape('simple') + .color('red') + .size(1); + scene.on('loaded', () => { + scene.addLayer(layer); + }); }); }); diff --git a/packages/layers/src/point/models/earthExtrude.ts b/packages/layers/src/point/models/earthExtrude.ts index 51745e6a94..629e69db9b 100644 --- a/packages/layers/src/point/models/earthExtrude.ts +++ b/packages/layers/src/point/models/earthExtrude.ts @@ -129,31 +129,30 @@ export default class ExtrudeModel extends BaseModel { u_lightEnable: Number(lightEnable), }; } - public async initModels():Promise { - return await this.buildModels(); + public async initModels(): Promise { + return this.buildModels(); } - public async buildModels():Promise { + public async buildModels(): Promise { // GAODE1.x GAODE2.x MAPBOX const { animateOption: { repeat = 1 }, } = this.layer.getLayerConfig() as ILayerConfig; this.raiseRepeat = repeat; - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointEarthExtrude', - vertexShader: pointExtrudeVert, - fragmentShader: pointExtrudeFrag, - triangulation: PointExtrudeTriangulation, - depth: { enable: true }, - cull: { - enable: true, - face: getCullFace(this.mapService.version), - }, - blend: this.getBlend(), - }); - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'pointEarthExtrude', + vertexShader: pointExtrudeVert, + fragmentShader: pointExtrudeFrag, + triangulation: PointExtrudeTriangulation, + depth: { enable: true }, + cull: { + enable: true, + face: getCullFace(this.mapService.version), + }, + blend: this.getBlend(), + }); + return [model]; } public clearModels() { this.dataTexture?.destroy(); @@ -170,9 +169,7 @@ export default class ExtrudeModel extends BaseModel { type: gl.FLOAT, }, size: 3, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size } = feature; if (size) { let buffersize: number[] = []; diff --git a/packages/layers/src/point/models/earthFill.ts b/packages/layers/src/point/models/earthFill.ts index 8ae2ea896c..2396fed593 100644 --- a/packages/layers/src/point/models/earthFill.ts +++ b/packages/layers/src/point/models/earthFill.ts @@ -90,9 +90,8 @@ export default class FillModel extends BaseModel { }; } public getAnimateUniforms(): IModelUniform { - const { - animateOption = { enable: false }, - } = this.layer.getLayerConfig() as ILayerConfig; + const { animateOption = { enable: false } } = + this.layer.getLayerConfig() as ILayerConfig; return { u_animate: this.animateOption2Array(animateOption), u_time: this.layer.getLayerAnimateTime(), @@ -100,7 +99,7 @@ export default class FillModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } public async buildModels(): Promise { diff --git a/packages/layers/src/point/models/extrude.ts b/packages/layers/src/point/models/extrude.ts index 2295f1d484..466acf27ad 100644 --- a/packages/layers/src/point/models/extrude.ts +++ b/packages/layers/src/point/models/extrude.ts @@ -127,11 +127,11 @@ export default class ExtrudeModel extends BaseModel { u_lightEnable: Number(lightEnable), }; } - public async initModels():Promise { - return await this.buildModels(); + public async initModels(): Promise { + return this.buildModels(); } - public async buildModels():Promise { + public async buildModels(): Promise { // GAODE1.x GAODE2.x MAPBOX const { depth = true, @@ -139,23 +139,21 @@ export default class ExtrudeModel extends BaseModel { } = this.layer.getLayerConfig() as ILayerConfig; this.raiseRepeat = repeat; - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointExtrude', - vertexShader: pointExtrudeVert, - fragmentShader: pointExtrudeFrag, - triangulation: PointExtrudeTriangulation, - blend: this.getBlend(), - cull: { - enable: true, - face: getCullFace(this.mapService.version), - }, - depth: { - enable: depth, - }, - }) - return [model] - + const model = await this.layer.buildLayerModel({ + moduleName: 'pointExtrude', + vertexShader: pointExtrudeVert, + fragmentShader: pointExtrudeFrag, + triangulation: PointExtrudeTriangulation, + blend: this.getBlend(), + cull: { + enable: true, + face: getCullFace(this.mapService.version), + }, + depth: { + enable: depth, + }, + }); + return [model]; } public clearModels() { this.dataTexture?.destroy(); @@ -173,9 +171,7 @@ export default class ExtrudeModel extends BaseModel { type: gl.FLOAT, }, size: 3, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size } = feature; if (size) { let buffersize: number[] = []; diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts index f19ddcbb0d..aaa8854c57 100644 --- a/packages/layers/src/point/models/normal.ts +++ b/packages/layers/src/point/models/normal.ts @@ -28,42 +28,39 @@ export default class NormalModel extends BaseModel { }; } public getUninforms(): IModelUniform { - const { - opacity = 1, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + const { opacity = 1 } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; return { u_opacity: isNumber(opacity) ? opacity : 1.0, }; } - public async initModels():Promise { - return await this.buildModels(); + public async initModels(): Promise { + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; this.layer.triangulation = PointTriangulation; - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointNormal', - vertexShader: normalVert, - fragmentShader: normalFrag, - triangulation: PointTriangulation, - depth: { enable: false }, - primitive: gl.POINTS, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - pick: false, - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'pointNormal', + vertexShader: normalVert, + fragmentShader: normalFrag, + triangulation: PointTriangulation, + depth: { enable: false }, + primitive: gl.POINTS, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + pick: false, + }); + return [model]; } public clearModels() { + return; } protected registerBuiltinAttributes() { @@ -78,9 +75,7 @@ export default class NormalModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, diff --git a/packages/layers/src/point/models/radar.ts b/packages/layers/src/point/models/radar.ts index 9ceabe9202..0564410d99 100644 --- a/packages/layers/src/point/models/radar.ts +++ b/packages/layers/src/point/models/radar.ts @@ -12,12 +12,11 @@ import { import { getMask } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; -import { IPointLayerStyleOptions } from '../../core/interface'; +import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface'; import { PointFillTriangulation } from '../../core/triangulation'; import pointFillFrag from '../shaders/radar/radar_frag.glsl'; import pointFillVert from '../shaders/radar/radar_vert.glsl'; -import { SizeUnitType } from '../../core/interface' export default class RadarModel extends BaseModel { public getUninforms(): IModelUniform { @@ -25,7 +24,7 @@ export default class RadarModel extends BaseModel { opacity = 1, blend, speed = 1, - unit = 'pixel' + unit = 'pixel', } = this.layer.getLayerConfig() as IPointLayerStyleOptions; return { @@ -36,9 +35,8 @@ export default class RadarModel extends BaseModel { }; } public getAnimateUniforms(): IModelUniform { - const { - animateOption = { enable: false }, - } = this.layer.getLayerConfig() as ILayerConfig; + const { animateOption = { enable: false } } = + this.layer.getLayerConfig() as ILayerConfig; return { u_animate: this.animateOption2Array(animateOption), u_time: this.layer.getLayerAnimateTime(), @@ -57,30 +55,24 @@ export default class RadarModel extends BaseModel { ); } - public async initModels():Promise { - return await this.buildModels(); + public async initModels(): Promise { + return this.buildModels(); } + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; - - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointRadar', - vertexShader: pointFillVert, - fragmentShader: pointFillFrag, - triangulation: PointFillTriangulation, - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] - + const model = await this.layer.buildLayerModel({ + moduleName: 'pointRadar', + vertexShader: pointFillVert, + fragmentShader: pointFillFrag, + triangulation: PointFillTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } public clearModels() { @@ -134,13 +126,9 @@ export default class RadarModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 5 } = feature; - return Array.isArray(size) - ? [size[0]] - : [(size as number)]; + return Array.isArray(size) ? [size[0]] : [size as number]; }, }, }); diff --git a/packages/layers/src/point/models/simplePoint.ts b/packages/layers/src/point/models/simplePoint.ts index 0cc9c82205..2db06e1029 100644 --- a/packages/layers/src/point/models/simplePoint.ts +++ b/packages/layers/src/point/models/simplePoint.ts @@ -92,29 +92,26 @@ export default class SimplePointModel extends BaseModel { }; } - public async initModels():Promise { - return await this.buildModels(); + public async initModels(): Promise { + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPointLayerStyleOptions; this.layer.triangulation = PointTriangulation; - const model = await this.layer - .buildLayerModel({ - moduleName: 'pointSimple', - vertexShader: simplePointVert, - fragmentShader: simplePointFrag, - triangulation: PointTriangulation, - depth: { enable: false }, - primitive: gl.POINTS, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'pointSimple', + vertexShader: simplePointVert, + fragmentShader: simplePointFrag, + triangulation: PointTriangulation, + depth: { enable: false }, + primitive: gl.POINTS, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; } public clearModels() { @@ -133,9 +130,7 @@ export default class SimplePointModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, diff --git a/packages/layers/src/polygon/models/extrude.ts b/packages/layers/src/polygon/models/extrude.ts index 278a81c699..dc423f3095 100644 --- a/packages/layers/src/polygon/models/extrude.ts +++ b/packages/layers/src/polygon/models/extrude.ts @@ -11,8 +11,8 @@ import BaseModel from '../../core/BaseModel'; import { IPolygonLayerStyleOptions } from '../../core/interface'; import { PolygonExtrudeTriangulation } from '../../core/triangulation'; import polygonExtrudeFrag from '../shaders/extrude/polygon_extrude_frag.glsl'; -// extrude import polygonExtrudeVert from '../shaders/extrude/polygon_extrude_vert.glsl'; +// extrude import polygonExtrudeTexFrag from '../shaders/extrude/polygon_extrudetex_frag.glsl'; // texture import polygonExtrudeTexVert from '../shaders/extrude/polygon_extrudetex_vert.glsl'; @@ -95,32 +95,27 @@ export default class ExtrudeModel extends BaseModel { public async initModels(): Promise { this.loadTexture(); - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPolygonLayerStyleOptions; const { frag, vert, type } = this.getShaders(); - const model = await this.layer - .buildLayerModel({ - moduleName: type, - vertexShader: vert, - fragmentShader: frag, - triangulation: PolygonExtrudeTriangulation, - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: type, + vertexShader: vert, + fragmentShader: frag, + triangulation: PolygonExtrudeTriangulation, + stencil: getMask(mask, maskInside), + }); + return [model]; } public getShaders() { - const { - pickLight, - mapTexture, - } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; + const { pickLight, mapTexture } = + this.layer.getLayerConfig() as IPolygonLayerStyleOptions; if (mapTexture) { return { frag: polygonExtrudeTexFrag, @@ -212,9 +207,7 @@ export default class ExtrudeModel extends BaseModel { type: gl.FLOAT, }, size: 1, - update: ( - feature: IEncodeFeature, - ) => { + update: (feature: IEncodeFeature) => { const { size = 10 } = feature; return Array.isArray(size) ? [size[0]] : [size as number]; }, @@ -223,9 +216,8 @@ export default class ExtrudeModel extends BaseModel { } private loadTexture() { - const { - mapTexture, - } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; + const { mapTexture } = + this.layer.getLayerConfig() as IPolygonLayerStyleOptions; const { createTexture2D } = this.rendererService; this.texture = createTexture2D({ diff --git a/packages/layers/src/polygon/models/fill.ts b/packages/layers/src/polygon/models/fill.ts index 62766c35c6..3b171b209c 100644 --- a/packages/layers/src/polygon/models/fill.ts +++ b/packages/layers/src/polygon/models/fill.ts @@ -53,7 +53,6 @@ export default class FillModel extends BaseModel { width: 1, height: 1, }); - } return { @@ -70,10 +69,10 @@ export default class FillModel extends BaseModel { } public async initModels(): Promise { - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { + public async buildModels(): Promise { const { frag, vert, triangulation, type } = this.getModelParams(); const { mask = false, @@ -84,23 +83,22 @@ export default class FillModel extends BaseModel { ILayerConfig & IPolygonLayerStyleOptions >; this.layer.triangulation = triangulation; - const model = await this.layer - .buildLayerModel({ - moduleName: type, - vertexShader: vert, - fragmentShader: frag, - triangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - workerEnabled, - workerOptions: { - modelType: type, - enablePicking, - }, - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: type, + vertexShader: vert, + fragmentShader: frag, + triangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + workerEnabled, + workerOptions: { + modelType: type, + enablePicking, + }, + }); + return [model]; } public clearModels() { diff --git a/packages/layers/src/polygon/models/index.ts b/packages/layers/src/polygon/models/index.ts index ecc79ed9a6..5870d3d7b7 100644 --- a/packages/layers/src/polygon/models/index.ts +++ b/packages/layers/src/polygon/models/index.ts @@ -19,7 +19,7 @@ export type PolygonModelType = | 'point_extrude' | 'text' | 'water' - | 'ocean' + | 'ocean'; const PolygonModels: { [key in PolygonModelType]: any } = { fill: FillModel, line: LineModel, diff --git a/packages/layers/src/polygon/models/ocean.ts b/packages/layers/src/polygon/models/ocean.ts index 8f81cc6a63..fc9bc17f87 100644 --- a/packages/layers/src/polygon/models/ocean.ts +++ b/packages/layers/src/polygon/models/ocean.ts @@ -24,7 +24,7 @@ export default class OceanModel extends BaseModel { watercolor = '#6D99A8', watercolor2 = '#0F121C', } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; - + return { u_texture1: this.texture1, u_texture2: this.texture2, @@ -43,25 +43,22 @@ export default class OceanModel extends BaseModel { public async initModels(): Promise { this.loadTexture(); - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'polygonOcean', - vertexShader: ocean_vert, - fragmentShader: ocean_frag, - triangulation: polygonTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - stencil: getMask(mask, maskInside), - }) - return [model] + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPolygonLayerStyleOptions; + const model = await this.layer.buildLayerModel({ + moduleName: 'polygonOcean', + vertexShader: ocean_vert, + fragmentShader: ocean_frag, + triangulation: polygonTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + stencil: getMask(mask, maskInside), + }); + return [model]; } public clearModels() { @@ -94,7 +91,10 @@ export default class OceanModel extends BaseModel { vertex: number[], attributeIdx: number, ) => { - const v = (feature.version === Version['GAODE2.x'] ? feature.originCoordinates[0][attributeIdx] : vertex) + const v = + feature.version === Version['GAODE2.x'] + ? feature.originCoordinates[0][attributeIdx] + : vertex; const [lng, lat] = v; return [(lng - minLng) / lngLen, (lat - minLat) / latLen]; }, diff --git a/packages/layers/src/polygon/models/water.ts b/packages/layers/src/polygon/models/water.ts index ccd7bcd4a8..3fcc39c083 100644 --- a/packages/layers/src/polygon/models/water.ts +++ b/packages/layers/src/polygon/models/water.ts @@ -17,10 +17,8 @@ import water_vert from '../shaders/water/polygon_water_vert.glsl'; export default class WaterModel extends BaseModel { private texture: ITexture2D; public getUninforms() { - const { - opacity = 1, - speed = 0.5, - } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; + const { opacity = 1, speed = 0.5 } = + this.layer.getLayerConfig() as IPolygonLayerStyleOptions; return { u_texture: this.texture, u_speed: speed, @@ -36,25 +34,22 @@ export default class WaterModel extends BaseModel { public async initModels(): Promise { this.loadTexture(); - return await this.buildModels(); + return this.buildModels(); } - public async buildModels():Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; - const model = await this.layer - .buildLayerModel({ - moduleName: 'polygonWater', - vertexShader: water_vert, - fragmentShader: water_frag, - triangulation: polygonTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - stencil: getMask(mask, maskInside), - }) - return [model] + public async buildModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IPolygonLayerStyleOptions; + const model = await this.layer.buildLayerModel({ + moduleName: 'polygonWater', + vertexShader: water_vert, + fragmentShader: water_frag, + triangulation: polygonTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + stencil: getMask(mask, maskInside), + }); + return [model]; } public clearModels() { @@ -83,9 +78,12 @@ export default class WaterModel extends BaseModel { feature: IEncodeFeature, featureIdx: number, vertex: number[], - attributeIdx: number + attributeIdx: number, ) => { - const v = (feature.version === Version['GAODE2.x'] ? feature.originCoordinates[0][attributeIdx] : vertex) + const v = + feature.version === Version['GAODE2.x'] + ? feature.originCoordinates[0][attributeIdx] + : vertex; const [lng, lat] = v; return [(lng - minLng) / lngLen, (lat - minLat) / latLen]; }, @@ -94,9 +92,8 @@ export default class WaterModel extends BaseModel { } private loadTexture() { - const { - waterTexture, - } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions; + const { waterTexture } = + this.layer.getLayerConfig() as IPolygonLayerStyleOptions; const { createTexture2D } = this.rendererService; this.texture = createTexture2D({ diff --git a/packages/layers/src/raster/buffers/triangulation.ts b/packages/layers/src/raster/buffers/triangulation.ts index 490c7b1aeb..2b4522fc3e 100644 --- a/packages/layers/src/raster/buffers/triangulation.ts +++ b/packages/layers/src/raster/buffers/triangulation.ts @@ -2,7 +2,7 @@ import { IParseDataItem } from '@antv/l7-core'; // @ts-ignore import Martini from '@mapbox/martini'; export function RasterTriangulation(parserData: IParseDataItem) { - const { data,width, height } = parserData; + const { data, width, height } = parserData; const maxlength = Math.max(width, height); const gridSize = Math.pow(2, Math.ceil(Math.log2(maxlength))) + 1; const terrain = new Float32Array(gridSize * gridSize); diff --git a/packages/layers/src/raster/models/index.ts b/packages/layers/src/raster/models/index.ts index b951bcd385..aafb6b4653 100644 --- a/packages/layers/src/raster/models/index.ts +++ b/packages/layers/src/raster/models/index.ts @@ -1,13 +1,17 @@ import RasterModel from './raster'; import RasterRgbModel from './rasterRgb'; import RasterTerrainRGB from './rasterTerrainRgb'; -export type RasterModelType = 'raster' | 'raster3d' | 'rasterRgb' | 'rasterTerrainRgb'; +export type RasterModelType = + | 'raster' + | 'raster3d' + | 'rasterRgb' + | 'rasterTerrainRgb'; const RasterModels: { [key in RasterModelType]: any } = { raster: RasterModel, rasterRgb: RasterRgbModel, raster3d: RasterModel, - rasterTerrainRgb: RasterTerrainRGB + rasterTerrainRgb: RasterTerrainRGB, }; export default RasterModels; diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts index 96023adb1e..f6e8a25ebb 100644 --- a/packages/layers/src/raster/models/raster.ts +++ b/packages/layers/src/raster/models/raster.ts @@ -5,7 +5,7 @@ import { IModel, ITexture2D, } from '@antv/l7-core'; -import { getMask,getDefaultDomain } from '@antv/l7-utils'; +import { getDefaultDomain, getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; @@ -23,8 +23,11 @@ export default class RasterModel extends BaseModel { domain, rampColors, } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; - const newdomain = domain ||getDefaultDomain(rampColors) - this.colorTexture = this.layer.textureService.getColorTexture(rampColors,newdomain); + const newdomain = domain || getDefaultDomain(rampColors); + this.colorTexture = this.layer.textureService.getColorTexture( + rampColors, + newdomain, + ); return { u_opacity: opacity || 1, u_texture: this.texture, @@ -37,35 +40,33 @@ export default class RasterModel extends BaseModel { } private async getRasterData(parserDataItem: any) { - if(Array.isArray(parserDataItem.data)) { + if (Array.isArray(parserDataItem.data)) { // 直接传入波段数据 return { data: parserDataItem.data, width: parserDataItem.width, height: parserDataItem.height, - } + }; } else { // 多波段形式、需要进行处理 const { rasterData, width, height } = await parserDataItem.data; return { data: Array.from(rasterData), width, - height - } + height, + }; } } public async initModels(): Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IRasterLayerStyleOptions; const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; const parserDataItem = source.data.dataArray[0]; - const {data, width, height} = await this.getRasterData(parserDataItem); - + const { data, width, height } = await this.getRasterData(parserDataItem); + this.texture = createTexture2D({ data, width, @@ -74,22 +75,21 @@ export default class RasterModel extends BaseModel { type: gl.FLOAT, // aniso: 4, }); - - const model = await this.layer - .buildLayerModel({ - moduleName: 'rasterImageData', - vertexShader: rasterVert, - fragmentShader: rasterFrag, - triangulation: RasterImageTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - stencil: getMask(mask, maskInside), - }) - return [model] + + const model = await this.layer.buildLayerModel({ + moduleName: 'rasterImageData', + vertexShader: rasterVert, + fragmentShader: rasterFrag, + triangulation: RasterImageTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + stencil: getMask(mask, maskInside), + }); + return [model]; } - public async buildModels():Promise { - return await this.initModels(); + public async buildModels(): Promise { + return this.initModels(); } public clearModels(): void { @@ -121,5 +121,4 @@ export default class RasterModel extends BaseModel { }, }); } - } diff --git a/packages/layers/src/raster/models/rasterRgb.ts b/packages/layers/src/raster/models/rasterRgb.ts index b08b3b4832..5bcbed3db9 100644 --- a/packages/layers/src/raster/models/rasterRgb.ts +++ b/packages/layers/src/raster/models/rasterRgb.ts @@ -9,18 +9,16 @@ import { getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; -import rasterFrag from '../shaders/raster_rgb_frag.glsl'; import rasterVert from '../shaders/raster_2d_vert.glsl'; +import rasterFrag from '../shaders/raster_rgb_frag.glsl'; export default class RasterModel extends BaseModel { protected texture: ITexture2D; protected dataOption: any = {}; public getUninforms() { - const { - opacity = 1, - noDataValue = 0, - } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; - const {rMinMax,gMinMax,bMinMax} = this.dataOption; + const { opacity = 1, noDataValue = 0 } = + this.layer.getLayerConfig() as IRasterLayerStyleOptions; + const { rMinMax, gMinMax, bMinMax } = this.dataOption; return { u_opacity: opacity || 1, u_texture: this.texture, @@ -28,48 +26,44 @@ export default class RasterModel extends BaseModel { u_rminmax: rMinMax, u_gminmax: gMinMax, u_bminmax: bMinMax, - }; } private async getRasterData(parserDataItem: any) { - - if(Array.isArray(parserDataItem.data)) { - const {data,...rescfg} = parserDataItem; + if (Array.isArray(parserDataItem.data)) { + const { data, ...rescfg } = parserDataItem; this.dataOption = rescfg; return { data, - ...rescfg - } + ...rescfg, + }; } - - const { rasterData,...rest } = await parserDataItem.data; + + const { rasterData, ...rest } = await parserDataItem.data; this.dataOption = rest; - if(Array.isArray(rasterData)) { + if (Array.isArray(rasterData)) { // 直接传入波段数据 return { data: rasterData, - ...rest - } + ...rest, + }; } else { // 多波段形式、需要进行处理 // 支持彩色栅格（多通道） return { data: Array.from(rasterData), - ...rest - } + ...rest, + }; } } - public async initModels(): Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; + public async initModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IRasterLayerStyleOptions; const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; const parserDataItem = source.data.dataArray[0]; - const {data, width, height} = await this.getRasterData(parserDataItem); + const { data, width, height } = await this.getRasterData(parserDataItem); this.texture = createTexture2D({ // @ts-ignore data, @@ -79,21 +73,20 @@ export default class RasterModel extends BaseModel { type: gl.FLOAT, }); - const model = await this.layer - .buildLayerModel({ - moduleName: 'rasterImageDataRGBA', - vertexShader: rasterVert, - fragmentShader: rasterFrag, - triangulation: RasterImageTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - stencil: getMask(mask, maskInside), - }) - return [model] + const model = await this.layer.buildLayerModel({ + moduleName: 'rasterImageDataRGBA', + vertexShader: rasterVert, + fragmentShader: rasterFrag, + triangulation: RasterImageTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + stencil: getMask(mask, maskInside), + }); + return [model]; } - public async buildModels():Promise { - return await this.initModels(); + public async buildModels(): Promise { + return this.initModels(); } public clearModels(): void { diff --git a/packages/layers/src/raster/models/rasterTerrainRgb.ts b/packages/layers/src/raster/models/rasterTerrainRgb.ts index 1f9f9834b5..e42f137766 100644 --- a/packages/layers/src/raster/models/rasterTerrainRgb.ts +++ b/packages/layers/src/raster/models/rasterTerrainRgb.ts @@ -1,105 +1,108 @@ import { - AttributeType, - gl, - IEncodeFeature, - IModel, - IModelUniform, - ITexture2D, - } from '@antv/l7-core'; - import { getMask,getDefaultDomain } from '@antv/l7-utils'; - import BaseModel from '../../core/BaseModel'; - import { IRasterLayerStyleOptions } from '../../core/interface'; - import { RasterImageTriangulation } from '../../core/triangulation'; - import Raster_terrainFrag from '../shaders/raster_terrain_rgb_frag.glsl'; - import Raster_terrainVert from '../shaders/rater_terrain_rgb_vert.glsl'; - - export default class RasterTerrainRGB extends BaseModel { - protected texture: ITexture2D; - public getUninforms(): IModelUniform { - const { - opacity, - clampLow = true, - clampHigh = true, - noDataValue = -9999999, - domain, + AttributeType, + gl, + IEncodeFeature, + IModel, + IModelUniform, + ITexture2D, +} from '@antv/l7-core'; +import { getDefaultDomain, getMask } from '@antv/l7-utils'; +import BaseModel from '../../core/BaseModel'; +import { IRasterLayerStyleOptions } from '../../core/interface'; +import { RasterImageTriangulation } from '../../core/triangulation'; +import Raster_terrainFrag from '../shaders/raster_terrain_rgb_frag.glsl'; +import Raster_terrainVert from '../shaders/rater_terrain_rgb_vert.glsl'; + +export default class RasterTerrainRGB extends BaseModel { + protected texture: ITexture2D; + public getUninforms(): IModelUniform { + const { + opacity, + clampLow = true, + clampHigh = true, + noDataValue = -9999999, + domain, + rampColors, + colorTexture, + } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; + const newdomain = domain || getDefaultDomain(rampColors); + let texture: ITexture2D | undefined = colorTexture; + if (!colorTexture) { + texture = this.layer.textureService.getColorTexture( rampColors, - colorTexture - } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; - const newdomain = domain ||getDefaultDomain(rampColors) - let texture:ITexture2D | undefined = colorTexture; - if(!colorTexture) { - texture = this.layer.textureService.getColorTexture(rampColors,newdomain) as ITexture2D; - } else { - this.layer.textureService.setColorTexture(colorTexture,rampColors,newdomain) - } - return { - u_opacity: opacity || 1, - u_texture: this.texture, - u_domain: newdomain, - u_clampLow: clampLow, - u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow, - u_noDataValue: noDataValue, - u_colorTexture: texture!, - }; - } - public async initModels(): Promise { - const { - mask = false, - maskInside = true, - } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; - - const source = this.layer.getSource(); - const { createTexture2D } = this.rendererService; - const imageData = await source.data.images; - this.texture = createTexture2D({ - data: imageData[0], - width: imageData[0].width, - height: imageData[0].height, - }); - - const model = await this.layer - .buildLayerModel({ - moduleName: 'RasterTileDataImage', - vertexShader: Raster_terrainVert, - fragmentShader: Raster_terrainFrag, - triangulation: RasterImageTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), - }) - return [model] - } - - public clearModels(): void { - this.texture?.destroy(); - } - - public async buildModels(): Promise { - return await this.initModels(); - } - - protected registerBuiltinAttributes() { - this.styleAttributeService.registerStyleAttribute({ - name: 'uv', - type: AttributeType.Attribute, - descriptor: { - name: 'a_Uv', - buffer: { - usage: gl.DYNAMIC_DRAW, - data: [], - type: gl.FLOAT, - }, - size: 2, - update: ( - feature: IEncodeFeature, - featureIdx: number, - vertex: number[], - ) => { - return [vertex[3], vertex[4]]; - }, - }, - }); + newdomain, + ) as ITexture2D; + } else { + this.layer.textureService.setColorTexture( + colorTexture, + rampColors, + newdomain, + ); } + return { + u_opacity: opacity || 1, + u_texture: this.texture, + u_domain: newdomain, + u_clampLow: clampLow, + u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow, + u_noDataValue: noDataValue, + u_colorTexture: texture!, + }; } - \ No newline at end of file + public async initModels(): Promise { + const { mask = false, maskInside = true } = + this.layer.getLayerConfig() as IRasterLayerStyleOptions; + + const source = this.layer.getSource(); + const { createTexture2D } = this.rendererService; + const imageData = await source.data.images; + this.texture = createTexture2D({ + data: imageData[0], + width: imageData[0].width, + height: imageData[0].height, + }); + + const model = await this.layer.buildLayerModel({ + moduleName: 'RasterTileDataImage', + vertexShader: Raster_terrainVert, + fragmentShader: Raster_terrainFrag, + triangulation: RasterImageTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + blend: this.getBlend(), + stencil: getMask(mask, maskInside), + }); + return [model]; + } + + public clearModels(): void { + this.texture?.destroy(); + } + + public async buildModels(): Promise { + return this.initModels(); + } + + protected registerBuiltinAttributes() { + this.styleAttributeService.registerStyleAttribute({ + name: 'uv', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Uv', + buffer: { + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + ) => { + return [vertex[3], vertex[4]]; + }, + }, + }); + } +} diff --git a/packages/layers/src/tile/interaction/getRasterData.ts b/packages/layers/src/tile/interaction/getRasterData.ts index 95cce77c69..4eaa091d36 100644 --- a/packages/layers/src/tile/interaction/getRasterData.ts +++ b/packages/layers/src/tile/interaction/getRasterData.ts @@ -1,81 +1,78 @@ -import { - IMapService, - IRendererService - } from '@antv/l7-core'; +import { IMapService, IRendererService } from '@antv/l7-core'; import { DOM, SourceTile } from '@antv/l7-utils'; export function readRasterValue( - tile: SourceTile, - mapService: IMapService, - x: number, - y: number, + tile: SourceTile, + mapService: IMapService, + x: number, + y: number, +) { + const bbox = tile?.bboxPolygon?.bbox || [0, 0, 10, -10]; + + const [minLng = 0, minLat = 0, maxLng = 10, maxLat = -10] = bbox; + + const tileXY = mapService.lngLatToContainer([minLng, minLat]); + const tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]); + + const tilePixelWidth = tileMaxXY.x - tileXY.x; + const tilePixelHeight = tileXY.y - tileMaxXY.y; + const pos = [ + (x - tileXY.x) / tilePixelWidth, // x + (y - tileMaxXY.y) / tilePixelHeight, // y + ]; + + const tileWidth = tile?.data?.width || 1; + const tileHeight = tile?.data?.height || 1; + + const indexX = Math.floor(pos[0] * tileWidth); + const indexY = Math.floor(pos[1] * tileHeight); + const index = Math.max(0, indexY - 1) * tileWidth + indexX; + + const data = tile?.data?.data[index]; + + return data; +} + +export function readPixel( + x: number, + y: number, + rendererService: IRendererService, +) { + const { readPixels, getContainer } = rendererService; + const xInDevicePixel = x * DOM.DPR; + const yInDevicePixel = y * DOM.DPR; + let { width, height } = getContainerSize( + getContainer() as HTMLCanvasElement | HTMLElement, + ); + width *= DOM.DPR; + height *= DOM.DPR; + if ( + xInDevicePixel > width - 1 * DOM.DPR || + xInDevicePixel < 0 || + yInDevicePixel > height - 1 * DOM.DPR || + yInDevicePixel < 0 ) { - const bbox = tile?.bboxPolygon?.bbox || [0, 0, 10, -10]; - - const [minLng = 0, minLat = 0, maxLng = 10, maxLat = -10] = bbox; - - const tileXY = mapService.lngLatToContainer([minLng, minLat]); - const tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]); - - const tilePixelWidth = tileMaxXY.x - tileXY.x; - const tilePixelHeight = tileXY.y - tileMaxXY.y; - const pos = [ - (x - tileXY.x) / tilePixelWidth, // x - (y - tileMaxXY.y) / tilePixelHeight, // y - ]; - - const tileWidth = tile?.data?.width || 1; - const tileHeight = tile?.data?.height || 1; - - const indexX = Math.floor(pos[0] * tileWidth); - const indexY = Math.floor(pos[1] * tileHeight); - const index = Math.max(0, indexY - 1) * tileWidth + indexX; - - const data = tile?.data?.data[index]; - - return data; + return false; } - - export function readPixel( - x: number, - y: number, - rendererService: IRendererService, - ) { - const { readPixels, getContainer } = rendererService; - const xInDevicePixel = x * DOM.DPR; - const yInDevicePixel = y * DOM.DPR; - let { width, height } = getContainerSize( - getContainer() as HTMLCanvasElement | HTMLElement, - ); - width *= DOM.DPR; - height *= DOM.DPR; - if ( - xInDevicePixel > width - 1 * DOM.DPR || - xInDevicePixel < 0 || - yInDevicePixel > height - 1 * DOM.DPR || - yInDevicePixel < 0 - ) { - return false; - } - - const pickedColors = readPixels({ - x: Math.floor(xInDevicePixel), - // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴 - y: Math.floor(height - (y + 1) * DOM.DPR), - width: 1, - height: 1, - data: new Uint8Array(1 * 1 * 4), - }); - return pickedColors; + + const pickedColors = readPixels({ + x: Math.floor(xInDevicePixel), + // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴 + y: Math.floor(height - (y + 1) * DOM.DPR), + width: 1, + height: 1, + data: new Uint8Array(1 * 1 * 4), + }); + return pickedColors; +} + +function getContainerSize(container: HTMLCanvasElement | HTMLElement) { + if ((container as HTMLCanvasElement).getContext) { + return { + width: (container as HTMLCanvasElement).width / DOM.DPR, + height: (container as HTMLCanvasElement).height / DOM.DPR, + }; + } else { + return container.getBoundingClientRect(); } - - function getContainerSize(container: HTMLCanvasElement | HTMLElement) { - if ((container as HTMLCanvasElement).getContext) { - return { - width: (container as HTMLCanvasElement).width / DOM.DPR, - height: (container as HTMLCanvasElement).height / DOM.DPR, - }; - } else { - return container.getBoundingClientRect(); - } - } \ No newline at end of file +} diff --git a/packages/layers/src/tile/interaction/utils.ts b/packages/layers/src/tile/interaction/utils.ts index d770218131..ff3f1d3825 100644 --- a/packages/layers/src/tile/interaction/utils.ts +++ b/packages/layers/src/tile/interaction/utils.ts @@ -1,64 +1,67 @@ -import { - ILayer, - } from '@antv/l7-core'; +import { ILayer } from '@antv/l7-core'; import { decodePickingColor } from '@antv/l7-utils'; export function clearPickState(layers: ILayer[]) { - layers - .filter((layer) => layer.inited && layer.isVisible()) - .filter((layer) => layer.getCurrentSelectedId() !== null) - .map((layer) => { - selectFeature(layer, new Uint8Array([0, 0, 0, 0])); - layer.setCurrentSelectedId(null); - }); + layers + .filter((layer) => layer.inited && layer.isVisible()) + .filter((layer) => layer.getCurrentSelectedId() !== null) + .map((layer) => { + selectFeature(layer, new Uint8Array([0, 0, 0, 0])); + layer.setCurrentSelectedId(null); + }); } -export function setSelect(layers: ILayer[], pickedColors: any, renderList: ILayer[]) { - const selectedId = decodePickingColor(pickedColors); - let pickColor - layers.map((layer) => { - if ( - layer.getCurrentSelectedId() === null || - selectedId !== layer.getCurrentSelectedId() - ) { - selectFeature(layer, pickedColors); - layer.setCurrentSelectedId(selectedId); - pickColor = pickedColors; - } else { - selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select - layer.setCurrentSelectedId(null); - pickColor = null; - } +export function setSelect( + layers: ILayer[], + pickedColors: any, + renderList: ILayer[], +) { + const selectedId = decodePickingColor(pickedColors); + let pickColor; + layers.map((layer) => { + if ( + layer.getCurrentSelectedId() === null || + selectedId !== layer.getCurrentSelectedId() + ) { + selectFeature(layer, pickedColors); + layer.setCurrentSelectedId(selectedId); + pickColor = pickedColors; + } else { + selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select + layer.setCurrentSelectedId(null); + pickColor = null; + } + }); + // unselect normal layer + renderList + .filter( + (layer) => layer.inited && layer.isVisible() && layer.needPick('click'), + ) + .filter((layer) => layer.getCurrentSelectedId() !== null) + .map((layer) => { + selectFeature(layer, new Uint8Array([0, 0, 0, 0])); + layer.setCurrentSelectedId(null); }); - // unselect normal layer - renderList - .filter( - (layer) => - layer.inited && - layer.isVisible() && - layer.needPick('click'), - ) - .filter((layer) => layer.getCurrentSelectedId() !== null) - .map((layer) => { - selectFeature(layer, new Uint8Array([0, 0, 0, 0])); - layer.setCurrentSelectedId(null); - }); - return pickColor; + return pickColor; } export function setHighlight(layers: ILayer[], pickedColors: any) { - const pickId = decodePickingColor(pickedColors); - layers.filter((layer) => layer.inited && layer.isVisible()) + const pickId = decodePickingColor(pickedColors); + layers + .filter((layer) => layer.inited && layer.isVisible()) // @ts-ignore .filter((layer) => layer.getPickID() !== pickId) .map((layer) => { - // @ts-ignore - layer.setPickID(pickId); - layer.hooks.beforeHighlight.call(pickedColors); + // @ts-ignore + layer.setPickID(pickId); + layer.hooks.beforeHighlight.call(pickedColors); }); } -export function setPickState(layers: ILayer[], pickColors: { select: any, active: any }) { +export function setPickState( + layers: ILayer[], + pickColors: { select: any; active: any }, +) { if (pickColors.select) { layers.map((layer) => { selectFeature(layer, pickColors.select); @@ -74,24 +77,27 @@ export function setPickState(layers: ILayer[], pickColors: { select: any, active } } -export function selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined) { - // @ts-ignore - const [r, g, b] = pickedColors; - layer.hooks.beforeSelect.call([r, g, b]); +export function selectFeature( + layer: ILayer, + pickedColors: Uint8Array | undefined, +) { + // @ts-ignore + const [r, g, b] = pickedColors; + layer.hooks.beforeSelect.call([r, g, b]); } export function setFeatureSelect(color: any, layers: ILayer[]) { - const id = decodePickingColor(color); - layers.map((layer) => { - selectFeature(layer, color); - layer.setCurrentSelectedId(id); - }); + const id = decodePickingColor(color); + layers.map((layer) => { + selectFeature(layer, color); + layer.setCurrentSelectedId(id); + }); } export function setFeatureActive(color: any, layers: ILayer[]) { - const id = decodePickingColor(color); - layers.map((layer) => { - layer.hooks.beforeHighlight.call(color); - layer.setCurrentPickId(id); - }); -} \ No newline at end of file + const id = decodePickingColor(color); + layers.map((layer) => { + layer.hooks.beforeHighlight.call(color); + layer.setCurrentPickId(id); + }); +} diff --git a/packages/layers/src/tile/manager/base.ts b/packages/layers/src/tile/manager/base.ts index de5d530731..d91722b636 100644 --- a/packages/layers/src/tile/manager/base.ts +++ b/packages/layers/src/tile/manager/base.ts @@ -1,10 +1,10 @@ import { - ILayer, - IRendererService, - IMapService, - ISubLayerInitOptions, createLayerContainer, + ILayer, ILayerService, + IMapService, + IRendererService, + ISubLayerInitOptions, } from '@antv/l7-core'; import { SourceTile } from '@antv/l7-utils'; import { Container } from 'inversify'; @@ -22,16 +22,18 @@ export class Base { private tileLayerCache: Map = new Map(); private async initTileLayers(layers: ILayer[], tile: SourceTile) { - return Promise.all(layers.map(async (layer) => { - const container = createLayerContainer( - this.parent.sceneContainer as Container, - ); - layer.setContainer(container, this.parent.sceneContainer as Container); - await layer.init(); - this.addChild(layer); - tile.layerLoad(); - this.render() - })); + return Promise.all( + layers.map(async (layer) => { + const container = createLayerContainer( + this.parent.sceneContainer as Container, + ); + layer.setContainer(container, this.parent.sceneContainer as Container); + await layer.init(); + this.addChild(layer); + tile.layerLoad(); + this.render(); + }), + ); } public render() { @@ -46,10 +48,11 @@ export class Base { public async addTile(tile: SourceTile) { // oldTile 存在的时候暂时直接结束 // TODO：合并不存在的时候 - if (this.hasTile(tile)) + if (this.hasTile(tile)) { return { layers: [], }; + } // 存储当前 tile this.tileCache.set(tile.key, tile); @@ -68,7 +71,6 @@ export class Base { // updateLayersConfig(this.getLayers(t),'visible',visible) // }) - return layerCollections; } @@ -101,7 +103,9 @@ export class Base { } public getLayers(tile: SourceTile) { - if (!tile) return []; + if (!tile) { + return []; + } return this.tileLayerCache.get(tile.key) || []; } @@ -121,7 +125,6 @@ export class Base { } public initTileFactory() { - // this.tileFactory = new TileFactory({ // parent: this.parent, // mapService: this.mapService, @@ -144,13 +147,12 @@ export class Base { public updateTileVisible(tile: SourceTile, layerService: ILayerService) { const layers = this.getLayers(tile); - if (layers.length === 0) return; + if (layers.length === 0) { + return; + } if (tile.isVisible) { // 如果可见直接进行渲染，父级发 updateLayersConfig(layers, 'visible', tile.isVisible); - - - } else { // 如果不可见，放大，等到子瓦片渲染完成，缩小：父级渲染成功 // console.log('updateTileVisible',`${tile.x}_${tile.y}_${tile.z}`,tile.isVisible) @@ -184,14 +186,18 @@ export class Base { } public isTileLoaded(tile: SourceTile) { - if (tile.isLoad) return true; + if (tile.isLoad) { + return true; + } const isLoad = this.getLayers(tile).length === tile.loadedLayers; tile.isLoad = isLoad; return isLoad; } public isTileChildLoaded(tile: SourceTile) { - if (tile.isChildLoad) return true; + if (tile.isChildLoad) { + return true; + } const children = tile.children; const isLoad = children.filter((child) => this.isTileLoaded(child)).length === diff --git a/packages/layers/src/tile/service/TileLayerService.ts b/packages/layers/src/tile/service/TileLayerService.ts index e2336d4286..b665fd3250 100644 --- a/packages/layers/src/tile/service/TileLayerService.ts +++ b/packages/layers/src/tile/service/TileLayerService.ts @@ -1,11 +1,17 @@ -import { ILayer, ILayerService, ILngLat, IRendererService, ITile } from '@antv/l7-core'; +import { + ILayer, + ILayerService, + ILngLat, + IRendererService, + ITile, +} from '@antv/l7-core'; import { SourceTile } from '@antv/l7-utils'; import 'reflect-metadata'; -interface TileLayerServiceOptions { +interface ITileLayerServiceOptions { rendererService: IRendererService; - layerService: ILayerService - parent:ILayer; + layerService: ILayerService; + parent: ILayer; } export class TileLayerService { /** @@ -16,42 +22,47 @@ export class TileLayerService { private layerService: ILayerService; private parent: ILayer; - - private _tiles: ITile[] = []; - constructor({ rendererService,layerService, parent }: TileLayerServiceOptions) { + private layerTiles: ITile[] = []; + constructor({ + rendererService, + layerService, + parent, + }: ITileLayerServiceOptions) { this.rendererService = rendererService; - this.layerService =layerService; + this.layerService = layerService; this.parent = parent; } get tiles(): ITile[] { - return this._tiles; + return this.layerTiles; } - hasTile(tileKey: string): boolean { - return this._tiles.some((tile) => tile.key === tileKey); + public hasTile(tileKey: string): boolean { + return this.layerTiles.some((tile) => tile.key === tileKey); } - addTile(tile: ITile) { - this._tiles.push(tile); + public addTile(tile: ITile) { + this.layerTiles.push(tile); } - getTile(tileKey: string): ITile | undefined { - return this._tiles.find((tile) => tile.key === tileKey); + public getTile(tileKey: string): ITile | undefined { + return this.layerTiles.find((tile) => tile.key === tileKey); } - - getVisibleTileBylngLat(lngLat: ILngLat): ITile | undefined { + + public getVisibleTileBylngLat(lngLat: ILngLat): ITile | undefined { // 加载完成 & 可见 & 鼠标选中 - return this._tiles.find( + return this.layerTiles.find( (tile) => tile.isLoaded && tile.visible && tile.lnglatInBounds(lngLat), ); } - removeTile(tileKey: string) { - const index = this._tiles.findIndex((tile) => tile.key === tileKey); - const tile = this._tiles.splice(index, 1); - tile[0] && tile[0].destroy(); + public removeTile(tileKey: string) { + const index = this.layerTiles.findIndex((t) => t.key === tileKey); + const tile = this.layerTiles.splice(index, 1); + if (tile[0]) { + tile[0].destroy(); + } } - updateTileVisible(sourceTile: SourceTile) { + public updateTileVisible(sourceTile: SourceTile) { const tile = this.getTile(sourceTile.key); // if(sourceTile.isVisible) { // // 不可见 => 可见 兄弟节点加载完成 @@ -61,7 +72,7 @@ export class TileLayerService { // } else { // tile?.updateVisible(true); // } - + // } else { // // 可见 => 不可见 兄弟节点加载完成 // if(sourceTile.parent) { @@ -71,62 +82,62 @@ export class TileLayerService { // tile?.updateVisible(false); // } // } - - tile?.updateVisible(sourceTile.isVisible); + tile?.updateVisible(sourceTile.isVisible); } public isParentLoaded(sourceTile: SourceTile): boolean { const parentTile = sourceTile.parent; - if(!parentTile) { - return true + if (!parentTile) { + return true; } - const tile = this.getTile(parentTile?.key) - if(tile?.isLoaded) { // 递归父级 - return true + const tile = this.getTile(parentTile?.key); + if (tile?.isLoaded) { + // 递归父级 + return true; } - - return false + return false; } - public isChildrenLoaded(sourceTile: SourceTile):boolean { + public isChildrenLoaded(sourceTile: SourceTile): boolean { const childrenTile = sourceTile?.children; - if(childrenTile.length === 0) { - return true + if (childrenTile.length === 0) { + return true; } - return childrenTile.some((tile:SourceTile)=>{ - const tileLayer = this.getTile(tile?.key) - return tileLayer?.isLoaded === false - }) + return childrenTile.some((tile: SourceTile) => { + const tileLayer = this.getTile(tile?.key); + return tileLayer?.isLoaded === false; + }); } - async render() { + public async render() { const layers = this.getRenderLayers(); - layers.map(async layer => { + layers.map(async (layer) => { await this.layerService.renderLayer(layer); - }) + }); } - getRenderLayers() { - const tileList = this._tiles.filter((t)=>t.visible && t.isLoaded); + public getRenderLayers() { + const tileList = this.layerTiles.filter( + (t: ITile) => t.visible && t.isLoaded, + ); const layers: ILayer[] = []; - tileList.map(tile => layers.push(...tile.getLayers())) + tileList.map((tile: ITile) => layers.push(...tile.getLayers())); return layers; } - getLayers(){ - const tileList = this._tiles.filter((t)=>t.isLoaded); + public getLayers() { + const tileList = this.layerTiles.filter((t: ITile) => t.isLoaded); const layers: ILayer[] = []; - tileList.map(tile => layers.push(...tile.getLayers())) + tileList.map((tile) => layers.push(...tile.getLayers())); return layers; } - getTiles() { - return this._tiles; + public getTiles() { + return this.layerTiles; } - - destroy() { - this._tiles.forEach((t) => t.destroy()); + public destroy() { + this.layerTiles.forEach((t: ITile) => t.destroy()); this.tileResource.clear(); } } diff --git a/packages/layers/src/tile/service/TilePickService.ts b/packages/layers/src/tile/service/TilePickService.ts index 0e0bc7fbcd..a7136840b4 100644 --- a/packages/layers/src/tile/service/TilePickService.ts +++ b/packages/layers/src/tile/service/TilePickService.ts @@ -124,10 +124,10 @@ export class TilePickService implements ITilePickService { // 提取当前可见瓦片 const tiles = this.tileLayerService .getTiles() - .filter((tile) => tile.visible); + .filter((tile: ITile) => tile.visible); // 提取当前可见瓦片中匹配 ID 的 feature 列表 const features: any[] = []; - tiles.forEach((tile) => { + tiles.forEach((tile: ITile) => { features.push(...tile.getFeatureById(pickedFeatureIdx)); }); diff --git a/packages/layers/src/tile/service/TileSourceService.ts b/packages/layers/src/tile/service/TileSourceService.ts index e76f0eb1fe..38bcd7fbf6 100644 --- a/packages/layers/src/tile/service/TileSourceService.ts +++ b/packages/layers/src/tile/service/TileSourceService.ts @@ -11,6 +11,7 @@ export class TileSourceService { const properties = features[0]; features.map((feature) => { const polygon = turf.polygon(feature.coordinates); + // tslint:disable-next-line: prefer-conditional-expression if (p === null) { p = polygon; } else { diff --git a/packages/layers/src/tile/style/constants.ts b/packages/layers/src/tile/style/constants.ts index 19db4fb497..a9bf91b9ac 100644 --- a/packages/layers/src/tile/style/constants.ts +++ b/packages/layers/src/tile/style/constants.ts @@ -1,20 +1,19 @@ // TileLayer 需要代理的子图层的方法 // 一般都是在 BaseLayer 上的方法 export const ProxyFuncs = [ - /** - * 1. 需要作用到所属子图层才会生效的方法 - * 2. 不需要主动重新创建 model 的方法 - */ - 'shape', - 'color', - 'size', - 'style', - 'animate', - 'filter', - 'rotate', - 'scale', - 'setBlend', - 'setSelect', - 'setActive', -] - + /** + * 1. 需要作用到所属子图层才会生效的方法 + * 2. 不需要主动重新创建 model 的方法 + */ + 'shape', + 'color', + 'size', + 'style', + 'animate', + 'filter', + 'rotate', + 'scale', + 'setBlend', + 'setSelect', + 'setActive', +]; diff --git a/packages/layers/src/tile/style/utils.ts b/packages/layers/src/tile/style/utils.ts index f4cb16ea54..63584dd09f 100644 --- a/packages/layers/src/tile/style/utils.ts +++ b/packages/layers/src/tile/style/utils.ts @@ -1,17 +1,16 @@ import { ILayer } from '@antv/l7-core'; export function updateLayersConfig(layers: ILayer[], key: string, value: any) { - layers.map((layer) => { - if (key === 'mask') { - // Tip: 栅格瓦片生效、设置全局的 mask、瓦片被全局的 mask 影响 - layer.style({ - mask: value, - }); - } else { - layer.updateLayerConfig({ - [key]: value, - }); - } - }); - } - + layers.map((layer) => { + if (key === 'mask') { + // Tip: 栅格瓦片生效、设置全局的 mask、瓦片被全局的 mask 影响 + layer.style({ + mask: value, + }); + } else { + layer.updateLayerConfig({ + [key]: value, + }); + } + }); +} diff --git a/packages/layers/src/tile/tileFactory/DebugTile.ts b/packages/layers/src/tile/tileFactory/DebugTile.ts index 258530bed3..52fd089d37 100644 --- a/packages/layers/src/tile/tileFactory/DebugTile.ts +++ b/packages/layers/src/tile/tileFactory/DebugTile.ts @@ -1,6 +1,6 @@ -import Tile from './Tile'; -import PointLayer from '../../point'; import LineLayer from '../../line'; +import PointLayer from '../../point'; +import Tile from './Tile'; export default class DebugTile extends Tile { public async initTileLayer(): Promise { @@ -11,36 +11,34 @@ export default class DebugTile extends Tile { .size(1) .shape('line') .color('red'); - const pointLayer = new PointLayer({ - minZoom:this.z-1, - maxZoom: this.z+1 - }) - .source([pointData],{ + const pointLayer = new PointLayer({ + minZoom: this.z - 1, + maxZoom: this.z + 1, + }) + .source([pointData], { parser: { type: 'json', x: 'textLng', y: 'textLat', - } - + }, }) .size(20) .color('red') .shape(this.key) .style({ stroke: '#fff', - strokeWidth: 2 + strokeWidth: 2, }); - + await this.addLayer(lineLayer); await this.addLayer(pointLayer); - + this.isLoaded = true; } protected getSourceOption() { const rawSource = this.parent.getSource(); - const features = this.sourceTile.data.layers['testTile'] - .features; + const features = this.sourceTile.data.layers.testTile.features; return { data: { type: 'FeatureCollection', diff --git a/packages/layers/src/tile/tileFactory/ImageTile.ts b/packages/layers/src/tile/tileFactory/ImageTile.ts index 74b1ba4bb2..37b12d7364 100644 --- a/packages/layers/src/tile/tileFactory/ImageTile.ts +++ b/packages/layers/src/tile/tileFactory/ImageTile.ts @@ -1,24 +1,25 @@ import { ILayerAttributesOption } from '@antv/l7-core'; -import ImageLayer from '../../image' +import ImageLayer from '../../image'; import Tile from './Tile'; export default class ImageTile extends Tile { public async initTileLayer(): Promise { - const attributes = this.parent.getLayerAttributeConfig(); const layerOptions = this.getLayerOptions(); const sourceOptions = this.getSourceOption(); - const layer = new ImageLayer({...layerOptions}).source( + const layer = new ImageLayer({ ...layerOptions }).source( sourceOptions.data, sourceOptions.options, ); // 初始化数据映射 - attributes && Object.keys(attributes).forEach((type) => { - const attr = type as keyof ILayerAttributesOption; - // @ts-ignore - layer[attr](attributes[attr]?.field, attributes[attr]?.values); - }); + // tslint:disable-next-line: no-unused-expression + attributes && + Object.keys(attributes).forEach((type) => { + const attr = type as keyof ILayerAttributesOption; + // @ts-ignore + layer[attr](attributes[attr]?.field, attributes[attr]?.values); + }); await this.addLayer(layer); this.isLoaded = true; diff --git a/packages/layers/src/tile/tileFactory/MaskTile.ts b/packages/layers/src/tile/tileFactory/MaskTile.ts index c08193d0b0..2775972fb5 100644 --- a/packages/layers/src/tile/tileFactory/MaskTile.ts +++ b/packages/layers/src/tile/tileFactory/MaskTile.ts @@ -5,24 +5,30 @@ export default class MaskTile extends Tile { public async initTileLayer(): Promise { const attributes = this.parent.getLayerAttributeConfig(); const layerOptions = this.getLayerOptions(); - + const sourceOptions = this.getSourceOption(); - const layer = new MaskLayer({ ...layerOptions}) - .source(sourceOptions.data, sourceOptions.options); + const layer = new MaskLayer({ ...layerOptions }).source( + sourceOptions.data, + sourceOptions.options, + ); // 初始化数据映射 - attributes && Object.keys(attributes).forEach((type) => { - const attr = type as keyof ILayerAttributesOption; - // @ts-ignore - layer[attr](attributes[attr]?.field, attributes[attr]?.values); - }); + // tslint:disable-next-line: no-unused-expression + attributes && + Object.keys(attributes).forEach((type) => { + const attr = type as keyof ILayerAttributesOption; + // @ts-ignore + layer[attr](attributes[attr]?.field, attributes[attr]?.values); + }); await this.addLayer(layer); this.isLoaded = true; } - public getFeatures(sourceLayer: string | undefined){ - if(!sourceLayer) return []; + public getFeatures(sourceLayer: string | undefined) { + if (!sourceLayer) { + return []; + } const source = this.sourceTile.data; return source.getTileData(sourceLayer); } diff --git a/packages/layers/src/tile/tileFactory/RasterRGBTile.ts b/packages/layers/src/tile/tileFactory/RasterRGBTile.ts index e963dd0ec2..df1c1bd58e 100644 --- a/packages/layers/src/tile/tileFactory/RasterRGBTile.ts +++ b/packages/layers/src/tile/tileFactory/RasterRGBTile.ts @@ -1,5 +1,5 @@ import { ILayerAttributesOption } from '@antv/l7-core'; -import RasterLayer from '../../raster' +import RasterLayer from '../../raster'; import Tile from './Tile'; export default class RasterTile extends Tile { @@ -9,18 +9,16 @@ export default class RasterTile extends Tile { const sourceOptions = this.getSourceOption(); const layer = new RasterLayer({ ...layerOptions, - }) - .source( - sourceOptions.data, - sourceOptions.options, - ); + }).source(sourceOptions.data, sourceOptions.options); // 初始化数据映射 - attributes && Object.keys(attributes).forEach((type) => { - const attr = type as keyof ILayerAttributesOption; - // @ts-ignore - layer[attr](attributes[attr]?.field, attributes[attr]?.values); - }); + // tslint:disable-next-line: no-unused-expression + attributes && + Object.keys(attributes).forEach((type) => { + const attr = type as keyof ILayerAttributesOption; + // @ts-ignore + layer[attr](attributes[attr]?.field, attributes[attr]?.values); + }); await this.addLayer(layer); this.isLoaded = true; @@ -28,14 +26,14 @@ export default class RasterTile extends Tile { protected getSourceOption() { const rawSource = this.parent.getSource(); - const {rasterData,...res} = this.sourceTile.data.data; + const { rasterData, ...res } = this.sourceTile.data.data; return { data: rasterData, // 栅格数 options: { parser: { type: 'rasterRgb', extent: this.sourceTile.bounds, - ...res + ...res, }, transforms: rawSource.transforms, }, diff --git a/packages/layers/src/tile/tileFactory/RasterTerrainRGBTile.ts b/packages/layers/src/tile/tileFactory/RasterTerrainRGBTile.ts index d5f9d37f45..d5d66a39ee 100644 --- a/packages/layers/src/tile/tileFactory/RasterTerrainRGBTile.ts +++ b/packages/layers/src/tile/tileFactory/RasterTerrainRGBTile.ts @@ -1,5 +1,5 @@ import { ILayerAttributesOption } from '@antv/l7-core'; -import RasterLayer from '../../raster' +import RasterLayer from '../../raster'; import Tile from './Tile'; export default class RasterTerrainRGBTile extends Tile { public async initTileLayer(): Promise { @@ -7,17 +7,19 @@ export default class RasterTerrainRGBTile extends Tile { const layerOptions = this.getLayerOptions(); const sourceOptions = this.getSourceOption(); - const layer = new RasterLayer({...layerOptions}).source( + const layer = new RasterLayer({ ...layerOptions }).source( sourceOptions.data, sourceOptions.options, ); // 初始化数据映射 - attributes && Object.keys(attributes).forEach((type) => { - const attr = type as keyof ILayerAttributesOption; - // @ts-ignore - layer[attr](attributes[attr]?.field, attributes[attr]?.values); - }); + // tslint:disable-next-line: no-unused-expression + attributes && + Object.keys(attributes).forEach((type) => { + const attr = type as keyof ILayerAttributesOption; + // @ts-ignore + layer[attr](attributes[attr]?.field, attributes[attr]?.values); + }); await this.addLayer(layer); this.isLoaded = true; diff --git a/packages/layers/src/tile/tileFactory/RasterTile.ts b/packages/layers/src/tile/tileFactory/RasterTile.ts index eee1f4cbc9..a030ef88d2 100644 --- a/packages/layers/src/tile/tileFactory/RasterTile.ts +++ b/packages/layers/src/tile/tileFactory/RasterTile.ts @@ -1,37 +1,39 @@ import { ILayerAttributesOption, ITexture2D } from '@antv/l7-core'; -import RasterLayer from '../../raster' -import { IRasterLayerStyleOptions } from '../../core/interface'; -import Tile from './Tile'; import { getDefaultDomain } from '@antv/l7-utils'; +import { IRasterLayerStyleOptions } from '../../core/interface'; +import RasterLayer from '../../raster'; +import Tile from './Tile'; const DEFAULT_COLOR_TEXTURE_OPTION = { positions: [0, 1], - colors: ['#000', '#fff'] + colors: ['#000', '#fff'], }; export default class RasterTile extends Tile { private colorTexture: ITexture2D; public async initTileLayer(): Promise { const attributes = this.parent.getLayerAttributeConfig(); - const layerOptions = this.getLayerOptions() ; + const layerOptions = this.getLayerOptions(); const sourceOptions = this.getSourceOption(); - const {rampColors,domain} = this.getLayerOptions() as unknown as IRasterLayerStyleOptions; - this.colorTexture = this.parent.textureService.getColorTexture(rampColors,domain); + const { rampColors, domain } = + this.getLayerOptions() as unknown as IRasterLayerStyleOptions; + this.colorTexture = this.parent.textureService.getColorTexture( + rampColors, + domain, + ); const layer = new RasterLayer({ ...layerOptions, colorTexture: this.colorTexture, - }) - .source( - sourceOptions.data, - sourceOptions.options, - ); + }).source(sourceOptions.data, sourceOptions.options); // 初始化数据映射 - attributes && Object.keys(attributes).forEach((type) => { - const attr = type as keyof ILayerAttributesOption; - // @ts-ignore - layer[attr](attributes[attr]?.field, attributes[attr]?.values); - }); + // tslint:disable-next-line: no-unused-expression + attributes && + Object.keys(attributes).forEach((type) => { + const attr = type as keyof ILayerAttributesOption; + // @ts-ignore + layer[attr](attributes[attr]?.field, attributes[attr]?.values); + }); await this.addLayer(layer); this.isLoaded = true; @@ -39,14 +41,14 @@ export default class RasterTile extends Tile { protected getSourceOption() { const rawSource = this.parent.getSource(); - const {rasterData,...res} = this.sourceTile.data.data; + const { rasterData, ...res } = this.sourceTile.data.data; return { data: rasterData, options: { parser: { type: 'raster', extent: this.sourceTile.bounds, - ...res + ...res, }, transforms: rawSource.transforms, }, @@ -55,16 +57,20 @@ export default class RasterTile extends Tile { /** * 用于 style 更新 colorTexture 的优化 - * @param arg + * @param arg */ public styleUpdate(...arg: any): void { - - const { rampColors = DEFAULT_COLOR_TEXTURE_OPTION, domain} = arg as IRasterLayerStyleOptions; - this.colorTexture = this.parent.textureService.getColorTexture(rampColors,domain || getDefaultDomain(rampColors)) - this.layers.forEach(layer => layer.style({ colorTexture: this.colorTexture })); + const { rampColors = DEFAULT_COLOR_TEXTURE_OPTION, domain } = + arg as IRasterLayerStyleOptions; + this.colorTexture = this.parent.textureService.getColorTexture( + rampColors, + domain || getDefaultDomain(rampColors), + ); + this.layers.forEach((layer) => + layer.style({ colorTexture: this.colorTexture }), + ); } - public destroy() { this.layers.forEach((layer) => layer.destroy()); } diff --git a/packages/layers/src/tile/tileFactory/Tile.ts b/packages/layers/src/tile/tileFactory/Tile.ts index e5484427c3..c114e68e63 100644 --- a/packages/layers/src/tile/tileFactory/Tile.ts +++ b/packages/layers/src/tile/tileFactory/Tile.ts @@ -1,9 +1,9 @@ -import { ILayer, createLayerContainer, ILngLat, ITile } from '@antv/l7-core'; +import { createLayerContainer, ILayer, ILngLat, ITile } from '@antv/l7-core'; import { SourceTile } from '@antv/l7-utils'; import { Container } from 'inversify'; import { isNeedMask } from './util'; -export default abstract class Tile implements ITile{ +export default abstract class Tile implements ITile { public x: number; public y: number; public z: number; @@ -26,7 +26,9 @@ export default abstract class Tile implements ITile{ } // eslint-disable-next-line @typescript-eslint/no-unused-vars - public styleUpdate(...arg: any) {} + public styleUpdate(...arg: any) { + return; + } public abstract initTileLayer(): Promise; @@ -40,12 +42,11 @@ export default abstract class Tile implements ITile{ const options = this.parent.getLayerConfig(); return { ...options, - autoFit:false, - mask:isNeedMask(this.parent.type) || options.mask - } + autoFit: false, + mask: isNeedMask(this.parent.type) || options.mask, + }; } - protected async addMask(layer: ILayer, mask: ILayer) { const container = createLayerContainer( this.parent.sceneContainer as Container, @@ -86,17 +87,17 @@ export default abstract class Tile implements ITile{ return this.layers[0]; } - public getFeatures(sourceLayer: string | undefined):any[] { - return [] + public getFeatures(sourceLayer: string | undefined): any[] { + return []; } - + /** * 在一个 Tile 中可能存在一个相同 ID 的 feature - * @param id - * @returns + * @param id + * @returns */ - public getFeatureById(id: number):any[] { - return [] + public getFeatureById(id: number): any[] { + return []; } public destroy() { diff --git a/packages/layers/src/tile/tileFactory/VectorTile.ts b/packages/layers/src/tile/tileFactory/VectorTile.ts index d0c8fd8c26..1df1217242 100644 --- a/packages/layers/src/tile/tileFactory/VectorTile.ts +++ b/packages/layers/src/tile/tileFactory/VectorTile.ts @@ -1,9 +1,9 @@ import { ILayer, ILayerAttributesOption } from '@antv/l7-core'; -import { VectorSource } from '@antv/l7-source' +import { VectorSource } from '@antv/l7-source'; import MaskLayer from '../../mask'; import Tile from './Tile'; import { getTileLayer } from './util'; - + export default class VectorTile extends Tile { public async initTileLayer(): Promise { const attributes = this.parent.getLayerAttributeConfig(); @@ -100,7 +100,6 @@ export default class VectorTile extends Tile { if (!layer) { return []; } - console.log(layer.getSource().data.dataArray,id) const res = layer.getSource().data.dataArray.filter((d) => d._id === id); return res; } diff --git a/packages/layers/src/tile/tileFactory/index.ts b/packages/layers/src/tile/tileFactory/index.ts index 9a77b4ab2d..b9c9b513d1 100644 --- a/packages/layers/src/tile/tileFactory/index.ts +++ b/packages/layers/src/tile/tileFactory/index.ts @@ -1,12 +1,11 @@ import { ILayer } from '@antv/l7-core'; -import VectorTile from './VectorTile'; import DebugTile from './DebugTile'; -import ImageTile from './ImageTile'; -import RasterTile from './RasterTile'; -import RasterRGBTile from './RasterRGBTile'; -import RasterTerrainRGBTile from './RasterTerrainRGBTile'; +import ImageTile from './ImageTile'; import MaskLayer from './MaskTile'; - +import RasterRGBTile from './RasterRGBTile'; +import RasterTerrainRGBTile from './RasterTerrainRGBTile'; +import RasterTile from './RasterTile'; +import VectorTile from './VectorTile'; export type TileType = | 'VectorTile' @@ -28,21 +27,21 @@ export function getTileFactory(layer: ILayer) { return VectorTile; case 'PointLayer': return VectorTile; - case 'TileDebugLayer': + case 'TileDebugLayer': return DebugTile; case 'MaskLayer': return MaskLayer; case 'RasterLayer': const { dataType } = layer.getSource().parser; - switch(dataType) { + switch (dataType) { case 'rgb': case 'customRGB': return RasterRGBTile; case 'arraybuffer': case 'customArrayBuffer': - return RasterTile - case "terrainRGB" : - return RasterTerrainRGBTile + return RasterTile; + case 'terrainRGB': + return RasterTerrainRGBTile; default: return ImageTile; } @@ -52,4 +51,4 @@ export function getTileFactory(layer: ILayer) { } export * from '../interface'; -export * from './Tile' +export * from './Tile'; diff --git a/packages/layers/src/tile/tileFactory/layers/TileDebugLayer.ts b/packages/layers/src/tile/tileFactory/layers/TileDebugLayer.ts index fe001a51ac..e67edb047a 100644 --- a/packages/layers/src/tile/tileFactory/layers/TileDebugLayer.ts +++ b/packages/layers/src/tile/tileFactory/layers/TileDebugLayer.ts @@ -3,7 +3,7 @@ import { IBaseLayerStyleOptions } from '../../../core/interface'; export default class TileDebugLayer extends BaseLayer { public type: string = 'TileDebugLayer'; - public zIndex:number = 10000; + public zIndex: number = 10000; public defaultSourceConfig = { data: [], options: { @@ -13,5 +13,6 @@ export default class TileDebugLayer extends BaseLayer { }, }; public async buildModels() { + return; } } diff --git a/packages/layers/src/tile/tileFactory/util.ts b/packages/layers/src/tile/tileFactory/util.ts index 68394a9528..5b4afbd684 100644 --- a/packages/layers/src/tile/tileFactory/util.ts +++ b/packages/layers/src/tile/tileFactory/util.ts @@ -1,23 +1,20 @@ - -import PointLayer from '../../point/index'; import LineLayer from '../../line'; +import PointLayer from '../../point/index'; import PolygonLayer from '../../polygon'; - export function getTileLayer(type: string) { - if(type === 'PolygonLayer') { - return PolygonLayer; - } - if(type === 'LineLayer') { - return LineLayer; - } - if(type === 'PointLayer') { - return PointLayer - } - return PointLayer - + if (type === 'PolygonLayer') { + return PolygonLayer; + } + if (type === 'LineLayer') { + return LineLayer; + } + if (type === 'PointLayer') { + return PointLayer; + } + return PointLayer; } export function isNeedMask(type: string) { - return ['PolygonLayer','LineLayer'].indexOf(type) !== -1 -} \ No newline at end of file + return ['PolygonLayer', 'LineLayer'].indexOf(type) !== -1; +} diff --git a/packages/layers/src/tile/tileLayer/BaseLayer.ts b/packages/layers/src/tile/tileLayer/BaseLayer.ts index b8a2e01606..66e6420214 100644 --- a/packages/layers/src/tile/tileLayer/BaseLayer.ts +++ b/packages/layers/src/tile/tileLayer/BaseLayer.ts @@ -1,19 +1,19 @@ import { + IInteractionTarget, ILayer, - IMapService, ILayerService, - IRendererService, - TYPES, - ISource, + IMapService, IPickingService, - IInteractionTarget + IRendererService, + ISource, + TYPES, } from '@antv/l7-core'; import { SourceTile, TilesetManager } from '@antv/l7-utils'; +import { debounce } from 'lodash'; import { TileLayerService } from '../service/TileLayerService'; import { TilePickService } from '../service/TilePickService'; -import { debounce } from 'lodash'; -import { getTileFactory } from '../tileFactory'; import { ProxyFuncs } from '../style/constants'; +import { getTileFactory } from '../tileFactory'; export default class BaseTileLayer { private parent: ILayer; @@ -22,7 +22,7 @@ export default class BaseTileLayer { protected mapService: IMapService; protected layerService: ILayerService; protected rendererService: IRendererService; - protected pickingService:IPickingService; + protected pickingService: IPickingService; protected tilePickService: TilePickService; public tilesetManager: TilesetManager; // 瓦片数据管理器 public initedTileset: boolean = false; // 瓦片是否加载成功 @@ -40,29 +40,26 @@ export default class BaseTileLayer { ); this.layerService = container.get(TYPES.ILayerService); this.mapService = container.get(TYPES.IMapService); - this.pickingService = container.get( - TYPES.IPickingService, - ); + this.pickingService = container.get(TYPES.IPickingService); - // 初始化瓦片管理服务 - this.tileLayerService = new TileLayerService({ - rendererService: this.rendererService, - layerService:this.layerService, - parent - }) - // 初始化拾取服务 - this.tilePickService = new TilePickService({ - tileLayerService: this.tileLayerService, - layerService:this.layerService, - parent - }) + // 初始化瓦片管理服务 + this.tileLayerService = new TileLayerService({ + rendererService: this.rendererService, + layerService: this.layerService, + parent, + }); + // 初始化拾取服务 + this.tilePickService = new TilePickService({ + tileLayerService: this.tileLayerService, + layerService: this.layerService, + parent, + }); - // 重置 - this.parent.setLayerPickService(this.tilePickService); - this.proxy(parent); + // 重置 + this.parent.setLayerPickService(this.tilePickService); + this.proxy(parent); - this.initTileSetManager(); - + this.initTileSetManager(); } protected initTileSetManager() { @@ -144,7 +141,7 @@ export default class BaseTileLayer { this.mapService.on('zoomend', () => this.mapchange()); this.mapService.on('moveend', () => this.viewchange()); } - + public render() { this.tileLayerService.render(); } @@ -158,7 +155,7 @@ export default class BaseTileLayer { } // 防抖操作 - viewchange = debounce(this.mapchange, 24); + public viewchange = debounce(this.mapchange, 24); // eslint-disable-next-line @typescript-eslint/no-unused-vars public tileLoaded(tile: SourceTile) { @@ -183,32 +180,34 @@ export default class BaseTileLayer { return; } const minZoom = this.parent.getMinZoom(); - const maxZoom = this.parent.getMaxZoom() - await Promise.all(this.tilesetManager.tiles - .filter((tile: SourceTile) => tile.isLoaded) // 过滤未加载完成的 - .filter((tile: SourceTile) => tile.isVisibleChange) // 过滤未发生变化的 - .filter((tile: SourceTile) => tile.data) - .filter((tile: SourceTile) => tile.z>= minZoom && tile.z < maxZoom) - .map(async (tile: SourceTile) => { - - if (!this.tileLayerService.hasTile(tile.key)) { - const tileInstance = getTileFactory(this.parent); - const tileLayer = new tileInstance(tile, this.parent); - await tileLayer.initTileLayer(); - this.tilePickService.setPickState(); - if(tileLayer.getLayers().length!==0) { - this.tileLayerService.addTile(tileLayer); + const maxZoom = this.parent.getMaxZoom(); + await Promise.all( + this.tilesetManager.tiles + .filter((tile: SourceTile) => tile.isLoaded) // 过滤未加载完成的 + .filter((tile: SourceTile) => tile.isVisibleChange) // 过滤未发生变化的 + .filter((tile: SourceTile) => tile.data) + .filter((tile: SourceTile) => tile.z >= minZoom && tile.z < maxZoom) + .map(async (tile: SourceTile) => { + if (!this.tileLayerService.hasTile(tile.key)) { + const tileInstance = getTileFactory(this.parent); + const tileLayer = new tileInstance(tile, this.parent); + await tileLayer.initTileLayer(); + this.tilePickService.setPickState(); + if (tileLayer.getLayers().length !== 0) { + this.tileLayerService.addTile(tileLayer); + this.tileLayerService.updateTileVisible(tile); + this.layerService.reRender(); + } + } else { + // 已加载瓦片 + this.tileLayerService.updateTileVisible(tile); - this.layerService.reRender() + this.tilePickService.setPickState(); + this.layerService.reRender(); } - } else {// 已加载瓦片 - - this.tileLayerService.updateTileVisible(tile); - this.tilePickService.setPickState(); - this.layerService.reRender() - } - })); - + }), + ); + if (this.tilesetManager.isLoaded) { // 将事件抛出，图层上可以使用瓦片 this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles); @@ -216,44 +215,43 @@ export default class BaseTileLayer { } // eslint-disable-next-line @typescript-eslint/no-unused-vars - public setPickState(layers: ILayer[]) {} + public setPickState(layers: ILayer[]) { + return; + } public pickRender(target: IInteractionTarget) { this.tilePickService.pickRender(target); } public selectFeature(pickedColors: Uint8Array | undefined) { - this.tilePickService.selectFeature(pickedColors) + this.tilePickService.selectFeature(pickedColors); } public highlightPickedFeature(pickedColors: Uint8Array | undefined) { - this.tilePickService.highlightPickedFeature(pickedColors) + this.tilePickService.highlightPickedFeature(pickedColors); } - /** * 实现 TileLayer 对子图层方法的代理 - * @param parent + * @param parent */ private proxy(parent: ILayer) { - ProxyFuncs.forEach(func => { + ProxyFuncs.forEach((func) => { // @ts-ignore const oldStyleFunc = parent[func].bind(parent); // @ts-ignore parent[func] = (...args: any) => { oldStyleFunc(...args); - this.getLayers().map(child =>{ - // @ts-ignore - child[func](...args); - }) + this.getLayers().map((child) => { + // @ts-ignore + child[func](...args); + }); // Tip: 目前在更新 RasterData 的 colorTexture 的时候需要额外优化 - if(func === 'style') { - this.getTiles().forEach(tile => tile.styleUpdate(...args)); + if (func === 'style') { + this.getTiles().forEach((tile: any) => tile.styleUpdate(...args)); } - + return parent; - } - }) -} - - + }; + }); + } } diff --git a/packages/layers/src/wind/models/wind.ts b/packages/layers/src/wind/models/wind.ts index 4187f21918..8bcc3fe9d3 100644 --- a/packages/layers/src/wind/models/wind.ts +++ b/packages/layers/src/wind/models/wind.ts @@ -113,19 +113,18 @@ export default class WindModel extends BaseModel { this.layerService.reRender(); }); - const model = await this.layer - .buildLayerModel({ - moduleName: 'wind', - vertexShader: WindVert, - fragmentShader: WindFrag, - triangulation: RasterImageTriangulation, - primitive: gl.TRIANGLES, - depth: { enable: false }, - stencil: getMask(mask, maskInside), - blend: this.getBlend(), - }) - this.colorModel = model; - return [model]; + const model = await this.layer.buildLayerModel({ + moduleName: 'wind', + vertexShader: WindVert, + fragmentShader: WindFrag, + triangulation: RasterImageTriangulation, + primitive: gl.TRIANGLES, + depth: { enable: false }, + stencil: getMask(mask, maskInside), + blend: this.getBlend(), + }); + this.colorModel = model; + return [model]; } public getWindSize() { @@ -143,8 +142,8 @@ export default class WindModel extends BaseModel { return { imageWidth, imageHeight }; } - public async buildModels():Promise { - return await this.initModels(); + public async buildModels(): Promise { + return this.initModels(); } public clearModels(): void { @@ -238,7 +237,7 @@ export default class WindModel extends BaseModel { this.layerService.beforeRenderData(this.layer); this.layer.hooks.beforeRender.call(); - this.layerService.renderMask(this.layer.masks) + this.layerService.renderMask(this.layer.masks); this.colorModel?.draw({ uniforms: { diff --git a/packages/map/src/camera.ts b/packages/map/src/camera.ts index e5047b25d9..f3d7a6211a 100644 --- a/packages/map/src/camera.ts +++ b/packages/map/src/camera.ts @@ -8,7 +8,6 @@ import Point, { PointLike } from './geo/point'; import Transform from './geo/transform'; import { Event } from './handler/events/event'; import { IMapOptions } from './interface'; -type CallBack = (_: number) => void; import { clamp, ease as defaultEasing, @@ -18,6 +17,7 @@ import { prefersReducedMotion, wrap, } from './util'; +type CallBack = (_: number) => void; export interface ICameraOptions { center?: LngLatLike; @@ -863,10 +863,7 @@ export default class Camera extends EventEmitter { ); const center = tr.unproject( - p0world - .add(p1world) - .div(2) - .sub(offsetAtFinalZoom), + p0world.add(p1world).div(2).sub(offsetAtFinalZoom), ); return { diff --git a/packages/map/src/handler/mouse/mouse_handler.ts b/packages/map/src/handler/mouse/mouse_handler.ts index eaeb63efc3..ce89a98626 100644 --- a/packages/map/src/handler/mouse/mouse_handler.ts +++ b/packages/map/src/handler/mouse/mouse_handler.ts @@ -18,9 +18,9 @@ export default class MouseHandler { public reset() { this.active = false; this.moved = false; - //@ts-ignore + // @ts-ignore delete this.lastPoint; - //@ts-ignore + // @ts-ignore delete this.eventButton; } diff --git a/packages/map/src/handler/tap/single_tap_recognizer.ts b/packages/map/src/handler/tap/single_tap_recognizer.ts index 4224daf172..81ba129bc8 100644 --- a/packages/map/src/handler/tap/single_tap_recognizer.ts +++ b/packages/map/src/handler/tap/single_tap_recognizer.ts @@ -28,11 +28,11 @@ export default class SingleTapRecognizer { } public reset() { - //@ts-ignore + // @ts-ignore delete this.centroid; - //@ts-ignore + // @ts-ignore delete this.startTime; - //@ts-ignore + // @ts-ignore delete this.touches; this.aborted = false; } diff --git a/packages/map/src/handler/tap/tap_drag_zoom.ts b/packages/map/src/handler/tap/tap_drag_zoom.ts index 7911dc4a4d..2e8960af51 100644 --- a/packages/map/src/handler/tap/tap_drag_zoom.ts +++ b/packages/map/src/handler/tap/tap_drag_zoom.ts @@ -22,11 +22,11 @@ export default class TapDragZoomHandler { public reset() { this.active = false; - //@ts-ignore + // @ts-ignore delete this.swipePoint; - //@ts-ignore + // @ts-ignore delete this.swipeTouch; - //@ts-ignore + // @ts-ignore delete this.tapTime; this.tap.reset(); } diff --git a/packages/map/src/handler/tap/tap_recognizer.ts b/packages/map/src/handler/tap/tap_recognizer.ts index 9e8e3fdf84..ee0c5c971b 100644 --- a/packages/map/src/handler/tap/tap_recognizer.ts +++ b/packages/map/src/handler/tap/tap_recognizer.ts @@ -20,7 +20,7 @@ export default class TapRecognizer { public reset() { this.lastTime = Infinity; - //@ts-ignore + // @ts-ignore delete this.lastTap; this.count = 0; this.singleTap.reset(); diff --git a/packages/map/src/handler/touch/touch_pitch.ts b/packages/map/src/handler/touch/touch_pitch.ts index 59629a3667..9710410708 100644 --- a/packages/map/src/handler/touch/touch_pitch.ts +++ b/packages/map/src/handler/touch/touch_pitch.ts @@ -16,9 +16,9 @@ export default class TouchPitchHandler extends TwoTouchHandler { public reset() { super.reset(); this.valid = undefined; - //@ts-ignore + // @ts-ignore delete this.firstMove; - //@ts-ignore + // @ts-ignore delete this.lastPoints; } diff --git a/packages/map/src/handler/touch/touch_rotate.ts b/packages/map/src/handler/touch/touch_rotate.ts index 82ae2da21d..93b9196514 100644 --- a/packages/map/src/handler/touch/touch_rotate.ts +++ b/packages/map/src/handler/touch/touch_rotate.ts @@ -13,11 +13,11 @@ export default class TouchRotateHandler extends TwoTouchHandler { public reset() { super.reset(); - //@ts-ignore + // @ts-ignore delete this.minDiameter; - //@ts-ignore + // @ts-ignore delete this.startVector; - //@ts-ignore + // @ts-ignore delete this.vector; } diff --git a/packages/map/src/handler/touch/touch_zoom.ts b/packages/map/src/handler/touch/touch_zoom.ts index 94d913d565..94c0a98d45 100644 --- a/packages/map/src/handler/touch/touch_zoom.ts +++ b/packages/map/src/handler/touch/touch_zoom.ts @@ -12,9 +12,9 @@ export default class TouchZoomHandler extends TwoTouchHandler { public reset() { super.reset(); - //@ts-ignore + // @ts-ignore delete this.distance; - //@ts-ignore + // @ts-ignore delete this.startDistance; } diff --git a/packages/map/src/handler/touch/two_touch.ts b/packages/map/src/handler/touch/two_touch.ts index 1358fcfce1..841502022c 100644 --- a/packages/map/src/handler/touch/two_touch.ts +++ b/packages/map/src/handler/touch/two_touch.ts @@ -16,7 +16,7 @@ export default class TwoTouchHandler { public reset() { this.active = false; - //@ts-ignore + // @ts-ignore delete this.firstTwoTouches; } // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/packages/map/src/index.ts b/packages/map/src/index.ts index 353b688df2..25c19e47d5 100644 --- a/packages/map/src/index.ts +++ b/packages/map/src/index.ts @@ -1,4 +1,4 @@ -export * from './map'; export * from './earthmap'; export * from './geo/mercator'; -export * from './interface'; \ No newline at end of file +export * from './interface'; +export * from './map'; diff --git a/packages/maps/src/index.ts b/packages/maps/src/index.ts index a4e2ad7f5b..8b5118ad12 100644 --- a/packages/maps/src/index.ts +++ b/packages/maps/src/index.ts @@ -1,14 +1,11 @@ import GaodeMapV1 from './amap/'; // import GaodeMapV1 from './amap/'; -import GaodeMapV2 from './amap2/'; -import GaodeMap from './amap2/'; +import { default as GaodeMap, default as GaodeMapV2 } from './amap2/'; import Earth from './earth/'; // import GaodeMapV2 from './amap2/'; import Map from './map/'; import Mapbox from './mapbox/'; import { Version } from './version'; +export * from './utils'; export { Version, GaodeMap, GaodeMapV1, GaodeMapV2, Mapbox, Map, Earth }; - - -export * from './utils' diff --git a/packages/maps/src/utils/amap/AMapBaseService.ts b/packages/maps/src/utils/amap/AMapBaseService.ts index 350c56245f..1c52715366 100644 --- a/packages/maps/src/utils/amap/AMapBaseService.ts +++ b/packages/maps/src/utils/amap/AMapBaseService.ts @@ -35,7 +35,7 @@ import { MapTheme } from './theme'; const AMapEventMap: { [key: string]: any; } = { - contextmenu:'rightclick', + contextmenu: 'rightclick', }; let mapdivCount = 0; @@ -63,7 +63,8 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; // 暂时关闭 fix 统一不同坐标 */ @injectable() export default abstract class AMapBaseService - implements IMapService { + implements IMapService +{ public version: string = Version['GAODE1.x']; public simpleMapCoord: ISimpleMapCoord = new SimpleMapCoord(); /** @@ -353,7 +354,7 @@ export default abstract class AMapBaseService mat4.rotateY(modelMatrix, modelMatrix, rotate[1]); mat4.rotateZ(modelMatrix, modelMatrix, rotate[2]); - return (modelMatrix as unknown) as number[]; + return modelMatrix as unknown as number[]; } public async init(): Promise { @@ -411,7 +412,10 @@ export default abstract class AMapBaseService }; if (!amapLoaded && !mapInstance) { if (token === AMAP_API_KEY) { - console.warn(`%c${this.configService.getSceneWarninfo('MapToken')}!`,'color: #873bf4;font-weigh:900;font-size: 16px;'); + console.warn( + `%c${this.configService.getSceneWarninfo('MapToken')}!`, + 'color: #873bf4;font-weigh:900;font-size: 16px;', + ); } amapLoaded = true; plugin.push('Map3D'); @@ -460,7 +464,9 @@ export default abstract class AMapBaseService } // eslint-disable-next-line @typescript-eslint/no-unused-vars - public updateView(viewOption: Partial): void {} + public updateView(viewOption: Partial): void { + return; + } public getOverlayContainer(): HTMLElement | undefined { return undefined; @@ -486,7 +492,6 @@ export default abstract class AMapBaseService } public destroy() { - // TODO: 销毁地图可视化层的容器 this.$mapContainer?.parentNode?.removeChild(this.$mapContainer); @@ -497,7 +502,6 @@ export default abstract class AMapBaseService document.head.removeChild($jsapi); } this.map.destroy(); - } public getMapContainer() { @@ -513,20 +517,12 @@ export default abstract class AMapBaseService } protected handleCameraChanged = (e: IAMapEvent): void => { - const { - fov, - near, - far, - height, - pitch, - rotation, - aspect, - position, - } = e.camera; + const { fov, near, far, height, pitch, rotation, aspect, position } = + e.camera; const { lng, lat } = this.getCenter(); // Tip: 触发地图变化事件 this.emit('mapchange'); - + if (this.cameraChangedCallback) { // resync viewport this.viewport.syncWithMapCamera({ diff --git a/packages/mini/src/index.ts b/packages/mini/src/index.ts index 7abb6b4811..9215f2af0f 100644 --- a/packages/mini/src/index.ts +++ b/packages/mini/src/index.ts @@ -2,7 +2,7 @@ // tslint:disable-next-line:no-submodule-imports import Map from '@antv/l7-maps/lib/map'; export * from '@antv/l7-core'; -export * from '@antv/l7-scene'; export * from '@antv/l7-layers'; +export * from '@antv/l7-scene'; export * from '@antv/l7-utils'; export { Map }; diff --git a/packages/renderer/src/regl/__tests__/attribute.spec.ts b/packages/renderer/src/regl/__tests__/attribute.spec.ts index d4e8b625c3..cf29777ef1 100644 --- a/packages/renderer/src/regl/__tests__/attribute.spec.ts +++ b/packages/renderer/src/regl/__tests__/attribute.spec.ts @@ -1,4 +1,5 @@ import { gl } from '@antv/l7-core'; +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import quad from '../../../../core/src/shaders/post-processing/quad.glsl'; @@ -6,7 +7,6 @@ import ReglAttribute from '../ReglAttribute'; import ReglBuffer from '../ReglBuffer'; import ReglModel from '../ReglModel'; import checkPixels from './utils/check-pixels'; -import { createContext } from '@antv/l7-test-utils'; describe('ReglAttribute', () => { let context; @@ -57,7 +57,6 @@ describe('ReglAttribute', () => { }); it('should update buffer correctly', () => { - const attribute = new ReglAttribute(reGL, { buffer: new ReglBuffer(reGL, { data: [-4, -4, 4, -4, 0, 4], diff --git a/packages/renderer/src/regl/__tests__/elements.spec.ts b/packages/renderer/src/regl/__tests__/elements.spec.ts index c22fdef3b5..c0de69e768 100644 --- a/packages/renderer/src/regl/__tests__/elements.spec.ts +++ b/packages/renderer/src/regl/__tests__/elements.spec.ts @@ -1,4 +1,5 @@ import { gl } from '@antv/l7-core'; +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import quad from '../../../../core/src/shaders/post-processing/quad.glsl'; @@ -7,7 +8,6 @@ import ReglBuffer from '../ReglBuffer'; import ReglElements from '../ReglElements'; import ReglModel from '../ReglModel'; import checkPixels from './utils/check-pixels'; -import { createContext } from '@antv/l7-test-utils'; describe('ReglElements', () => { let context; diff --git a/packages/renderer/src/regl/__tests__/framebuffer.spec.ts b/packages/renderer/src/regl/__tests__/framebuffer.spec.ts index e10107a04a..4fa89c809a 100644 --- a/packages/renderer/src/regl/__tests__/framebuffer.spec.ts +++ b/packages/renderer/src/regl/__tests__/framebuffer.spec.ts @@ -1,4 +1,5 @@ import { gl } from '@antv/l7-core'; +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import quad from '../../../../core/src/shaders/post-processing/quad.glsl'; @@ -10,7 +11,6 @@ import ReglModel from '../ReglModel'; import ReglRenderbuffer from '../ReglRenderbuffer'; import ReglTexture2D from '../ReglTexture2D'; import checkPixels from './utils/check-pixels'; -import { createContext } from '@antv/l7-test-utils'; describe('ReglFramebuffer', () => { let context; diff --git a/packages/renderer/src/regl/__tests__/model.draw.spec.ts b/packages/renderer/src/regl/__tests__/model.draw.spec.ts index d961089031..dd73dab7b2 100644 --- a/packages/renderer/src/regl/__tests__/model.draw.spec.ts +++ b/packages/renderer/src/regl/__tests__/model.draw.spec.ts @@ -1,4 +1,5 @@ import { gl } from '@antv/l7-core'; +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import quad from '../../../../core/src/shaders/post-processing/quad.glsl'; @@ -6,7 +7,6 @@ import ReglAttribute from '../ReglAttribute'; import ReglBuffer from '../ReglBuffer'; import ReglModel from '../ReglModel'; import checkPixels from './utils/check-pixels'; -import { createContext } from '@antv/l7-test-utils'; import globalDefaultprecision from './utils/default-precision'; describe('Initialization for ReglModel', () => { diff --git a/packages/renderer/src/regl/__tests__/model.spec.ts b/packages/renderer/src/regl/__tests__/model.spec.ts index 9482a56d24..5cd0777d7a 100644 --- a/packages/renderer/src/regl/__tests__/model.spec.ts +++ b/packages/renderer/src/regl/__tests__/model.spec.ts @@ -1,7 +1,7 @@ +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import ReglModel from '../ReglModel'; -import { createContext } from '@antv/l7-test-utils'; describe('ReglModel', () => { let context; diff --git a/packages/renderer/src/regl/__tests__/model.uniform.spec.ts b/packages/renderer/src/regl/__tests__/model.uniform.spec.ts index 2956e242ed..d6241ecd6b 100644 --- a/packages/renderer/src/regl/__tests__/model.uniform.spec.ts +++ b/packages/renderer/src/regl/__tests__/model.uniform.spec.ts @@ -1,9 +1,9 @@ +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import ReglFramebuffer from '../ReglFramebuffer'; import ReglModel from '../ReglModel'; import ReglTexture2D from '../ReglTexture2D'; -import { createContext } from '@antv/l7-test-utils'; describe('uniforms in ReglModel', () => { let gl; diff --git a/packages/renderer/src/regl/__tests__/renderer.spec.ts b/packages/renderer/src/regl/__tests__/renderer.spec.ts index 19f6ef8e3f..bed0418e93 100644 --- a/packages/renderer/src/regl/__tests__/renderer.spec.ts +++ b/packages/renderer/src/regl/__tests__/renderer.spec.ts @@ -1,4 +1,5 @@ import { gl } from '@antv/l7-core'; +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import copy from '../../../../core/src/shaders/post-processing/copy.glsl'; @@ -7,7 +8,6 @@ import { ReglRendererService } from '../../index'; import ReglAttribute from '../ReglAttribute'; import ReglBuffer from '../ReglBuffer'; import checkPixels from './utils/check-pixels'; -import { createContext } from '@antv/l7-test-utils'; import globalDefaultprecision from './utils/default-precision'; describe('ReglRendererService', () => { @@ -40,12 +40,8 @@ describe('ReglRendererService', () => { }); it('should create model with createModel API', () => { - const { - clear, - createModel, - createAttribute, - createBuffer, - } = rendererService; + const { clear, createModel, createAttribute, createBuffer } = + rendererService; const model = createModel({ vs: quad, fs: 'void main() {gl_FragColor = vec4(1., 0., 0., 1.);}', diff --git a/packages/renderer/src/regl/__tests__/texture.spec.ts b/packages/renderer/src/regl/__tests__/texture.spec.ts index 31ef212b25..504bf72246 100644 --- a/packages/renderer/src/regl/__tests__/texture.spec.ts +++ b/packages/renderer/src/regl/__tests__/texture.spec.ts @@ -1,4 +1,5 @@ import { gl } from '@antv/l7-core'; +import { createContext } from '@antv/l7-test-utils'; import regl from 'l7regl'; import 'reflect-metadata'; import copy from '../../../../core/src/shaders/post-processing/copy.glsl'; @@ -8,7 +9,6 @@ import ReglBuffer from '../ReglBuffer'; import ReglModel from '../ReglModel'; import ReglTexture2D from '../ReglTexture2D'; import checkPixels from './utils/check-pixels'; -import { createContext } from '@antv/l7-test-utils'; import globalDefaultprecision from './utils/default-precision'; describe('ReglTexture', () => { diff --git a/packages/renderer/src/regl/__tests__/utils/create-context.ts b/packages/renderer/src/regl/__tests__/utils/create-context.ts index 39a7e6104c..bf10776706 100644 --- a/packages/renderer/src/regl/__tests__/utils/create-context.ts +++ b/packages/renderer/src/regl/__tests__/utils/create-context.ts @@ -5,7 +5,7 @@ import gl from 'gl'; const CONTEXT = gl(1, 1, { preserveDrawingBuffer: true }); const RESIZE = CONTEXT.getExtension('STACKGL_resize_drawingbuffer'); -export default function(width: number, height: number) { +export default function (width: number, height: number) { resize(width, height); return CONTEXT; } diff --git a/packages/scene/__tests__/index.spec.ts b/packages/scene/__tests__/index.spec.ts index 4c79b26611..692c42f6e8 100644 --- a/packages/scene/__tests__/index.spec.ts +++ b/packages/scene/__tests__/index.spec.ts @@ -1,24 +1,21 @@ // @ts-ignore -import { TestScene } from '@antv/l7-test-utils' - +import { TestScene } from '@antv/l7-test-utils'; describe('template', () => { - const el = document.createElement('div'); el.id = 'test-div-id'; const body = document.querySelector('body') as HTMLBodyElement; body.appendChild(el); const scene = TestScene({}); - it('scene map status', async () => { - expect( scene.getZoom()).toEqual(3) - expect(scene.getMinZoom()).toEqual(-2) - expect(scene.getMaxZoom()).toEqual(22) + expect(scene.getZoom()).toEqual(3); + expect(scene.getMinZoom()).toEqual(-2); + expect(scene.getMaxZoom()).toEqual(22); expect(scene.getType()).toEqual('default'); - expect(scene.getBounds()).toEqual([[92.61570169583138, 18.27006017947646], [127.7719516958324, 40.94589761553888]]) + expect(scene.getBounds()).toEqual([ + [92.61570169583138, 18.27006017947646], + [127.7719516958324, 40.94589761553888], + ]); }); - - - }); diff --git a/packages/scene/__tests__/l7_map.spec.ts b/packages/scene/__tests__/l7_map.spec.ts index 003374840c..090d37e50b 100644 --- a/packages/scene/__tests__/l7_map.spec.ts +++ b/packages/scene/__tests__/l7_map.spec.ts @@ -1,7 +1,4 @@ // @ts-ignore -import { PolygonLayer } from '@antv/l7-layers'; -import { Map } from '@antv/l7-maps'; -import { Scene } from '../src/'; describe('template', () => { it('scene l7 map method', () => { expect(2).toEqual(2); diff --git a/packages/scene/src/IMapController.ts b/packages/scene/src/IMapController.ts index 95f0116dbd..b70ba14b3b 100644 --- a/packages/scene/src/IMapController.ts +++ b/packages/scene/src/IMapController.ts @@ -82,5 +82,5 @@ export default interface IMapController { lngLatToPixel(lnglat: Point): IPoint; containerToLngLat(pixel: Point): ILngLat; lngLatToContainer(lnglat: Point): IPoint; - exportMap(type: 'jpg' | 'png'): Promise ; + exportMap(type: 'jpg' | 'png'): Promise; } diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 2fd782a717..ae278aea38 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -6,6 +6,7 @@ import { ICameraOptions, IControl, IControlService, + IDebugService, IFontService, IIconFontGlyph, IIconService, @@ -13,7 +14,6 @@ import { IInteractionService, ILayer, ILayerService, - IDebugService, ILngLat, IMapService, IMarker, @@ -53,7 +53,8 @@ import IPostProcessingPassPluggable from './IPostProcessingPassPluggable'; * */ class Scene - implements IPostProcessingPassPluggable, IMapController, ILayerManager { + implements IPostProcessingPassPluggable, IMapController, ILayerManager +{ private sceneService: ISceneService; private mapService: IMapService; private controlService: IControlService; @@ -103,7 +104,7 @@ class Scene ); this.popupService = sceneContainer.get(TYPES.IPopupService); this.boxSelect = new BoxSelect(this, {}); - setMiniScene(config?.isMini|| false); + setMiniScene(config?.isMini || false); if (isMini) { this.sceneService.initMiniScene(config); @@ -154,18 +155,18 @@ class Scene /** * 对外暴露 debugService - * @returns + * @returns */ - public getDebugService(): IDebugService{ + public getDebugService(): IDebugService { return this.debugService; } public async exportPng(type?: 'png' | 'jpg'): Promise { - return await this.sceneService.exportPng(type); + return this.sceneService.exportPng(type); } - public async exportMap(type?: 'png' | 'jpg'): Promise { - return await this.sceneService.exportPng(type); + public async exportMap(type?: 'png' | 'jpg'): Promise { + return this.sceneService.exportPng(type); } public registerRenderService(render: any) { @@ -200,7 +201,7 @@ class Scene layer.on('inited', () => { const maskInstance = this.initMask(layer); this.addMask(maskInstance as ILayer, layer.id); - }) + }); } } @@ -210,13 +211,12 @@ class Scene maskfence, maskColor = '#000', maskOpacity = 0, - } = layer.getLayerConfig(); - if(!mask || !maskfence) return undefined; + } = layer.getLayerConfig(); + if (!mask || !maskfence) { + return undefined; + } - const maskInstance = new MaskLayer() - .source(maskfence) - .shape('fill') - .style({ + const maskInstance = new MaskLayer().source(maskfence).shape('fill').style({ color: maskColor, opacity: maskOpacity, }); @@ -224,7 +224,9 @@ class Scene } public addMask(mask: ILayer, layerId: string) { - if(!mask) return; + if (!mask) { + return; + } const parent = this.getLayer(layerId); if (parent) { const layerContainer = createLayerContainer(this.container); @@ -253,10 +255,10 @@ class Scene } public async removeLayer(layer: ILayer, parentLayer?: ILayer): Promise { - await this.layerService.remove(layer, parentLayer); + await this.layerService.remove(layer, parentLayer); } - public async removeAllLayer(): Promise { + public async removeAllLayer(): Promise { await this.layerService.removeAllLayers(); } diff --git a/packages/source/__tests__/source.spec.ts b/packages/source/__tests__/source.spec.ts index e58147f597..698cb39d0e 100644 --- a/packages/source/__tests__/source.spec.ts +++ b/packages/source/__tests__/source.spec.ts @@ -6,9 +6,7 @@ describe('source constructor', () => { it('source.constructor', () => { const source = new Source(Polygon); expect(source.extent).toEqual([ - 114.24373626708983, - 30.55560910664438, - 114.32424545288086, + 114.24373626708983, 30.55560910664438, 114.32424545288086, 30.60807236997211, ]); }); diff --git a/packages/source/src/interface.ts b/packages/source/src/interface.ts index 0db5d4806a..9e7a37e7b7 100644 --- a/packages/source/src/interface.ts +++ b/packages/source/src/interface.ts @@ -1,5 +1,14 @@ export type DataType = string | object[] | object; -export type TypedArray = Int8Array | Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Uint8ClampedArray | Float32Array | Float64Array; +export type TypedArray = + | Int8Array + | Uint8Array + | Int16Array + | Uint16Array + | Int32Array + | Uint32Array + | Uint8ClampedArray + | Float32Array + | Float64Array; export interface IDictionary { [key: string]: TValue; } @@ -28,11 +37,15 @@ export interface IJsonItem { export type IJsonData = IJsonItem[]; export interface IRasterData { - rasterData: HTMLImageElement | Uint8Array | ImageBitmap | null | undefined; + rasterData: HTMLImageElement | Uint8Array | ImageBitmap | null | undefined; width: number; height: number; } -export type IRasterFormat = (imageData: ArrayBuffer, bands: number[], channels?: string[]) => Promise; +export type IRasterFormat = ( + imageData: ArrayBuffer, + bands: number[], + channels?: string[], +) => Promise; export interface IRasterFileData { data: ArrayBuffer; bands: number[]; @@ -40,32 +53,36 @@ export interface IRasterFileData { export type IRgbOperation = { r?: any[]; - g?: any[] - b?: any[] + g?: any[]; + b?: any[]; }; export type SchemaOperationType = SchemaRGBOperation | SchemaBandOperation; -export type SchemaRGBOption ={ - countCut?:[number,number];// 百分比 - RMinMax?:[number,number]; - GMinMax?:[number,number]; - BMinMax?:[number,number]; -} +export type SchemaRGBOption = { + countCut?: [number, number]; // 百分比 + RMinMax?: [number, number]; + GMinMax?: [number, number]; + BMinMax?: [number, number]; +}; export type SchemaRGBOperation = { - type: 'rgb' - options:SchemaRGBOption | { - r?: any[]; - g?: any[] - b?: any[] - } -} + type: 'rgb'; + options: + | SchemaRGBOption + | { + r?: any[]; + g?: any[]; + b?: any[]; + }; +}; export type SchemaBandOperation = { - type: 'nd' - -} - -export type IBandsOperation = ((bands: IRasterData[]) => Uint8Array | Array) | any[] | IRgbOperation | SchemaOperationType; + type: 'nd'; +}; +export type IBandsOperation = + | ((bands: IRasterData[]) => Uint8Array | number[]) + | any[] + | IRgbOperation + | SchemaOperationType; export type IRasterLayerData = number[] | IRasterFileData | IRasterFileData[]; diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index a66728fbfc..5a3e7ebbbe 100644 --- a/packages/source/src/source.ts +++ b/packages/source/src/source.ts @@ -277,7 +277,9 @@ export default class Source extends EventEmitter implements ISource { this.tileset = this.initTileset(); // 判断当前 source 是否需要计算范围 - if (parser.cancelExtent) { return; } + if (parser.cancelExtent) { + return; + } // 计算范围 this.extent = extent(this.data.dataArray); diff --git a/packages/source/src/utils/bandOperation/bands.ts b/packages/source/src/utils/bandOperation/bands.ts index efe635f06e..dc5df9df78 100644 --- a/packages/source/src/utils/bandOperation/bands.ts +++ b/packages/source/src/utils/bandOperation/bands.ts @@ -1,25 +1,34 @@ -import { IRasterFileData, IRasterFormat, IBandsOperation, IRgbOperation, IRasterData, SchemaOperationType} from '../../interface'; -import { calculate } from './math'; -import { operationsSchema } from './operationSchema' - import { - ResponseCallback, -} from '@antv/l7-utils'; + IBandsOperation, + IRasterData, + IRasterFileData, + IRasterFormat, + IRgbOperation, + SchemaOperationType, +} from '../../interface'; +import { calculate } from './math'; +import { operationsSchema } from './operationSchema'; + +import { ResponseCallback } from '@antv/l7-utils'; /** * 执行波段计算 format + operation - * @param imageDataList - * @param rasterFormat - * @param operation - * @returns + * @param imageDataList + * @param rasterFormat + * @param operation + * @returns */ -export async function bandsOperation(imageDataList: IRasterFileData[], rasterFormat: IRasterFormat, operation: IBandsOperation | undefined) { +export async function bandsOperation( + imageDataList: IRasterFileData[], + rasterFormat: IRasterFormat, + operation: IBandsOperation | undefined, +) { if (imageDataList.length === 0) { return { rasterData: [0], width: 1, - heigh: 1 - } + heigh: 1, + }; } const formatData = (await Promise.all( @@ -29,13 +38,18 @@ export async function bandsOperation(imageDataList: IRasterFileData[], rasterFor const bandsData: IRasterData[] = []; // Tip: rasterFormat 返回值 rasterData|rasterData[] - formatData.forEach(d => { + formatData.forEach((d) => { Array.isArray(d) ? bandsData.push(...d) : bandsData.push(d); - }) + }); // 多个栅格数据必须是相同大小才能进行相互之间的运算 const { width, height } = bandsData[0]; - type IOperationResult = HTMLImageElement | Uint8Array | ImageBitmap | null | undefined - let rasterData: IOperationResult | IOperationResult[] | any ; + type IOperationResult = + | HTMLImageElement + | Uint8Array + | ImageBitmap + | null + | undefined; + let rasterData: IOperationResult | IOperationResult[] | any; switch (typeof operation) { case 'function': @@ -51,63 +65,75 @@ export async function bandsOperation(imageDataList: IRasterFileData[], rasterFor * b: ['+', ['band', 0], 1], * } */ - if (!Array.isArray(operation)) { // RGB 三通道 - rasterData = processSchemaOperation(operation as SchemaOperationType, bandsData); - - } else { // 数值计算 - rasterData ={ rasterData: calculate(operation as any[], bandsData)}; + if (!Array.isArray(operation)) { + // RGB 三通道 + rasterData = processSchemaOperation( + operation as SchemaOperationType, + bandsData, + ); + } else { + // 数值计算 + rasterData = { rasterData: calculate(operation as any[], bandsData) }; } break; - + default: - rasterData={ rasterData: bandsData[0].rasterData}; + rasterData = { rasterData: bandsData[0].rasterData }; } return { ...rasterData, width, height, - } + }; } -function processSchemaOperation(operation: SchemaOperationType,bandsData: IRasterData[]) { +function processSchemaOperation( + operation: SchemaOperationType, + bandsData: IRasterData[], +) { const schema = operationsSchema[operation.type]; - - if(schema.type === 'function') { + + if (schema.type === 'function') { // @ts-ignore - return schema.method(bandsData,operation?.options as any) - } else if(schema.type === 'operation') { - if(operation.type === 'rgb') { // TODO 临时处理 + return schema.method(bandsData, operation?.options as any); + } else if (schema.type === 'operation') { + if (operation.type === 'rgb') { + // TODO 临时处理 // @ts-ignore - return getRgbBands(schema.expression,bandsData) + return getRgbBands(schema.expression, bandsData); } else { // @ts-ignore - return { rasterData: calculate(schema.expression as any[], bandsData)}; + return { rasterData: calculate(schema.expression as any[], bandsData) }; } } - } - function getRgbBands(operation: IRgbOperation, bandsData: IRasterData[]) { - if (operation.r === undefined) console.warn('Channel R lost in Operation! Use band[0] to fill!'); - if (operation.g === undefined) console.warn('Channel G lost in Operation! Use band[0] to fill!'); - if (operation.b === undefined) console.warn('Channel B lost in Operation! Use band[0] to fill!'); - const r = calculate(operation.r || ['band', 0], bandsData); - const g = calculate(operation.g || ['band', 0], bandsData); - const b = calculate(operation.b || ['band', 0], bandsData); - return [r, g, b]; +function getRgbBands(operation: IRgbOperation, bandsData: IRasterData[]) { + if (operation.r === undefined) { + console.warn('Channel R lost in Operation! Use band[0] to fill!'); } + if (operation.g === undefined) { + console.warn('Channel G lost in Operation! Use band[0] to fill!'); + } + if (operation.b === undefined) { + console.warn('Channel B lost in Operation! Use band[0] to fill!'); + } + const r = calculate(operation.r || ['band', 0], bandsData); + const g = calculate(operation.g || ['band', 0], bandsData); + const b = calculate(operation.b || ['band', 0], bandsData); + return [r, g, b]; +} +/** + * 处理每个请求得到的栅格文件数据 + */ +export async function processRasterData( + rasterFiles: IRasterFileData[], + rasterFormat: IRasterFormat, + operation: IBandsOperation | undefined, + callback: ResponseCallback, +) { + const rasterData = await bandsOperation(rasterFiles, rasterFormat, operation); + // 目前 max｜min 没有生效 - /** - * 处理每个请求得到的栅格文件数据 - */ - export async function processRasterData( - rasterFiles: IRasterFileData[], - rasterFormat: IRasterFormat, - operation: IBandsOperation | undefined, - callback: ResponseCallback - ) { - const rasterData = await bandsOperation(rasterFiles, rasterFormat, operation); - // 目前 max｜min 没有生效 - - callback(null, {data:rasterData}); - } \ No newline at end of file + callback(null, { data: rasterData }); +} diff --git a/packages/source/src/utils/bandOperation/math.ts b/packages/source/src/utils/bandOperation/math.ts index 54c21e2314..1722b776ef 100644 --- a/packages/source/src/utils/bandOperation/math.ts +++ b/packages/source/src/utils/bandOperation/math.ts @@ -1,5 +1,6 @@ import { IRasterData } from '../../interface'; +// tslint:disable-next-line: jsdoc-format /** 数学运算 根据计算表达式进行数学运算 * * * Math operators: * `['*', value1, value2]` diff --git a/packages/source/src/utils/bandOperation/operationSchema.ts b/packages/source/src/utils/bandOperation/operationSchema.ts index c8aceb1ec1..a8bc0b5405 100644 --- a/packages/source/src/utils/bandOperation/operationSchema.ts +++ b/packages/source/src/utils/bandOperation/operationSchema.ts @@ -1,42 +1,42 @@ -import { TypedArray, IRasterData,SchemaRGBOption } from '../../interface'; +import { IRasterData, SchemaRGBOption, TypedArray } from '../../interface'; export type operationsType = 'rgb' | 'nd'; -export const operationsSchema= { - nd:{ - type:'operation', - expression:['/', - ['-', ['band', 1], ['band', 0]], // R > NIR - ['+', ['band', 1], ['band', 0]] - ], +export const operationsSchema = { + nd: { + type: 'operation', + expression: [ + '/', + ['-', ['band', 1], ['band', 0]], // R > NIR + ['+', ['band', 1], ['band', 0]], + ], }, rgb: { type: 'function', - method:strethRgb2minMax + method: strethRgb2minMax, }, +}; -} - -function strethRgb2minMax(bandsData: IRasterData[],options?:SchemaRGBOption) { +function strethRgb2minMax(bandsData: IRasterData[], options?: SchemaRGBOption) { const channelR = bandsData[0].rasterData as Uint8Array; const channelG = bandsData[1].rasterData as Uint8Array; const channelB = bandsData[2].rasterData as Uint8Array; const data = []; - const [low,high]= options?.countCut || [2, 98] + const [low, high] = options?.countCut || [2, 98]; const minMaxR = options?.RMinMax || percentile(channelR, low, high); const minMaxG = options?.GMinMax || percentile(channelG, low, high); const minMaxB = options?.BMinMax || percentile(channelB, low, high); for (let i = 0; i < channelR.length; i++) { - data.push(Math.max(0,channelR[i] - minMaxR[0])); - data.push(Math.max(0,channelG[i] - minMaxG[0])); - data.push(Math.max(0,channelB[i] - minMaxB[0])); + data.push(Math.max(0, channelR[i] - minMaxR[0])); + data.push(Math.max(0, channelG[i] - minMaxG[0])); + data.push(Math.max(0, channelB[i] - minMaxB[0])); } return { rasterData: data, - rMinMax:minMaxR, - gMinMax:minMaxG, - bMinMax:minMaxB, + rMinMax: minMaxR, + gMinMax: minMaxG, + bMinMax: minMaxB, }; } @@ -44,10 +44,9 @@ function strethRgb2minMax(bandsData: IRasterData[],options?:SchemaRGBOption) { function percentile(data: TypedArray, minPercent: number, maxPercent: number) { // 计算效率问题 - const sortData = data.slice().sort((a, b) => (a - b)); + const sortData = data.slice().sort((a, b) => a - b); const dataLength = sortData.length; - const min = sortData[Math.ceil(dataLength * minPercent / 100)]; - const max = sortData[Math.ceil(dataLength * maxPercent / 100)] - return [min, max] - + const min = sortData[Math.ceil((dataLength * minPercent) / 100)]; + const max = sortData[Math.ceil((dataLength * maxPercent) / 100)]; + return [min, max]; } diff --git a/packages/source/src/utils/tile/getCustomData.ts b/packages/source/src/utils/tile/getCustomData.ts index 16987a72b0..437df7b455 100644 --- a/packages/source/src/utils/tile/getCustomData.ts +++ b/packages/source/src/utils/tile/getCustomData.ts @@ -1,40 +1,44 @@ -import { IRasterFormat, IBandsOperation } from '../../interface'; // import { bindCancel } from './request'; -import { - SourceTile, -} from '@antv/l7-utils'; +import { SourceTile } from '@antv/l7-utils'; +import { IBandsOperation, IRasterFormat } from '../../interface'; import { processRasterData } from '../bandOperation/bands'; export const getCustomData = async ( - tile: SourceTile, - getCustomData: (tile: { x: number, y: number, z: number }, cb: (err: any, data: any) => void) => void, - rasterFormat: IRasterFormat, - operation?: IBandsOperation, + tile: SourceTile, + getCustomDataFunc: ( + tile: { x: number; y: number; z: number }, + cb: (err: any, data: any) => void, + ) => void, + rasterFormat: IRasterFormat, + operation?: IBandsOperation, ) => { - return new Promise((resolve, reject) => { - getCustomData({ - x: tile.x, - y: tile.y, - z: tile.z - }, (err, data) => { - - if(err || data.length ===0){ - reject(err) - return; - } - if (data) { - processRasterData([{data,bands:[0]}], rasterFormat, operation, (err: any, img: any) => { - if (err) { - reject(err); - } else if (img) { - resolve(img); - } - },); - } - - }) - }) - -} - - + return new Promise((resolve, reject) => { + getCustomDataFunc( + { + x: tile.x, + y: tile.y, + z: tile.z, + }, + (err, data) => { + if (err || data.length === 0) { + reject(err); + return; + } + if (data) { + processRasterData( + [{ data, bands: [0] }], + rasterFormat, + operation, + (error: any, img: any) => { + if (error) { + reject(error); + } else if (img) { + resolve(img); + } + }, + ); + } + }, + ); + }); +}; diff --git a/packages/source/src/utils/tile/getRasterData.ts b/packages/source/src/utils/tile/getRasterData.ts index 8022851827..f04ec71919 100644 --- a/packages/source/src/utils/tile/getRasterData.ts +++ b/packages/source/src/utils/tile/getRasterData.ts @@ -1,14 +1,18 @@ -import { IRasterFormat, IBandsOperation, IRasterFileData } from '../../interface'; -import { getTileBandParams, bindCancel } from './request'; import { - makeXMLHttpRequestPromise, - ResponseCallback, - ITileBand, - RequestParameters, - getArrayBuffer, - SourceTile, + getArrayBuffer, + ITileBand, + makeXMLHttpRequestPromise, + RequestParameters, + ResponseCallback, + SourceTile, } from '@antv/l7-utils'; +import { + IBandsOperation, + IRasterFileData, + IRasterFormat, +} from '../../interface'; import { processRasterData } from '../bandOperation/bands'; +import { bindCancel, getTileBandParams } from './request'; export const getRasterFile = async ( tile: SourceTile, @@ -19,8 +23,12 @@ export const getRasterFile = async ( ) => { // Tip: 至少存在一个请求文件的 url，处理得到标准的 ITileBand[] url 路径和 bands 参数 const tileBandParams: ITileBand[] = getTileBandParams(requestParameters.url); - if(tileBandParams.length > 1) {// 同时请求多文件 - const { rasterFiles, xhrList, errList } = await getMultiArrayBuffer(tileBandParams, requestParameters); + if (tileBandParams.length > 1) { + // 同时请求多文件 + const { rasterFiles, xhrList, errList } = await getMultiArrayBuffer( + tileBandParams, + requestParameters, + ); // 多波段计算 bindCancel(tile, xhrList); if (errList.length > 0) { @@ -28,15 +36,17 @@ export const getRasterFile = async ( return; } processRasterData(rasterFiles, rasterFormat, operation, callback); - } else { + } else { const xhr = getArrayBuffer(requestParameters, (err, imgData) => { if (err) { callback(err); } else if (imgData) { - const rasterFiles = [{ - data: imgData, - bands: tileBandParams[0].bands - }]; + const rasterFiles = [ + { + data: imgData, + bands: tileBandParams[0].bands, + }, + ]; processRasterData(rasterFiles, rasterFormat, operation, callback); } }); @@ -46,36 +56,40 @@ export const getRasterFile = async ( /** * get multi raster files async - * @param tileBandParams - * @param requestParameters - * @returns + * @param tileBandParams + * @param requestParameters + * @returns */ -async function getMultiArrayBuffer(tileBandParams: ITileBand[], requestParameters: RequestParameters) { +async function getMultiArrayBuffer( + tileBandParams: ITileBand[], + requestParameters: RequestParameters, +) { const rasterFiles: IRasterFileData[] = []; const xhrList: any[] = []; const errList = []; + // tslint:disable-next-line: prefer-for-of for (let i = 0; i < tileBandParams.length; i++) { - const tileBandParam = tileBandParams[i] + const tileBandParam = tileBandParams[i]; const params = { - ...requestParameters, - url: tileBandParam.url, + ...requestParameters, + url: tileBandParam.url, }; - + const bands = tileBandParam.bands; const { err, data, xhr } = await makeXMLHttpRequestPromise({ - ...params, - type: 'arrayBuffer', + ...params, + type: 'arrayBuffer', }); if (err) { - errList.push(err); + errList.push(err); } xhrList.push(xhr); rasterFiles.push({ - data, - bands, + data, + bands, }); } - return { rasterFiles, xhrList, errList } -} \ No newline at end of file + return { rasterFiles, xhrList, errList }; +} diff --git a/packages/source/src/utils/tile/getRasterTile.ts b/packages/source/src/utils/tile/getRasterTile.ts index f2a75e7af8..e88358dcfb 100644 --- a/packages/source/src/utils/tile/getRasterTile.ts +++ b/packages/source/src/utils/tile/getRasterTile.ts @@ -1,16 +1,15 @@ +import { ITileParserCFG } from '@antv/l7-core'; import { getImage, - ITileBand, getURLFromTemplate, getWMTSURLFromTemplate, + ITileBand, SourceTile, TileLoadParams, } from '@antv/l7-utils'; -import { getTileUrl } from './request'; -import { ITileParserCFG } from '@antv/l7-core' -import { IRasterFormat, IBandsOperation } from '../../interface'; +import { IBandsOperation, IRasterFormat } from '../../interface'; import { getRasterFile } from './getRasterData'; - +import { getTileUrl } from './request'; /** * 用于获取 raster data 的瓦片，如 tiff、lerc、dem 等 @@ -36,7 +35,7 @@ export const getTileBuffer = async ( getRasterFile( tile, requestParameters, - (err:any, img:any) => { + (err: any, img: any) => { if (err) { reject(err); } else if (img) { @@ -50,35 +49,37 @@ export const getTileBuffer = async ( }; /** * 获取图片格式的文件 jpg、png 等 - * @param url - * @param tileParams - * @param tile - * @returns + * @param url + * @param tileParams + * @param tile + * @returns */ export const getTileImage = async ( url: string | string[], tileParams: TileLoadParams, tile: SourceTile, - cfg: Partial + cfg: Partial, ): Promise => { // TODO: 后续考虑支持加载多服务 - let imageUrl:string; + let imageUrl: string; const templateUrl = Array.isArray(url) ? url[0] : url; - if(cfg.wmtsOptions) { - const _getWMTSURLFromTemplate = cfg?.getURLFromTemplate || getWMTSURLFromTemplate - imageUrl = _getWMTSURLFromTemplate(templateUrl, { - ...tileParams, - ...cfg.wmtsOptions - }) + if (cfg.wmtsOptions) { + const getWMTSURLFromTemplateNew = + cfg?.getURLFromTemplate || getWMTSURLFromTemplate; + imageUrl = getWMTSURLFromTemplateNew(templateUrl, { + ...tileParams, + ...cfg.wmtsOptions, + }); } else { - const _getURLFromTemplate = cfg?.getURLFromTemplate || getURLFromTemplate - imageUrl = _getURLFromTemplate(templateUrl, tileParams); + const getURLFromTemplateNew = cfg?.getURLFromTemplate || getURLFromTemplate; + imageUrl = getURLFromTemplateNew(templateUrl, tileParams); } return new Promise((resolve, reject) => { - const xhr = getImage({ - url: imageUrl, - type: cfg?.requestParameters?.type || 'arrayBuffer' + const xhr = getImage( + { + url: imageUrl, + type: cfg?.requestParameters?.type || 'arrayBuffer', }, (err, img) => { if (err) { @@ -87,7 +88,7 @@ export const getTileImage = async ( resolve(img); } }, - cfg.transformResponse + cfg.transformResponse, ); tile.xhrCancel = () => xhr.abort(); }); diff --git a/packages/source/src/utils/tile/request.ts b/packages/source/src/utils/tile/request.ts index bbc4f35fca..2536ba6979 100644 --- a/packages/source/src/utils/tile/request.ts +++ b/packages/source/src/utils/tile/request.ts @@ -1,16 +1,16 @@ import { - ITileBand, - getURLFromTemplate, - TileLoadParams, - SourceTile - } from '@antv/l7-utils'; + getURLFromTemplate, + ITileBand, + SourceTile, + TileLoadParams, +} from '@antv/l7-utils'; /** * 根据不同的输入，将对应的 url 路径进行转化 * https://{a-c}.xxx.ccc => https://a.xxx.ccc * https://{a-c}.xxx.ccc => https://b.xxx.ccc * https://{a-c}.xxx.ccc => https://c.xxx.ccc - * @param url + * @param url * 'https://a.xxx.ccc ' * or * ['https://a.xxx.ccc', 'https://c.ddd.ccc'] @@ -22,34 +22,34 @@ import { * }, * ... * ] - * @param tileParams - * @returns + * @param tileParams + * @returns */ export function getTileUrl( - url: string | string[] | ITileBand[], - tileParams: TileLoadParams, - ) { - if (Array.isArray(url)) { - if(typeof url[0] === 'string') { - return (url as string[]).map((src) => - getURLFromTemplate(src, tileParams), - ); - } else { - return (url as ITileBand[]).map((o) => { - return { - url: getURLFromTemplate(o.url, tileParams), - bands: o.bands || [0], - }; - }); - } + url: string | string[] | ITileBand[], + tileParams: TileLoadParams, +) { + if (Array.isArray(url)) { + if (typeof url[0] === 'string') { + return (url as string[]).map((src) => + getURLFromTemplate(src, tileParams), + ); } else { - return getURLFromTemplate(url, tileParams); + return (url as ITileBand[]).map((o) => { + return { + url: getURLFromTemplate(o.url, tileParams), + bands: o.bands || [0], + }; + }); } + } else { + return getURLFromTemplate(url, tileParams); } +} - /** +/** * 处理 url 中的波段参数，将不同的 url 格式处理成统一格式 - * @param urlBandParam + * @param urlBandParam * 'https://a.bb.xxx' * or * [ @@ -64,21 +64,25 @@ export function getTileUrl( * }, * ... * ] - * @returns + * @returns */ -export function getTileBandParams(urlBandParam: string | string[] | ITileBand[]): ITileBand[] { - if(typeof urlBandParam === 'string') { - return [{ - url: urlBandParam, - bands: [0] - }] - } else if(typeof urlBandParam[0] === 'string') { - return urlBandParam.map(param => { +export function getTileBandParams( + urlBandParam: string | string[] | ITileBand[], +): ITileBand[] { + if (typeof urlBandParam === 'string') { + return [ + { + url: urlBandParam, + bands: [0], + }, + ]; + } else if (typeof urlBandParam[0] === 'string') { + return urlBandParam.map((param) => { return { url: param as string, - bands: [0] + bands: [0], }; - }) + }); } else { return urlBandParam as ITileBand[]; } @@ -86,8 +90,8 @@ export function getTileBandParams(urlBandParam: string | string[] | ITileBand[]) /** * 设置 tile 文件请求的取消函数 - * @param tile - * @param xhrList + * @param tile + * @param xhrList */ export function bindCancel(tile: SourceTile, xhrList: any[]) { tile.xhrCancel = () => { @@ -95,4 +99,4 @@ export function bindCancel(tile: SourceTile, xhrList: any[]) { xhr.abort(); }); }; -} \ No newline at end of file +} diff --git a/packages/test-utils/src/create-context.ts b/packages/test-utils/src/create-context.ts index 954e28e58d..f4842b8813 100644 --- a/packages/test-utils/src/create-context.ts +++ b/packages/test-utils/src/create-context.ts @@ -2,13 +2,13 @@ import gl from 'gl'; // borrow from regl // @see https://github.com/regl-project/regl/blob/gh-pages/test/util/create-context.js#L28 -const CONTEXT = gl(400, 300, { preserveDrawingBuffer: true}); +const CONTEXT = gl(400, 300, { preserveDrawingBuffer: true }); // @ts-ignore const RESIZE = CONTEXT.getExtension('STACKGL_resize_drawingbuffer'); // @ts-ignore -export default function(width: number, height: number) { +export default function (width: number, height: number) { resize(width, height); return CONTEXT; } diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts index a951bd69bd..d595f6f5f8 100644 --- a/packages/test-utils/src/index.ts +++ b/packages/test-utils/src/index.ts @@ -1,2 +1,2 @@ -export * from './test-scene' -export { default as createContext } from './create-context' \ No newline at end of file +export { default as createContext } from './create-context'; +export * from './test-scene'; diff --git a/packages/test-utils/src/test-scene.ts b/packages/test-utils/src/test-scene.ts index 5f5f471c31..f4853af0c1 100644 --- a/packages/test-utils/src/test-scene.ts +++ b/packages/test-utils/src/test-scene.ts @@ -1,8 +1,8 @@ -import createContext from './create-context'; -import { Scene } from '@antv/l7-scene'; -import regl from 'l7regl'; import { IMapOptions } from '@antv/l7-map'; import { Map } from '@antv/l7-maps'; +import { Scene } from '@antv/l7-scene'; +import regl from 'l7regl'; +import createContext from './create-context'; export function TestScene(options?: Partial) { const el = document.createElement('div'); @@ -12,7 +12,7 @@ export function TestScene(options?: Partial) { const context = createContext(400, 300); const reGL = regl({ - gl:context, + gl: context, attributes: { alpha: true, // use TAA instead of MSAA diff --git a/packages/utils/__tests__/geo.spec.ts b/packages/utils/__tests__/geo.spec.ts index bd46bc29e7..c92248966d 100644 --- a/packages/utils/__tests__/geo.spec.ts +++ b/packages/utils/__tests__/geo.spec.ts @@ -1,11 +1,4 @@ -import { - aProjectFlat, - boundsContains, - IBounds, - lngLatToMeters, - padBounds, - project, -} from '../src/geo'; +import { boundsContains, IBounds, padBounds } from '../src/geo'; describe('geo', () => { it('padBounds', () => { diff --git a/packages/utils/__tests__/lineAtOffset.spec.ts b/packages/utils/__tests__/lineAtOffset.spec.ts index 234606a24a..27c7906df4 100644 --- a/packages/utils/__tests__/lineAtOffset.spec.ts +++ b/packages/utils/__tests__/lineAtOffset.spec.ts @@ -10,10 +10,10 @@ const arcSource = { [100.72265625, 27.994401411046148], ], offset: 0.3, - id: 0 - } - ] - } + id: 0, + }, + ], + }, }; describe('lineAtOffset', () => { @@ -21,103 +21,102 @@ describe('lineAtOffset', () => { const asyncOffsetPoint = await lineAtOffsetAsyc(arcSource, { shape: 'arc', offset: 0.1, - mapVersion: Version['GAODE1.x'] - }) + mapVersion: Version['GAODE1.x'], + }); it('asyncOffsetPoint', () => { - expect(asyncOffsetPoint).toEqual( [ + expect(asyncOffsetPoint).toEqual([ { - coordinates: [ - [ 99.228515625, 37.43997405227057 ], - [ 100.72265625, 27.994401411046148 ] - ], + coordinates: [ + [99.228515625, 37.43997405227057], + [100.72265625, 27.994401411046148], + ], offset: 0.3, id: 0, lng: 99.66757224332352, lat: 36.507847734146466, - height: 0 - } + height: 0, + }, ]); }); - - })() + })(); const arcOffsetPoint = lineAtOffset(arcSource, { shape: 'arc', offset: 0.1, - mapVersion: Version['GAODE1.x'] - }) + mapVersion: Version['GAODE1.x'], + }); const arcOffsetPoint2 = lineAtOffset(arcSource, { shape: 'arc', offset: 0.1, mapVersion: Version['GAODE2.x'], - thetaOffset: 0.314 - }) + thetaOffset: 0.314, + }); const arcOffsetPoint3 = lineAtOffset(arcSource, { shape: 'arc', offset: 0.1, mapVersion: Version['GAODE2.x'], thetaOffset: 0.314, - featureId: 0 - }) + featureId: 0, + }); const greatCircleOffsetPoint = lineAtOffset(arcSource, { shape: 'greatcircle', offset: 0.1, - mapVersion: Version['GAODE1.x'] - }) + mapVersion: Version['GAODE1.x'], + }); const greatCircleOffsetPoint2 = lineAtOffset(arcSource, { shape: 'greatcircle', offset: 0.1, - mapVersion: Version['GAODE2.x'] - }) + mapVersion: Version['GAODE2.x'], + }); const lineOffsetPoint = lineAtOffset(arcSource, { shape: 'line', offset: 0.1, - mapVersion: Version['GAODE1.x'] - }) + mapVersion: Version['GAODE1.x'], + }); it('arcOffsetPoint', () => { - expect(arcOffsetPoint).toEqual( [ + expect(arcOffsetPoint).toEqual([ { - coordinates: [ - [ 99.228515625, 37.43997405227057 ], - [ 100.72265625, 27.994401411046148 ] - ], + coordinates: [ + [99.228515625, 37.43997405227057], + [100.72265625, 27.994401411046148], + ], offset: 0.3, id: 0, lng: 99.66757224332352, lat: 36.507847734146466, - height: 0 - } + height: 0, + }, ]); }); it('arcOffsetPoint2', () => { - expect(arcOffsetPoint2).toEqual( [ + expect(arcOffsetPoint2).toEqual([ { - coordinates: [ - [ 99.228515625, 37.43997405227057 ], - [ 100.72265625, 27.994401411046148 ] - ], + coordinates: [ + [99.228515625, 37.43997405227057], + [100.72265625, 27.994401411046148], + ], offset: 0.3, id: 0, lng: 99.72191962749187, lat: 36.54640697914567, - height: 0 - } + height: 0, + }, ]); }); it('arcOffsetPoint3', () => { - expect(arcOffsetPoint3).toEqual( [ + expect(arcOffsetPoint3).toEqual([ { - coordinates: [ - [ 99.228515625, 37.43997405227057 ], - [ 100.72265625, 27.994401411046148 ] - ], + coordinates: [ + [99.228515625, 37.43997405227057], + [100.72265625, 27.994401411046148], + ], height: 0, id: 0, lat: 36.54640697914567, @@ -128,50 +127,50 @@ describe('lineAtOffset', () => { }); it('greatCircleOffsetPoint', () => { - expect(greatCircleOffsetPoint).toEqual( [ + expect(greatCircleOffsetPoint).toEqual([ { - coordinates: [ - [ 99.228515625, 37.43997405227057 ], - [ 100.72265625, 27.994401411046148 ] - ], + coordinates: [ + [99.228515625, 37.43997405227057], + [100.72265625, 27.994401411046148], + ], offset: 0.3, id: 0, lng: 99.39897617955312, lat: 36.46373143064039, - height: undefined - } + height: undefined, + }, ]); }); it('greatCircleOffsetPoint2', () => { - expect(greatCircleOffsetPoint2).toEqual( [ + expect(greatCircleOffsetPoint2).toEqual([ { - coordinates: [ - [ 99.228515625, 37.43997405227057 ], - [ 100.72265625, 27.994401411046148 ] - ], + coordinates: [ + [99.228515625, 37.43997405227057], + [100.72265625, 27.994401411046148], + ], offset: 0.3, id: 0, lng: 1.7395272931153063, lat: 0.6371821457776072, - height: 0 - } + height: 0, + }, ]); }); it('lineOffsetPoint', () => { - expect(lineOffsetPoint).toEqual( [ + expect(lineOffsetPoint).toEqual([ { - coordinates: [ - [ 99.228515625, 37.43997405227057 ], - [ 100.72265625, 27.994401411046148 ] - ], + coordinates: [ + [99.228515625, 37.43997405227057], + [100.72265625, 27.994401411046148], + ], offset: 0.3, id: 0, lng: 99.3779296875, lat: 36.495416788148134, - height: 0 - } + height: 0, + }, ]); }); }); diff --git a/packages/utils/src/ajax.ts b/packages/utils/src/ajax.ts index bbe3702894..7567a3cbf5 100644 --- a/packages/utils/src/ajax.ts +++ b/packages/utils/src/ajax.ts @@ -60,7 +60,9 @@ function makeXMLHttpRequest( ) { const xhr = new $XMLHttpRequest(); - const url = Array.isArray(requestParameters.url) ? requestParameters.url[0] : requestParameters.url; + const url = Array.isArray(requestParameters.url) + ? requestParameters.url[0] + : requestParameters.url; xhr.open(requestParameters.method || 'GET', url, true); if (requestParameters.type === 'arrayBuffer') { xhr.responseType = 'arraybuffer'; @@ -104,9 +106,7 @@ function makeXMLHttpRequest( const body = new Blob([xhr.response], { type: xhr.getResponseHeader('Content-Type'), }); - callback( - new AJAXError(xhr.status, xhr.statusText, url.toString(), body) - ); + callback(new AJAXError(xhr.status, xhr.statusText, url.toString(), body)); } }; xhr.send(requestParameters.body); @@ -125,24 +125,27 @@ export function makeXMLHttpRequestPromise( requestParameters: RequestParameters, ): Promise { return new Promise((resolve, reject) => { - makeXMLHttpRequest(requestParameters, (error, data, cacheControl, expires, xhr) => { - if(error) { - reject({ - err: error, - data: null, - xhr - }); - } else { - resolve({ - err: null, - data , - cacheControl, - expires, - xhr, - }); - } - }) - }) + makeXMLHttpRequest( + requestParameters, + (error, data, cacheControl, expires, xhr) => { + if (error) { + reject({ + err: error, + data: null, + xhr, + }); + } else { + resolve({ + err: null, + data, + cacheControl, + expires, + xhr, + }); + } + }, + ); + }); } function makeRequest( @@ -237,7 +240,7 @@ function arrayBufferToImageBitmap( export const getImage = ( requestParameters: RequestParameters, callback: ResponseCallback, - transformResponse?: (response: Object) => any + transformResponse?: (response: object) => any, ) => { // request the image with XHR to work around caching issues // see https://github.com/mapbox/mapbox-gl-js/issues/1470 @@ -249,11 +252,13 @@ export const getImage = ( callback(err); } else if (imgData) { const imageBitmapSupported = typeof createImageBitmap === 'function'; - const _imgData = transformResponse? transformResponse(imgData) : imgData; + const transformImgData = transformResponse + ? transformResponse(imgData) + : imgData; if (imageBitmapSupported) { - arrayBufferToImageBitmap(_imgData, callback); + arrayBufferToImageBitmap(transformImgData, callback); } else { - arrayBufferToImage(_imgData, callback); + arrayBufferToImage(transformImgData, callback); } } }; diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts index f3262a9e41..7cc2a633cd 100644 --- a/packages/utils/src/color.ts +++ b/packages/utils/src/color.ts @@ -232,7 +232,6 @@ export function getDefaultDomain(rampColors: IColorRamp) { case 'cat': return [0, 255]; default: - [0, 1]; + return [0, 1]; } } - diff --git a/packages/utils/src/geo.ts b/packages/utils/src/geo.ts index 395aad506b..1d0699d71c 100644 --- a/packages/utils/src/geo.ts +++ b/packages/utils/src/geo.ts @@ -1,3 +1,4 @@ +import bbox from '@turf/bbox'; import { BBox, degreesToRadians, @@ -7,7 +8,6 @@ import { Units, } from '@turf/helpers'; import { isNumber } from './math'; -import bbox from '@turf/bbox'; export type IBounds = [[number, number], [number, number]]; @@ -19,9 +19,14 @@ interface ILngLat { const originShift = (2 * Math.PI * 6378137) / 2.0; type Point = number[]; -export function lngLatInExtent(lngLat: ILngLat, extent: number[]) { - const [minLng, minLat, maxLng, maxLat] = extent; - return lngLat.lng > minLng && lngLat.lng <= maxLng && lngLat.lat > minLat && lngLat.lat <= maxLat +export function lngLatInExtent(lngLat: ILngLat, bounds: number[]) { + const [minLng, minLat, maxLng, maxLat] = bounds; + return ( + lngLat.lng > minLng && + lngLat.lng <= maxLng && + lngLat.lat > minLat && + lngLat.lat <= maxLat + ); } /** * 计算地理数据范围 diff --git a/packages/utils/src/hash.ts b/packages/utils/src/hash.ts index c711de758e..ffedd696b1 100644 --- a/packages/utils/src/hash.ts +++ b/packages/utils/src/hash.ts @@ -23,9 +23,10 @@ export function djb2hash(str: string) { return hash >>> 0; } -export function guid() { - return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - const r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); - return v.toString(16); - }); -} +export function guid() { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { + const r = (Math.random() * 16) | 0; + const v = c === 'x' ? r : (r & 0x3) | 0x8; + return v.toString(16); + }); +} diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index c074c74027..44c76ad61e 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,26 +1,18 @@ // @ts-ignore -export { djb2hash, BKDRHash, guid } from './hash'; - -import * as DOM from './dom'; -import * as Satistics from './statistics'; - -export { DOM, Satistics }; - -export * from './mini-adapter/index'; export * from './ajax'; export * from './anchor'; export * from './color'; export * from './cull'; - +export * as DOM from './dom'; export * from './env'; export * from './event'; export * from './geo'; +export { BKDRHash, djb2hash, guid } from './hash'; export * from './lineAtOffset'; export * from './lru_cache'; export * from './mini-adapter/index'; - +export * as Satistics from './statistics'; export * from './stencli'; export * from './tileset-manager'; export * from './worker-helper'; export * from './workers/triangulation'; - diff --git a/packages/utils/src/mini-adapter/EventIniter/index.ts b/packages/utils/src/mini-adapter/EventIniter/index.ts index f4ad67c2ef..ac95275a09 100755 --- a/packages/utils/src/mini-adapter/EventIniter/index.ts +++ b/packages/utils/src/mini-adapter/EventIniter/index.ts @@ -1,3 +1,3 @@ -export * from './TouchEvent'; -export * from './PointerEvent'; export * from './MouseEvent'; +export * from './PointerEvent'; +export * from './TouchEvent'; diff --git a/packages/utils/src/mini-adapter/util/mixin.ts b/packages/utils/src/mini-adapter/util/mixin.ts index adf3425af8..24fa5bf5b8 100644 --- a/packages/utils/src/mini-adapter/util/mixin.ts +++ b/packages/utils/src/mini-adapter/util/mixin.ts @@ -82,7 +82,7 @@ export function clientRegion(obj: any) { } if (!('getBoundingClientRect' in obj)) { - obj.getBoundingClientRect = function() { + obj.getBoundingClientRect = function () { const ret = { x: 0, y: 0,