p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(scene): contianer resize

This commit is contained in:
thinkinggis 2019-12-07 01:43:18 +08:00
parent 909466002d
commit 88bbc1fc65
38 changed files with 433 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/addons.ts
View File

@ -1,3 +1,3 @@
import '@storybook/addon-actions/register';
// import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-storysource/register';

4
.storybook/config.ts
View File

@ -1,6 +1,6 @@
// tslint:disable-next-line:no-submodule-imports
import '!style-loader!css-loader!sass-loader!./iframe.scss';
import '@storybook/addon-console';
// import '@storybook/addon-console';
import { addParameters, configure } from '@storybook/react';
import { create } from '@storybook/theming';
@ -15,7 +15,7 @@ addParameters({
enableShortcuts: true,
theme: create({
base: 'light',
brandTitle: 'L7 POC for new architecture',
brandTitle: 'L7 for new architecture',
brandUrl: 'https://github.com/xiaoiver/L7-POC',
gridCellSize: 12,
}),

8
.storybook/webpack.config.js
View File

@ -1,9 +1,9 @@
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.glsl$/,
loader: 'raw-loader'
});
// config.module.rules.push({
// test: /\.glsl$/,
// loader: 'raw-loader'
// });
// config.module.rules.push({
// test: /\.worker\.(js|ts)$/,

5
docs/tutorial/map/blankmap.en.md
View File

@ -24,4 +24,7 @@ const scene = new Scene({
```
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
离线，无token使用 ![mapbox demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)
离线，无token使用
<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

4
docs/tutorial/map/blankmap.zh.md
View File

@ -24,4 +24,6 @@ const scene = new Scene({
```
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
离线，无token使用 ![mapbox demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)
离线，无token使用
<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

1
packages/core/package.json
View File

@ -25,6 +25,7 @@
"@antv/l7-utils": "^2.0.0-beta.16",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",
"eventemitter3": "^4.0.0",
"gl-matrix": "^3.1.0",
"hammerjs": "^2.0.8",

2
packages/core/src/services/config/ConfigService.ts
View File

@ -48,7 +48,7 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
maxZoom: 20,
visible: true,
zIndex: 0,
enableMultiPassRenderer: true,
enableMultiPassRenderer: false,
enablePicking: false,
enableHighlight: false,
highlightColor: 'red',

9
packages/core/src/services/layer/ILayerService.ts
View File

@ -1,5 +1,5 @@
import { Container } from 'inversify';
import { SyncBailHook, SyncHook } from 'tapable';
import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
import Clock from '../../utils/clock';
import { ISceneConfig } from '../config/IConfigService';
import { IMapService } from '../map/IMapService';
@ -51,8 +51,11 @@ export interface ILayer {
inited: boolean; // 是否初始化完成
zIndex: number;
plugins: ILayerPlugin[];
layerModelNeedUpdate: boolean;
dataPluginsState: { [key: string]: boolean };
hooks: {
init: SyncBailHook<void, boolean | void>;
beforeRenderData: SyncWaterfallHook<boolean | void>;
beforeRender: SyncBailHook<void, boolean | void>;
afterRender: SyncHook<void>;
beforePickingEncode: SyncHook<void>;
@ -76,13 +79,14 @@ export interface ILayer {
Partial<IModelInitializationOptions>,
): IModel;
init(): ILayer;
scale(field: string | IScaleOptions, cfg: IScale): ILayer;
size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
animate(option: IAnimateOption): ILayer;
// pattern(field: string, value: StyleAttributeOption): ILayer;
// filter(field: string, value: StyleAttributeOption): ILayer;
filter(field: string, value: StyleAttributeOption): ILayer;
// active(option: ActiveOption): ILayer;
style(options: unknown): ILayer;
hide(): ILayer;
@ -102,6 +106,7 @@ export interface ILayer {
*/
addPlugin(plugin: ILayerPlugin): ILayer;
getSource(): ISource;
isSourceNeedUpdate(): boolean;
setSource(source: ISource): void;
setEncodedData(encodedData: IEncodeFeature[]): void;
getEncodedData(): IEncodeFeature[];

24
packages/core/src/services/layer/IStyleAttributeService.ts
View File

@ -25,9 +25,18 @@ export enum ScaleTypes {
THRESHOLD = 'threshold',
CAT = 'cat',
}
export type ScaleTypeName =
| 'linear'
| 'power'
| 'log'
| 'identity'
| 'time'
| 'quantile'
| 'quantize'
| 'threshold'
| 'cat';
export interface IScale {
type: ScaleTypes;
type: ScaleTypeName;
ticks?: any[];
nice?: boolean;
format?: () => any;
@ -40,7 +49,7 @@ export enum StyleScaleType {
}
export interface IScaleOption {
field?: string;
type: ScaleTypes;
type: ScaleTypeName;
ticks?: any[];
nice?: boolean;
format?: () => any;
@ -137,6 +146,7 @@ export interface IStyleAttribute extends IStyleAttributeInitializationOptions {
vertexAttribute: IAttribute;
mapping?(...params: unknown[]): unknown[];
setProps(props: Partial<IStyleAttributeInitializationOptions>): void;
resetDescriptor(): void;
}
export type Triangulation = (
@ -157,6 +167,12 @@ export interface IStyleAttributeService {
// layerName: string,
// options: ILayerStyleOptions,
// ): void;
attributesAndIndices: {
attributes: {
[attributeName: string]: IAttribute;
};
elements: IElements;
};
registerStyleAttribute(
options: Partial<IStyleAttributeInitializationOptions>,
): IStyleAttribute;
@ -169,7 +185,7 @@ export interface IStyleAttributeService {
getLayerStyleAttribute(attributeName: string): IStyleAttribute | undefined;
createAttributesAndIndices(
encodedFeatures: IEncodeFeature[],
triangulation: Triangulation,
triangulation?: Triangulation,
): {
attributes: {
[attributeName: string]: IAttribute;

1
packages/core/src/services/layer/LayerService.ts
View File

@ -59,6 +59,7 @@ export default class LayerService implements ILayerService {
.filter((layer) => layer.isVisible())
.forEach((layer) => {
// trigger hooks
layer.hooks.beforeRenderData.call(true);
layer.hooks.beforeRender.call();
layer.render();
layer.hooks.afterRender.call();

6
packages/core/src/services/layer/StyleAttribute.ts
View File

@ -68,6 +68,12 @@ export default class StyleAttribute implements IStyleAttribute {
return this.defaultCallback(params);
}
public resetDescriptor() {
if (this.descriptor) {
this.descriptor.buffer.data = [];
}
}
private defaultCallback = (params: unknown[]): unknown[] => {
// 没有 params 的情况，是指没有指定 fields，直接返回配置的 values 常量
if (params.length === 0) {

27
packages/core/src/services/layer/StyleAttributeService.ts
View File

@ -30,11 +30,19 @@ let counter = 0;
*/
@injectable()
export default class StyleAttributeService implements IStyleAttributeService {
public attributesAndIndices: {
attributes: {
[attributeName: string]: IAttribute;
};
elements: IElements;
};
@inject(TYPES.IRendererService)
private readonly rendererService: IRendererService;
private attributes: IStyleAttribute[] = [];
private triangulation: Triangulation;
private c = counter++;
private featureLayout: {
@ -49,7 +57,6 @@ export default class StyleAttributeService implements IStyleAttributeService {
sizePerElement: 0,
elements: [],
};
public registerStyleAttribute(
options: Partial<IStyleAttributeInitializationOptions>,
) {
@ -170,14 +177,20 @@ export default class StyleAttributeService implements IStyleAttributeService {
public createAttributesAndIndices(
features: IEncodeFeature[],
triangulation: Triangulation,
triangulation?: Triangulation,
): {
attributes: {
[attributeName: string]: IAttribute;
};
elements: IElements;
} {
const descriptors = this.attributes.map((attr) => attr.descriptor);
if (triangulation) {
this.triangulation = triangulation;
}
const descriptors = this.attributes.map((attr) => {
attr.resetDescriptor();
return attr.descriptor;
});
let verticesNum = 0;
const vertices: number[] = [];
const indices: number[] = [];
@ -191,7 +204,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
vertices: verticesForCurrentFeature,
normals: normalsForCurrentFeature,
size: vertexSize,
} = triangulation(feature);
} = this.triangulation(feature);
indices.push(...indicesForCurrentFeature.map((i) => i + verticesNum));
vertices.push(...verticesForCurrentFeature);
if (normalsForCurrentFeature) {
@ -211,7 +224,6 @@ export default class StyleAttributeService implements IStyleAttributeService {
});
verticesNum += verticesNumForCurrentFeature;
// 根据 position 顶点生成其他顶点数据
for (
let vertexIdx = 0;
@ -273,13 +285,12 @@ export default class StyleAttributeService implements IStyleAttributeService {
type: gl.UNSIGNED_INT,
count: indices.length,
});
return {
this.attributesAndIndices = {
attributes,
elements,
};
return this.attributesAndIndices;
}
public clearAllAttributes() {
// 销毁关联的 vertex attribute buffer objects
this.attributes.forEach((attribute) => {

4
packages/core/src/services/log/LogService.ts
View File

@ -2,8 +2,8 @@ import { injectable } from 'inversify';
import { Log } from 'probe.gl';
import { ILogService } from './ILogService';
const Logger = new Log({ id: 'L7' }).enable();
// 只输出 debug 级别以上的日志信息
const Logger = new Log({ id: 'L7' }).enable(true);
// // 只输出 debug 级别以上的日志信息
Logger.priority = 4;
@injectable()

1
packages/core/src/services/renderer/IElements.ts
View File

@ -34,7 +34,6 @@ export interface IElements {
// 原 Buffer 替换位置，单位为 byte
offset: number;
}): void;
/**
* gl.deleteBuffer
*/

1
packages/core/src/services/renderer/IModel.ts
View File

@ -220,6 +220,7 @@ export interface IModelDrawOptions {
attributes?: {
[key: string]: IAttribute;
};
elements?: IElements;
}
/**

13
packages/core/src/services/scene/SceneService.ts
View File

@ -1,3 +1,6 @@
// @ts-ignore
import { DOM } from '@antv/l7-utils';
import elementResizeEvent, { unbind } from 'element-resize-event';
import { EventEmitter } from 'eventemitter3';
import { inject, injectable } from 'inversify';
import { AsyncParallelHook } from 'tapable';
@ -149,7 +152,8 @@ export default class Scene extends EventEmitter implements ISceneService {
this.$container = $container;
if ($container) {
await this.rendererService.init($container);
window.addEventListener('resize', this.handleWindowResized, false);
elementResizeEvent(this.$container, this.handleWindowResized);
// window.addEventListener('resize', this.handleWindowResized, false);
} else {
this.logger.error('容器 id 不存在');
}
@ -211,11 +215,13 @@ export default class Scene extends EventEmitter implements ISceneService {
this.removeAllListeners();
this.rendererService.destroy();
this.map.destroy();
window.removeEventListener('resize', this.handleWindowResized, false);
unbind(this.$container);
// window.removeEventListener('resize', this.handleWindowResized, false);
}
private handleWindowResized = () => {
this.emit('resize');
// @ts-check
if (this.$container) {
// recalculate the viewport's size and call gl.viewport
// @see https://github.com/regl-project/regl/blob/master/lib/webgl.js#L24-L38
@ -227,12 +233,15 @@ export default class Scene extends EventEmitter implements ISceneService {
w = bounds.right - bounds.left;
h = bounds.bottom - bounds.top;
}
this.rendererService.viewport({
x: 0,
y: 0,
width: pixelRatio * w,
height: pixelRatio * h,
});
// 触发 Map， canvas
DOM.triggerResize();
// repaint layers
this.render();
}

4
packages/core/src/services/source/ISourceService.ts
View File

@ -26,6 +26,8 @@ export interface IClusterOptions {
radius: number;
maxZoom: number;
minZoom: number;
zoom: number;
bbox: [number, number, number, number];
field: string;
method: 'max' | 'sum' | 'min' | 'mean' | 'count' | CallBack;
}
@ -57,6 +59,8 @@ export type IJsonData = IJsonItem[];
export interface ISource {
data: IParserData;
cluster: boolean;
clusterOptions: Partial<IClusterOptions>;
}
export interface IRasterCfg {
extent: [number, number, number, number];

81
packages/layers/src/core/BaseLayer.ts
View File

@ -28,17 +28,20 @@ import {
IStyleAttributeService,
IStyleAttributeUpdateOptions,
lazyInject,
ScaleTypeName,
ScaleTypes,
StyleAttributeField,
StyleAttributeOption,
TYPES,
} from '@antv/l7-core';
import Source from '@antv/l7-source';
import { bindAll } from '@antv/l7-utils';
import { EventEmitter } from 'eventemitter3';
import { Container } from 'inversify';
import { isFunction, isObject } from 'lodash';
// @ts-ignore
import mergeJsonSchemas from 'merge-json-schemas';
import { SyncBailHook, SyncHook } from 'tapable';
import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
import baseLayerSchema from './schema';
@ -46,6 +49,7 @@ import baseLayerSchema from './schema';
* 分配 layer id
*/
let layerIdCounter = 0;
const MapEventTypes = ['zoomchange', 'dragend', 'camerachange', 'resize'];
export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
implements ILayer {
@ -56,11 +60,18 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public minZoom: number;
public maxZoom: number;
public inited: boolean = false;
public layerModelNeedUpdate: boolean = false;
public dataPluginsState: { [key: string]: boolean } = {
DataSource: false,
DataMapping: false,
FeatureScale: false,
StyleAttr: false,
};
// 生命周期钩子
public hooks = {
init: new SyncBailHook<void, boolean | void>(),
beforeRender: new SyncBailHook<void, boolean | void>(),
beforeRenderData: new SyncWaterfallHook<void | boolean>(['data']),
afterRender: new SyncHook<void>(),
beforePickingEncode: new SyncHook<void>(),
afterPickingEncode: new SyncHook<void>(),
@ -249,7 +260,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// 获取插件集
this.plugins = this.container.getAll<ILayerPlugin>(TYPES.ILayerPlugin);
console.log(this.plugins)
// 完成插件注册，传入场景和图层容器内的服务
for (const plugin of this.plugins) {
plugin.apply(this, {
@ -263,6 +273,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// 触发 init 生命周期插件
this.hooks.init.call();
this.buildModels();
this.inited = true;
@ -300,6 +311,19 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
});
return this;
}
public filter(
field: StyleAttributeField,
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
this.pendingStyleAttributes.push({
attributeName: 'filter',
attributeField: field,
attributeValues: values,
updateOptions,
});
return this;
}
public shape(
field: StyleAttributeField,
@ -343,12 +367,34 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public setData(data: any, options?: ISourceCFG) {
this.sourceOption.data = data;
this.sourceOption.options = options;
console.time('init')
this.hooks.init.call();
console.timeEnd('init')
this.buildModels();
return this;
}
public isSourceNeedUpdate() {
const cluster = this.layerSource.cluster;
if (cluster) {
const { zoom = 0, bbox = [0, 0, 0, 0] } = this.layerSource.clusterOptions;
const newZoom = this.mapService.getZoom();
const bounds = this.mapService.getBounds();
const newBbox: [number, number, number, number] = [
bounds[0][0],
bounds[0][1],
bounds[1][0],
bounds[1][1],
];
// ||
// bbox[0] !== newBbox[0] ||
// bbox[2] !== newBbox[2]
if (Math.abs(zoom - newZoom) > 1) {
this.layerSource.updateClusterData(Math.floor(newZoom), newBbox);
return true;
}
}
return false;
}
public style(options: object & Partial<ILayerConfig>): ILayer {
const { passes, ...rest } = options;
@ -376,7 +422,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
return this;
}
public scale(field: string | IScaleOptions, cfg: IScale) {
public scale(field: ScaleTypeName | IScaleOptions, cfg: IScale) {
if (isObject(field)) {
this.scaleOptions = {
...this.scaleOptions,
@ -464,11 +510,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.hooks.afterDestroy.call();
this.removeAllListeners();
// 解绑图层容器中的服务
// this.container.unbind(TYPES.IStyleAttributeService);
}
public clear() {
this.styleAttributeService.clearAllAttributes();
// 销毁所有 model
this.models.forEach((model) => model.destroy());
@ -487,6 +534,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public setSource(source: Source) {
this.layerSource = source;
const bounds = this.mapService.getBounds();
const zoom = this.mapService.getZoom();
if (this.layerSource.cluster) {
this.layerSource.updateClusterData(zoom, [
bounds[0][0],
bounds[0][1],
bounds[1][0],
bounds[1][1],
]);
}
}
public getSource() {
return this.layerSource;
@ -536,7 +593,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
});
const { vs, fs, uniforms } = this.shaderModuleService.getModule(moduleName);
const { createModel } = this.rendererService;
const {
attributes,
elements,
@ -586,4 +642,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined,
};
}
private registerMapEvent() {
MapEventTypes.forEach((type) => {
this.mapService.on(type, this.layerMapHander.bind(this, type));
});
}
private layerMapHander(type: string, data: any) {
this.emit(type, data);
}
}

14
packages/layers/src/core/BaseModel.ts
View File

@ -1,5 +1,7 @@
import {
IAttribute,
ICameraService,
IElements,
IFontService,
IGlobalConfigService,
IIconService,
@ -12,10 +14,13 @@ import {
IShaderModuleService,
IStyleAttributeService,
lazyInject,
Triangulation,
TYPES,
} from '@antv/l7-core';
export default class BaseModel implements ILayerModel {
public triangulation: Triangulation;
protected layer: ILayer;
@lazyInject(TYPES.IGlobalConfigService)
@ -57,7 +62,14 @@ export default class BaseModel implements ILayerModel {
public buildModels(): IModel[] {
throw new Error('Method not implemented.');
}
public getAttribute(): {
attributes: {
[attributeName: string]: IAttribute;
};
elements: IElements;
} {
throw new Error('Method not implemented.');
}
public render() {
throw new Error('Method not implemented.');
}

70
packages/layers/src/plugins/DataMappingPlugin.ts
View File

@ -27,18 +27,16 @@ export default class DataMappingPlugin implements ILayerPlugin {
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('DataMappingPlugin', () => {
console.time('DataMappingPlugin')
const attributes = styleAttributeService.getLayerStyleAttributes() || [];
const { dataArray } = layer.getSource().data;
this.doMaping(layer, { styleAttributeService });
});
// TODO: FIXME
if (!dataArray) {
return;
layer.hooks.beforeRenderData.tap('DataMappingPlugin', (flag) => {
if (flag) {
layer.dataPluginsState.DataMapping = false;
this.doMaping(layer, { styleAttributeService });
return true;
}
// mapping with source data
layer.setEncodedData(this.mapping(attributes, dataArray));
console.timeEnd('DataMappingPlugin')
return false;
});
// remapping before render
@ -54,6 +52,29 @@ export default class DataMappingPlugin implements ILayerPlugin {
}
});
}
private doMaping(
layer: ILayer,
{
styleAttributeService,
}: { styleAttributeService: IStyleAttributeService },
) {
const attributes = styleAttributeService.getLayerStyleAttributes() || [];
const filter = styleAttributeService.getLayerStyleAttribute('filter');
const { dataArray } = layer.getSource().data;
let filterData = dataArray;
if (filter?.scale) {
filterData = dataArray.filter((record: IParseDataItem) => {
return this.applyAttributeMapping(filter, record)[0];
});
}
// TODO: FIXME
if (!filterData) {
return;
}
// mapping with source data
layer.setEncodedData(this.mapping(attributes, filterData));
}
private mapping(
attributes: IStyleAttribute[],
@ -64,21 +85,22 @@ export default class DataMappingPlugin implements ILayerPlugin {
id: record._id,
coordinates: record.coordinates,
};
// TODO 数据过滤
attributes.forEach((attribute: IStyleAttribute) => {
let values = this.applyAttributeMapping(attribute, record);
attribute.needRemapping = false;
attributes
// .filter((attribute) => attribute.name !== 'filter')
.forEach((attribute: IStyleAttribute) => {
let values = this.applyAttributeMapping(attribute, record);
attribute.needRemapping = false;
// TODO: 支持每个属性配置 postprocess
if (attribute.name === 'color') {
values = values.map((c: unknown) => {
return rgb2arr(c as string);
});
}
// @ts-ignore
encodeRecord[attribute.name] =
Array.isArray(values) && values.length === 1 ? values[0] : values;
});
// TODO: 支持每个属性配置 postprocess
if (attribute.name === 'color') {
values = values.map((c: unknown) => {
return rgb2arr(c as string);
});
}
// @ts-ignore
encodeRecord[attribute.name] =
Array.isArray(values) && values.length === 1 ? values[0] : values;
});
return encodeRecord;
}) as IEncodeFeature[];
}

10
packages/layers/src/plugins/DataSourcePlugin.ts
View File

@ -6,10 +6,16 @@ import { injectable } from 'inversify';
export default class DataSourcePlugin implements ILayerPlugin {
public apply(layer: ILayer) {
layer.hooks.init.tap('DataSourcePlugin', () => {
console.time('DataSourcePlugin')
const { data, options } = layer.sourceOption;
layer.setSource(new Source(data, options));
console.timeEnd('DataSourcePlugin')
});
// 检测数据是不否需要更新
layer.hooks.beforeRenderData.tap('DataSourcePlugin', (flag) => {
if (layer.isSourceNeedUpdate()) {
return true;
}
return false;
});
}
}

17
packages/layers/src/plugins/FeatureScalePlugin.ts
View File

@ -8,6 +8,7 @@ import {
IStyleAttribute,
IStyleAttributeService,
IStyleScale,
ScaleTypeName,
ScaleTypes,
StyleScaleType,
TYPES,
@ -57,12 +58,22 @@ export default class FeatureScalePlugin implements ILayerPlugin {
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('FeatureScalePlugin', () => {
console.time('FeatureScalePlugin')
this.scaleOptions = layer.getScaleOptions();
const attributes = styleAttributeService.getLayerStyleAttributes();
const { dataArray } = layer.getSource().data;
this.caculateScalesForAttributes(attributes || [], dataArray);
console.timeEnd('FeatureScalePlugin')
});
// 检测数据是不否需要更新
layer.hooks.beforeRenderData.tap('FeatureScalePlugin', (flag) => {
if (flag) {
this.scaleOptions = layer.getScaleOptions();
const attributes = styleAttributeService.getLayerStyleAttributes();
const { dataArray } = layer.getSource().data;
this.caculateScalesForAttributes(attributes || [], dataArray);
return true;
}
return false;
});
layer.hooks.beforeRender.tap('FeatureScalePlugin', () => {
@ -225,7 +236,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
}
private createDefaultScaleConfig(
type: ScaleTypes,
type: ScaleTypeName,
field: string,
data?: IParseDataItem[],
) {

2
packages/layers/src/plugins/PixelPickingPlugin.ts
View File

@ -38,7 +38,6 @@ export default class PixelPickingPlugin implements ILayerPlugin {
) {
// TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改，因此即使不开启也需要生成 a_PickingColor
layer.hooks.init.tap('PixelPickingPlugin', () => {
console.time('PixelPickingPlugin')
const { enablePicking } = layer.getLayerConfig();
styleAttributeService.registerStyleAttribute({
name: 'pickingColor',
@ -56,7 +55,6 @@ export default class PixelPickingPlugin implements ILayerPlugin {
enablePicking ? encodePickingColor(featureIdx) : [0, 0, 0],
},
});
console.timeEnd('PixelPickingPlugin')
});
// 必须要与 PixelPickingPass 结合使用，因此必须开启 multiPassRenderer
// if (layer.multiPassRenderer) {

20
packages/layers/src/plugins/RegisterStyleAttributePlugin.ts
View File

@ -25,9 +25,7 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('RegisterStyleAttributePlugin', () => {
console.time('RegisterStyleAttributePlugin')
this.registerBuiltinAttributes(styleAttributeService);
console.timeEnd('RegisterStyleAttributePlugin')
});
}
@ -56,6 +54,24 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
},
});
styleAttributeService.registerStyleAttribute({
name: 'filter',
type: AttributeType.Attribute,
descriptor: {
name: 'filter',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 1,
update: (feature: IEncodeFeature, featureIdx: number) => {
const { filter } = feature;
return filter ? [1] : [0];
},
},
});
styleAttributeService.registerStyleAttribute({
name: 'color',
type: AttributeType.Attribute,

4
packages/layers/src/plugins/ShaderUniformPlugin.ts
View File

@ -31,7 +31,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
public apply(layer: ILayer) {
layer.hooks.beforeRender.tap('ShaderUniformPlugin', () => {
// 重新计算坐标系参数
console.time('ShaderUniformPlugin')
this.coordinateSystemService.refresh();
const { width, height } = this.rendererService.getViewportSize();
@ -59,7 +59,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
}),
);
console.timeEnd('ShaderUniformPlugin')
// TODO：脏检查，决定是否需要渲染
});
}

58
packages/layers/src/plugins/UpdateStyleAttributePlugin.ts
View File

@ -22,24 +22,46 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('UpdateStyleAttributePlugin', () => {
console.time('UpdateStyleAttributePlugin')
const attributes = styleAttributeService.getLayerStyleAttributes() || [];
attributes
.filter((attribute) => attribute.needRegenerateVertices)
.forEach((attribute) => {
// 精确更新某个/某些 feature(s)，需要传入 featureIdx
styleAttributeService.updateAttributeByFeatureRange(
attribute.name,
layer.getEncodedData(), // 获取经过 mapping 最新的数据
attribute.featureRange.startIndex,
attribute.featureRange.endIndex,
);
attribute.needRegenerateVertices = false;
this.logger.debug(
`regenerate vertex attributes: ${attribute.name} finished`,
);
});
console.timeEnd('UpdateStyleAttributePlugin')
this.updateStyleAtrribute(layer, { styleAttributeService });
});
layer.hooks.beforeRenderData.tap('styleAttributeService', (flag) => {
if (flag) {
// styleAttributeService.createAttributesAndIndices(
// layer.getEncodedData(),
// );
layer.layerModelNeedUpdate = true;
return true;
}
return false;
});
layer.hooks.beforeRender.tap('UpdateStyleAttributePlugin', () => {
this.updateStyleAtrribute(layer, { styleAttributeService });
});
}
private updateStyleAtrribute(
layer: ILayer,
{
styleAttributeService,
}: { styleAttributeService: IStyleAttributeService },
) {
const attributes = styleAttributeService.getLayerStyleAttributes() || [];
attributes
.filter((attribute) => attribute.needRegenerateVertices)
.forEach((attribute) => {
// 精确更新某个/某些 feature(s)，需要传入 featureIdx
styleAttributeService.updateAttributeByFeatureRange(
attribute.name,
layer.getEncodedData(), // 获取经过 mapping 最新的数据
attribute.featureRange.startIndex,
attribute.featureRange.endIndex,
);
attribute.needRegenerateVertices = false;
this.logger.debug(
`regenerate vertex attributes: ${attribute.name} finished`,
);
});
}
}

15
packages/layers/src/point/index.ts
View File

@ -20,11 +20,15 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
};
}
protected renderModels() {
this.models.forEach((model) =>
if (this.layerModelNeedUpdate) {
this.models = this.layerModel.buildModels();
this.layerModelNeedUpdate = false;
}
this.models.forEach((model) => {
model.draw({
uniforms: this.layerModel.getUninforms(),
}),
);
});
});
return this;
}
@ -59,4 +63,9 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
return 'text';
}
}
private updateData() {
// const bounds = this.mapService.getBounds();
// console.log(bounds);
}
}

13
packages/layers/src/point/models/fill.ts
View File

@ -1,6 +1,8 @@
import {
AttributeType,
gl,
IAttribute,
IElements,
IEncodeFeature,
IModel,
IModelUniform,
@ -29,6 +31,17 @@ export default class FillModel extends BaseModel {
};
}
public getAttribute(): {
attributes: {
[attributeName: string]: IAttribute;
};
elements: IElements;
} {
return this.styleAttributeService.createAttributesAndIndices(
this.layer.getEncodedData(),
PointFillTriangulation,
);
}
public buildModels(): IModel[] {
return [
this.layer.buildLayerModel({

10
packages/maps/src/amap/index.ts
View File

@ -130,10 +130,16 @@ export default class AMapService
const amapBound = this.map.getBounds().toBounds();
const NE = amapBound.getNorthEast();
const SW = amapBound.getSouthWest();
const center = this.getCenter();
const maxlng =
center.lng > NE.getLng() || center.lng < SW.getLng()
? 180 - NE.getLng()
: NE.getLng();
const minlng = center.lng < SW.getLng() ? SW.getLng() - 180 : SW.getLng();
// 兼容 Mapbox，统一返回西南、东北
return [
[SW.getLng(), SW.getLat()],
[NE.getLng(), NE.getLat()],
[minlng, SW.getLat()],
[maxlng, NE.getLat()],
];
}

3
packages/maps/src/mapbox/theme.ts
View File

@ -6,6 +6,9 @@ export const MapTheme: {
normal: 'mapbox://styles/mapbox/streets-v11',
blank: {
version: 8,
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
glyphs:
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
sources: {},
layers: [
{

17
packages/renderer/src/regl/index.ts
View File

@ -52,14 +52,14 @@ export default class ReglRendererService implements IRendererService {
// TODO: use extensions
extensions: [
'OES_element_index_uint',
'EXT_shader_texture_lod', // IBL
'OES_standard_derivatives', // wireframe
// 'EXT_shader_texture_lod', // IBL 兼容性问题
// 'OES_standard_derivatives', // wireframe
'OES_texture_float', // shadow map
'WEBGL_depth_texture',
// 'WEBGL_depth_texture',
'angle_instanced_arrays',
'EXT_texture_filter_anisotropic', // VSM shadow map
// 'EXT_texture_filter_anisotropic', // VSM shadow map
],
optionalExtensions: ['oes_texture_float_linear'],
// optionalExtensions: ['oes_texture_float_linear'],
// profile: true,
onDone: (err: Error | null, r?: regl.Regl | undefined): void => {
if (err || !r) {
@ -131,6 +131,13 @@ export default class ReglRendererService implements IRendererService {
}) => {
// use WebGL context directly
// @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
if (renderCanvas) {
renderCanvas.width = width;
renderCanvas.height = height;
renderCanvas.style.width = width / 2 + 'px';
renderCanvas.style.height = height / 2 + 'px';
}
this.gl._gl.viewport(x, y, width, height);
this.gl._refresh();
};

72
packages/source/src/source.ts
View File

@ -14,7 +14,7 @@ import {
Properties,
} from '@turf/helpers';
import { EventEmitter } from 'eventemitter3';
import { cloneDeep, isString, isFunction } from 'lodash';
import { cloneDeep, isFunction, isString } from 'lodash';
import Supercluster from 'supercluster';
import { SyncHook } from 'tapable';
import { getParser, getTransform } from './';
@ -34,17 +34,19 @@ export default class Source extends EventEmitter {
};
public parser: IParserCfg = { type: 'geojson' };
public transforms: ITransform[] = [];
public cluster: boolean = false;
public clusterOptions: Partial<IClusterOptions> = {
enable: false,
radius: 40,
maxZoom: 20,
zoom: -99,
method: 'count',
};
// 原始数据
private originData: any;
private rawData: any;
private clusterOptions: Partial<IClusterOptions> = {
enable: false,
radius: 40,
maxZoom: 20,
method: 'count',
};
private cluster: boolean = false;
private clusterIndex: Supercluster;
constructor(data: any, cfg?: ISourceCFG) {
@ -58,6 +60,7 @@ export default class Source extends EventEmitter {
if (cfg.transforms) {
this.transforms = cfg.transforms;
}
this.cluster = cfg.cluster || false;
if (cfg.clusterOptions) {
this.cluster = true;
this.clusterOptions = {
@ -82,35 +85,40 @@ export default class Source extends EventEmitter {
public updateClusterData(
zoom: number,
bbox: [number, number, number, number],
): any {
): void {
const { method = 'sum', field } = this.clusterOptions;
const data = this.clusterIndex.getClusters(bbox, zoom);
if (!field && !isFunction(method)) {
return;
}
const clusterdata = data.map((item) => {
const id = item.id as number;
if (id) {
const points = this.clusterIndex.getLeaves(id, Infinity);
const properties = points.map((d) => d.properties);
let statNum;
if (isString(method) && field) {
const column = getColumn(properties, field);
statNum = statMap[method](column);
}
if (isFunction(method)) {
statNum = method(properties);
}
item.properties.stat = statNum;
let data = this.clusterIndex.getClusters(bbox, zoom);
this.clusterOptions.bbox = bbox;
this.clusterOptions.zoom = zoom;
data.forEach((p) => {
if (!p.id) {
p.properties.point_count = 1;
}
return item;
});
if (field || isFunction(method)) {
data = data.map((item) => {
const id = item.id as number;
if (id) {
const points = this.clusterIndex.getLeaves(id, Infinity);
const properties = points.map((d) => d.properties);
let statNum;
if (isString(method) && field) {
const column = getColumn(properties, field);
statNum = statMap[method](column);
}
if (isFunction(method)) {
statNum = method(properties);
}
item.properties.stat = statNum;
} else {
item.properties.point_count = 1;
}
return item;
});
}
this.data = getParser('geojson')({
type: 'FeatureCollection',
features: clusterdata,
features: data,
});
this.executeTrans();
}

14
packages/utils/src/dom.ts
View File

@ -128,3 +128,17 @@ export function setTransform(el: ELType, value: string) {
// @ts-ignore
el.style[transformProp] = value;
}
export function triggerResize() {
if (typeof Event === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
const evt = window.document.createEvent('UIEvents');
// @ts-ignore
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}
}

29
stories/Layers/components/Point.tsx
View File

@ -16,34 +16,37 @@ export default class Point3D extends React.Component {
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
);
const pointsData = await response.json();
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [120.19382669582967, 30.258134],
pitch: 0,
style: 'light',
style: 'dark',
zoom: 3,
}),
// map: new Mapbox({
// center: [120.19382669582967, 30.258134],
// pitch: 0,
// style: 'mapbox://styles/mapbox/streets-v9',
// zoom: 1,
// }),
});
this.scene = scene;
const pointLayer = new PointLayer({})
.source(pointsData)
.shape('circle')
.size('mag', [1, 25])
.color('mag', (mag) => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
.source(pointsData, {
cluster: true,
})
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.filter('point_count', (point_count: number) => {
return point_count > 1;
})
.size('point_count', [5, 10, 15, 20, 25])
.color('red')
.style({
opacity: 0.3,
strokeWidth: 1,
});
scene.addLayer(pointLayer);
this.scene = scene;
console.log(pointLayer);
}
public render() {

11
stories/Layers/components/Point3D.tsx
View File

@ -22,16 +22,18 @@ export default class Point3D extends React.Component {
}),
});
const pointLayer = new PointLayer({
enablePicking: true,
enableHighlight: true,
enableTAA: true,
enablePicking: false,
enableHighlight: false,
enableTAA: false,
onHover: (pickedFeature: any) => {
// tslint:disable-next-line:no-console
console.log('Scene4', pickedFeature.feature.name);
},
});
pointLayer
.source(data)
.source(data, {
cluster: true,
})
.color('red')
.shape('cylinder')
.size([15, 10]);
@ -39,7 +41,6 @@ export default class Point3D extends React.Component {
scene.render();
this.scene = scene;
}
public render() {
return (
<div

5
stories/Layers/components/data_update.tsx
View File

@ -53,9 +53,9 @@ export default class DataUpdate extends React.Component {
});
scene.addLayer(layer);
function animateMarker(timestamp: number) {
console.time('updatedata');
layer.setData(pointOnCircle(timestamp / 1000));
console.timeEnd('updatedata');
scene.render();
// setTimeout(animateMarker, 100);
@ -63,7 +63,6 @@ export default class DataUpdate extends React.Component {
}
layer.on('inited', () => {
animateMarker(0);
console.log('inited');
});
}

2
tsconfig.json
View File

@ -29,4 +29,4 @@
},
"include": ["packages"],
"exclude": ["node_modules", "packages/**/dist"],
}
}

5
yarn.lock
View File

@ -8990,6 +8990,11 @@ element-resize-detector@^1.1.15:
dependencies:
batch-processor "^1.0.0"
element-resize-event@^3.0.3:
version "3.0.3"
resolved "https://registry.npmjs.org/element-resize-event/-/element-resize-event-3.0.3.tgz#3f59facef6b8f23fbd678a5f364ee5723af98a2a"
integrity sha512-vhGNxT87PdZA6Ak4E0QhArwGzNcSPUwSN7n9wCFLeBlY2NNuuiwguQuQIp7P5oB65PLJ892yKcHiqz1xLWeiug==
elliptic@^6.0.0:
version "6.5.2"
resolved "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"