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

fix(layer): fix default model config

This commit is contained in:
thinkinggis 2019-12-20 00:16:00 +08:00
parent fecbc579c8
commit 9fce267950
21 changed files with 209 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
babel.config.js
View File

@ -54,7 +54,7 @@ module.exports = api => {
development: isCommonJS
}
],
'@babel/preset-typescript',
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-object-rest-spread',
@ -66,6 +66,11 @@ module.exports = api => {
legacy: true
}
],
[ '@babel/plugin-transform-runtime',
{
regenerator: true
}
],
[
'@babel/plugin-proposal-class-properties',
{

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

@ -27,4 +27,10 @@ const scene = new Scene({
离线，无token使用
<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<iframe
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="worldmap"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

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

@ -26,4 +26,10 @@ const scene = new Scene({
离线，无token使用
<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<iframe
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="worldmap"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

1
package.json
View File

@ -13,6 +13,7 @@
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
"@babel/plugin-proposal-optional-chaining": "^7.6.0",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",

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

@ -52,7 +52,7 @@ export interface ILayerModelInitializationOptions {
export interface ILayerModel {
render(): void;
getUninforms(): IModelUniform;
getBlend(): IBlendOptions;
getDefaultStyle(): unknown;
buildModels(): IModel[];
}
export interface IModelUniform {

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

@ -221,7 +221,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public init() {
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
this.configService.setLayerConfig(sceneId, this.id, {});
// 全局容器服务
this.iconService = this.container.get<IIconService>(TYPES.IIconService);
@ -298,7 +298,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.inited = true;
this.hooks.afterInit.call();
// 更新 module 样式
this.updateLayerConfig({
...this.rawConfig,
...(this.getDefaultConfig() as object),
});
this.buildModels();
// 触发初始化完成事件;
this.emit('inited');
@ -714,6 +718,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
throw new Error('Method not implemented.');
}
protected getModelType(): unknown {
throw new Error('Method not implemented.');
}
protected getDefaultConfig() {
return {};
}
private splitValuesAndCallbackInAttribute(
valuesOrCallback?: unknown[],
defaultValues?: unknown[],

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

@ -8,6 +8,7 @@ import {
IGlobalConfigService,
IIconService,
ILayer,
ILayerConfig,
ILayerModel,
IMapService,
IModel,
@ -20,7 +21,8 @@ import {
TYPES,
} from '@antv/l7-core';
import { BlendTypes } from '../utils/blend';
export default class BaseModel implements ILayerModel {
export default class BaseModel<ChildLayerStyleOptions = {}>
implements ILayerModel {
public triangulation: Triangulation;
protected layer: ILayer;
@ -60,6 +62,9 @@ export default class BaseModel implements ILayerModel {
const { blend = 'normal' } = this.layer.getLayerConfig();
return BlendTypes[BlendType[blend]] as IBlendOptions;
}
public getDefaultStyle(): unknown {
return {};
}
public getUninforms(): IModelUniform {
throw new Error('Method not implemented.');
}

6
packages/layers/src/heatmap/index.ts
View File

@ -1,10 +1,10 @@
import { AttributeType, gl, IEncodeFeature, ILayer } from '@antv/l7-core';
import BaseLayer from '../core/BaseLayer';
import HeatMapModels, { HeatMapModelType } from './models';
interface IPointLayerStyleOptions {
interface IHeatMapLayerStyleOptions {
opacity: number;
}
export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
public type: string = 'HeatMapLayer';
protected getConfigSchema() {
return {
@ -37,7 +37,7 @@ export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
this.layerModel = new HeatMapModels[shape](this);
this.models = this.layerModel.buildModels();
}
private getModelType(): HeatMapModelType {
protected getModelType(): HeatMapModelType {
const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
'shape',
);

55
packages/layers/src/line/dash.ts
View File

@ -6,6 +6,7 @@ import line_dash_vert from './shaders/line_dash_vert.glsl';
interface IDashLineLayerStyleOptions {
opacity: number;
dashArray: [number, number];
lineType: string;
}
export default class DashLineLayer extends BaseLayer<
IDashLineLayerStyleOptions
@ -25,7 +26,11 @@ export default class DashLineLayer extends BaseLayer<
}
protected renderModels() {
const { opacity, dashArray = [10, 5] } = this.getLayerConfig();
const {
opacity,
dashArray = [10, 5],
lineType = 'dash',
} = this.getLayerConfig();
this.models.forEach((model) =>
model.draw({
uniforms: {
@ -132,30 +137,30 @@ export default class DashLineLayer extends BaseLayer<
},
});
this.styleAttributeService.registerStyleAttribute({
name: 'startPos',
type: AttributeType.Attribute,
descriptor: {
name: 'a_StartPos',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 3,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const coordinates = feature.coordinates as number[][];
const coord = coordinates[0];
return coord.length === 3 ? coord : [...coord, 0.0];
},
},
});
// this.styleAttributeService.registerStyleAttribute({
// name: 'startPos',
// type: AttributeType.Attribute,
// descriptor: {
// name: 'a_StartPos',
// buffer: {
// // give the WebGL driver a hint that this buffer may change
// usage: gl.DYNAMIC_DRAW,
// data: [],
// type: gl.FLOAT,
// },
// size: 3,
// update: (
// feature: IEncodeFeature,
// featureIdx: number,
// vertex: number[],
// attributeIdx: number,
// ) => {
// const coordinates = feature.coordinates as number[][];
// const coord = coordinates[0];
// return coord.length === 3 ? coord : [...coord, 0.0];
// },
// },
// });
this.styleAttributeService.registerStyleAttribute({
name: 'distance',

14
packages/layers/src/line/index.ts
View File

@ -1,9 +1,15 @@
import BaseLayer from '../core/BaseLayer';
import LineModels, { LineModelType } from './models';
interface IPointLayerStyleOptions {
opacity: number;
export enum LineType {
'solid' = 'solid',
'dash' = 'dash',
}
export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
interface ILineLayerStyleOptions {
opacity: number;
lineType?: keyof typeof LineType;
dashArray?: [number, number];
}
export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
public type: string = 'LineLayer';
private animateStartTime: number = 0;
@ -34,7 +40,7 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
this.layerModel = new LineModels[shape](this);
this.models = this.layerModel.buildModels();
}
private getModelType(): LineModelType {
protected getModelType(): LineModelType {
const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
'shape',
);

1
packages/layers/src/line/models/line.ts
View File

@ -42,6 +42,7 @@ export default class LineModel extends BaseModel {
];
}
protected registerBuiltinAttributes() {
// const lineType = this
// point layer size;
this.styleAttributeService.registerStyleAttribute({
name: 'size',

2
packages/layers/src/line/shaders/line_dash_vert.glsl
View File

@ -8,6 +8,7 @@ attribute vec3 a_Position;
attribute float a_Distance;
uniform mat4 u_ModelMatrix;
uniform vec2 u_dash_array: [10.0, 5.];
uniform float u_line_type: 0.0;
uniform float u_dash_offset: 0;
varying vec4 v_color;
@ -21,6 +22,7 @@ varying float v_distance_ratio;
#pragma include "projection"
void main() {
v_distance_ratio = a_Distance / a_Total_Distance;
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;

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

@ -19,6 +19,19 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
},
};
}
protected getDefaultConfig() {
const type = this.getModelType();
const defaultConfig = {
normal: {
blend: 'additive',
},
fill: {},
extrude: {},
image: {},
text: {},
};
return defaultConfig[type];
}
protected renderModels() {
if (this.layerModelNeedUpdate) {
this.models = this.layerModel.buildModels();
@ -38,7 +51,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
this.models = this.layerModel.buildModels();
}
private getModelType(): PointType {
protected getModelType(): PointType {
// pointlayer
// 2D、 3d、 shape、image、text、normal、
const layerData = this.getEncodedData();

4
packages/layers/src/point/models/image.ts
View File

@ -11,7 +11,7 @@ import BaseModel from '../../core/BaseModel';
import { PointImageTriangulation } from '../../core/triangulation';
import pointImageFrag from '../shaders/image_frag.glsl';
import pointImageVert from '../shaders/image_vert.glsl';
interface IPointLayerStyleOptions {
interface IImageLayerStyleOptions {
opacity: number;
}
@ -19,7 +19,7 @@ export default class ImageModel extends BaseModel {
private texture: ITexture2D;
public getUninforms(): IModelUniform {
const { opacity } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
return {
u_opacity: opacity || 1.0,
u_texture: this.texture,

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

@ -3,6 +3,7 @@ import {
BlendType,
gl,
IEncodeFeature,
ILayerConfig,
IModel,
IModelUniform,
} from '@antv/l7-core';
@ -27,6 +28,11 @@ export function PointTriangulation(feature: IEncodeFeature) {
}
export default class NormalModel extends BaseModel {
public getDefaultStyle(): Partial<IPointLayerStyleOptions & ILayerConfig> {
return {
blend: 'additive',
};
}
public getUninforms(): IModelUniform {
const {
opacity = 1,
@ -79,4 +85,11 @@ export default class NormalModel extends BaseModel {
},
});
}
private defaultStyleOptions(): Partial<
IPointLayerStyleOptions & ILayerConfig
> {
return {
blend: BlendType.additive,
};
}
}

2
packages/layers/src/polygon/index.ts
View File

@ -36,7 +36,7 @@ export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
this.models = this.layerModel.buildModels();
}
private getModelType(): PolygonModelType {
protected getModelType(): PolygonModelType {
const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
'shape',
);

4
packages/layers/src/raster/image.ts
View File

@ -9,11 +9,11 @@ import BaseLayer from '../core/BaseLayer';
import { RasterImageTriangulation } from '../core/triangulation';
import rasterImageFrag from './shaders/image_frag.glsl';
import rasterImageVert from './shaders/image_vert.glsl';
interface IPointLayerStyleOptions {
interface IRaterLayerStyleOptions {
opacity: number;
}
export default class ImageLayer extends BaseLayer<IPointLayerStyleOptions> {
export default class ImageLayer extends BaseLayer<IRaterLayerStyleOptions> {
public type: string = 'ImageLayer';
protected texture: ITexture2D;

2
stories/Layers/Layers.stories.tsx
View File

@ -3,6 +3,7 @@ import * as React from 'react';
import Arc2DLineDemo from './components/Arc2DLine';
import ArcLineDemo from './components/Arcline';
import Column from './components/column';
import DashLineDemo from './components/dash';
import DataUpdate from './components/data_update';
import HeatMapDemo from './components/HeatMap';
import LightDemo from './components/light';
@ -24,6 +25,7 @@ storiesOf('图层', module)
.add('图片标注', () => <PointImage />)
.add('面3d图层', () => <Polygon3D />)
.add('线图层', () => <LineLayer />)
.add('虚线', () => <DashLineDemo />)
.add('3D弧线', () => <ArcLineDemo />)
.add('2D弧线', () => <Arc2DLineDemo />)
.add('热力图', () => <HeatMapDemo />)

64
stories/Layers/components/dash.tsx Normal file
View File

@ -0,0 +1,64 @@
import { DashLineLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class DashLineDemo extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
);
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [102.602992, 23.107329],
pitch: 0,
style: 'dark',
zoom: 14,
}),
});
const lineLayer = new DashLineLayer()
.source(await response.json())
.size(1)
.shape('line')
.color(
'ELEV',
[
'#E8FCFF',
'#CFF6FF',
'#A1E9ff',
'#65CEF7',
'#3CB1F0',
'#2894E0',
'#1772c2',
'#105CB3',
'#0D408C',
'#002466',
].reverse(),
);
scene.addLayer(lineLayer);
this.scene = scene;
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

10
stories/Layers/components/light.tsx
View File

@ -18,7 +18,7 @@ export default class Light extends React.Component {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new GaodeMap({
pitch: 0,
style: 'dark',
center: [116.405289, 39.904987],
@ -27,9 +27,7 @@ export default class Light extends React.Component {
});
this.scene = scene;
scene.on('loaded', async () => {
const pointLayer = new PointLayer({
blend: 'min',
})
const pointLayer = new PointLayer()
.source(pointsData, {
parser: {
type: 'csv',
@ -37,8 +35,8 @@ export default class Light extends React.Component {
y: 'lat',
},
})
.size(2)
.color('#FFFECC')
.size(1)
.color('#ffa842')
.style({
opacity: 1,
});

30
yarn.lock
View File

@ -88,10 +88,10 @@
d3-timer "~1.0.6"
wolfy87-eventemitter "~5.1.0"
"@antv/gatsby-theme-antv@^0.10.4":
version "0.10.7"
resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.7.tgz#e2c2620aee959e635c5c95b5d9fa2e9f87812ca9"
integrity sha512-hYkdm6Knt+2KxUoNoXXlDC9KQcAIZdRITqXGx25cUNgpz0+GBDtg15D2JWMwjDpgu86cjjIjMM1860jvTcRm5Q==
"@antv/gatsby-theme-antv@^0.10.17":
version "0.10.21"
resolved "https://registry.npm.alibaba-inc.com/@antv/gatsby-theme-antv/download/@antv/gatsby-theme-antv-0.10.21.tgz#2f89811634e632da1b1b0632ea6ca07b1b5e86a4"
integrity sha1-L4mBFjTmMtobGwYy6mygextehqQ=
dependencies:
"@babel/plugin-transform-modules-umd" "^7.2.0"
"@babel/preset-env" "^7.6.3"
@ -101,7 +101,7 @@
"@hot-loader/react-dom" "^16.9.0+4.12.11"
"@stackblitz/sdk" "^1.3.0"
"@types/classnames" "^2.2.9"
"@types/codemirror" "^0.0.80"
"@types/codemirror" "^0.0.81"
"@types/git-url-parse" "^9.0.0"
"@types/lodash-es" "^4.17.3"
"@types/parse-github-url" "^1.0.0"
@ -150,6 +150,7 @@
gatsby-transformer-sharp "^2.2.14"
git-url-parse "^11.1.2"
i18next "^19.0.0"
indent-string "^4.0.0"
insert-css "^2.0.0"
less "^3.10.3"
lodash "^4.17.15"
@ -176,6 +177,7 @@
react-use "^13.8.0"
release-it "^12.4.3"
shallowequal "^1.1.0"
slash "^3.0.0"
slick-carousel "^1.8.1"
ts-jest "^24.1.0"
typescript "^3.6.3"
@ -1032,6 +1034,16 @@
resolve "^1.8.1"
semver "^5.5.1"
"@babel/plugin-transform-runtime@^7.7.6":
version "7.7.6"
resolved "https://registry.npm.alibaba-inc.com/@babel/plugin-transform-runtime/download/@babel/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
integrity sha1-TytUjIiSL7mOwcJCr9RzPuPhL2E=
dependencies:
"@babel/helper-module-imports" "^7.7.4"
"@babel/helper-plugin-utils" "^7.0.0"
resolve "^1.8.1"
semver "^5.5.1"
"@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.7.4":
version "7.7.4"
resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz#74a0a9b2f6d67a684c6fbfd5f0458eb7ba99891e"
@ -3657,10 +3669,10 @@
resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==
"@types/codemirror@^0.0.80":
version "0.0.80"
resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.80.tgz#c047bb30462582615c3d51e5be6155315f764427"
integrity sha512-oTi/s9PkWo3+/L9UrRpqngc4i6fRFMp3YQS0nv3Wy5vjl9n6GsqI9oNF6rjl/7J16Ipe67F9eatwRMTSB/Bo0w==
"@types/codemirror@^0.0.81":
version "0.0.81"
resolved "https://registry.npm.alibaba-inc.com/@types/codemirror/download/@types/codemirror-0.0.81.tgz#3cea2c1006406973d4aad212e617638cbfc2965b"
integrity sha1-POosEAZAaXPUqtIS5hdjjL/Clls=
dependencies:
"@types/tern" "*"