From 93a3eb7f428878ecd5ffcf771a7734bbd1011dd9 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 22 Mar 2019 16:10:35 +0800 Subject: [PATCH 1/6] 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); From de559a204f004e37e3e59df1bf68e60ce0a4594a Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 22 Mar 2019 17:09:20 +0800 Subject: [PATCH 2/6] fix(layer) getlegendcfg --- demos/01_point_circle.html | 2 +- package.json | 2 +- src/core/layer.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html index 0e88dff026..ba42711485 100644 --- a/demos/01_point_circle.html +++ b/demos/01_point_circle.html @@ -71,7 +71,7 @@ scene.on('loaded', () => { }) .render(); console.log(circleLayer); - var a = circleLayer.getLendgendCfg('type','color'); + var a = circleLayer.getLegendCfg('type','color'); console.log(a); circleLayer.on('click',(e)=>{ console.log(e); diff --git a/package.json b/package.json index 72b7a2e64d..5a8d96aa9a 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "1.1.3", + "version": "1.1.5", "description": "Large-scale WebGL-powered Geospatial Data Visualization", "main": "build/l7.js", "browser": "build/l7.js", diff --git a/src/core/layer.js b/src/core/layer.js index 92c800ee95..69a95b5a31 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -643,7 +643,7 @@ export default class Layer extends Base { * @param {*} type 图例类型 color, size * @return {*} 图例配置项 */ - getLendgendCfg(field, type = 'color') { + getLegendCfg(field, type = 'color') { // todo heatmap if (this.type === 'heatmap' && this.shapeType === 'heatmap') { return this.get('styleOptions').rampColors; From 972b98ddd9adaaab67fef635e47031d901cbd627 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Sat, 23 Mar 2019 18:30:28 +0800 Subject: [PATCH 3/6] reactor(layer): scaleContorller --- demos/01_point_circle.html | 14 +++++------- src/core/layer.js | 46 +++++++++++++++++++++++++++++++++++++- src/core/source.js | 23 ------------------- 3 files changed, 50 insertions(+), 33 deletions(-) diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html index ba42711485..fef2948b0d 100644 --- a/demos/01_point_circle.html +++ b/demos/01_point_circle.html @@ -48,16 +48,12 @@ scene.on('loaded', () => { const circleLayer = scene.PointLayer({ zIndex: 2, }) - .source(data,{ - scaledefs:{ - value:{ - type:'log' - } - - } + .source(data) + .shape('circle') + .size('value', [ 2, 30]) // default 1 + .scale('value', { + type:'log', }) - .shape('2d:circle') - .size('value', [ 2, 80]) // default 1 //.size('value', [ 10, 300]) // default 1 .active(true) .filter('value', field_8 => { diff --git a/src/core/layer.js b/src/core/layer.js index 69a95b5a31..a8b101b97d 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -5,6 +5,7 @@ import Base from './base'; import * as THREE from './three'; import ColorUtil from '../attr/color-util'; +import Controller from './controller/index'; import source from './source'; import pickingFragmentShader from '../core/engine/picking/picking_frag.glsl'; // import PickingMaterial from '../core/engine/picking/pickingMaterial'; @@ -31,8 +32,10 @@ export default class Layer extends Base { minZoom: 0, maxZoom: 22, rotation: 0, + option: {}, attrOptions: { }, + scaleOptions: {}, scales: {}, attrs: {}, // 样式配置项 @@ -140,6 +143,16 @@ export default class Layer extends Base { this._createAttrOption('size', field, values, Global.size); return this; } + scale(field, cfg) { + const options = this.get('scaleOptions'); + const scaleDefs = options; + if (Util.isObject(field)) { + Util.mix(scaleDefs, field); + } else { + scaleDefs[field] = cfg; + } + return this; + } shape(field, values) { if (field.split(':').length === 2) { this.shapeType = field.split(':')[0]; @@ -195,11 +208,13 @@ export default class Layer extends Base { this.set('styleOptions', styleOptions); return this; } + filter(field, values) { this._needUpdateFilter = true; this._createAttrOption('filter', field, values, true); return this; } + animate(field, cfg) { let animateOptions = this.get('animateOptions'); if (!animateOptions) { @@ -235,10 +250,11 @@ export default class Layer extends Base { return this; } _createScale(field) { + // TODO scale更新 const scales = this.get('scales'); let scale = scales[field]; if (!scale) { - scale = this.layerSource.createScale(field); + scale = this.createScale(field); scales[field] = scale; } return scale; @@ -265,8 +281,30 @@ export default class Layer extends Base { } this._setAttrOptions(attrName, attrCfg); } + _initControllers() { + const scales = this.get('scaleOptions'); + const scaleController = new Controller.Scale({ + defs: { + ...scales + } + }); + this.set('scaleController', scaleController); + } + + createScale(field) { + const data = this.layerSource.data.dataArray; + const scales = this.get('scales'); + let scale = scales[field]; + const scaleController = this.get('scaleController'); + if (!scale) { + scale = scaleController.createScale(field, data); + scales[field] = scale; + } + return scale; + } // 初始化图层 init() { + this._initControllers(); this._initAttrs(); this._scaleByZoom(); this._mapping(); @@ -283,6 +321,7 @@ export default class Layer extends Base { this.off('mouseleave', resetHander); } } + setActive(id, color) { this._activeIds = id; this.layerMesh.material.setUniformsValue('u_activeId', id); @@ -291,6 +330,7 @@ export default class Layer extends Base { } this.layerMesh.material.setUniformsValue('u_activeColor', color); } + _addActiveFeature(e) { const { featureId } = e; this._activeIds = featureId; @@ -306,6 +346,7 @@ export default class Layer extends Base { } } } + _updateAttr(type) { const self = this; const attrs = this.get('attrs'); @@ -345,6 +386,7 @@ export default class Layer extends Base { } this.emit('sizeUpdated', this.zoomSizeCache[zoom]); } + _mapping() { const self = this; const attrs = self.get('attrs'); @@ -379,6 +421,7 @@ export default class Layer extends Base { } this.layerData = mappedData; } + // 更新地图映射 _updateMaping() { const self = this; @@ -407,6 +450,7 @@ export default class Layer extends Base { } } } + // 获取属性映射的值 _getAttrValues(attr, record) { const scales = attr.scales; diff --git a/src/core/source.js b/src/core/source.js index 077c7a5f14..1a3847dfa5 100644 --- a/src/core/source.js +++ b/src/core/source.js @@ -1,5 +1,4 @@ import Base from './base'; -import Controller from './controller/index'; import { getTransform, getParser } from '../source'; import { extent, tranfrormCoord } from '../util/geo'; import { getMap } from '../map/index'; @@ -28,7 +27,6 @@ export default class Source extends Base { // 坐标转换 this._projectCoords(); - this._initControllers(); } _excuteParser() { const parser = this.get('parser'); @@ -55,27 +53,6 @@ export default class Source extends Base { data.coordinates = tranfrormCoord(data.coordinates, this._coorConvert.bind(this)); }); } - createScale(field) { - const data = this.data.dataArray; - const scales = this.get('scales'); - let scale = scales[field]; - const scaleController = this.get('scaleController'); - if (!scale) { - scale = scaleController.createScale(field, data); - scales[field] = scale; - } - return scale; - } - _initControllers() { - const scales = this.get('scaledefs'); - const scaleController = new Controller.Scale({ - defs: { - ...scales - } - }); - this.set('scaleController', scaleController); - } - _getCoord(geo) { if (geo.geometry) { // GeoJSON feature From d50feadf15d0c6df4c33d181865d1c754c941879 Mon Sep 17 00:00:00 2001 From: "mipha.ly" Date: Mon, 25 Mar 2019 14:43:37 +0800 Subject: [PATCH 4/6] add shaderPass & renderPass --- src/core/engine/renderpass.js | 45 ++++++++++++++++++++--------- src/core/engine/shaderPass.js | 26 +++++++++++++++++ src/layer/render/heatmap/heatmap.js | 2 +- 3 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 src/core/engine/shaderPass.js diff --git a/src/core/engine/renderpass.js b/src/core/engine/renderpass.js index f6d3f0c0df..9c1f596614 100644 --- a/src/core/engine/renderpass.js +++ b/src/core/engine/renderpass.js @@ -1,13 +1,14 @@ import * as THREE from '../three'; +import Util from '../../util'; export default class RenderPass { constructor(cfg) { - this.scene; - this.camera = cfg.camera; - this.renderer = cfg.renderer; - this.clearColor = cfg.clear.clearColor; - this.clearAlpha = cfg.clear.clearAlpha; - this.size = cfg.size ? cfg.size : cfg.renderer.getSize(); + const defaultCfg = this._getDefaultCfg(); + Util.assign(this, defaultCfg, cfg); + this._init(); + } + + _getDefaultCfg() { const defaultRenderCfg = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, @@ -15,16 +16,30 @@ export default class RenderPass { stencilBuffer: false, depthBuffer: false }; - this.renderCfg = cfg.renderCfg ? cfg.renderCfg : defaultRenderCfg; - this._init(cfg); + return { + size: null, + renderCfg: defaultRenderCfg, + clearColor: 0x000000, + clearAlpha: 0.0, + renderToScreen: false, + renderTarget: true + }; } _init() { this.scene = new THREE.Scene(); - this.pass = new THREE.WebGLRenderTarget(this.size.width, this.size.height, this.renderCfg); + if (this.renderTarget) { + const size = this.size ? this.size : this.renderer.getSize(); + this.renderTarget = new THREE.WebGLRenderTarget(size.width, size.height, this.renderCfg); + this.texture = this.renderTarget.texture; + } this.originClearColor = this.renderer.getClearColor(); this.originClearAlpha = this.renderer.getClearAlpha(); - this.texture = this.pass.texture; + } + + setSize(width, height) { + this.size = { width, height }; + this.renderTarget && this.renderTarget.setSize(width, height); } add(mesh) { @@ -36,10 +51,14 @@ export default class RenderPass { } render() { - this.renderer.setClearColor(this.clearColor, this.clearAlpha); - this.renderer.render(this.scene, this.camera, this.pass, true); - this.renderer.setRenderTarget(null); + if (this.renderToScreen) { + this.renderer.setRenderTarget(null); + this.renderer.render(this.scene, this.camera); + } else { + this.renderTarget && this.renderer.render(this.scene, this.camera, this.renderTarget, true); + this.renderer.setRenderTarget(null); + } this.renderer.setClearColor(this.originClearColor, this.originClearAlpha); } } diff --git a/src/core/engine/shaderPass.js b/src/core/engine/shaderPass.js new file mode 100644 index 0000000000..31ca2d3baf --- /dev/null +++ b/src/core/engine/shaderPass.js @@ -0,0 +1,26 @@ +import * as THREE from '../three'; +import RenderPass from './renderpass'; + +export default class ShaderPass extends RenderPass { + + constructor(cfg) { + super({ + size: { width: 2, height: 2 }, + ...cfg + }); + } + + _init(cfg) { + super(cfg); + this.camera = new THREE.OrthographicCamera(-this.size.width / 2, this.size.width / 2, this.size.height / 2, -this.size.height / 2, 0, 100); + this.material = new THREE.ShaderMaterial({ + vertexShader: this.vertexShader, + fragmentShader: this.fragmentShader, + uniforms: this.uniforms, + ...this.matCfg + }); + this.quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(this.size.width, this.size.height), this.material); + this.quad.frustumCulled = false; // Avoid getting clipped + this.scene.add(this.quad); + } +} diff --git a/src/layer/render/heatmap/heatmap.js b/src/layer/render/heatmap/heatmap.js index 87a5322b7e..edbfca5251 100644 --- a/src/layer/render/heatmap/heatmap.js +++ b/src/layer/render/heatmap/heatmap.js @@ -78,7 +78,7 @@ export function updateIntensityPass(layer) { mesh.material.uniforms.u_zoom.value = zoom; const passWidth = Math.min(8000, Math.pow(zoom, 2.0) * 250); const passHeight = passWidth * (bbox.height / bbox.width); - layer.intensityPass.pass.setSize(passWidth, passHeight); + layer.intensityPass.setSize(passWidth, passHeight); layer.intensityPass.render(); } From 681ba5feeeedfe8762314406993e2d9ff131f0ea Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 25 Mar 2019 15:09:12 +0800 Subject: [PATCH 5/6] fix(core): delete composer.js --- src/core/engine/composer.js | 150 ------------------------------------ 1 file changed, 150 deletions(-) delete mode 100644 src/core/engine/composer.js diff --git a/src/core/engine/composer.js b/src/core/engine/composer.js deleted file mode 100644 index 5a1e2672ce..0000000000 --- a/src/core/engine/composer.js +++ /dev/null @@ -1,150 +0,0 @@ -// 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; From 99c8faa598ec02149cbaaa8feb042b5b5fa29d4d Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 25 Mar 2019 15:50:31 +0800 Subject: [PATCH 6/6] fix(core): shaderpass --- package.json | 2 +- src/core/engine/shaderPass.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 5a8d96aa9a..35d6d69ea2 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "1.1.5", + "version": "1.1.6", "description": "Large-scale WebGL-powered Geospatial Data Visualization", "main": "build/l7.js", "browser": "build/l7.js", diff --git a/src/core/engine/shaderPass.js b/src/core/engine/shaderPass.js index 31ca2d3baf..bdeb679309 100644 --- a/src/core/engine/shaderPass.js +++ b/src/core/engine/shaderPass.js @@ -11,7 +11,7 @@ export default class ShaderPass extends RenderPass { } _init(cfg) { - super(cfg); + super._init(cfg); this.camera = new THREE.OrthographicCamera(-this.size.width / 2, this.size.width / 2, this.size.height / 2, -this.size.height / 2, 0, 100); this.material = new THREE.ShaderMaterial({ vertexShader: this.vertexShader,