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

Shihuidev (#866) 

* feat: 补全挤出几何体拾取颜色的光照配置

* style: lint style
This commit is contained in:
YiQianYao 2021-12-06 19:11:54 +08:00 committed by GitHub
parent 4a0dc27c83
commit e1d4c288b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 171 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.6.3",
"version": "2.6.4",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.6.3",
"version": "2.6.4",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.6.3",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-core": "^2.6.4",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.6.3",
"version": "2.6.4",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

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

@ -11,7 +11,7 @@ uniform float u_shaderPick;
/*
* Returns highlight color if this item is selected.
*/
vec4 filterHighlightColor(vec4 color) {
vec4 filterHighlightColor(vec4 color, float lightWeight) {
bool selected = bool(v_PickingResult.a);
if (selected) {
@ -21,7 +21,7 @@ vec4 filterHighlightColor(vec4 color) {
float highLightRatio = highLightAlpha / (highLightAlpha + color.a * (1.0 - highLightAlpha));
vec3 resultRGB = mix(color.rgb, highLightColor.rgb, highLightRatio);
return vec4(resultRGB, color.a);
return vec4(resultRGB * lightWeight, color.a);
} else {
return color;
}
@ -48,7 +48,18 @@ vec4 filterColor(vec4 color) {
if(u_shaderPick < 0.5) {
return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
} else {
return filterPickingColor(filterHighlightColor(color));
return filterPickingColor(filterHighlightColor(color, 1.0));
}
}
vec4 filterColorWithLight(vec4 color, float lightWeight) {
// TODO: 过滤多余的 shader 计算
// return color;
if(u_shaderPick < 0.5) {
return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
} else {
return filterPickingColor(filterHighlightColor(color, lightWeight));
}
}

14
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.6.3",
"version": "2.6.4",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,12 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.6.3",
"@antv/l7-core": "^2.6.3",
"@antv/l7-layers": "^2.6.3",
"@antv/l7-maps": "^2.6.3",
"@antv/l7-scene": "^2.6.3",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-component": "^2.6.4",
"@antv/l7-core": "^2.6.4",
"@antv/l7-layers": "^2.6.4",
"@antv/l7-maps": "^2.6.4",
"@antv/l7-scene": "^2.6.4",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

2
packages/l7/src/version.ts
View File

@ -1,2 +1,2 @@
const version = '2.6.3';
const version = '2.6.4';
export { version };

8
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.6.3",
"version": "2.6.4",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,9 @@
"license": "ISC",
"dependencies": {
"@antv/geo-coord": "^1.0.8",
"@antv/l7-core": "^2.6.3",
"@antv/l7-source": "^2.6.3",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-core": "^2.6.4",
"@antv/l7-source": "^2.6.4",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

15
packages/layers/src/polygon/models/extrude.ts
View File

@ -3,9 +3,13 @@ import { isNumber } from 'lodash';
import BaseModel, { styleSingle } from '../../core/BaseModel';
import { PolygonExtrudeTriangulation } from '../../core/triangulation';
import polygonExtrudeFrag from '../shaders/polygon_extrude_frag.glsl';
import polygonExtrudePickLightFrag from '../shaders/polygon_extrude_picklight_frag.glsl';
import polygonExtrudePickLightVert from '../shaders/polygon_extrude_picklight_vert.glsl';
import polygonExtrudeVert from '../shaders/polygon_extrude_vert.glsl';
interface IPolygonLayerStyleOptions {
opacity: styleSingle;
pickLight: boolean;
}
export default class ExtrudeModel extends BaseModel {
public getUninforms() {
@ -56,11 +60,18 @@ export default class ExtrudeModel extends BaseModel {
}
public buildModels(): IModel[] {
const {
pickLight = false,
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
return [
this.layer.buildLayerModel({
moduleName: 'polygonExtrude',
vertexShader: polygonExtrudeVert,
fragmentShader: polygonExtrudeFrag,
vertexShader: pickLight
? polygonExtrudePickLightVert
: polygonExtrudeVert,
fragmentShader: pickLight
? polygonExtrudePickLightFrag
: polygonExtrudeFrag,
triangulation: PolygonExtrudeTriangulation,
}),
];

13
packages/layers/src/polygon/shaders/polygon_extrude_picklight_frag.glsl Normal file
View File

@ -0,0 +1,13 @@
uniform float u_opacity: 1.0;
varying vec4 v_Color;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
varying float v_lightWeight;
void main() {
float opacity = styleMappingMat[0][0];
gl_FragColor = v_Color;
// gl_FragColor.a *= u_opacity;
gl_FragColor.a *= opacity;
gl_FragColor = filterColorWithLight(gl_FragColor, v_lightWeight);
}

71
packages/layers/src/polygon/shaders/polygon_extrude_picklight_vert.glsl Normal file
View File

@ -0,0 +1,71 @@
precision highp float;
#define ambientRatio 0.5
#define diffuseRatio 0.3
#define specularRatio 0.2
attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec3 a_Normal;
attribute float a_Size;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
varying vec4 v_Color;
uniform float u_opacity: 1.0;
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
#pragma include "styleMapping"
#pragma include "styleMappingCalOpacity"
#pragma include "projection"
#pragma include "light"
#pragma include "picking"
varying float v_lightWeight;
void main() {
// cal style mapping - 数据纹理映射部分的计算
styleMappingMat = mat4(
0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
0.0, 0.0, 0.0, 0.0
);
float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行
float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
float columnWidth = 1.0/columnCount; // 列宽
float rowHeight = 1.0/rowCount; // 行高
float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
float id = a_vertexId; // 第n个顶点
float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
// cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ...
// 按顺序从 cell 中取值、若没有则自动往下取值
float textureOffset = 0.0; // 在 cell 中取值的偏移量
vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
styleMappingMat[0][0] = opacityAndOffset.r;
textureOffset = opacityAndOffset.g;
// cal style mapping - 数据纹理映射部分的计算
vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
vec4 project_pos = project_position(pos);
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
// gl_Position = u_Mvp * (vec4(project_pos.xyz * vec3(1.0, 1.0, -1.0), 1.0));
gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
} else {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
}
float lightWeight = calc_lighting(pos);
v_lightWeight = lightWeight;
// v_Color = a_Color;
v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
setPickingColor(a_PickingColor);
}

4
packages/map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.6.3",
"version": "2.6.4",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "^2.6.3",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

8
packages/maps/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.6.3",
"version": "2.6.4",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "^2.6.3",
"@antv/l7-map": "^2.6.3",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-core": "^2.6.4",
"@antv/l7-map": "^2.6.4",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

12
packages/mini/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-mini",
"version": "2.6.3",
"version": "2.6.4",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,11 +25,11 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-core": "^2.6.3",
"@antv/l7-layers": "^2.6.3",
"@antv/l7-maps": "^2.6.3",
"@antv/l7-scene": "^2.6.3",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-core": "^2.6.4",
"@antv/l7-layers": "^2.6.4",
"@antv/l7-maps": "^2.6.4",
"@antv/l7-scene": "^2.6.4",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.6.3",
"version": "2.6.4",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.6.3",
"@antv/l7-core": "^2.6.4",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.16",

14
packages/scene/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.6.3",
"version": "2.6.4",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.6.3",
"@antv/l7-core": "^2.6.3",
"@antv/l7-layers": "^2.6.3",
"@antv/l7-maps": "^2.6.3",
"@antv/l7-renderer": "^2.6.3",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-component": "^2.6.4",
"@antv/l7-core": "^2.6.4",
"@antv/l7-layers": "^2.6.4",
"@antv/l7-maps": "^2.6.4",
"@antv/l7-renderer": "^2.6.4",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

6
packages/source/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.6.3",
"version": "2.6.4",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.6.3",
"@antv/l7-utils": "^2.6.3",
"@antv/l7-core": "^2.6.4",
"@antv/l7-utils": "^2.6.4",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

8
packages/three/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.6.3",
"version": "2.6.4",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.6.3",
"@antv/l7-layers": "^2.6.3",
"@antv/l7-scene": "^2.6.3",
"@antv/l7-core": "^2.6.4",
"@antv/l7-layers": "^2.6.4",
"@antv/l7-scene": "^2.6.4",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"reflect-metadata": "^0.1.13",

2
packages/utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.6.3",
"version": "2.6.4",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

3
stories/Map/components/amap2demo_meshStyleMap.tsx
View File

@ -64,7 +64,8 @@ export default class Amap2demo_meshStyleMap extends React.Component {
// opacity: ['unit_price', (unit_price: any) => {
// return unit_price/100000
// }],
opacity: ['unit_price', [0, 1]],
// opacity: ['unit_price', [0, 1]],
pickLight: true,
})
.active(true);
scene.addLayer(filllayer);

28
stories/Map/components/amapdemo_extrude.tsx
View File

@ -16,7 +16,7 @@ export default class Amapdemo_extrude extends React.Component {
map: new GaodeMap({
center: [121.107846, 30.267069],
pitch: 35.210526315789465,
style: 'normal',
style: 'dark',
zoom: 8,
animateEnable: false,
}),
@ -31,7 +31,7 @@ export default class Amapdemo_extrude extends React.Component {
)
.then((res) => res.json())
.then((data) => {
const pointLayer = new PointLayer({})
const pointLayer = new PointLayer({ depth: false })
.source(data.list, {
parser: {
type: 'json',
@ -39,25 +39,19 @@ export default class Amapdemo_extrude extends React.Component {
y: 'w',
},
})
.shape('cylinder')
.shape('squareColumn') // cylinder triangleColumn hexagonColumn squareColumn
.size('t', function(level) {
return [1, 2, level * 2 + 20];
return [1, 1, level * 2 + 20];
})
.active(true)
.color('t', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6',
])
.color('#0ff')
.style({
opacity: 1.0,
opacity: 0.8,
opacityLinear: {
enable: true, // true - false
dir: 'up', // up - down
},
lightEnable: false,
});
scene.addLayer(pointLayer);
});