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

Merge pull request #161 from antvis/setdata 

fix: 修复图层高亮不正常显示的问题 fix #150
This commit is contained in:
@thinkinggis 2020-01-16 12:02:42 +08:00 committed by GitHub
parent 1e381f268b 63b7bb844a
commit 66baca3b4f
24 changed files with 204 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -6,6 +6,8 @@ Large-scale WebGL-powered Geospatial data visualization analysis framework.
[中文 README](./README.zh-CN.md)
[GitHub](https://github.com/antvis/L7)
Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting.
L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services

4
README.zh-CN.md
View File

@ -2,6 +2,10 @@
[![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
[README](./README.md)
[GitHub](https://github.com/antvis/L7)
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。

14
demos/raster/basic/demo/image.js
View File

@ -5,8 +5,8 @@ const scene = new Scene({
pitch: 0,
type: 'amap',
style: 'light',
center: [121.2680, 30.3628],
zoom: 13,
center: [ 121.2680, 30.3628 ],
zoom: 13
});
const layer = new ImageLayer({});
@ -15,11 +15,11 @@ layer.source(
{
parser: {
type: 'image',
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
}
}
);
scene.on('loaded',()=>{
scene.on('loaded', () => {
scene.addLayer(layer);
})
});

1
demos/tutorial/data/demo/line.js
View File

@ -33,6 +33,5 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
].reverse(),
)
scene.addLayer(layer);
console.log(layer);
});

6
docs/api/layer/heatmap_layer/grid.en.md
View File

@ -40,8 +40,8 @@ layer.source(data, {
field:'v',
method:'sum'
}
],
}
]
});
```
## shape
@ -105,7 +105,7 @@ layer.size('value', (value)=>{}) // 回调函数设置高度
coverage: 0.9,
angle: 0,
opacity: 1.0
})
});
```

4
docs/api/layer/heatmap_layer/grid.zh.md
View File

@ -38,8 +38,8 @@ layer.source(data, {
field:'v',
method:'sum'
}
],
}
]
})
```
## shape

6
docs/api/layer/heatmap_layer/hexagon.en.md
View File

@ -35,8 +35,8 @@ layer.source(data, {
field:'v',
method:'sum'
}
],
}
]
})
```
## shape
@ -99,7 +99,7 @@ layer.size('value', (value)=>{}) // 回调函数设置高度
coverage: 0.9,
angle: 0,
opacity: 1.0
})
});
```

7
docs/api/layer/heatmap_layer/hexagon.zh.md
View File

@ -40,8 +40,8 @@ layer.source(data, {
field:'v',
method:'sum'
}
],
}
]
})
```
## shape
@ -103,8 +103,7 @@ layer.size('value', (value)=>{}) // 回调函数设置高度
coverage: 0.9,
angle: 0,
opacity: 1.0
})
});
```
### 完整代码

22
docs/api/source/csv.en.md
View File

@ -35,19 +35,15 @@ layer.source(data, {
### 线段弧线数据通过 CSV 加载
```javascript
layer.source(
data,
{
parser:{
type:'csv',
x:'lng1',
y:'lat1' ,
x1:'lng1',
y1:'lat2' ,
}
}
})
layer.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng1',
y1: 'lat2',
},
});
```
[CSV 线段数据 demo 示例](../../../examples/gallery/basic#arcCircle)

22
docs/api/source/csv.zh.md
View File

@ -35,19 +35,15 @@ layer.source(data, {
### 线段弧线数据通过 CSV 加载
```javascript
layer.source(
data,
{
parser:{
type:'csv',
x:'lng1',
y:'lat1' ,
x1:'lng1',
y1:'lat2' ,
}
}
})
layer.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng1',
y1: 'lat2',
},
});
```
[CSV 线段数据 demo 示例](../../../examples/gallery/basic#arcCircle)

103
docs/api/source/json.en.md
View File

@ -125,34 +125,32 @@ layer.source(data, {
简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
const data = [
{
lng1: 112.345,
lat1: 30.455,
lng2: 112.345,
lat2: 30.455,
value: 10,
},
{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
lng1: 114.345,
lat1: 31.455,
lng2: 112.345,
lat2: 30.455,
value: 10,
},
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
layer.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng1',
y1: 'lat2',
},
});
```
#### 通用解析
@ -164,32 +162,21 @@ coordinates 包含两个坐标，
第二个坐标 对应 x1, y1
```javascript
const data = [
{
"id": "1",
"coord": [
[
101.953125,
50.51342652633956
],
[
119.17968749999999,
33.137551192346145
]
]
}
layer.source(
data,
{
parser:{
type:'json',
coordinates: "coord",
}
}
})
const data = [
{
id: '1',
coord: [
[101.953125, 50.51342652633956],
[119.17968749999999, 33.137551192346145],
],
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates: 'coord',
},
});
```
如果需要使用绘制轨迹数据，需要通过 coodinates 指定线的点序列。
@ -214,16 +201,12 @@ const data = {
使用时通过 coordinates 指定
```javascript
layer.source(
data,
{
parser:{
type:'json',
coordinates:'path'
}
}
})
layer.source(data, {
parser: {
type: 'json',
coordinates: 'path',
},
});
```
### 面数据

102
docs/api/source/json.zh.md
View File

@ -127,34 +127,32 @@ layer.source(data, {
简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
const data = [
{
lng1: 112.345,
lat1: 30.455,
lng2: 112.345,
lat2: 30.455,
value: 10,
},
{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
lng1: 114.345,
lat1: 31.455,
lng2: 112.345,
lat2: 30.455,
value: 10,
},
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
layer.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng1',
y1: 'lat2',
},
});
```
#### 通用解析
@ -166,31 +164,21 @@ coordinates 包含两个坐标，
第二个坐标 对应 x1, y1
```javascript
const data = [
{
"id": "1",
"coord": [
[
101.953125,
50.51342652633956
],
[
119.17968749999999,
33.137551192346145
]
]
}
layer.source(
data,
{
parser:{
type:'json',
coordinates: "coord",
}
}
})
const data = [
{
id: '1',
coord: [
[101.953125, 50.51342652633956],
[119.17968749999999, 33.137551192346145],
],
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates: 'coord',
},
});
```
如果需要使用绘制轨迹数据，需要通过 coodinates 指定线的点序列。
@ -215,16 +203,12 @@ const data = {
使用时通过 coordinates 指定
```javascript
layer.source(
data,
{
parser:{
type:'json',
coordinates:'path'
}
}
})
layer.source(data, {
parser: {
type: 'json',
coordinates: 'path',
},
});
```
### 面数据

20
docs/api/source/source.zh.md
View File

@ -85,16 +85,16 @@ tranforms 处理的是的标准化之后的数据
处理完之后返回的也是标准数据
```javascript
[{
coordinates: [[]] // 地理坐标字段
_id:'',// 标准化之后新增字段
name:''
value:''
// ....
}]
```json
[
{
"coordinates": [[]], // 地理坐标字段
"_id": "122", // 标准化之后新增字段
"name": "test",
"value": 1
// ....
}
]
```
目前支持两种热力图使用的数据处理方法 grid，hexagon transform 配置项

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

@ -56,10 +56,10 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
enableMultiPassRenderer: true,
enablePicking: true,
active: false,
activeColor: 'red',
activeColor: '#2f54eb',
enableHighlight: false,
enableSelect: false,
highlightColor: 'red',
highlightColor: '#2f54eb',
selectColor: 'blue',
enableTAA: false,
jitterScale: 1,

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

@ -127,7 +127,7 @@ export interface ILayer {
id: number | { x: number; y: number },
option?: IActiveOption,
): void;
select(option: IActiveOption | false): ILayer;
select(option: IActiveOption | boolean): ILayer;
setSelect(
id: number | { x: number; y: number },
option?: IActiveOption,

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

@ -16,6 +16,8 @@ export default class LayerService implements ILayerService {
private animateInstanceCount: number = 0;
private alreadyInRendering: boolean = false;
@inject(TYPES.IRendererService)
private readonly renderService: IRendererService;
@ -58,7 +60,11 @@ export default class LayerService implements ILayerService {
public renderLayers() {
// TODO：脏检查，只渲染发生改变的 Layer
if (this.alreadyInRendering) {
return;
}
//
this.alreadyInRendering = true;
this.clear();
this.layers
.filter((layer) => layer.isVisible())
@ -69,6 +75,7 @@ export default class LayerService implements ILayerService {
layer.render();
layer.hooks.afterRender.call();
});
this.alreadyInRendering = false;
}
public updateRenderOrder() {

64
packages/core/src/services/renderer/passes/PixelPickingPass.ts
View File

@ -50,13 +50,18 @@ export default class PixelPickingPass<
public init(layer: ILayer, config?: Partial<InitializationOptions>) {
super.init(layer, config);
this.layer = layer;
const { createTexture2D, createFramebuffer } = this.rendererService;
const {
createTexture2D,
createFramebuffer,
getViewportSize,
} = this.rendererService;
const { width, height } = getViewportSize();
// 创建 picking framebuffer，后续实时 resize
this.pickingFBO = createFramebuffer({
color: createTexture2D({
width: 1,
height: 1,
width,
height,
wrapS: gl.CLAMP_TO_EDGE,
wrapT: gl.CLAMP_TO_EDGE,
}),
@ -237,59 +242,14 @@ export default class PixelPickingPass<
*/
private highlightPickedFeature(pickedColors: Uint8Array | undefined) {
const [r, g, b] = pickedColors;
const { clear, useFramebuffer } = this.rendererService;
// 先输出到 PostProcessor
const readFBO = this.layer.multiPassRenderer
.getPostProcessor()
.getReadFBO();
this.layer.hooks.beforeRender.call();
useFramebuffer(readFBO, () => {
clear({
color: [0, 0, 0, 0],
depth: 1,
stencil: 0,
framebuffer: readFBO,
});
// TODO: highlight pass 需要 multipass
const originRenderFlag = this.layer.multiPassRenderer.getRenderFlag();
this.layer.multiPassRenderer.setRenderFlag(false);
this.layer.hooks.beforeHighlight.call([r, g, b]);
this.layer.render();
this.layer.hooks.afterHighlight.call();
this.layer.hooks.afterRender.call();
this.layer.multiPassRenderer.setRenderFlag(originRenderFlag);
});
this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
this.layer.hooks.beforeHighlight.call([r, g, b]);
this.layerService.renderLayers();
}
private selectFeature(pickedColors: Uint8Array | undefined) {
const [r, g, b] = pickedColors;
const { clear, useFramebuffer } = this.rendererService;
// 先输出到 PostProcessor
const readFBO = this.layer.multiPassRenderer
.getPostProcessor()
.getReadFBO();
this.layer.hooks.beforeRender.call();
useFramebuffer(readFBO, () => {
clear({
color: [0, 0, 0, 0],
depth: 1,
stencil: 0,
framebuffer: readFBO,
});
// TODO: highlight pass 需要 multipass
const originRenderFlag = this.layer.multiPassRenderer.getRenderFlag();
this.layer.multiPassRenderer.setRenderFlag(false);
this.layer.hooks.beforeSelect.call([r, g, b]);
this.layer.render();
this.layer.hooks.afterSelect.call();
this.layer.hooks.afterRender.call();
this.layer.multiPassRenderer.setRenderFlag(originRenderFlag);
});
this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
this.layer.hooks.beforeSelect.call([r, g, b]);
this.layerService.renderLayers();
}
private selectFeatureHander({ featureId }: Partial<IInteractionTarget>) {

2
packages/core/src/shaders/picking.frag.glsl
View File

@ -43,4 +43,4 @@ vec4 filterPickingColor(vec4 color) {
*/
vec4 filterColor(vec4 color) {
return filterPickingColor(filterHighlightColor(color));
}
}

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

@ -38,6 +38,7 @@ import {
TYPES,
} from '@antv/l7-core';
import Source from '@antv/l7-source';
import { encodePickingColor } from '@antv/l7-utils';
import { EventEmitter } from 'eventemitter3';
import { Container } from 'inversify';
import { isFunction, isObject } from 'lodash';
@ -225,6 +226,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public init() {
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
// 初始化图层配置项
this.configService.setLayerConfig(sceneId, this.id, {});
// 全局容器服务
@ -505,11 +507,18 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
? options.color
: this.getLayerConfig().highlightColor,
});
this.interactionService.triggerActive(id);
this.hooks.beforeSelect.callAsync(
encodePickingColor(id as number) as number[],
() => {
setTimeout(() => {
this.reRender();
}, 1);
},
);
}
}
public select(option: IActiveOption | false): ILayer {
public select(option: IActiveOption | boolean): ILayer {
const activeOption: Partial<ILayerConfig> = {};
activeOption.enableSelect = isObject(option) ? true : option;
if (isObject(option)) {
@ -518,7 +527,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
activeOption.selectColor = option.color;
}
} else {
activeOption.enableHighlight = !!option;
activeOption.enableSelect = !!option;
}
this.updateLayerConfig(activeOption);
return this;
@ -543,7 +552,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
? options.color
: this.getLayerConfig().selectColor,
});
this.interactionService.triggerSelect(id);
this.hooks.beforeSelect.callAsync(
encodePickingColor(id as number) as number[],
() => {
setTimeout(() => {
this.reRender();
}, 1);
},
);
}
}
public setBlend(type: keyof typeof BlendType): void {

14
packages/layers/src/plugins/LayerStylePlugin.ts
View File

@ -15,19 +15,5 @@ export default class LayerStylePlugin implements ILayerPlugin {
layer.fitBounds();
}
});
layer.hooks.beforeRender.tap('LayerStylePlugin', () => {
const {
highlightColor = 'red',
pickedFeatureID = -1,
} = layer.getLayerConfig();
layer.models.forEach((model) =>
model.addUniforms({
u_PickingStage: 2.0,
u_PickingColor: encodePickingColor(pickedFeatureID),
u_HighlightColor: rgb2arr(highlightColor as string),
}),
);
});
}
}

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

@ -7,7 +7,11 @@ import {
IRendererService,
IStyleAttributeService,
} from '@antv/l7-core';
import { encodePickingColor, rgb2arr } from '@antv/l7-utils';
import {
decodePickingColor,
encodePickingColor,
rgb2arr,
} from '@antv/l7-utils';
import { injectable } from 'inversify';
const PickingStage = {
@ -67,12 +71,11 @@ export default class PixelPickingPlugin implements ILayerPlugin {
layer.hooks.afterPickingEncode.tap('PixelPickingPlugin', () => {
const { enablePicking } = layer.getLayerConfig();
// 区分选中高亮 和滑过高亮
if (enablePicking && layer.isVisible()) {
layer.models.forEach((model) =>
model.addUniforms({
u_PickingStage: PickingStage.NONE,
u_PickingColor: [0, 0, 0],
u_HighlightColor: [0, 0, 0, 0],
u_PickingStage: PickingStage.HIGHLIGHT,
}),
);
}
@ -86,6 +89,9 @@ export default class PixelPickingPlugin implements ILayerPlugin {
typeof highlightColor === 'string'
? rgb2arr(highlightColor)
: highlightColor || [1, 0, 0, 1];
layer.updateLayerConfig({
pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)),
});
layer.models.forEach((model) =>
model.addUniforms({
u_PickingStage: PickingStage.HIGHLIGHT,
@ -104,6 +110,9 @@ export default class PixelPickingPlugin implements ILayerPlugin {
typeof selectColor === 'string'
? rgb2arr(selectColor)
: selectColor || [1, 0, 0, 1];
layer.updateLayerConfig({
pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)),
});
layer.models.forEach((model) =>
model.addUniforms({
u_PickingStage: PickingStage.HIGHLIGHT,

1
packages/renderer/src/regl/ReglModel.ts
View File

@ -103,7 +103,6 @@ export default class ReglModel implements IModel {
...this.uniforms,
...this.extractUniforms(options.uniforms || {}),
};
const reglDrawProps: {
[key: string]:
| regl.Framebuffer

9
stories/Components/components/Scale.tsx
View File

@ -1,5 +1,5 @@
// @ts-ignore
import { PolygonLayer, Scale, Scene, PointLayer } from '@antv/l7';
import { PointLayer, PolygonLayer, Scale, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import * as React from 'react';
@ -43,6 +43,7 @@ export default class ScaleComponent extends React.Component {
'#CF1D49',
])
.shape('fill')
// .select(true)
.style({
opacity: 1.0,
});
@ -58,14 +59,16 @@ export default class ScaleComponent extends React.Component {
})
.size('point_count', [5, 10, 15, 20, 25])
.animate(false)
.active(true)
.select(true)
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1,
});
scene.addLayer(pointLayer);
layer.on('click', (e) => {
layer.setSelect(e.featureId);
});
const scaleControl = new Scale();
scene.addControl(scaleControl);
}

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

@ -38,9 +38,12 @@ export default class ArcLineDemo extends React.Component {
})
.size(1)
.shape('arc3d')
.active(true)
.select({
color: 'red',
})
.color('rgb(13,64,140)')
.animate({
enable: true,
interval: 0.1,
duration: 2,
trailLength: 1.0,