fix(src): merge master

demos/01_point_circle.html

@@ -46,17 +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'
-      }
+    .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 => {
@@ -69,7 +66,9 @@ scene.on('loaded', () => {
       opacity: 1.
     })
      .render();
-     
+     console.log(circleLayer);
+     var a = circleLayer.getLegendCfg('type','color');
+     console.log(a);
     circleLayer.on('click',(e)=>{
     console.log(e);
   })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "1.1.3",
+  "version": "1.1.6",
   "description": "Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "build/l7.js",
   "browser": "build/l7.js",

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/renderpass.js

@@ -31,8 +31,6 @@ RenderPass.prototype = {
 	render: function ( renderer, writeBuffer, readBuffer, delta ) {
 
     this.scene.overrideMaterial = this.overrideMaterial;
-    const oldAutoClear = renderer.autoClear;
-    // renderer.autoClear = false;
 		if ( this.clearColor ) {
 
 			this.oldClearColor.copy( renderer.getClearColor() );
@@ -43,7 +41,7 @@ RenderPass.prototype = {
 		}
 
     renderer.render( this.scene, this.camera, readBuffer, this.clear );
-    // if(this.clear)renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+
 
 		if ( this.clearColor ) {
 
@@ -52,7 +50,6 @@ RenderPass.prototype = {
 		}
 
     this.scene.overrideMaterial = null;
-    renderer.autoClear = oldAutoClear;
 
 	}
 

src/core/engine/shaderPass.js

@@ -0,0 +1,74 @@
+// jscs:disable
+/* eslint-disable */
+
+import * as THREE from '../three';
+
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+var ShaderPass = function( shader, textureID ) {
+
+	this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
+
+	if ( shader instanceof THREE.ShaderMaterial ) {
+
+		this.uniforms = shader.uniforms;
+
+		this.material = shader;
+
+	}
+	else if ( shader ) {
+
+		this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+
+		this.material = new THREE.ShaderMaterial( {
+
+			defines: shader.defines || {},
+			uniforms: this.uniforms,
+			vertexShader: shader.vertexShader,
+			fragmentShader: shader.fragmentShader
+
+		} );
+
+	}
+
+	this.renderToScreen = false;
+
+	this.enabled = true;
+	this.needsSwap = true;
+	this.clear = true;
+
+
+	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+	this.scene = new THREE.Scene();
+
+	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.scene.add( this.quad );
+
+};
+
+ShaderPass.prototype = {
+
+	render: function( renderer, writeBuffer, readBuffer, delta ) {
+		if ( this.uniforms[ this.textureID ] ) {
+			this.uniforms[ this.textureID ].value = readBuffer.texture;
+
+		}
+    renderer.autoClear = false;
+		this.quad.material = this.material;
+
+		if ( this.renderToScreen ) {
+			renderer.render( this.scene, this.camera );
+
+		} else {
+
+			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
+
+		}
+		renderer.autoClear = true;
+	}
+
+};
+
+export default ShaderPass;

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: {},
       // 样式配置项
@@ -152,6 +155,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];
@@ -207,11 +220,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) {
@@ -247,10 +262,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;
@@ -277,8 +293,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();
@@ -295,11 +333,16 @@ export default class Layer extends Base {
       this.off('mouseleave', resetHander);
     }
   }
+
   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;
     this._activeIds = featureId;
@@ -315,6 +358,7 @@ export default class Layer extends Base {
       }
     }
   }
+
   _updateAttr(type) {
     const self = this;
     const attrs = this.get('attrs');
@@ -354,6 +398,7 @@ export default class Layer extends Base {
     }
     this.emit('sizeUpdated', this.zoomSizeCache[zoom]);
   }
+
   _mapping() {
     const self = this;
     const attrs = self.get('attrs');
@@ -388,6 +433,7 @@ export default class Layer extends Base {
     }
     this.layerData = mappedData;
   }
+
   // 更新地图映射
   _updateMaping() {
     const self = this;
@@ -416,6 +462,7 @@ export default class Layer extends Base {
       }
     }
   }
+
   // 获取属性映射的值
   _getAttrValues(attr, record) {
     const scales = attr.scales;
@@ -505,9 +552,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 }
@@ -648,6 +697,34 @@ export default class Layer extends Base {
     this.scene.off('zoomchange', this._zoomchangeHander);
     this.destroyed = true;
   }
+
+  /**
+   * 获取图例配置项
+   * @param {*} field 字段
+   * @param {*} type 图例类型 color, size
+   * @return {*} 图例配置项
+   */
+  getLegendCfg(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

@@ -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';
@@ -10,6 +9,7 @@ export default class Source extends Base {
       defs: {},
       parser: {},
       transforms: [],
+      scaledefs: {},
       scales: {},
       options: {}
     };
@@ -18,13 +18,15 @@ 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();
+
   }
   _excuteParser() {
     const parser = this.get('parser');
@@ -55,27 +57,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 defs = this.get('defs');
-    const mapType = this.get('mapType');
-    this.projectFlat = getMap(mapType).project;
-    const scaleController = new Controller.Scale({
-      defs
-    });
-    this.set('scaleController', scaleController);
-  }
-
   _getCoord(geo) {
     if (geo.geometry) {
       // GeoJSON feature

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,7 @@ 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;
             return;
         }
     }
@@ -71,7 +70,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);
 

src/layer/render/heatmap/heatmap.js

@@ -2,7 +2,7 @@ import HeatmapBuffer from '../../../geom/buffer/heatmap/heatmap';
 import { createColorRamp } from '../../../geom/buffer/heatmap/heatmap';
 import { HeatmapIntensityMaterial, HeatmapColorizeMaterial } from '../../../geom/material/heatmapMateial';
 // import Renderpass from '../../../core/engine/renderpass.bak';
-import Renderpass from '../../../core/engine/renderPass';
+import RenderPass from '../../../core/engine/renderpass';
 import ShaderPass from '../../../core/engine/ShaderPass';
 import EffectComposer from '../../../core/engine/EffectComposer';
 import * as THREE from '../../../core/three';
@@ -49,7 +49,7 @@ function heatmapPass(layer) {
     const zoom = layer.scene.getZoom();
     mesh.material.setUniformsValue('u_zoom', zoom);
   };
-  const pass = new Renderpass(scene, camera);
+  const pass = new RenderPass(scene, camera);
   return pass;
 }
 function copyPass(layer) {