feat(layer): add lengendcdg method

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);
   })

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);
   },

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) {

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;

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() {
 
   }

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);
   }

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 ] }
 
       }

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);
 }

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;
   }

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;
 }

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;
    }

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;
 }

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;
    }

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;
 }

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;
   }

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;
     
 }
 

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;
 }

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);

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;
    }

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
  
 }

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;
      }

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);