diff --git a/demos/heatmap.html b/demos/heatmap.html
index ed25b8dbed..0a5d3ff327 100644
--- a/demos/heatmap.html
+++ b/demos/heatmap.html
@@ -13,14 +13,14 @@
 </head>
 <body>
 <div id="map"></div>
-<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
+<script src="https://webapi.amap.com/maps?v=1.4.8&key=f28fca5384129d180ad82915156a9baf&plugin=Map3D"></script>
 <script src="./assets/jquery-3.2.1.min.js"></script>
 <script src="./assets/dat.gui.min.js"></script>
 <script src="../build/L7.js"></script>
 <script>
 const scene = new L7.Scene({
   id: 'map',
-  mapStyle: 'dark', // 样式URL
+  mapStyle: 'amap://styles/c9f1d10cae34f8ab05e425462c5a58d7', // 样式URL
   center: [ -155, 60 ],
   pitch: 0,
   zoom: 4.5
@@ -35,11 +35,12 @@ scene.on('loaded', () => {
     .source(data)
     .size('mag', [ 0, 1 ]) // weight映射通道
     .style({
-      intensity: 100,
-      radius: 30,
+      intensity: 10,
+      radius: 10,
+      opacity:1,
       rampColors: {
-        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
-        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+        colors: [ '#ffda45ff', '#fde725ff', '#ffc934ff', '#ffb824ff', '#ffb824ff', '#fa8100ff' ],
+        positions: [ 0, 0.2, 0.4, 0.6, 0.9, 1.0 ]
       }
     })
     .render();
diff --git a/package.json b/package.json
index 35d6d69ea2..94993685ce 100755
--- a/package.json
+++ b/package.json
@@ -111,6 +111,7 @@
     "polyline-normals": "^2.0.2",
     "rbush": "^2.0.2",
     "simple-statistics": "^7.0.1",
+    "supercluster": "^6.0.1",
     "three": "^0.101.1",
     "venn.js": "^0.2.20",
     "viewport-mercator-project": "^5.2.0",
diff --git a/src/core/engine/CopyShader.js b/src/core/engine/CopyShader.js
new file mode 100755
index 0000000000..afed95ae63
--- /dev/null
+++ b/src/core/engine/CopyShader.js
@@ -0,0 +1,53 @@
+// jscs:disable
+/* eslint-disable */
+
+import * as THREE from '../three';
+
+/**
+ * @author alteredq / http://alteredqualia.com/
+ *
+ * Full-screen textured quad shader
+ */
+
+var CopyShader = {
+
+	uniforms: {
+
+		"tDiffuse": { type: "t", value: null },
+		"opacity":  { type: "f", value: 1.0 }
+
+	},
+
+	vertexShader: [
+
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vUv = uv;",
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"uniform float opacity;",
+
+		"uniform sampler2D tDiffuse;",
+
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vec4 texel = texture2D( tDiffuse, vUv );",
+			"gl_FragColor = opacity * texel;",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+export default CopyShader;
diff --git a/src/core/engine/EffectComposer.js b/src/core/engine/EffectComposer.js
new file mode 100755
index 0000000000..23a8d690ed
--- /dev/null
+++ b/src/core/engine/EffectComposer.js
@@ -0,0 +1,21 @@
+import EffectComposer from './composer';
+
+export default function(renderer, container) {
+  const composer = new EffectComposer(renderer);
+
+  const updateSize = function() {
+    // TODO: Re-enable this when perf issues can be solved
+    //
+    // Rendering double the resolution of the screen can be really slow
+    // var pixelRatio = window.devicePixelRatio;
+    const pixelRatio = 1;
+
+    composer.setSize(container.clientWidth * pixelRatio, container.clientHeight * pixelRatio);
+  };
+
+  window.addEventListener('resize', updateSize, false);
+  updateSize();
+
+  return composer;
+}
+
diff --git a/src/core/engine/MaskPass.js b/src/core/engine/MaskPass.js
new file mode 100755
index 0000000000..b4f965bbb7
--- /dev/null
+++ b/src/core/engine/MaskPass.js
@@ -0,0 +1,94 @@
+// jscs:disable
+/* eslint-disable */
+
+import * as THREE from '../three';
+
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+var MaskPass = function ( scene, camera ) {
+
+	this.scene = scene;
+	this.camera = camera;
+
+	this.enabled = true;
+	this.clear = true;
+	this.needsSwap = false;
+
+	this.inverse = false;
+
+};
+
+MaskPass.prototype = {
+
+	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+		var context = renderer.context;
+
+		// don't update color or depth
+
+		context.colorMask( false, false, false, false );
+		context.depthMask( false );
+
+		// set up stencil
+
+		var writeValue, clearValue;
+
+		if ( this.inverse ) {
+
+			writeValue = 0;
+			clearValue = 1;
+
+		} else {
+
+			writeValue = 1;
+			clearValue = 0;
+
+		}
+
+		context.enable( context.STENCIL_TEST );
+		context.stencilOp( context.REPLACE, context.REPLACE, context.REPLACE );
+		context.stencilFunc( context.ALWAYS, writeValue, 0xffffffff );
+		context.clearStencil( clearValue );
+
+		// draw into the stencil buffer
+
+		renderer.render( this.scene, this.camera, readBuffer, this.clear );
+		renderer.render( this.scene, this.camera, writeBuffer, this.clear );
+
+		// re-enable update of color and depth
+
+		context.colorMask( true, true, true, true );
+		context.depthMask( true );
+
+		// only render where stencil is set to 1
+
+		context.stencilFunc( context.EQUAL, 1, 0xffffffff );  // draw if == 1
+		context.stencilOp( context.KEEP, context.KEEP, context.KEEP );
+
+	}
+
+};
+
+
+var ClearMaskPass = function () {
+
+	this.enabled = true;
+
+};
+
+ClearMaskPass.prototype = {
+
+	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+		var context = renderer.context;
+
+		context.disable( context.STENCIL_TEST );
+
+	}
+
+};
+
+export default MaskPass;
+export {ClearMaskPass as ClearMaskPass};
diff --git a/src/core/engine/ShaderPass.js b/src/core/engine/ShaderPass.js
new file mode 100755
index 0000000000..6e91880e81
--- /dev/null
+++ b/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;
diff --git a/src/core/engine/composer.js b/src/core/engine/composer.js
new file mode 100755
index 0000000000..0f40b99806
--- /dev/null
+++ b/src/core/engine/composer.js
@@ -0,0 +1,149 @@
+// jscs:disable
+/* eslint-disable */
+
+import * as 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;
+
+	},
+	visible:true,
+	type:'composer',
+	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;
diff --git a/src/core/engine/index.js b/src/core/engine/index.js
index a12f2e06f6..a08bc77d76 100644
--- a/src/core/engine/index.js
+++ b/src/core/engine/index.js
@@ -16,14 +16,16 @@ export default class Engine extends EventEmitter {
     this._scene.add(this.world);
     this._picking = Picking(this._world, this._renderer, this._camera, this._scene);
     this.clock = new THREE.Clock();
+    this.composerLayers = [];
   }
   _initPostProcessing() {
-
+    this.composerLayers.forEach(layer => {
+      layer.visible && layer.render();
+    });
   }
   update() {
-
     this._renderer.render(this._scene, this._camera);
-
+    this._initPostProcessing();
   }
   destroy() {
 
diff --git a/src/core/engine/renderpass.js b/src/core/engine/renderpass.js
index 9c1f596614..5a0dfc384c 100644
--- a/src/core/engine/renderpass.js
+++ b/src/core/engine/renderpass.js
@@ -1,64 +1,58 @@
+// jscs:disable
+/* eslint-disable */
+
 import * as THREE from '../three';
-import Util from '../../util';
 
-export default class RenderPass {
-  constructor(cfg) {
-    const defaultCfg = this._getDefaultCfg();
-    Util.assign(this, defaultCfg, cfg);
-    this._init();
-  }
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
 
-  _getDefaultCfg() {
-    const defaultRenderCfg = {
-      minFilter: THREE.NearestFilter,
-      magFilter: THREE.NearestFilter,
-      format: THREE.RGBAFormat,
-      stencilBuffer: false,
-      depthBuffer: false
-    };
-    return {
-      size: null,
-      renderCfg: defaultRenderCfg,
-      clearColor: 0x000000,
-      clearAlpha: 0.0,
-      renderToScreen: false,
-      renderTarget: true
-    };
-  }
+var RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
 
-  _init() {
-    this.scene = new THREE.Scene();
-    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.scene = scene;
+	this.camera = camera;
 
-  setSize(width, height) {
-    this.size = { width, height };
-    this.renderTarget && this.renderTarget.setSize(width, height);
-  }
+	this.overrideMaterial = overrideMaterial;
 
-  add(mesh) {
-    this.scene.add(mesh);
-  }
+	this.clearColor = clearColor;
+	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
 
-  remove(mesh) {
-    this.scene.remove(mesh);
-  }
+	this.oldClearColor = new THREE.Color();
+	this.oldClearAlpha = 1;
 
-  render() {
-    this.renderer.setClearColor(this.clearColor, this.clearAlpha);
-    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);
-  }
-}
+	this.enabled = true;
+	this.clear = false;
+	this.needsSwap = false;
+
+};
+
+RenderPass.prototype = {
+
+	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+    this.scene.overrideMaterial = this.overrideMaterial;
+		if ( this.clearColor ) {
+
+			this.oldClearColor.copy( renderer.getClearColor() );
+			this.oldClearAlpha = renderer.getClearAlpha();
+
+			renderer.setClearColor( this.clearColor, this.clearAlpha );
+
+		}
+
+    renderer.render( this.scene, this.camera, readBuffer, this.clear );
+
+
+		if ( this.clearColor ) {
+
+			renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
+
+		}
+
+    this.scene.overrideMaterial = null;
+
+	}
+
+};
+
+export default RenderPass;
diff --git a/src/core/engine/shaderPass.js b/src/core/engine/shaderPass.js
index bdeb679309..6e91880e81 100644
--- a/src/core/engine/shaderPass.js
+++ b/src/core/engine/shaderPass.js
@@ -1,26 +1,74 @@
+// jscs:disable
+/* eslint-disable */
+
 import * as THREE from '../three';
-import RenderPass from './renderpass';
 
-export default class ShaderPass extends RenderPass {
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
 
-  constructor(cfg) {
-    super({
-      size: { width: 2, height: 2 },
-      ...cfg
-    });
-  }
+var ShaderPass = function( shader, textureID ) {
 
-  _init(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,
-      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);
-  }
-}
+	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;
diff --git a/src/core/layer.js b/src/core/layer.js
index a8b101b97d..4852e0afb7 100644
--- a/src/core/layer.js
+++ b/src/core/layer.js
@@ -82,8 +82,14 @@ export default class Layer extends Base {
     * @param {*} type mesh类型是区别是填充还是边线
    */
   add(object, type = 'fill') {
-    type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
+     // composer合图层绘制
+    if (object.type === 'composer') {
+      this._object3D = object;
+      this.scene._engine.composerLayers.push(object);
+      return;
+    }
 
+    type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
     this._visibleWithZoom();
     this._zoomchangeHander = this._visibleWithZoom.bind(this);
     this.scene.on('zoomchange', this._zoomchangeHander);
@@ -108,6 +114,12 @@ export default class Layer extends Base {
     }
   }
   remove(object) {
+    if (object.type === 'composer') {
+      this.scene._engine.composerLayers = this.scene._engine.composerLayers.filter(layer => {
+        return (layer !== object);
+      });
+      return;
+    }
     this._object3D.remove(object);
   }
   _getUniqueId() {
@@ -650,6 +662,11 @@ export default class Layer extends Base {
    */
   destroy() {
     this.removeAllListeners();
+    if (this._object3D.type === 'composer') {
+      this.remove(this._object3D);
+
+      return;
+    }
     if (this._object3D && this._object3D.children) {
       let child;
       for (let i = 0; i < this._object3D.children.length; i++) {
diff --git a/src/core/source.js b/src/core/source.js
index 1a3847dfa5..305e535178 100644
--- a/src/core/source.js
+++ b/src/core/source.js
@@ -47,6 +47,10 @@ export default class Source extends Base {
     });
     this._transforms = trans;
   }
+  transform(option) {
+    const data = getTransform(option.type)(this.data, option);
+    Object.assign(this.data, data);
+  }
   _projectCoords() {
     this.data.dataArray.forEach(data => {
       // data.coordinates = this._coordProject(data.coordinates);
diff --git a/src/core/three.js b/src/core/three.js
index 07bc1261c0..63c37b9ac8 100644
--- a/src/core/three.js
+++ b/src/core/three.js
@@ -16,6 +16,7 @@ export { OrthographicCamera } from 'three/src/cameras/OrthographicCamera.js';
 export { BufferGeometry } from 'three/src/core/BufferGeometry.js';
 export { PlaneBufferGeometry } from 'three/src/geometries/PlaneGeometry.js';
 export { Raycaster } from 'three/src/core/Raycaster.js';
+export { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js';
 export { Matrix4 } from 'three/src/math/Matrix4.js';
 export { Matrix3 } from 'three/src/math/Matrix3.js';
 export { Line } from 'three/src/objects/Line.js';
diff --git a/src/geom/material/heatmapMateial.js b/src/geom/material/heatmapMateial.js
index 5c0aa893a5..315d19c7b9 100644
--- a/src/geom/material/heatmapMateial.js
+++ b/src/geom/material/heatmapMateial.js
@@ -13,6 +13,7 @@ export function HeatmapIntensityMaterial(opt) {
     vertexShader: vs,
     fragmentShader: fs,
     transparent: true,
+    depthTest: false,
     blending: THREE.AdditiveBlending
   });
   return material;
@@ -23,7 +24,8 @@ export function HeatmapColorizeMaterial(opt) {
   const material = new Material({
     uniforms: {
       u_texture: { value: opt.texture },
-      u_colorRamp: { value: opt.colorRamp }
+      u_colorRamp: { value: opt.colorRamp },
+      u_opacity: { value: opt.opacity }
     },
     vertexShader: vs,
     fragmentShader: fs,
diff --git a/src/geom/shader/heatmap_colorize_frag.glsl b/src/geom/shader/heatmap_colorize_frag.glsl
index cf531398db..4cd75f67ed 100644
--- a/src/geom/shader/heatmap_colorize_frag.glsl
+++ b/src/geom/shader/heatmap_colorize_frag.glsl
@@ -1,11 +1,12 @@
 uniform sampler2D u_texture;
 uniform sampler2D u_colorRamp;
+  uniform float u_opacity;
 varying vec2 v_uv;
 
 void main(){
     float intensity = texture2D(u_texture,v_uv).r;
     vec4 color = texture2D(u_colorRamp,vec2(0.5,1.0-intensity));
     gl_FragColor = color;
-    gl_FragColor.a = color.a * smoothstep(0.,0.05,intensity);
+    gl_FragColor.a = color.a * smoothstep(0.,0.05,intensity) * u_opacity;
     
 }
\ No newline at end of file
diff --git a/src/geom/shader/point_frag.glsl b/src/geom/shader/point_frag.glsl
index bfdeaadf5c..f14cbd46c2 100644
--- a/src/geom/shader/point_frag.glsl
+++ b/src/geom/shader/point_frag.glsl
@@ -54,7 +54,6 @@ void main() {
             return;
         }else if(dis2center>ri){
             gl_FragColor= u_stroke;
-            gl_FragColor.a = * u_stroke;
             return;
         }
     }
diff --git a/src/layer/heatmapLayer.js b/src/layer/heatmapLayer.js
index 0a6931bfb2..ae8e34b1df 100644
--- a/src/layer/heatmapLayer.js
+++ b/src/layer/heatmapLayer.js
@@ -2,7 +2,7 @@ import Layer from '../core/layer';
 import gridBuffer from '../geom/buffer/heatmap/grid';
 import DrawGrid from './render/heatmap/gird';
 import DrawHexagon from './render/heatmap/hexagon';
-import { drawHeatmap, updateIntensityPass } from './render/heatmap/heatmap';
+import { drawHeatmap } from './render/heatmap/heatmap';
 import hexagonBuffer from '../geom/buffer/heatmap/hexagon';
 
 export default class HeatMapLayer extends Layer {
@@ -56,10 +56,10 @@ export default class HeatMapLayer extends Layer {
     this.add(girdMesh);
   }
 
-  afterRender() {
-    if (this.shapeType !== 'grid' && this.shapeType !== 'hexagon') {
-      updateIntensityPass(this);
-    }
-  }
+  // afterRender() {
+  //   if (this.shapeType !== 'grid' && this.shapeType !== 'hexagon') {
+  //     updateIntensityPass(this);
+  //   }
+  // }
 
 }
diff --git a/src/layer/render/heatmap/heatmap.js b/src/layer/render/heatmap/heatmap.js
index edbfca5251..732cd89df5 100644
--- a/src/layer/render/heatmap/heatmap.js
+++ b/src/layer/render/heatmap/heatmap.js
@@ -1,21 +1,32 @@
 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';
+// import Renderpass from '../../../core/engine/renderpass.bak';
+import RenderPass from '../../../core/engine/renderpass';
+import ShaderPass from '../../../core/engine/ShaderPass';
+import EffectComposer from '../../../core/engine/EffectComposer';
 import * as THREE from '../../../core/three';
 
 export function drawHeatmap(layer) {
-  const bbox = calBoundingBox(layer.layerData);
-  layer.dataBbox = bbox;
+
   const colors = layer.get('styleOptions').rampColors;
   layer.colorRamp = createColorRamp(colors);
-  createIntensityPass(layer, bbox);
-  createColorizePass(layer, bbox);
+  const heatmap = new heatmapPass(layer);
+  const copy = new copyPass(layer);
+  copy.renderToScreen = true;
+  const composer = new EffectComposer(layer.scene._engine._renderer, layer.scene._container);
+  composer.addPass(heatmap);
+  composer.addPass(copy);
+  layer.add(composer);
+
 }
 
-function createIntensityPass(layer, bbox) {
+
+function heatmapPass(layer) {
+  const scene = new THREE.Scene();
   const style = layer.get('styleOptions');
   const data = layer.layerData;
+  const camera = layer.scene._engine._camera;
     // get attributes data
   const buffer = new HeatmapBuffer({
     data
@@ -27,107 +38,26 @@ function createIntensityPass(layer, bbox) {
   geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
   geometry.addAttribute('a_dir', new THREE.Float32BufferAttribute(attributes.dirs, 2));
   geometry.addAttribute('a_weight', new THREE.Float32BufferAttribute(attributes.weights, 1));
-    // set material
   const material = new HeatmapIntensityMaterial({
     intensity: style.intensity,
     radius: style.radius,
     zoom: layer.scene.getZoom()
   });
   const mesh = new THREE.Mesh(geometry, material);
-  // set camera
-  const passOrth = new THREE.OrthographicCamera(bbox.width / -2, bbox.width / 2, bbox.height / 2, bbox.height / -2, 1, 10000);
-  passOrth.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 1000);
-  // renderpass
-  const renderer = layer.scene._engine._renderer;
-  // get extension for bilinear texture interpolation:https://threejs.org/docs/#api/en/textures/DataTexture
-  /* const gl = renderer.domElement.getContext('webgl') ||
-    renderer.domElement.getContext('experimental-webgl');
-  gl.getExtension('OES_texture_float_linear');*/
-  const renderpass = new Renderpass({
-    renderer,
-    camera: passOrth,
-    size: {
-      width: 2000,
-      height: 2000 * (bbox.height / bbox.width)
-    },
-    clear: {
-      clearColor: 0x000000,
-      clearAlpha: 0.0
-    },
-    renderCfg: {
-      wrapS: THREE.ClampToEdgeWrapping,
-      wrapT: THREE.ClampToEdgeWrapping,
-      minFilter: THREE.LinearFilter,
-      magFilter: THREE.LinearFilter,
-      format: THREE.RGBAFormat,
-      stencilBuffer: false,
-      depthBuffer: false
-    }
-  });
-  renderpass.add(mesh);
-  renderpass.render();
-  layer.intensityPass = renderpass;
-  layer.intensityMesh = mesh;
-  updateIntensityPass(layer);
-}
-
-export function updateIntensityPass(layer) {
-  const mesh = layer.intensityMesh;
-  const zoom = layer.scene.getZoom();
-  const bbox = layer.dataBbox;
-  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.setSize(passWidth, passHeight);
-  layer.intensityPass.render();
-}
-
-function createColorizePass(layer, bbox) {
-    // create plane geometry
-  const geometery = new THREE.PlaneBufferGeometry(bbox.width, bbox.height);
-  const material = new HeatmapColorizeMaterial({
-    texture: layer.intensityPass.texture,
-    colorRamp: layer.colorRamp
-  });
-  const mesh = new THREE.Mesh(geometery, material);
-  mesh.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 0.0);
-  layer.add(mesh);
-}
-
-function calBoundingBox(data) {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (let i = 0; i < data.length; i++) {
-    const p = data[i].coordinates;
-    if (p[0] < minX) {
-      minX = p[0];
-    } else if (p[0] > maxX) {
-      maxX = p[0];
-    }
-    if (p[1] < minY) {
-      minY = p[1];
-    } else if (p[1] > maxY) {
-      maxY = p[1];
-    }
-  }
-
-  minX -= ((maxX - minX) * 0.5);
-  maxX += ((maxX - minX) * 0.5);
-  minY -= ((maxY - minY) * 0.5);
-  maxY += ((maxY - minY) * 0.5);
-
-  const width = maxX - minX;
-  const height = maxY - minY;
-
-
-  return {
-    minX,
-    maxX,
-    minY,
-    maxY,
-    width,
-    height
+  scene.add(mesh);
+  scene.onBeforeRender = () => { // 每次渲染前改变状态
+    const zoom = layer.scene.getZoom();
+    mesh.material.setUniformsValue('u_zoom', zoom);
   };
+  const pass = new RenderPass(scene, camera);
+  return pass;
+}
+function copyPass(layer) {
+  const style = layer.get('styleOptions');
+  const material = new HeatmapColorizeMaterial({
+    colorRamp: layer.colorRamp,
+    opacity: style.opacity
+  });
+  const copyPass = new ShaderPass(material, 'u_texture');
+  return copyPass;
 }
diff --git a/src/map/AMap.js b/src/map/AMap.js
index 0d4daff491..29374ad778 100644
--- a/src/map/AMap.js
+++ b/src/map/AMap.js
@@ -55,8 +55,6 @@ export default class GaodeMap extends Base {
   asyncCamera(engine) {
     this._engine = engine;
     const camera = engine._camera;
-    const scene = engine._scene;
-    const pickScene = engine._picking._pickingScene;
     this.map.on('camerachange', e => {
       const mapCamera = e.camera;
       let { fov, near, far, height, pitch, rotation, aspect } = mapCamera;
@@ -70,15 +68,16 @@ export default class GaodeMap extends Base {
       camera.position.z = height * Math.cos(pitch);
       camera.position.x = height * Math.sin(pitch) * Math.sin(rotation);
       camera.position.y = -height * Math.sin(pitch) * Math.cos(rotation);
-
       camera.up.x = -Math.cos(pitch) * Math.sin(rotation);
       camera.up.y = Math.cos(pitch) * Math.cos(rotation);
       camera.up.z = Math.sin(pitch);
       camera.lookAt(0, 0, 0);
-      scene.position.x = -e.camera.position.x;
-      scene.position.y = e.camera.position.y;
-      pickScene.position.x = -e.camera.position.x;
-      pickScene.position.y = e.camera.position.y;
+      camera.position.x += e.camera.position.x;
+      camera.position.y += -e.camera.position.y;
+      // scene.position.x = -e.camera.position.x;
+      // scene.position.y = e.camera.position.y;
+      // pickScene.position.x = -e.camera.position.x;
+      // pickScene.position.y = e.camera.position.y;
     });
   }
 
@@ -129,6 +128,10 @@ export default class GaodeMap extends Base {
     scene.setZoom = zoom => {
       return map.setZoom(zoom);
     };
+    scene.setZoomAndCenter = (zoom, center) => {
+      const lnglat = new AMap.LngLat(center[0], center[1]);
+      return map.setZoomAndCenter(zoom, lnglat);
+    };
     scene.setBounds = extent => {
       return map.setBounds(new AMap.Bounds([ extent[0], extent[1] ], [ extent[2], extent[3] ]));
     };
diff --git a/src/source/transform/cluster.js b/src/source/transform/cluster.js
new file mode 100644
index 0000000000..645c7abcc0
--- /dev/null
+++ b/src/source/transform/cluster.js
@@ -0,0 +1,52 @@
+import Supercluster from 'supercluster';
+export function cluster(data, option) {
+  const { radius = 40, maxZoom = 16, minZoom = 0, field, zoom = 2 } = option;
+  if (data.pointIndex) {
+    const clusterPoint = data.pointIndex.getClusters(data.extent, zoom);
+    data.dataArray = formatData(clusterPoint);
+    return data;
+  }
+  const pointIndex = new Supercluster({
+    radius,
+    minZoom,
+    maxZoom,
+    map: props => ({ sum: props[field] }),
+    reduce: (accumulated, props) => { accumulated.sum += props.sum; }
+  });
+  const geojson = {
+    type: 'FeatureCollection'
+  };
+  geojson.features = data.dataArray.map(item => {
+    return {
+      type: 'Feature',
+      properties: {
+        [field]: item[field]
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: item.coordinates
+      }
+    };
+  });
+  pointIndex.load(geojson.features);
+  const clusterPoint = pointIndex.getClusters(data.extent, zoom);
+  const resultData = clusterPoint.map((point, index) => {
+    return {
+      coordinates: point.geometry.coordinates,
+      _id: index + 1,
+      ...point.properties
+    };
+  });
+  data.dataArray = resultData;
+  data.pointIndex = pointIndex;
+  return data;
+}
+function formatData(clusterPoint) {
+  return clusterPoint.map((point, index) => {
+    return {
+      coordinates: point.geometry.coordinates,
+      _id: index + 1,
+      ...point.properties
+    };
+  });
+}
diff --git a/test/unit/source/transfrom/cluster-spec.js b/test/unit/source/transfrom/cluster-spec.js
new file mode 100644
index 0000000000..f46ed7c23a
--- /dev/null
+++ b/test/unit/source/transfrom/cluster-spec.js
@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import { pointData } from '../../../asset/data/point';
+import { cluster } from '../../../../src/source/transform/cluster';
+describe('hexagon  Test', function() {
+
+  it('pointToCuster', function() {
+    const dataArray = pointData.map(item => {
+      const lng = 1e-6 * (250 * item.grid_x + 125),
+        lat = 1e-6 * (250 * item.grid_y + 125);
+      return {
+        v: item.count * 1,
+        coordinates: [ lng, lat ]
+      };
+    });
+
+    const data = {
+      dataArray,
+      extent: [ -180, -85, 180, 85 ]
+    };
+    const grid = cluster(data, { radius: 40, field: 'v', zoom: 13 });
+    expect(grid.dataArray.length).eql(26);
+  });
+});
