Chore lint update (#1600)

* chore: update lint config

* fix: 移除空行

* fix: util export

* chore: 优化lint 配置
This commit is contained in:
@thinkinggis 2023-02-14 18:01:02 +08:00 committed by GitHub
parent 13b9e3249d
commit 4db42a1814
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
160 changed files with 2118 additions and 2235 deletions

View File

@ -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:*",

View File

@ -7,7 +7,9 @@ class TestControl extends Control {
public onAdd(): HTMLElement {
return DOM.create('div');
}
public onRemove(): void {}
public onRemove(): void {
return;
}
}
describe('control', () => {

View File

@ -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(

View File

@ -8,7 +8,7 @@ describe('popup', () => {
it('life cycle', () => {
const popup = new Popup({
html: '123456',
className: className,
className,
lngLat: {
lng: 120,
lat: 30,

View File

@ -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 {

View File

@ -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"
},

View File

@ -11,7 +11,7 @@ export interface IButtonControlOption extends IControlOption {
}
export default class ButtonControl<
O extends IButtonControlOption = IButtonControlOption
O extends IButtonControlOption = IButtonControlOption,
> extends Control<O> {
/**
*

View File

@ -16,7 +16,6 @@ import { Container } from 'inversify';
import { ControlEvent } from '../../interface';
export { PositionType } from '@antv/l7-core';
export { Control };
export interface IControlOption {

View File

@ -1,4 +1,4 @@
export * from './control';
export * from './buttonControl';
export * from './control';
export * from './popperControl';
export * from './selectControl';

View File

@ -26,7 +26,7 @@ const PopperPlacementMap: Record<PositionName, PopperPlacement> = {
};
export default class PopperControl<
O extends IPopperControlOption = IPopperControlOption
O extends IPopperControlOption = IPopperControlOption,
> extends ButtonControl<O> {
/**
*
@ -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()!;

View File

@ -31,7 +31,7 @@ enum SelectControlConstant {
}
export default class SelectControl<
O extends ISelectControlOption = ISelectControlOption
O extends ISelectControlOption = ISelectControlOption,
> extends PopperControl<O> {
/**
*

View File

@ -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 };

View File

@ -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();

View File

@ -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<IMarkerOption>) {
@ -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

View File

@ -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';

View File

@ -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<interfaces.Factory<IPass<unknown>>>(TYPES.IFactoryNormalPass)
.toFactory<IPass<unknown>>((context) => (named: string) =>
context.container.getNamed<IPass<unknown>>(TYPES.INormalPass, named),
.toFactory<IPass<unknown>>(
(context) => (named: string) =>
context.container.getNamed<IPass<unknown>>(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<IStyleAttributeService>(TYPES.IStyleAttributeService)
.to(StyleAttributeService)

View File

@ -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

View File

@ -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;

View File

@ -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;
}
setColorTexture(
texture: ITexture2D,
colorRamp: IColorRamp,
domain?: [number, number],
): void;
getColorTexture(colorRamp: IColorRamp, domain?: [number, number]): ITexture2D;
destroy(): void;
}

View File

@ -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() {

View File

@ -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<ILayerConfig & ISceneConfig>;
} = {};
/**
*
*/
private layerAttributeConfigCache: {
[layerId: string]: Partial<ILayerAttributesOption>
[layerId: string]: Partial<ILayerAttributesOption>;
} = {};
/**
@ -175,19 +174,21 @@ export default class GlobalConfigService implements IGlobalConfigService {
...merge({}, this.sceneConfigCache[sceneId], defaultLayerConfig, config),
};
}
public getAttributeConfig(layerId: string,): Partial<ILayerAttributesOption> {
return this.layerAttributeConfigCache[layerId]
}
public getAttributeConfig(layerId: string): Partial<ILayerAttributesOption> {
return this.layerAttributeConfigCache[layerId];
}
public setAttributeConfig(layerId: string, attr: Partial<ILayerAttributesOption>) {
public setAttributeConfig(
layerId: string,
attr: Partial<ILayerAttributesOption>,
) {
// TODO
this.layerAttributeConfigCache[layerId] = {
...this.layerAttributeConfigCache[layerId],
...attr
}
}
this.layerAttributeConfigCache[layerId] = {
...this.layerAttributeConfigCache[layerId],
...attr,
};
}
public clean() {
this.sceneConfigCache = {};

View File

@ -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<ILayerConfig>,
): void;
/**
/**
*
*/
getAttributeConfig(layerId: string,): Partial<ILayerAttributesOption>
/**
*
* @param layerId sh
* @param attr
*/
setAttributeConfig(layerId: string, attr: Partial<ILayerAttributesOption>):void
getAttributeConfig(layerId: string): Partial<ILayerAttributesOption>;
/**
*
* @param layerId sh
* @param attr
*/
setAttributeConfig(
layerId: string,
attr: Partial<ILayerAttributesOption>,
): void;
/**
* Cache
*/

View File

@ -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;

View File

@ -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);
}
}

View File

@ -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
}
getFeatureById(id: number, lngLat?: ILngLat): any;
}

View File

@ -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;

View File

@ -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;

View File

@ -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<IModel[]>;
initModels(): Promise<IModel[]>;
needUpdate():Promise<boolean>
needUpdate(): Promise<boolean>;
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<void>;
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<unknown>;
postProcessingPassFactory: (name: string) => IPostProcessingPass<unknown>;
normalPassFactory: (name: string) => IPass<unknown>;
getShaderPickStat: () => boolean;
updateModelData(data: IAttributeAndElements): void;
@ -379,7 +387,7 @@ export interface ILayer {
needPick(type: string): boolean;
getAttribute(name: string): IStyleAttribute | undefined;
getLayerConfig<T>(): Partial<ILayerConfig & ISceneConfig & T>;
getLayerAttributeConfig():Partial<ILayerAttributesOption>
getLayerAttributeConfig(): Partial<ILayerAttributesOption>;
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<IModelInitializationOptions>,
@ -407,7 +415,7 @@ export interface ILayer {
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
): boolean;
setLayerPickService(layerPickService:ILayerPickService):void;
setLayerPickService(layerPickService: ILayerPickService): void;
init(): Promise<void>;
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<void>;
removeAllLayers():Promise<void>;
remove(layer: ILayer, parentLayer?: ILayer): Promise<void>;
removeAllLayers(): Promise<void>;
updateLayerRenderList(): void;
reRender(): void;
beforeRenderData(layer: ILayer): Promise<void>;
renderMask(masks:ILayer[]): void;
renderLayer(layer: ILayer): Promise<void>
needPick(type:string):boolean;
renderMask(masks: ILayer[]): void;
renderLayer(layer: ILayer): Promise<void>;
needPick(type: string): boolean;
throttleRenderLayers(): void;
renderLayers(): void;
setEnableRender(flag: boolean): void;

View File

@ -194,7 +194,7 @@ export interface IStyleAttributeService {
registerStyleAttribute(
options: Partial<IStyleAttributeInitializationOptions>,
): IStyleAttribute;
updateScaleAttribute(scale: IScaleOptions):void;
updateScaleAttribute(scale: IScaleOptions): void;
updateStyleAttribute(
attributeName: string,
attributeOptions: Partial<IStyleAttributeInitializationOptions>,
@ -227,7 +227,7 @@ export interface IStyleAttributeService {
features: IEncodeFeature[],
startFeatureIdx?: number,
endFeatureIdx?: number,
layer?: ILayer
layer?: ILayer,
): void;
/**
*

View File

@ -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(

View File

@ -48,7 +48,7 @@ export interface IExtensions {
export interface IRendererService {
extensionObject: IExtensions;
init(canvas: HTMLCanvasElement, cfg: IRenderConfig,gl: any): Promise<void>;
init(canvas: HTMLCanvasElement, cfg: IRenderConfig, gl: any): Promise<void>;
testExtension(name: string): boolean;
clear(options: IClearOptions): void;
createModel(options: IModelInitializationOptions): IModel;

View File

@ -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;

View File

@ -14,7 +14,8 @@ import { IRendererService } from '../IRendererService';
*/
@injectable()
export default class BaseNormalPass<InitializationOptions = {}>
implements IPass<InitializationOptions> {
implements IPass<InitializationOptions>
{
// @inject(TYPES.IShaderModuleService)
protected shaderModuleService: IShaderModuleService;

View File

@ -20,7 +20,8 @@ import { IUniform } from '../IUniform';
*/
@injectable()
export default class BasePostProcessingPass<InitializationOptions = {}>
implements IPostProcessingPass<InitializationOptions> {
implements IPostProcessingPass<InitializationOptions>
{
@inject(TYPES.IShaderModuleService)
protected shaderModuleService: IShaderModuleService;
@ -166,9 +167,7 @@ export default class BasePostProcessingPass<InitializationOptions = {}>
throw new Error('Method not implemented.');
}
protected convertOptionsToUniforms(
options: Partial<InitializationOptions>,
): {
protected convertOptionsToUniforms(options: Partial<InitializationOptions>): {
[uniformName: string]: IUniform;
} | void {
const uniforms: {

View File

@ -8,7 +8,7 @@ import BaseNormalPass from './BaseNormalPass';
*/
@injectable()
export default class ClearPass<
InitializationOptions = {}
InitializationOptions = {},
> extends BaseNormalPass<InitializationOptions> {
public getName() {
return 'clear';

View File

@ -18,7 +18,7 @@ import BaseNormalPass from './BaseNormalPass';
*/
@injectable()
export default class PixelPickingPass<
InitializationOptions = {}
InitializationOptions = {},
> extends BaseNormalPass<InitializationOptions> {
/**
* picking framebuffer attributes
@ -50,11 +50,8 @@ export default class PixelPickingPass<
public init(layer: ILayer, config?: Partial<InitializationOptions>) {
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();

View File

@ -9,7 +9,7 @@ import BaseNormalPass from './BaseNormalPass';
*/
@injectable()
export default class RenderPass<
InitializationOptions = {}
InitializationOptions = {},
> extends BaseNormalPass<InitializationOptions> {
public getType() {
return PassType.Normal;

View File

@ -37,9 +37,9 @@ let accumulatingId = 1;
* @see https://yuque.antfin-inc.com/yuqi.pyq/fgetpa/ri52hv
*/
@injectable()
export default class TAAPass<InitializationOptions = {}> extends BaseNormalPass<
InitializationOptions
> {
export default class TAAPass<
InitializationOptions = {},
> extends BaseNormalPass<InitializationOptions> {
@inject(TYPES.IShaderModuleService)
protected readonly shaderModuleService: IShaderModuleService;
@ -305,9 +305,8 @@ export default class TAAPass<InitializationOptions = {}> 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,

View File

@ -13,18 +13,15 @@ export interface IBloomPassConfig {
}
@injectable()
export default class BloomPass extends BasePostProcessingPass<
IBloomPassConfig
> {
export default class BloomPass extends BasePostProcessingPass<IBloomPassConfig> {
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<IBloomPassConfig>,
): {
protected convertOptionsToUniforms(options: Partial<IBloomPassConfig>): {
[uniformName: string]: IUniform;
} | void {
const uniforms: {

View File

@ -11,18 +11,15 @@ export interface IBlurHPassConfig {
}
@injectable()
export default class BlurHPass extends BasePostProcessingPass<
IBlurHPassConfig
> {
export default class BlurHPass extends BasePostProcessingPass<IBlurHPassConfig> {
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<IBlurHPassConfig>,
): {
protected convertOptionsToUniforms(options: Partial<IBlurHPassConfig>): {
[uniformName: string]: IUniform;
} | void {
const uniforms: {

View File

@ -10,18 +10,15 @@ export interface IBlurVPassConfig {
}
@injectable()
export default class BlurVPass extends BasePostProcessingPass<
IBlurVPassConfig
> {
export default class BlurVPass extends BasePostProcessingPass<IBlurVPassConfig> {
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<IBlurVPassConfig>,
): {
protected convertOptionsToUniforms(options: Partial<IBlurVPassConfig>): {
[uniformName: string]: IUniform;
} | void {
const uniforms: {

View File

@ -11,18 +11,15 @@ export interface IColorHalftonePassConfig {
}
@injectable()
export default class ColorHalftonePass extends BasePostProcessingPass<
IColorHalftonePassConfig
> {
export default class ColorHalftonePass extends BasePostProcessingPass<IColorHalftonePassConfig> {
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 {

View File

@ -10,9 +10,7 @@ export interface IHexagonalPixelatePassConfig {
}
@injectable()
export default class HexagonalPixelatePass extends BasePostProcessingPass<
IHexagonalPixelatePassConfig
> {
export default class HexagonalPixelatePass extends BasePostProcessingPass<IHexagonalPixelatePassConfig> {
protected setupShaders() {
this.shaderModuleService.registerModule('hexagonalpixelate-pass', {
vs: quad,

View File

@ -9,9 +9,7 @@ export interface INoisePassConfig {
}
@injectable()
export default class NoisePass extends BasePostProcessingPass<
INoisePassConfig
> {
export default class NoisePass extends BasePostProcessingPass<INoisePassConfig> {
public setupShaders() {
this.shaderModuleService.registerModule('noise-pass', {
vs: quad,

View File

@ -9,9 +9,7 @@ export interface ISepiaPassConfig {
}
@injectable()
export default class SepiaPass extends BasePostProcessingPass<
ISepiaPassConfig
> {
export default class SepiaPass extends BasePostProcessingPass<ISepiaPassConfig> {
public setupShaders() {
this.shaderModuleService.registerModule('sepia-pass', {
vs: quad,

View File

@ -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<string> ;
exportPng(type?: 'png' | 'jpg'): Promise<string>;
addFontFace(fontname: string, fontpath: string): void;
destroy(): void;
}

View File

@ -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<void>((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');
}

View File

@ -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<RequestParameters>;
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 {

View File

@ -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 };

View File

@ -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": {

View File

@ -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<IModel[]> {
return await this.initModels();
public async buildModels(): Promise<IModel[]> {
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;

View File

@ -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<IModel[]> {
return await this.initModels();
public async buildModels(): Promise<IModel[]> {
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,

View File

@ -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<IModel[]> {
return await this.initModels();
public async buildModels(): Promise<IModel[]> {
return this.initModels();
}
public updateTexture(mapTexture: string | undefined): void {

View File

@ -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({

View File

@ -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<IModel[]> {
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<IModel[]> {
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];
},

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public clearModels() {
return '';
}
public async buildModels():Promise<IModel[]> {
public async buildModels(): Promise<IModel[]> {
// 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];
},

View File

@ -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<IModel[]> {
public async buildModels(): Promise<IModel[]> {
// 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];
},

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public clearModels() {
return '';
}
public async buildModels():Promise<IModel[]> {
public async buildModels(): Promise<IModel[]> {
// 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];
},

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
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<IModel[]> {
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];
},
},

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
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<IModel[]> {
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];
},
},

View File

@ -60,15 +60,11 @@ export default class HeatMapModel extends BaseModel {
throw new Error('Method not implemented.');
}
public async initModels(): Promise<IModel[]> {
const {
createFramebuffer,
getViewportSize,
createTexture2D,
} = this.rendererService;
const shapeAttr = this.styleAttributeService.getLayerStyleAttribute(
'shape',
);
public async initModels(): Promise<IModel[]> {
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<IModel[]> {
return await this.initModels();
public async buildModels(): Promise<IModel[]> {
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),

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
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<IModel[]> {
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];
},
},

View File

@ -24,10 +24,8 @@ export default class ImageModel extends BaseModel {
}
public async initModels(): Promise<IModel[]> {
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<IModel[]> {
return await this.initModels();
return this.initModels();
}
protected registerBuiltinAttributes() {

View File

@ -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';

View File

@ -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<IModel[]> {
public async buildModels(): Promise<IModel[]> {
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 };

View File

@ -124,11 +124,10 @@ export default class Arc3DModel extends BaseModel {
}
public async initModels(): Promise<IModel[]> {
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<IModel[]> {
public async buildModels(): Promise<IModel[]> {
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 };

View File

@ -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<IModel[]> {
public async buildModels(): Promise<IModel[]> {
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 };

View File

@ -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<IModel[]> {
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<IModel[]> {
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)

View File

@ -85,14 +85,14 @@ export default class LineModel extends BaseModel {
}
public async initModels(): Promise<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public clearModels() {
this.dataTexture?.destroy();
}
public async buildModels(): Promise<IModel[]> {
public async buildModels(): Promise<IModel[]> {
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];
},

View File

@ -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();
}
// 转化渐变色

View File

@ -78,7 +78,7 @@ export default class LinearLineModel extends BaseModel {
public async initModels(): Promise<IModel[]> {
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<IModel[]> {
public async buildModels(): Promise<IModel[]> {
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),

View File

@ -79,7 +79,7 @@ export default class SimpleLineModel extends BaseModel {
}
public async initModels(): Promise<IModel[]> {
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<IModel[]> {
const {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
public async buildModels(): Promise<IModel[]> {
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];
},

View File

@ -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<IModel[]> {
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<IModel[]> {
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 };

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public async buildModels(): Promise<IModel[]> {
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<IModel[]> {
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() {

View File

@ -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);
});
});
});

View File

@ -129,31 +129,30 @@ export default class ExtrudeModel extends BaseModel {
u_lightEnable: Number(lightEnable),
};
}
public async initModels():Promise<IModel[]> {
return await this.buildModels();
public async initModels(): Promise<IModel[]> {
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
public async buildModels(): Promise<IModel[]> {
// 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[] = [];

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public async buildModels(): Promise<IModel[]> {

View File

@ -127,11 +127,11 @@ export default class ExtrudeModel extends BaseModel {
u_lightEnable: Number(lightEnable),
};
}
public async initModels():Promise<IModel[]> {
return await this.buildModels();
public async initModels(): Promise<IModel[]> {
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
public async buildModels(): Promise<IModel[]> {
// 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[] = [];

View File

@ -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<IModel[]> {
return await this.buildModels();
public async initModels(): Promise<IModel[]> {
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
const {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
public async buildModels(): Promise<IModel[]> {
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];
},

View File

@ -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<IModel[]> {
return await this.buildModels();
public async initModels(): Promise<IModel[]> {
return this.buildModels();
}
public async buildModels(): Promise<IModel[]> {
const { mask = false, maskInside = true } =
this.layer.getLayerConfig() as IPointLayerStyleOptions;
public async buildModels():Promise<IModel[]> {
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];
},
},
});

View File

@ -92,29 +92,26 @@ export default class SimplePointModel extends BaseModel {
};
}
public async initModels():Promise<IModel[]> {
return await this.buildModels();
public async initModels(): Promise<IModel[]> {
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
const {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
public async buildModels(): Promise<IModel[]> {
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];
},

View File

@ -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<IModel[]> {
this.loadTexture();
return await this.buildModels();
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
const {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
public async buildModels(): Promise<IModel[]> {
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({

View File

@ -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<IModel[]> {
return await this.buildModels();
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
public async buildModels(): Promise<IModel[]> {
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() {

View File

@ -19,7 +19,7 @@ export type PolygonModelType =
| 'point_extrude'
| 'text'
| 'water'
| 'ocean'
| 'ocean';
const PolygonModels: { [key in PolygonModelType]: any } = {
fill: FillModel,
line: LineModel,

View File

@ -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<IModel[]> {
this.loadTexture();
return await this.buildModels();
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
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<IModel[]> {
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];
},

View File

@ -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<IModel[]> {
this.loadTexture();
return await this.buildModels();
return this.buildModels();
}
public async buildModels():Promise<IModel[]> {
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<IModel[]> {
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({

View File

@ -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);

View File

@ -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;

View File

@ -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<IModel[]> {
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<IModel[]> {
return await this.initModels();
public async buildModels(): Promise<IModel[]> {
return this.initModels();
}
public clearModels(): void {
@ -121,5 +121,4 @@ export default class RasterModel extends BaseModel {
},
});
}
}

View File

@ -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<IModel[]> {
const {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
public async initModels(): Promise<IModel[]> {
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<IModel[]> {
return await this.initModels();
public async buildModels(): Promise<IModel[]> {
return this.initModels();
}
public clearModels(): void {

View File

@ -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<IModel[]> {
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<IModel[]> {
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!,
};
}
public async initModels(): Promise<IModel[]> {
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<IModel[]> {
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]];
},
},
});
}
}

View File

@ -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();
}
}
}

View File

@ -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);
});
}
const id = decodePickingColor(color);
layers.map((layer) => {
layer.hooks.beforeHighlight.call(color);
layer.setCurrentPickId(id);
});
}

View File

@ -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<string, ILayer[]> = 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 ===

View File

@ -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();
}
}

View File

@ -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));
});

View File

@ -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 {

View File

@ -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',
];

View File

@ -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,
});
}
});
}

View File

@ -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<void> {
@ -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',

Some files were not shown because too many files have changed in this diff Show More