feat(layer): add lengendcdg method

demos/01_point_circle.html

@@ -46,13 +46,14 @@
 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 @@
       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,11 +1,10 @@
 varying float v_lineU;
-uniform float u_opacity;
 uniform float u_dashSteps;
 uniform float u_dashSmooth;
 uniform float u_dashDistance;
 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,13 +4,15 @@ 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;
 
 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;
    }