diff --git a/lerna.json b/lerna.json index 048dc8bc72..301f2fcb85 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.6.3", + "version": "2.6.4", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 803ecf291d..1aa23e0afc 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -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", diff --git a/packages/core/package.json b/packages/core/package.json index 0903e1aa15..d7545f6c10 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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", diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl index e0be072fb7..ebfb8902b1 100644 --- a/packages/core/src/shaders/picking.frag.glsl +++ b/packages/core/src/shaders/picking.frag.glsl @@ -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)); + } +} + diff --git a/packages/l7/package.json b/packages/l7/package.json index c0e54a266c..bec936f6d6 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -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", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index 29ff6bd50d..2ca8820bc7 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.6.3'; +const version = '2.6.4'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index 46690ab19a..3a1c4cfba3 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -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", diff --git a/packages/layers/src/polygon/models/extrude.ts b/packages/layers/src/polygon/models/extrude.ts index c4e422c8ca..d1d4bb23e3 100644 --- a/packages/layers/src/polygon/models/extrude.ts +++ b/packages/layers/src/polygon/models/extrude.ts @@ -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, }), ]; diff --git a/packages/layers/src/polygon/shaders/polygon_extrude_picklight_frag.glsl b/packages/layers/src/polygon/shaders/polygon_extrude_picklight_frag.glsl new file mode 100644 index 0000000000..fe39f3a409 --- /dev/null +++ b/packages/layers/src/polygon/shaders/polygon_extrude_picklight_frag.glsl @@ -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); +} diff --git a/packages/layers/src/polygon/shaders/polygon_extrude_picklight_vert.glsl b/packages/layers/src/polygon/shaders/polygon_extrude_picklight_vert.glsl new file mode 100644 index 0000000000..cb889f325e --- /dev/null +++ b/packages/layers/src/polygon/shaders/polygon_extrude_picklight_vert.glsl @@ -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); +} diff --git a/packages/map/package.json b/packages/map/package.json index 8b2700d01c..b9501b94a1 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.6.3", + "version": "2.6.4", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -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", diff --git a/packages/maps/package.json b/packages/maps/package.json index ad8dbe9084..dd717ddcc0 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -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", diff --git a/packages/mini/package.json b/packages/mini/package.json index 0376928924..1f5de34aa2 100644 --- a/packages/mini/package.json +++ b/packages/mini/package.json @@ -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", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index dba1b1d4b5..543531f214 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -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", diff --git a/packages/scene/package.json b/packages/scene/package.json index fdd6fc350a..993c1a9c2b 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -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", diff --git a/packages/source/package.json b/packages/source/package.json index 62d3fc33ed..ec02acfed0 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -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", diff --git a/packages/three/package.json b/packages/three/package.json index 62d533dff1..c8126691cd 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -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", diff --git a/packages/utils/package.json b/packages/utils/package.json index c180d13101..bc4507475b 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -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", diff --git a/stories/Map/components/amap2demo_meshStyleMap.tsx b/stories/Map/components/amap2demo_meshStyleMap.tsx index 9a6848eb80..086584cc58 100644 --- a/stories/Map/components/amap2demo_meshStyleMap.tsx +++ b/stories/Map/components/amap2demo_meshStyleMap.tsx @@ -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); diff --git a/stories/Map/components/amapdemo_extrude.tsx b/stories/Map/components/amapdemo_extrude.tsx index b85afa068c..fe9056dbc7 100644 --- a/stories/Map/components/amapdemo_extrude.tsx +++ b/stories/Map/components/amapdemo_extrude.tsx @@ -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); });