From 93a3eb7f428878ecd5ffcf771a7734bbd1011dd9 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 22 Mar 2019 16:10:35 +0800 Subject: [PATCH] feat(layer): add lengendcdg method --- demos/01_point_circle.html | 15 ++- src/attr/color-util.js | 3 + src/attr/size.js | 7 +- src/core/engine/composer.js | 150 +++++++++++++++++++++++ src/core/layer.js | 35 +++++- src/core/source.js | 14 ++- src/geom/material/pointLineMaterial.js | 2 +- src/geom/shader/dashline_frag.glsl | 3 +- src/geom/shader/dashline_vert.glsl | 2 + src/geom/shader/grid_frag.glsl | 5 +- src/geom/shader/grid_vert.glsl | 2 + src/geom/shader/hexagon_frag.glsl | 1 - src/geom/shader/hexagon_vert.glsl | 2 + src/geom/shader/line_frag.glsl | 2 - src/geom/shader/line_vert.glsl | 2 + src/geom/shader/point_frag.glsl | 7 +- src/geom/shader/point_meshLine_frag.glsl | 11 +- src/geom/shader/point_meshLine_vert.glsl | 12 +- src/geom/shader/point_vert.glsl | 1 + src/geom/shader/polygon_frag.glsl | 5 +- src/geom/shader/polygon_vert.glsl | 2 + src/geom/shader/raster_vert.glsl | 1 + 22 files changed, 242 insertions(+), 42 deletions(-) create mode 100644 src/core/engine/composer.js diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html index 7121179c29..0e88dff026 100644 --- a/demos/01_point_circle.html +++ b/demos/01_point_circle.html @@ -46,13 +46,14 @@ window.scene = scene; scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', data => { const circleLayer = scene.PointLayer({ - zIndex: 2 + zIndex: 2, }) .source(data,{ - scale:{ - min:0, - max:1000, - type:'linear' + scaledefs:{ + value:{ + type:'log' + } + } }) .shape('2d:circle') @@ -69,7 +70,9 @@ scene.on('loaded', () => { opacity: 1. }) .render(); - + console.log(circleLayer); + var a = circleLayer.getLendgendCfg('type','color'); + console.log(a); circleLayer.on('click',(e)=>{ console.log(e); }) diff --git a/src/attr/color-util.js b/src/attr/color-util.js index e5f5aa75d1..2fb2187adf 100644 --- a/src/attr/color-util.js +++ b/src/attr/color-util.js @@ -84,6 +84,9 @@ const ColorUtil = { const rgba = this.toRGB(str); return rgba.map(v => v / 255); }, + colorArray2RGBA(arr) { + return `rgba(${arr[0] * 255},${arr[1] * 255},${arr[2] * 255},${arr[3]})`; + }, color2RGBA(str) { return this.color2Arr(str); }, diff --git a/src/attr/size.js b/src/attr/size.js index ec2d9430d4..b7d944a72e 100644 --- a/src/attr/size.js +++ b/src/attr/size.js @@ -42,10 +42,11 @@ class Size extends Base { _scaling(scale, v) { if (scale.type === 'identity') { return v; - } else if (scale.type === 'linear') { - const percent = scale.scale(v); - return this.getLinearValue(percent); } + const percent = scale.scale(v); + return this.getLinearValue(percent); + + // else if (scale.type === 'linear') { } getLinearValue(percent) { diff --git a/src/core/engine/composer.js b/src/core/engine/composer.js new file mode 100644 index 0000000000..5a1e2672ce --- /dev/null +++ b/src/core/engine/composer.js @@ -0,0 +1,150 @@ +// jscs:disable +/* eslint-disable */ + +import THREE from '../three'; +import CopyShader from './CopyShader'; +import ShaderPass from './ShaderPass'; +import MaskPass, {ClearMaskPass} from './MaskPass'; + +/** + * @author alteredq / http://alteredqualia.com/ + */ + +var EffectComposer = function ( renderer, renderTarget ) { + + this.renderer = renderer; + + if ( renderTarget === undefined ) { + + var pixelRatio = renderer.getPixelRatio(); + + var width = Math.floor( renderer.context.canvas.width / pixelRatio ) || 1; + var height = Math.floor( renderer.context.canvas.height / pixelRatio ) || 1; + var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false }; + + renderTarget = new THREE.WebGLRenderTarget( width, height, parameters ); + + } + + this.renderTarget1 = renderTarget; + this.renderTarget2 = renderTarget.clone(); + + this.writeBuffer = this.renderTarget1; + this.readBuffer = this.renderTarget2; + + this.passes = []; + + if ( CopyShader === undefined ) + console.error( "EffectComposer relies on THREE.CopyShader" ); + + this.copyPass = new ShaderPass( CopyShader ); + +}; + +EffectComposer.prototype = { + + swapBuffers: function() { + + var tmp = this.readBuffer; + this.readBuffer = this.writeBuffer; + this.writeBuffer = tmp; + + }, + + addPass: function ( pass ) { + + this.passes.push( pass ); + + }, + + insertPass: function ( pass, index ) { + + this.passes.splice( index, 0, pass ); + + }, + + render: function ( delta ) { + + this.writeBuffer = this.renderTarget1; + this.readBuffer = this.renderTarget2; + + var maskActive = false; + + var pass, i, il = this.passes.length; + + for ( i = 0; i < il; i ++ ) { + + pass = this.passes[ i ]; + + if ( ! pass.enabled ) continue; + + pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive ); + + if ( pass.needsSwap ) { + + if ( maskActive ) { + + var context = this.renderer.context; + + context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff ); + + this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta ); + + context.stencilFunc( context.EQUAL, 1, 0xffffffff ); + + } + + this.swapBuffers(); + + } + + if ( pass instanceof MaskPass ) { + + maskActive = true; + + } else if ( pass instanceof ClearMaskPass ) { + + maskActive = false; + + } + + } + + }, + + reset: function ( renderTarget ) { + + if ( renderTarget === undefined ) { + + renderTarget = this.renderTarget1.clone(); + + var pixelRatio = this.renderer.getPixelRatio(); + + renderTarget.setSize( + Math.floor( this.renderer.context.canvas.width / pixelRatio ), + Math.floor( this.renderer.context.canvas.height / pixelRatio ) + ); + + } + + this.renderTarget1.dispose(); + this.renderTarget1 = renderTarget; + this.renderTarget2.dispose(); + this.renderTarget2 = renderTarget.clone(); + + this.writeBuffer = this.renderTarget1; + this.readBuffer = this.renderTarget2; + + }, + + setSize: function ( width, height ) { + + this.renderTarget1.setSize( width, height ); + this.renderTarget2.setSize( width, height ); + + } + +}; + +export default EffectComposer; +THREE.EffectComposer = EffectComposer; diff --git a/src/core/layer.js b/src/core/layer.js index 9d7e3fea00..92c800ee95 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -286,7 +286,10 @@ export default class Layer extends Base { setActive(id, color) { this._activeIds = id; this.layerMesh.material.setUniformsValue('u_activeId', id); - this.layerMesh.material.setUniformsValue('u_activeColor', ColorUtil.color2RGBA(color)); + if (!Array.isArray(color)) { + color = ColorUtil.color2RGBA(color); + } + this.layerMesh.material.setUniformsValue('u_activeColor', color); } _addActiveFeature(e) { const { featureId } = e; @@ -493,9 +496,11 @@ export default class Layer extends Base { } const feature = this.layerSource.getSelectFeature(featureId); const lnglat = this.scene.containerToLngLat(point2d); + const style = this.layerData[featureId - 1]; const target = { featureId, feature, + style, pixel: point2d, type, lnglat: { lng: lnglat.lng, lat: lnglat.lat } @@ -631,6 +636,34 @@ export default class Layer extends Base { this.scene.off('zoomchange', this._zoomchangeHander); this.destroyed = true; } + + /** + * 获取图例配置项 + * @param {*} field 字段 + * @param {*} type 图例类型 color, size + * @return {*} 图例配置项 + */ + getLendgendCfg(field, type = 'color') { + // todo heatmap + if (this.type === 'heatmap' && this.shapeType === 'heatmap') { + return this.get('styleOptions').rampColors; + } + const scales = this.get('scales'); + const scale = scales[field]; + const colorAttrs = this.get('attrs')[type]; + const lengendCfg = {}; + if (scale) { + const ticks = scale.ticks; + lengendCfg.value = ticks; + lengendCfg.type = scale.type; + const values = ticks.map(value => { + const v = this._getAttrValues(colorAttrs, { [field]: value }); + return type === 'color' ? ColorUtil.colorArray2RGBA(v) : v; + }); + lengendCfg[type] = values; + } + return lengendCfg; + } preRender() { } diff --git a/src/core/source.js b/src/core/source.js index ce6432c766..077c7a5f14 100644 --- a/src/core/source.js +++ b/src/core/source.js @@ -10,6 +10,7 @@ export default class Source extends Base { defs: {}, parser: {}, transforms: [], + scaledefs: {}, scales: {}, options: {} }; @@ -18,13 +19,16 @@ export default class Source extends Base { super(cfg); const transform = this.get('transforms'); this._transforms = transform || []; - this._initControllers(); + const mapType = this.get('mapType'); + this.projectFlat = getMap(mapType).project; // 数据解析 this._excuteParser(); // 数据转换 统计，聚合，分类 this._executeTrans(); // 坐标转换 this._projectCoords(); + + this._initControllers(); } _excuteParser() { const parser = this.get('parser'); @@ -63,11 +67,11 @@ export default class Source extends Base { return scale; } _initControllers() { - const defs = this.get('defs'); - const mapType = this.get('mapType'); - this.projectFlat = getMap(mapType).project; + const scales = this.get('scaledefs'); const scaleController = new Controller.Scale({ - defs + defs: { + ...scales + } }); this.set('scaleController', scaleController); } diff --git a/src/geom/material/pointLineMaterial.js b/src/geom/material/pointLineMaterial.js index c84c5911f5..ca6242e0f2 100644 --- a/src/geom/material/pointLineMaterial.js +++ b/src/geom/material/pointLineMaterial.js @@ -8,7 +8,7 @@ export default class PointLineMaterial extends Material { u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] }, u_strokeWidth: { value: 1.0 }, u_zoom: { value: 10 }, - u_activeId: { value: 0 }, + u_activeId: { value: -1 }, u_activeColor: { value: [ 1.0, 0, 0, 1.0 ] } } diff --git a/src/geom/shader/dashline_frag.glsl b/src/geom/shader/dashline_frag.glsl index f7d56d8da9..1cc8f95356 100644 --- a/src/geom/shader/dashline_frag.glsl +++ b/src/geom/shader/dashline_frag.glsl @@ -1,5 +1,4 @@ varying float v_lineU; -uniform float u_opacity; uniform float u_dashSteps; uniform float u_dashSmooth; uniform float u_dashDistance; @@ -7,5 +6,5 @@ varying vec4 v_color; void main() { float lineUMod = mod(v_lineU, 1.0/ u_dashSteps) * u_dashSteps; float dash = smoothstep(u_dashDistance, u_dashDistance+u_dashSmooth, length(lineUMod-0.5)); - gl_FragColor = vec4(v_color.xyz * vec3(dash), v_color.a*u_opacity * dash); + gl_FragColor = vec4(v_color.xyz * vec3(dash), v_color.a * dash); } \ No newline at end of file diff --git a/src/geom/shader/dashline_vert.glsl b/src/geom/shader/dashline_vert.glsl index 5ef4ec1c4c..d5492bd848 100644 --- a/src/geom/shader/dashline_vert.glsl +++ b/src/geom/shader/dashline_vert.glsl @@ -3,6 +3,7 @@ attribute float a_miter; attribute vec4 a_color; attribute float a_size; uniform float u_zoom; +uniform float u_opacity; varying vec4 v_color; attribute float a_distance; varying float v_lineU; @@ -13,6 +14,7 @@ void main() { mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter); v_color = a_color; + v_color.a *= u_opacity; if(pickingId == u_activeId) { v_color = u_activeColor; } diff --git a/src/geom/shader/grid_frag.glsl b/src/geom/shader/grid_frag.glsl index 042dde511e..6fd41421b4 100644 --- a/src/geom/shader/grid_frag.glsl +++ b/src/geom/shader/grid_frag.glsl @@ -1,8 +1,5 @@ precision highp float; - uniform float u_opacity; varying vec4 v_color; void main() { - vec4 color = v_color; - gl_FragColor = color; - gl_FragColor.a =color.a*u_opacity; + gl_FragColor = v_color; } \ No newline at end of file diff --git a/src/geom/shader/grid_vert.glsl b/src/geom/shader/grid_vert.glsl index f61af9e26c..81ae913d6a 100644 --- a/src/geom/shader/grid_vert.glsl +++ b/src/geom/shader/grid_vert.glsl @@ -4,6 +4,7 @@ attribute vec4 a_color; uniform float u_xOffset; uniform float u_yOffset; uniform float u_coverage; +uniform float u_opacity; uniform float u_activeId; uniform vec4 u_activeColor; varying vec4 v_color; @@ -11,6 +12,7 @@ varying vec4 v_color; void main() { mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; v_color = a_color; + v_color.a *= u_opacity; if(pickingId == u_activeId) { v_color = u_activeColor; } diff --git a/src/geom/shader/hexagon_frag.glsl b/src/geom/shader/hexagon_frag.glsl index 042dde511e..77c7d120d0 100644 --- a/src/geom/shader/hexagon_frag.glsl +++ b/src/geom/shader/hexagon_frag.glsl @@ -4,5 +4,4 @@ void main() { vec4 color = v_color; gl_FragColor = color; - gl_FragColor.a =color.a*u_opacity; } \ No newline at end of file diff --git a/src/geom/shader/hexagon_vert.glsl b/src/geom/shader/hexagon_vert.glsl index cafb6fb9c8..1bd95bbbdf 100644 --- a/src/geom/shader/hexagon_vert.glsl +++ b/src/geom/shader/hexagon_vert.glsl @@ -3,6 +3,7 @@ attribute vec2 miter; attribute vec4 a_color; uniform float u_radius; uniform float u_coverage; +uniform float u_opacity; uniform float u_angle; uniform float u_activeId; uniform vec4 u_activeColor; @@ -12,6 +13,7 @@ void main() { mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle)); v_color = a_color; + v_color.a *= u_opacity; if(pickingId == u_activeId) { v_color = u_activeColor; } diff --git a/src/geom/shader/line_frag.glsl b/src/geom/shader/line_frag.glsl index 38c6ef4140..c1478d4b29 100644 --- a/src/geom/shader/line_frag.glsl +++ b/src/geom/shader/line_frag.glsl @@ -1,5 +1,4 @@ precision highp float; - uniform float u_opacity; varying vec4 v_color; varying float vTime; void main() { @@ -12,5 +11,4 @@ color.a= color.a * vTime * 1.5; #endif gl_FragColor = color; - gl_FragColor.a =color.a*u_opacity; } \ No newline at end of file diff --git a/src/geom/shader/line_vert.glsl b/src/geom/shader/line_vert.glsl index 1cd5d8bb35..e214d46a61 100644 --- a/src/geom/shader/line_vert.glsl +++ b/src/geom/shader/line_vert.glsl @@ -2,6 +2,7 @@ precision highp float; attribute vec4 a_color; uniform float currentTime; uniform float u_time; +uniform float u_opacity; varying float vTime; varying vec4 v_color; uniform float u_activeId; @@ -9,6 +10,7 @@ uniform vec4 u_activeColor; void main() { mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; v_color = a_color; + v_color.a *= u_opacity; if(pickingId == u_activeId) { v_color = u_activeColor; } diff --git a/src/geom/shader/point_frag.glsl b/src/geom/shader/point_frag.glsl index e32aa8b9b1..bfdeaadf5c 100644 --- a/src/geom/shader/point_frag.glsl +++ b/src/geom/shader/point_frag.glsl @@ -6,7 +6,6 @@ precision highp float; uniform float u_strokeWidth; uniform vec4 u_stroke; -uniform float u_opacity; uniform sampler2D u_texture; varying vec2 v_rs; @@ -29,7 +28,7 @@ void main() { #endif if(v_color.a == 0.) discard; - vec4 pcolor = v_color * u_opacity; + vec4 pcolor = v_color; float ro = v_rs.x; float ri = v_rs.y; float d = 0.0; @@ -54,7 +53,8 @@ void main() { gl_FragColor = vec4(u_stroke.xyz,u_stroke.a*(ro- dis2center)); return; }else if(dis2center>ri){ - gl_FragColor= u_stroke * alpha ; + gl_FragColor= u_stroke; + gl_FragColor.a = * u_stroke; return; } } @@ -71,7 +71,6 @@ void main() { } else{ gl_FragColor= pcolor; } - gl_FragColor *= u_opacity; } diff --git a/src/geom/shader/point_meshLine_frag.glsl b/src/geom/shader/point_meshLine_frag.glsl index 14b914e832..dce0d13b09 100644 --- a/src/geom/shader/point_meshLine_frag.glsl +++ b/src/geom/shader/point_meshLine_frag.glsl @@ -1,9 +1,6 @@ precision highp float; -uniform float u_strokeOpacity; -uniform vec4 u_stroke; -uniform float u_activeId; -uniform vec4 u_activeColor; varying float v_pickingId; +varying vec4 v_color; void main() { if(v_pickingId < -0.1) { discard; @@ -13,9 +10,5 @@ void main() { discard; } #endif - gl_FragColor = u_stroke; - gl_FragColor.a = u_stroke.a * u_strokeOpacity ; - if(v_pickingId == u_activeId) { - gl_FragColor = u_activeColor; - } + gl_FragColor = v_color; } diff --git a/src/geom/shader/point_meshLine_vert.glsl b/src/geom/shader/point_meshLine_vert.glsl index f77e360fc1..3493808811 100644 --- a/src/geom/shader/point_meshLine_vert.glsl +++ b/src/geom/shader/point_meshLine_vert.glsl @@ -3,10 +3,15 @@ attribute float a_miter; attribute vec3 a_size; attribute vec3 a_shape; uniform float u_strokeWidth; +uniform float u_strokeOpacity; +uniform vec4 u_activeColor; +uniform float u_activeId; +uniform vec4 u_stroke; uniform float u_zoom; uniform float u_time; varying float vTime; varying float v_pickingId; +varying vec4 v_color; void main() { mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; float scale = pow(2.0,(20.0 - u_zoom)); @@ -14,7 +19,12 @@ void main() { #ifdef ANIMATE vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.; #endif - v_pickingId = pickingId; +v_color = u_stroke; +v_color.a *= u_strokeOpacity; +if(v_pickingId == u_activeId) { + v_color = u_activeColor; +} + v_pickingId = pickingId; //vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * pow(2.0,20.0-u_zoom) / 2.0 * a_miter); vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter); gl_Position = matModelViewProjection * vec4(pointPos, 1.0); diff --git a/src/geom/shader/point_vert.glsl b/src/geom/shader/point_vert.glsl index 78449a174a..d394e556fc 100644 --- a/src/geom/shader/point_vert.glsl +++ b/src/geom/shader/point_vert.glsl @@ -15,6 +15,7 @@ uniform vec4 u_activeColor; void main() { mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; v_color = a_color; + v_color.a *= u_opacity; if(pickingId == u_activeId) { v_color = u_activeColor; } diff --git a/src/geom/shader/polygon_frag.glsl b/src/geom/shader/polygon_frag.glsl index 9179c7e9d2..bad3913f6b 100644 --- a/src/geom/shader/polygon_frag.glsl +++ b/src/geom/shader/polygon_frag.glsl @@ -1,5 +1,4 @@ precision highp float; -uniform float u_opacity; uniform sampler2D u_texture; uniform vec4 u_baseColor; uniform vec4 u_brightColor; @@ -58,7 +57,7 @@ void main() { #ifdef ANIMATE if(v_texCoord.x < 0.) { //顶部颜色 vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth); - gl_FragColor = vec4( foggedColor, v_color.w * u_opacity); + gl_FragColor = vec4( foggedColor, v_color.w); }else { // 侧面颜色 vec2 st = v_texCoord; vec2 UvScale = v_texCoord; @@ -107,7 +106,7 @@ void main() { gl_FragColor = vec4(foggedColor,1.0); } #else - gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity); + gl_FragColor = vec4(v_color.xyz , v_color.w); #endif } \ No newline at end of file diff --git a/src/geom/shader/polygon_vert.glsl b/src/geom/shader/polygon_vert.glsl index 20e410405a..36474bde79 100644 --- a/src/geom/shader/polygon_vert.glsl +++ b/src/geom/shader/polygon_vert.glsl @@ -7,6 +7,7 @@ attribute vec2 faceUv; attribute vec3 a_shape; attribute vec3 a_size; uniform float u_zoom; +uniform float u_opacity; varying vec2 v_texCoord; varying vec4 v_color; varying float v_lightWeight; @@ -25,6 +26,7 @@ void main() { v_texCoord = faceUv; if(normal == vec3(0.,0.,1.)){ v_color = a_color; + v_color.a *= u_opacity; if(pickingId == u_activeId) { v_color = u_activeColor; } diff --git a/src/geom/shader/raster_vert.glsl b/src/geom/shader/raster_vert.glsl index ca918e4c40..7568cdbf80 100644 --- a/src/geom/shader/raster_vert.glsl +++ b/src/geom/shader/raster_vert.glsl @@ -18,6 +18,7 @@ void main() { fract(16.0 * (1.0 - value1)), floor(16.0 * (1.0 - value1)) / 16.0); v_color = texture2D(u_colorTexture,ramp_pos); + v_color.a *= u_opacity; vec2 range = u_extent.zw - u_extent.xy; gl_Position = matModelViewProjection * vec4(position.xy, value*100., 1.0);