From 1bd12f15605b651073bd64a31e53d0c7428e34df Mon Sep 17 00:00:00 2001
From: thinkinggis <lzx199065@gmail.com>
Date: Wed, 7 Aug 2019 10:44:29 +0800
Subject: [PATCH] feat(control): add scale, layer.zoom control

---
 demos/01_circle.html                    |  12 +-
 demos/images/layers-2x.png              | Bin 0 -> 1259 bytes
 demos/images/layers.png                 | Bin 0 -> 696 bytes
 demos/vector2.html                      |  25 ++-
 package.json                            |   2 +
 rollup.config.js                        |   9 +
 src/component/control/Scale.js          |  93 ++++++++
 src/component/control/attribution.js    |  75 +++++++
 src/component/control/base.js           |  52 +++++
 src/component/control/index.js          |  13 ++
 src/component/control/layer.js          | 273 ++++++++++++++++++++++++
 src/component/control/zoom.js           |  74 +++++++
 src/component/css/l7.css                | 243 +++++++++++++++++++++
 src/component/images/layers-2x.png      | Bin 0 -> 1259 bytes
 src/component/images/layers.png         | Bin 0 -> 696 bytes
 src/component/popup.js                  | 127 +++++++++++
 src/core/controller/control.js          |  40 ++++
 src/core/controller/event.js            |  36 +++-
 src/core/engine/picking/picking.js      |   8 +-
 src/core/engine/renderer.js             |   2 +-
 src/core/layer.js                       |  40 ++--
 src/core/scene.js                       |  33 ++-
 src/core/style.js                       |  10 +-
 src/global.js                           |   4 +-
 src/index.js                            |   7 +-
 src/layer/tile/vector_tile_mesh.js      |   7 +
 src/map/AMap.js                         |   6 +-
 src/source/parser/vector.js             |  16 +-
 src/source/source_cache.js              |  69 ++++--
 src/source/vector_tile_worker_source.js |   6 +-
 src/util/bkdr-hash.js                   |   1 +
 src/util/dom.js                         |  80 +++++++
 src/util/event.js                       |   6 +
 src/util/util.js                        |   9 +
 src/worker/actor.js                     |   7 +-
 src/worker/workerTile.js                |  10 +-
 36 files changed, 1325 insertions(+), 70 deletions(-)
 create mode 100644 demos/images/layers-2x.png
 create mode 100644 demos/images/layers.png
 create mode 100644 src/component/control/Scale.js
 create mode 100644 src/component/control/attribution.js
 create mode 100644 src/component/control/base.js
 create mode 100644 src/component/control/index.js
 create mode 100644 src/component/control/layer.js
 create mode 100644 src/component/control/zoom.js
 create mode 100644 src/component/css/l7.css
 create mode 100644 src/component/images/layers-2x.png
 create mode 100644 src/component/images/layers.png
 create mode 100644 src/component/popup.js
 create mode 100644 src/core/controller/control.js
 create mode 100644 src/util/dom.js
 create mode 100644 src/util/event.js
 create mode 100644 src/util/util.js

diff --git a/demos/01_circle.html b/demos/01_circle.html
index c427571ff5..a8fa80d791 100644
--- a/demos/01_circle.html
+++ b/demos/01_circle.html
@@ -13,6 +13,7 @@
 <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
 <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
 <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
+<link rel=stylesheet type=text/css href='../build/l7.css'>
 <script src="../build/l7.js"></script>
  <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
@@ -28,7 +29,7 @@
   window.scene = scene;
   scene.on('loaded', function() {
     $.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', function(data) {
-      scene.PointLayer({
+     const layer =  scene.PointLayer({
           zIndex: 2
         }).source(data, {
           scale: {
@@ -44,7 +45,16 @@
           strokeWidth: 1,
           opacity: 0.9
         }).render();
+        layer.on('click',(e) => {
+           const { lnglat, feature } = e;
+         const popup = new L7.Popup()
+          .setLnglat([lnglat.lng, lnglat.lat])
+          .setHTML('hello').addTo(scene);
+        }) 
+
     });
+  
+  
   });
 </script>
 </body>
diff --git a/demos/images/layers-2x.png b/demos/images/layers-2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..200c333dca9652ac4cba004d609e5af4eee168c1
GIT binary patch
literal 1259
zcmV<H1Qh#;P)<h;3K|Lk000e1NJLTq001-q001-y1ONa4Z*kLL000ECNkl<ZcmZPg
zPbWx*mP*!2RytTT!**9cp!TwWZ5xfFc#fHw1joz_VokJ(v4Z0}(cwSkj+x7$awTV&
zbx?4b>FhCYNy;#0irRPomHqW|G1C*;4?@4#E?jH>?v@U%cy?3dQAc-DchXVErpOh~
z-jbon+tNbnl6hoEb;)TVk+%hTDDi_G%i3*RZ&15!$Fjr^f;Ke&A@|?=`2&+{zr+3a
z{D*=t<eFKYAeM_NPjJng)==y#IrII(dy&iU$eADe%2bA!maN}&yS!E|-JbOu6E?Xa
z+jr{Pu4GwVm!o-S^Uf}Z^jxyK)@DMOl$MQAeY8l_mg~FVg%`dHZMjkh6Sgr*Mwo<_
zTARG0Gt=+$Vpx7(XQtd)YZD0*h7vy9zPw#NV{57P-SEOF-;I{qZmGZBwtacRhq582
zMfqo+Qx@Ww$A8)jx%{WwJ@V8(r}7UIW*l<PDoZr^z*3tIisho34tA!>(`AXyS%X7N
z%a#RZw6vD^t_rnM`L4E>m=U&R!A-&}nZIi$BOPvkhrCuUe@BN~-lRD)f44;J%TwgE
zcze8<q<Z9p<tY*SECjl?r1(IpgqA5uB<w)yl480>u!PQ_<Al)GG*6dE%j6{x)|Hgz
z32i0N@z5C-SmxbJ^LZ1|jpf-QEt8T!Sb27IBY~Ue&%1Z%=l$>NR7?o(NylLXVTfDO
zxs5=@|GsYEsNo4M#nT%N!UE(?dnS)t2+{ELYAFp*3=iF=|EQnTp`#vlSXuGVraYo?
z+RCzXo6h3qA8{KG?S4nE(lM+;Eb4nT3XV;7gcAxUi5m)`k5tv}cPy()8ZR3TLW3I-
zAS^}cq-IJvL7a4RgR!yk@~RT%$lA7{L5ES*hyx)M4(yxI$Ub(4f)K|^v1>zvwQY!_
zIrWw8q9GS^!Dp~}+?mbnB6jDF8mVlbQ!jFKDY;w=7;XO{9bq7>LXGK24WA`;rL)_Z
z)&j}pbV<t5oNJ?BQyEtFeexL+!VdG%2oO8UF#7YD6OeGEKCZeld!t}Q9BM~}JP-*p
z&?5S|A&#4(kO|eJzBFP;{XspcLPaiOL5PGR{B8uoL|P2epl}0mQ!Y2ME~=#7$wTVf
zYK4knZNxl*1d%W|D|$@NJZ@1(YLEK0Wudy`jNu>(;6gY;VMhbxgvn`X;6x}VUEE-7
z%)7j-%t8S=ZL3yc)HbXDAqJZvBTPoiW_A-+a8m3_Z?v{DN7Tnr#O_VUMT0UBt$;p`
zDh6JbGHN8JJ*JN%y2%msb97@_S>9!%Egwk;?PEkU9ntz&3uR}%Fj5d$JHQbQb3}a{
zSzFT^#n<G)5|MiG--8_<h&g3%*bxG^8aV0`g-{oN0QEWTVki>=VInPpcAS}CNxj?_
zVscANk5Cfz(51EI1pz};AWWb|kgbYNb4wCEGUn3+eMUMV?1-{=I4TlmLJMot@rd07
zZuo2hk1ccu{YmGkcYdWAVdk{Z4Nm?^cTD&}jGm+Q1SYIXMwmG*oO*83&#>l%nbR`G
zhh=lZ%xIb7kU3#;TBbfECrnC9P=-XpL|TG2BoZdj61*XiFbW8?1Z_wp%#;>${SUIy
V$8qr;L*)Pf002ovPDHLkV1hYLS~36t

literal 0
HcmV?d00001

diff --git a/demos/images/layers.png b/demos/images/layers.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a72e5784b2b456eac5d7670738db80697af3377
GIT binary patch
literal 696
zcmV;p0!RIcP)<h;3K|Lk000e1NJLTq000^Q000^Y1ONa414D#G0007iNkl<Zcma)6
zGk7Ec6y81C-Jv{JDbK1-UD{KXI&Wf|lRd_^t=Yq@;w)oN&bBe{-a1aczj^Q1cqBLv
ze55|o`LucH;(Z<d9sb4pmK<W&^H(SCy&_E9<FB&omk_Ex*&9s(2YREcPc9hB-PH;&
z$T%G@?zKYht~o<-tK_bux9!H4nZlqj_%hSJkKUHM#;uwWs&LVVIlG_m<3Go6499;y
z;hn5Ltir_+O4*@ydy;6Eo|jC#pnwAtFP@h;$`aLXDLW|CaAA;joK)(hVeB7Sr{mwG
z;bp4bGsrevkodK>*@&l2<6p=!C&s@#ZL+%BQvF&b?w6S%wp=I>1QHj7AP5C)IWy#b
znXXB;g;j=$a-tW89K%FbDceHVq&unY*Wx3L#=EGWH=rjqnp|4c_Ulec!ql3#G-5ZF
zVlbBA@XP=)C8U&+Lrc)S4O5%1$&{(;7R^K(CSnvSr$v;+B$8q&7Bf|h$#PARo1^%M
zf1H^nG-EiXVXr07OH(*8R)xa|F<PCljjoA1%9%K<ATi0_hj|!+)r1h5tS8k*YB;$#
z<c7F&k|0&>D;lXUlg_-%)~ZGsL2cX0NXaAzN2q%jqLRR6ruVk8`Jb7n#{`T;o@`F=
z#3YcynIR^s83UNF3D!f5m#Mg)NJ24&Qfrqb&_z=yF;=B)#9Iq7u-@^O!(mW{D;qvr
zPc)gVb%aowtS8m@ElL4A9G>w#ffQ~q{i&_i)*6f^)Sz|C?C>zb4Uo?H<-&Hz@a?J;
z$ml@zGygWofb9$ZBj6aLjpLhsT2AzjOu=-*u_gSCU<G)3^yO*`OrA#YgcVEv@4+6Z
ehAP-IxB4G8DWV6`-5rhq0000<MNUMnLSTaQ*iP;M

literal 0
HcmV?d00001

diff --git a/demos/vector2.html b/demos/vector2.html
index 3bf7301838..81f103e6c4 100644
--- a/demos/vector2.html
+++ b/demos/vector2.html
@@ -30,10 +30,21 @@ const scene = new L7.Scene({
   pitch: 0,
   hash:false,
   zoom: 3,
+  maxZoom:7,
 
 });
+
+
 // 高德数据服务  https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=608d75903d29ad471362f8c58c550daf
 scene.on('loaded', () => {
+  const ZoomControl = new L7.Control.Zoom();
+  ZoomControl.addTo(scene);
+  const scaleControl = new L7.Control.Scale();
+  scaleControl.addTo(scene);
+
+  const attributeCtr = new L7.Control.Attribution();
+  attributeCtr.addTo(scene);
+
   scene.addTileSource('test',{
      url:'http://127.0.0.1:8080/{z}/{x}/{y}.pbf',
      type:'vector',
@@ -52,13 +63,19 @@ scene.on('loaded', () => {
     }
    })
   .shape('fill')
-  .active(false)
+  .active(true)
   //.color('adcode_cit',['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'])
    .color('#f46d43')
   .style({
     opacity:1.0
   })
  .render();
+ layer.on('click',(e) => {
+           const { lnglat, feature } = e;
+         const popup = new L7.Popup()
+          .setLnglat([lnglat.lng, lnglat.lat])
+          .setHTML(feature.properties.id).addTo(scene);
+  }) 
  const layer2 = scene.PolygonLayer({
     zIndex:10,
   }) 
@@ -96,7 +113,11 @@ scene.on('loaded', () => {
     opacity:1.0
   })
   .render();
-
+  const overlayers = {
+    "行政区划": layer,
+    "标注": layer3,
+  };
+ const layerContr =  new L7.Control.Layers({overlayers}).addTo(scene);
  
 });
 
diff --git a/package.json b/package.json
index 0371a240ee..e771fbe2a9 100755
--- a/package.json
+++ b/package.json
@@ -51,6 +51,8 @@
     "rollup": "^1.16.2",
     "rollup-plugin-buble": "^0.19.6",
     "rollup-plugin-commonjs": "^9.2.1",
+    "rollup-plugin-css-porter": "^1.0.2",
+    "rollup-plugin-image": "^1.0.2",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-resolve": "^4.0.1",
diff --git a/rollup.config.js b/rollup.config.js
index 0228bf2578..ab9ebd61de 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,11 +1,15 @@
 import fs from 'fs';
 // import sourcemaps from 'rollup-plugin-sourcemaps';
+// import postcss from 'postcss';
 import json from 'rollup-plugin-json';
 import buble from 'rollup-plugin-buble';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import builtins from 'rollup-plugin-node-builtins';
 import { createFilter } from 'rollup-pluginutils';
+// import imageInliner from 'postcss-image-inliner';
+import postcss from 'rollup-plugin-postcss';
+import url from 'postcss-url';
 import { terser } from 'rollup-plugin-terser';
 const { BUILD, MINIFY } = process.env;
 const minified = MINIFY === 'true';
@@ -39,6 +43,10 @@ const config = [
       ),
       minified ? terser() : false,
       json(),
+      // css({ raw: './build/l7.css' }),
+      postcss({
+        plugins: [ url({ url: 'inline' }) ]
+      }),
       buble({
         transforms: { dangerousForOf: true },
         objectAssign: 'Object.assign'
@@ -68,6 +76,7 @@ const config = [
     },
     treeshake: false,
     plugins: [
+      // css()
     ]
   }
 ];
diff --git a/src/component/control/Scale.js b/src/component/control/Scale.js
new file mode 100644
index 0000000000..1e999799c8
--- /dev/null
+++ b/src/component/control/Scale.js
@@ -0,0 +1,93 @@
+import Control from './base';
+import * as DOM from '../../util/dom';
+import { toLngLat } from '@antv/geo-coord/lib/geo/geometry/lng-lat';
+import { bindAll } from '../../util/event';
+export default class Scale extends Control {
+  constructor(cfg) {
+    super({
+      position: 'bottomleft',
+      maxWidth: 100,
+      metric: true,
+      updateWhenIdle: false,
+      imperial: false,
+      ...cfg
+    });
+    bindAll([ '_update' ], this);
+  }
+  onAdd(scene) {
+    const className = 'l7-control-scale';
+    const container = DOM.create('div', className);
+    this._addScales(className + '-line', container);
+
+    scene.on(this.get('updateWhenIdle') ? 'moveend' : 'mapmove', this._update);
+    this._update();
+
+    return container;
+  }
+  onRemove(scene) {
+    scene.off(this.get('updateWhenIdle') ? 'moveend' : 'mapmove', this._update);
+  }
+  _addScales(className, container) {
+
+    if (this.get('metric')) {
+      this._mScale = DOM.create('div', className, container);
+    }
+    if (this.get('imperial')) {
+      this._iScale = DOM.create('div', className, container);
+    }
+  }
+  _update() {
+    const scene = this._scene;
+
+    const y = this._scene.getSize().height / 2;
+
+    const p1 = scene.containerToLngLat({ x: 0, y });
+    const p2 = scene.containerToLngLat({ x: this.get('maxWidth'), y });
+    const maxMeters = scene.crs.distance(toLngLat(p1.lng, p1.lat), toLngLat(p2.lng, p2.lat));
+    this._updateScales(maxMeters);
+  }
+  _updateScales(maxMeters) {
+    if (this.get('metric') && maxMeters) {
+      this._updateMetric(maxMeters);
+    }
+    if (this.get('imperial') && maxMeters) {
+      this._updateImperial(maxMeters);
+    }
+  }
+  _updateMetric(maxMeters) {
+    const meters = this._getRoundNum(maxMeters),
+      label = meters < 1000 ? meters + ' m' : (meters / 1000) + ' km';
+    this._updateScale(this._mScale, label, meters / maxMeters);
+  }
+  _updateImperial(maxMeters) {
+    const maxFeet = maxMeters * 3.2808399;
+    let maxMiles,
+      miles,
+      feet;
+
+    if (maxFeet > 5280) {
+      maxMiles = maxFeet / 5280;
+      miles = this._getRoundNum(maxMiles);
+      this._updateScale(this._iScale, miles + ' mi', miles / maxMiles);
+
+    } else {
+      feet = this._getRoundNum(maxFeet);
+      this._updateScale(this._iScale, feet + ' ft', feet / maxFeet);
+    }
+  }
+  _updateScale(scale, text, ratio) {
+    scale.style.width = Math.round(this.get('maxWidth') * ratio) + 'px';
+    scale.innerHTML = text;
+  }
+  _getRoundNum(num) {
+    const pow10 = Math.pow(10, (Math.floor(num) + '').length - 1);
+    let d = num / pow10;
+
+    d = d >= 10 ? 10 :
+      d >= 5 ? 5 :
+        d >= 3 ? 3 :
+          d >= 2 ? 2 : 1;
+
+    return pow10 * d;
+  }
+}
diff --git a/src/component/control/attribution.js b/src/component/control/attribution.js
new file mode 100644
index 0000000000..8a24e5485c
--- /dev/null
+++ b/src/component/control/attribution.js
@@ -0,0 +1,75 @@
+import Control from './base';
+import * as DOM from '../../util/dom';
+export default class Attribution extends Control {
+  constructor(cfg) {
+    super({
+      position: 'bottomright',
+      prefix: '<a href="https://antv.alipay.com/zh-cn/l7/1.x/index.html" title="地理空间数据可视化引擎">AntV L7</a>',
+      ...cfg
+    });
+    this._attributions = {};
+  }
+  onAdd(scene) {
+    scene.attributionControl = this;
+    this._container = DOM.create('div', 'l7-control-attribution');
+    const layers = scene.getLayers();
+    for (const i in layers) {
+      if (layers[i].get('attribution')) {
+        this.addAttribution(layers[i].get('attribution'));
+      }
+    }
+
+    this._update();
+
+    return this._container;
+  }
+
+  setPrefix(prefix) {
+    this.set('prefix', prefix);
+    this._update();
+    return this;
+  }
+  addAttribution(text) {
+    if (!text) { return this; }
+
+    if (!this._attributions[text]) {
+      this._attributions[text] = 0;
+    }
+    this._attributions[text]++;
+
+    this._update();
+
+    return this;
+  }
+
+  removeAttribution(text) {
+    if (!text) { return this; }
+
+    if (this._attributions[text]) {
+      this._attributions[text]--;
+      this._update();
+    }
+
+    return this;
+  }
+  _update() {
+    if (!this._scene) { return; }
+
+    const attribs = [];
+
+    for (const i in this._attributions) {
+      if (this._attributions[i]) {
+        attribs.push(i);
+      }
+    }
+    const prefixAndAttribs = [];
+    if (this.get('prefix')) {
+      prefixAndAttribs.push(this.get('prefix'));
+    }
+    if (attribs.length) {
+      prefixAndAttribs.push(attribs.join(', '));
+    }
+    this._container.innerHTML = prefixAndAttribs.join(' | ');
+  }
+
+}
diff --git a/src/component/control/base.js b/src/component/control/base.js
new file mode 100644
index 0000000000..f51072eeba
--- /dev/null
+++ b/src/component/control/base.js
@@ -0,0 +1,52 @@
+import Base from '../../core/base';
+import * as DOM from '../../util/dom';
+export default class Control extends Base {
+  constructor(cfg) {
+    super({
+      position: 'topright',
+      ...cfg
+    });
+  }
+  setPosition(position) {
+    const scene = this._scene;
+    if (scene) {
+      scene.removeControl(this);
+    }
+    this.set('position', position);
+    if (scene) {
+      scene.addControl(this);
+    }
+    return this;
+  }
+  getContainer() {
+    return this._container;
+  }
+  addTo(scene) {
+    this.remove();
+    this._scene = scene;
+    const container = this._container = this.onAdd(scene);
+    const pos = this.get('position');
+    const corner = scene.get('controlController')._controlCorners[pos];
+    DOM.addClass(container, 'l7-control');
+
+    if (pos.indexOf('bottom') !== -1) {
+      corner.insertBefore(container, corner.firstChild);
+    } else {
+      corner.appendChild(container);
+    }
+    return this;
+  }
+  remove() {
+    if (!this._scene) {
+      return this;
+    }
+    DOM.remove(this._container);
+  }
+  _refocusOnMap(e) {
+    // if map exists and event is not a keyboard event
+    if (this._scene && e && e.screenX > 0 && e.screenY > 0) {
+      this._scene.getContainer().focus();
+    }
+  }
+
+}
diff --git a/src/component/control/index.js b/src/component/control/index.js
new file mode 100644
index 0000000000..841c4f9117
--- /dev/null
+++ b/src/component/control/index.js
@@ -0,0 +1,13 @@
+import Control from './base';
+import Zoom from './zoom';
+import Scale from './Scale';
+import Attribution from './attribution';
+import Layers from './layer';
+
+export {
+  Control,
+  Zoom,
+  Scale,
+  Attribution,
+  Layers
+};
diff --git a/src/component/control/layer.js b/src/component/control/layer.js
new file mode 100644
index 0000000000..d948d80237
--- /dev/null
+++ b/src/component/control/layer.js
@@ -0,0 +1,273 @@
+import Control from './base';
+import * as DOM from '../../util/dom';
+import { bindAll } from '../../util/event';
+export default class Layers extends Control {
+  constructor(cfg) {
+    super({
+      collapsed: true,
+      position: 'topright',
+      autoZIndex: true,
+      hideSingleBase: false,
+      sortLayers: false,
+      ...cfg
+    });
+    this._layerControlInputs = [];
+    this._layers = [];
+    this._lastZIndex = 0;
+    this._handlingClick = false;
+    const baseLayers = this.get('baseLayers');
+    const overlays = this.get('overlayers');
+    for (const i in baseLayers) {
+      this._addLayer(baseLayers[i], i);
+    }
+
+    for (const i in overlays) {
+      this._addLayer(overlays[i], i, true);
+    }
+    bindAll([ '_checkDisabledLayers', '_onLayerChange', 'collapse', 'extend', 'expand', '_onInputClick' ], this);
+  }
+
+  onAdd(scene) {
+    this._initLayout();
+    this._update();
+    this._scene = scene;
+    scene.on('zoomend', this._checkDisabledLayers, this);
+
+    for (let i = 0; i < this._layers.length; i++) {
+      this._layers[i].layer.on('remove', this._onLayerChange);
+      this._layers[i].layer.on('add', this._onLayerChange);
+    }
+
+    return this._container;
+  }
+  addTo(scene) {
+    super.addTo(scene);
+  }
+
+  addVisualLayer(layer, name) {
+    this._addLayer(layer, name, true);
+    return (this._scene) ? this._update() : this;
+  }
+
+  _initLayout() {
+    const className = 'l7-control-layers',
+      container = this._container = DOM.create('div', className),
+      collapsed = this.get('collapsed');
+    
+    // makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released
+    container.setAttribute('aria-haspopup', true);
+
+
+    const form = this._form = DOM.create('form', className + '-list');
+
+    if (collapsed) {
+      this._scene.on('click', this.collapse);
+      container.addEventListener('mouseenter', this.expand);
+      container.addEventListener('mouseleave', this.collapse);
+
+    }
+
+    const link = this._layersLink = DOM.create('a', className + '-toggle', container);
+    link.href = '#';
+    link.title = 'Layers';
+    if (!collapsed) {
+      this.expand();
+    }
+
+    this._baseLayersList = DOM.create('div', className + '-base', form);
+    this._separator = DOM.create('div', className + '-separator', form);
+    this._overlaysList = DOM.create('div', className + '-overlays', form);
+
+    container.appendChild(form);
+  }
+
+  _update() {
+    if (!this._container) { return this; }
+
+    DOM.empty(this._baseLayersList);
+    DOM.empty(this._overlaysList);
+
+    this._layerControlInputs = [];
+    let baseLayersPresent,
+      overlaysPresent,
+      i,
+      obj,
+      baseLayersCount = 0;
+
+    for (i = 0; i < this._layers.length; i++) {
+      obj = this._layers[i];
+      this._addItem(obj);
+      overlaysPresent = overlaysPresent || obj.overlay;
+      baseLayersPresent = baseLayersPresent || !obj.overlay;
+      baseLayersCount += !obj.overlay ? 1 : 0;
+    }
+
+    // Hide base layers section if there's only one layer.
+    if (this.get('hideSingleBase')) {
+      baseLayersPresent = baseLayersPresent && baseLayersCount > 1;
+      this._baseLayersList.style.display = baseLayersPresent ? '' : 'none';
+    }
+
+    this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
+
+    return this;
+  }
+
+  expand() {
+    DOM.addClass(this._container, 'l7-control-layers-expanded');
+    this._form.style.height = null;
+    const acceptableHeight = this._scene.getSize().height - (this._container.offsetTop + 50);
+    if (acceptableHeight < this._form.clientHeight) {
+      DOM.addClass(this._form, 'l7-control-layers-scrollbar');
+      this._form.style.height = acceptableHeight + 'px';
+    } else {
+      DOM.removeClass(this._form, 'l7-control-layers-scrollbar');
+    }
+    this._checkDisabledLayers();
+    return this;
+  }
+
+  collapse() {
+    DOM.removeClass(this._container, 'l7-control-layers-expanded');
+    return this;
+  }
+
+  _checkDisabledLayers() {
+    const inputs = this._layerControlInputs;
+    let input,
+      layer;
+    const zoom = this._scene.getZoom();
+
+    for (let i = inputs.length - 1; i >= 0; i--) {
+      input = inputs[i];
+      layer = this._scene.getLayer(input.layerId);
+      input.disabled = (layer.get('minZoom') !== undefined && zoom < layer.get('minZoom')) ||
+        (zoom < layer.get('maxZoom') !== undefined && zoom > layer.get('maxZoom'));
+
+    }
+  }
+
+  _addLayer(layer, name, overlay) {
+    if (this._scene) {
+      layer.on('add', this._onLayerChange);
+      layer.on('remove', this._onLayerChange);
+    }
+    this._layers.push({
+      layer,
+      name,
+      overlay
+    });
+
+    if (this.get('sortLayers')) {
+      this._layers.sort((a, b) => {
+        return this.get('sortFunction')(a.layer, b.layer, a.name, b.name);
+      });
+    }
+
+    if (this.get('autoZIndex') && layer.setZIndex) {
+      this._lastZIndex++;
+      layer.setZIndex(this._lastZIndex);
+    }
+
+    this._expandIfNotCollapsed();
+  }
+
+  _expandIfNotCollapsed() {
+    if (this._scene && !this.get('collapsed')) {
+      this.expand();
+    }
+    return this;
+  }
+
+  _onLayerChange(e) {
+    if (!this._handlingClick) {
+      this._update();
+    }
+
+    const obj = this._scene.getLayer(e.target.layerId);
+
+    const type = obj.overlay ?
+      (e.type === 'add' ? 'overlayadd' : 'overlayremove') :
+      (e.type === 'add' ? 'baselayerchange' : null);
+
+    if (type) {
+      this._map.fire(type, obj);
+    }
+  }
+
+  _createRadioElement(name, checked) {
+
+    const radioHtml = '<input type="radio" class="l7-control-layers-selector" name="' +
+      name + '"' + (checked ? ' checked="checked"' : '') + '/>';
+
+    const radioFragment = document.createElement('div');
+    radioFragment.innerHTML = radioHtml;
+
+    return radioFragment.firstChild;
+  }
+
+  _addItem(obj) {
+    const label = document.createElement('label'),
+      checked = !!this._scene.getLayer(obj.layer.layerId);
+    let input;
+
+    if (obj.overlay) {
+      input = document.createElement('input');
+      input.type = 'checkbox';
+      input.className = 'l7-control-layers-selector';
+      input.defaultChecked = checked;
+    } else {
+      input = this._createRadioElement('l7-base-layers', checked);
+    }
+    this._layerControlInputs.push(input);
+    input.layerId = obj.layer.layerId;
+    input.addEventListener('click', this._onInputClick);
+
+    const name = document.createElement('span');
+    name.innerHTML = ' ' + obj.name;
+
+    const holder = document.createElement('div');
+
+    label.appendChild(holder);
+    holder.appendChild(input);
+    holder.appendChild(name);
+
+    const container = obj.overlay ? this._overlaysList : this._baseLayersList;
+    container.appendChild(label);
+
+    this._checkDisabledLayers();
+    return label;
+
+  }
+  _onInputClick() {
+    const inputs = this._layerControlInputs;
+    let input,
+      layer;
+    const addedLayers = [],
+      removedLayers = [];
+    this._handlingClick = true;
+    for (let i = inputs.length - 1; i >= 0; i--) {
+      input = inputs[i];
+      layer = this._scene.getLayer(input.layerId);
+
+      if (input.checked) {
+        addedLayers.push(layer);
+      } else if (!input.checked) {
+        removedLayers.push(layer);
+      }
+    }
+    for (let i = 0; i < removedLayers.length; i++) {
+      removedLayers[i].hide();
+    }
+    for (let i = 0; i < addedLayers.length; i++) {
+      addedLayers[i].show();
+    }
+
+    this._handlingClick = false;
+
+    this._refocusOnMap();
+
+  }
+
+
+}
diff --git a/src/component/control/zoom.js b/src/component/control/zoom.js
new file mode 100644
index 0000000000..52aa33dfac
--- /dev/null
+++ b/src/component/control/zoom.js
@@ -0,0 +1,74 @@
+import Control from './base';
+import * as DOM from '../../util/dom';
+import { bindAll } from '../../util/event';
+export default class Zoom extends Control {
+  constructor(cfg) {
+    super({
+      position: 'topleft',
+      zoomInText: '+',
+      zoomInTitle: 'Zoom in',
+      zoomOutText: '&#x2212;',
+      zoomOutTitle: 'Zoom out',
+      ...cfg
+    });
+    bindAll([ '_updateDisabled', '_zoomIn', '_zoomOut' ], this);
+  }
+  onAdd() {
+    const zoomName = 'l7-control-zoom';
+    const container = DOM.create('div', zoomName + ' l7-bar');
+
+    this._zoomInButton = this._createButton(this.get('zoomInText'), this.get('zoomInTitle'),
+      zoomName + '-in', container, this._zoomIn);
+    this._zoomOutButton = this._createButton(this.get('zoomOutText'), this.get('zoomOutTitle'),
+      zoomName + '-out', container, this._zoomOut);
+    this._updateDisabled();
+    this._scene.on('zoomend', this._updateDisabled);
+    this._scene.on('zoomchange', this._updateDisabled);
+    return container;
+  }
+  onRemove() {
+    this._scene.off('zoomend', this._updateDisabled);
+    this._scene.off('zoomchange', this._updateDisabled);
+  }
+  disable() {
+    this._disabled = true;
+    this._updateDisabled();
+    return this;
+  }
+  enable() {
+    this._disabled = false;
+    this._updateDisabled();
+    return this;
+  }
+  _zoomIn() {
+    if (!this._disabled && this._scene.getZoom() < this._scene.get('maxZoom')) {
+      this._scene.zoomIn();
+    }
+  }
+  _zoomOut() {
+    if (!this._disabled && this._scene.getZoom() > this._scene.get('minZoom')) {
+      this._scene.zoomOut();
+    }
+  }
+  _createButton(html, tile, className, container, fn) {
+    const link = DOM.create('a', className, container);
+    link.innerHTML = html;
+    link.href = '#';
+    link.tile = tile;
+    link.addEventListener('click', fn);
+    return link;
+  }
+  _updateDisabled() {
+    const scene = this._scene;
+    const className = 'l7-disabled';
+    DOM.removeClass(this._zoomInButton, className);
+    DOM.removeClass(this._zoomOutButton, className);
+
+    if (this._disabled || scene.getZoom() === scene.get('minZoom')) {
+      DOM.addClass(this._zoomOutButton, className);
+    }
+    if (this._disabled || scene._zoom === scene.get('maxZoom')) {
+      DOM.addClass(this._zoomInButton, className);
+    }
+  }
+}
diff --git a/src/component/css/l7.css b/src/component/css/l7.css
new file mode 100644
index 0000000000..98dd7b1e7d
--- /dev/null
+++ b/src/component/css/l7.css
@@ -0,0 +1,243 @@
+.l7-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: -webkit-flex;
+  display: flex;
+  will-change: transform;
+  pointer-events: none;
+  z-index: 5;
+}
+.l7-popup-tip {
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  z-index: 1;
+}
+.l7-popup-close-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  border: 0;
+  border-radius: 0 3px 0 0;
+  cursor: pointer;
+  background-color: transparent;
+}
+
+.l7-popup-close-button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.l7-popup-content {
+  position: relative;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 10px 10px 15px;
+  pointer-events: auto;
+}
+
+/* general toolbar styles */
+
+.l7-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.l7-bar a,
+.l7-bar a:hover {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.l7-bar a,
+.l7-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.l7-bar a:hover {
+	background-color: #f4f4f4;
+	}
+.l7-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.l7-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.l7-bar a.l7-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+
+/* control positioning */
+
+.l7-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.l7-top,
+.l7-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.l7-top {
+	top: 0;
+	}
+.l7-right {
+	right: 0;
+	}
+.l7-bottom {
+	bottom: 0;
+	}
+.l7-left {
+	left: 0;
+	}
+.l7-control {
+	float: left;
+	clear: both;
+	}
+.l7-right .l7-control {
+	float: right;
+	}
+.l7-top .l7-control {
+	margin-top: 10px;
+	}
+.l7-bottom .l7-control {
+	margin-bottom: 10px;
+	}
+.l7-left .l7-control {
+	margin-left: 10px;
+	}
+.l7-right .l7-control {
+	margin-right: 10px;
+  }
+  
+  /* attribution and scale controls */
+
+.l7-control-container .l7-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.7);
+	margin: 0;
+	}
+.l7-control-attribution,
+.l7-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+.l7-control-attribution a {
+	text-decoration: none;
+	}
+.l7-control-attribution a:hover {
+	text-decoration: underline;
+	}
+.l7-container .l7-control-attribution,
+.l7-container .l7-control-scale {
+	font-size: 11px;
+	}
+.l7-left .l7-control-scale {
+	margin-left: 5px;
+	}
+.l7-bottom .l7-control-scale {
+	margin-bottom: 5px;
+	}
+.l7-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	font-size: 11px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.l7-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.l7-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.l7-touch .l7-control-attribution,
+.l7-touch .l7-control-layers,
+.l7-touch .l7-bar {
+	box-shadow: none;
+	}
+.l7-touch .l7-control-layers,
+.l7-touch .l7-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+	/* layers control */
+
+.l7-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.l7-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.l7-retina .l7-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.l7-touch .l7-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.l7-control-layers .l7-control-layers-list,
+.l7-control-layers-expanded .l7-control-layers-toggle {
+	display: none;
+	}
+.l7-control-layers-expanded .l7-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.l7-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.l7-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.l7-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.l7-control-layers label {
+	display: block;
+	}
+.l7-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
diff --git a/src/component/images/layers-2x.png b/src/component/images/layers-2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..200c333dca9652ac4cba004d609e5af4eee168c1
GIT binary patch
literal 1259
zcmV<H1Qh#;P)<h;3K|Lk000e1NJLTq001-q001-y1ONa4Z*kLL000ECNkl<ZcmZPg
zPbWx*mP*!2RytTT!**9cp!TwWZ5xfFc#fHw1joz_VokJ(v4Z0}(cwSkj+x7$awTV&
zbx?4b>FhCYNy;#0irRPomHqW|G1C*;4?@4#E?jH>?v@U%cy?3dQAc-DchXVErpOh~
z-jbon+tNbnl6hoEb;)TVk+%hTDDi_G%i3*RZ&15!$Fjr^f;Ke&A@|?=`2&+{zr+3a
z{D*=t<eFKYAeM_NPjJng)==y#IrII(dy&iU$eADe%2bA!maN}&yS!E|-JbOu6E?Xa
z+jr{Pu4GwVm!o-S^Uf}Z^jxyK)@DMOl$MQAeY8l_mg~FVg%`dHZMjkh6Sgr*Mwo<_
zTARG0Gt=+$Vpx7(XQtd)YZD0*h7vy9zPw#NV{57P-SEOF-;I{qZmGZBwtacRhq582
zMfqo+Qx@Ww$A8)jx%{WwJ@V8(r}7UIW*l<PDoZr^z*3tIisho34tA!>(`AXyS%X7N
z%a#RZw6vD^t_rnM`L4E>m=U&R!A-&}nZIi$BOPvkhrCuUe@BN~-lRD)f44;J%TwgE
zcze8<q<Z9p<tY*SECjl?r1(IpgqA5uB<w)yl480>u!PQ_<Al)GG*6dE%j6{x)|Hgz
z32i0N@z5C-SmxbJ^LZ1|jpf-QEt8T!Sb27IBY~Ue&%1Z%=l$>NR7?o(NylLXVTfDO
zxs5=@|GsYEsNo4M#nT%N!UE(?dnS)t2+{ELYAFp*3=iF=|EQnTp`#vlSXuGVraYo?
z+RCzXo6h3qA8{KG?S4nE(lM+;Eb4nT3XV;7gcAxUi5m)`k5tv}cPy()8ZR3TLW3I-
zAS^}cq-IJvL7a4RgR!yk@~RT%$lA7{L5ES*hyx)M4(yxI$Ub(4f)K|^v1>zvwQY!_
zIrWw8q9GS^!Dp~}+?mbnB6jDF8mVlbQ!jFKDY;w=7;XO{9bq7>LXGK24WA`;rL)_Z
z)&j}pbV<t5oNJ?BQyEtFeexL+!VdG%2oO8UF#7YD6OeGEKCZeld!t}Q9BM~}JP-*p
z&?5S|A&#4(kO|eJzBFP;{XspcLPaiOL5PGR{B8uoL|P2epl}0mQ!Y2ME~=#7$wTVf
zYK4knZNxl*1d%W|D|$@NJZ@1(YLEK0Wudy`jNu>(;6gY;VMhbxgvn`X;6x}VUEE-7
z%)7j-%t8S=ZL3yc)HbXDAqJZvBTPoiW_A-+a8m3_Z?v{DN7Tnr#O_VUMT0UBt$;p`
zDh6JbGHN8JJ*JN%y2%msb97@_S>9!%Egwk;?PEkU9ntz&3uR}%Fj5d$JHQbQb3}a{
zSzFT^#n<G)5|MiG--8_<h&g3%*bxG^8aV0`g-{oN0QEWTVki>=VInPpcAS}CNxj?_
zVscANk5Cfz(51EI1pz};AWWb|kgbYNb4wCEGUn3+eMUMV?1-{=I4TlmLJMot@rd07
zZuo2hk1ccu{YmGkcYdWAVdk{Z4Nm?^cTD&}jGm+Q1SYIXMwmG*oO*83&#>l%nbR`G
zhh=lZ%xIb7kU3#;TBbfECrnC9P=-XpL|TG2BoZdj61*XiFbW8?1Z_wp%#;>${SUIy
V$8qr;L*)Pf002ovPDHLkV1hYLS~36t

literal 0
HcmV?d00001

diff --git a/src/component/images/layers.png b/src/component/images/layers.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a72e5784b2b456eac5d7670738db80697af3377
GIT binary patch
literal 696
zcmV;p0!RIcP)<h;3K|Lk000e1NJLTq000^Q000^Y1ONa414D#G0007iNkl<Zcma)6
zGk7Ec6y81C-Jv{JDbK1-UD{KXI&Wf|lRd_^t=Yq@;w)oN&bBe{-a1aczj^Q1cqBLv
ze55|o`LucH;(Z<d9sb4pmK<W&^H(SCy&_E9<FB&omk_Ex*&9s(2YREcPc9hB-PH;&
z$T%G@?zKYht~o<-tK_bux9!H4nZlqj_%hSJkKUHM#;uwWs&LVVIlG_m<3Go6499;y
z;hn5Ltir_+O4*@ydy;6Eo|jC#pnwAtFP@h;$`aLXDLW|CaAA;joK)(hVeB7Sr{mwG
z;bp4bGsrevkodK>*@&l2<6p=!C&s@#ZL+%BQvF&b?w6S%wp=I>1QHj7AP5C)IWy#b
znXXB;g;j=$a-tW89K%FbDceHVq&unY*Wx3L#=EGWH=rjqnp|4c_Ulec!ql3#G-5ZF
zVlbBA@XP=)C8U&+Lrc)S4O5%1$&{(;7R^K(CSnvSr$v;+B$8q&7Bf|h$#PARo1^%M
zf1H^nG-EiXVXr07OH(*8R)xa|F<PCljjoA1%9%K<ATi0_hj|!+)r1h5tS8k*YB;$#
z<c7F&k|0&>D;lXUlg_-%)~ZGsL2cX0NXaAzN2q%jqLRR6ruVk8`Jb7n#{`T;o@`F=
z#3YcynIR^s83UNF3D!f5m#Mg)NJ24&Qfrqb&_z=yF;=B)#9Iq7u-@^O!(mW{D;qvr
zPc)gVb%aowtS8m@ElL4A9G>w#ffQ~q{i&_i)*6f^)Sz|C?C>zb4Uo?H<-&Hz@a?J;
z$ml@zGygWofb9$ZBj6aLjpLhsT2AzjOu=-*u_gSCU<G)3^yO*`OrA#YgcVEv@4+6Z
ehAP-IxB4G8DWV6`-5rhq0000<MNUMnLSTaQ*iP;M

literal 0
HcmV?d00001

diff --git a/src/component/popup.js b/src/component/popup.js
new file mode 100644
index 0000000000..e7314c86d3
--- /dev/null
+++ b/src/component/popup.js
@@ -0,0 +1,127 @@
+import Base from '../core/base';
+import { bindAll } from '../util/event';
+import * as DOM from '../util/dom';
+export default class Popup extends Base {
+  constructor(cfg) {
+    super({
+      closeButton: true,
+      closeOnClick: true,
+      maxWidth: '240px',
+      anchor: 'bottom',
+      ...cfg
+    });
+    bindAll([ '_update', '_onClickClose', 'remove' ], this);
+  }
+  addTo(scene) {
+    this._scene = scene;
+    if (this.get('closeOnClick')) {
+      this._scene.on('click', this._onClickClose);
+    }
+    this._scene.on('mapmove', this._update);
+    this._update();
+  }
+  setLnglat(lngLat) {
+    this.lngLat = lngLat;
+    if (this._scene) {
+      this._scene.on('mapmove', this._update);
+    }
+    this._update(lngLat);
+    return this;
+  }
+  _update() {
+    const hasPosition = this.lngLat;
+    if (!this._scene || !hasPosition || !this._content) { return; }
+    if (!this._container) {
+      this._container = this.creatDom('div', 'l7-popup', this._scene.getContainer());
+      // this._tip = this.creatDom('div', 'l7-popup-tip', this._container);
+      this._container.appendChild(this._content);
+      if (this.get('className')) {
+        this.get('className').split(' ').forEach(name =>
+              this._container.classList.add(name));
+      }
+    }
+    if (this.get('maxWidth') && this._container.style.maxWidth !== this.get('maxWidth')) {
+      this._container.style.maxWidth = this.get('maxWidth');
+    }
+
+    this._updatePosition();
+  }
+  _updatePosition() {
+    if (!this._scene) { return; }
+    const pos = this._scene.lngLatToContainer(this.lngLat);
+    this._container.style.left = pos.x + 'px';
+    this._container.style.top = pos.y + 'px';
+  }
+  setHTML(html) {
+    const frag = window.document.createDocumentFragment();
+    const temp = window.document.createElement('body');
+    let child;
+    temp.innerHTML = html;
+    while (true) {  // eslint-disable-line
+      child = temp.firstChild;
+      if (!child) break;
+      frag.appendChild(child);
+    }
+
+    return this.setDOMContent(frag);
+  }
+  setText(text) {
+    return this.setDOMContent(window.document.createTextNode(text));
+  }
+  setMaxWidth(maxWidth) {
+    this.set('maxWidth', maxWidth);
+    this._update();
+    return this;
+  }
+  setDOMContent(htmlNode) {
+    this._createContent();
+    this._content.appendChild(htmlNode);
+    this._update();
+    return this;
+  }
+  _createContent() {
+    if (this._content) {
+      DOM.remove(this._content);
+    }
+    this._content = DOM.create('div', 'l7-popup-content', this._container);
+    if (this.get('closeButton')) {
+      this._closeButton = DOM.create('button', 'l7-popup-close-button', this._content);
+      this._closeButton.type = 'button';
+      this._closeButton.setAttribute('aria-label', 'Close popup');
+      this._closeButton.innerHTML = '&#215;';
+      this._closeButton.addEventListener('click', this._onClickClose);
+    }
+  }
+  _onClickClose() {
+    this.remove();
+  }
+  creatDom(tagName, className, container) {
+    const el = window.document.createElement(tagName);
+    if (className !== undefined) el.className = className;
+    if (container) container.appendChild(el);
+    return el;
+  }
+  removeDom(node) {
+    if (node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  }
+  // 移除popup
+  remove() {
+    if (this._content) {
+      this.removeDom(this._content);
+    }
+
+    if (this._container) {
+      this.removeDom(this._container);
+      delete this._container;
+    }
+    if (this._scene) {
+      this._scene.off('mapmove', this._update);
+      this._scene.off('click', this._onClickClose);
+      delete this._scene;
+    }
+    this.emit('close');
+    return this;
+  }
+}
diff --git a/src/core/controller/control.js b/src/core/controller/control.js
new file mode 100644
index 0000000000..896e68eeb0
--- /dev/null
+++ b/src/core/controller/control.js
@@ -0,0 +1,40 @@
+import Util from '../../util';
+import * as DOM from '../../util/dom';
+export default class Control {
+  constructor(cfg) {
+    Util.assign(this, cfg);
+    this._initControlPos();
+  }
+  addControl(control) {
+    control.addTo(this.scene);
+  }
+  removeControl(control) {
+    control.remove();
+    return this;
+  }
+  _initControlPos() {
+    const corners = this._controlCorners = {};
+    const l = 'l7-';
+    const container = this._controlContainer =
+      DOM.create('div', l + 'control-container', this.scene.getContainer());
+
+    function createCorner(vSide, hSide) {
+      const className = l + vSide + ' ' + l + hSide;
+
+      corners[vSide + hSide] = DOM.create('div', className, container);
+    }
+
+    createCorner('top', 'left');
+    createCorner('top', 'right');
+    createCorner('bottom', 'left');
+    createCorner('bottom', 'right');
+  }
+  _clearControlPos() {
+    for (const i in this._controlCorners) {
+      DOM.remove(this._controlCorners[i]);
+    }
+    DOM.remove(this._controlContainer);
+    delete this._controlCorners;
+    delete this._controlContainer;
+  }
+}
diff --git a/src/core/controller/event.js b/src/core/controller/event.js
index 18fa5828cd..941d9a9c47 100644
--- a/src/core/controller/event.js
+++ b/src/core/controller/event.js
@@ -2,18 +2,35 @@ import Util from '../../util';
 export default class EventContoller {
   constructor(cfg) {
     Util.assign(this, cfg);
+    this._init();
+    this.startPoint = { x: -1, y: -1 };
+    this._selectedId = null;
   }
   _init() {
     this.layer.scene.on('pick-' + this.layer.layerId, e => {
+
       let { featureId, point2d, type } = e;
-      if (featureId < 0 && this._activeIds !== null) {
-        type = 'mouseleave';
+      if (type === 'click') {
+        return;
+      }
+      if (type === 'mousedown') {
+        this.startPoint = point2d;
+      }
+      if (type === 'mouseup') {
+        this.endPoint = point2d;
+        if (this.startPoint.x - this.endPoint.x === 0 && this.startPoint.y - this.endPoint.y === 0) {
+          type = 'click';
+        }
       }
-      this._activeIds = featureId;
       // TODO 瓦片图层获取选中数据信息
       const lnglat = this.layer.scene.containerToLngLat(point2d);
-      const { feature, style } = this.layer.getSelectFeature(featureId, lnglat);
-      // const style = this.layerData[featureId - 1];
+      let feature = null;
+      let style = null;
+      if (featureId !== -999) {
+        const res = this.layer.getSelectFeature(featureId, lnglat);
+        feature = res.feature;
+        style = res.style;
+      }
       const target = {
         featureId,
         feature,
@@ -22,9 +39,16 @@ export default class EventContoller {
         type,
         lnglat: { lng: lnglat.lng, lat: lnglat.lat }
       };
-      if (featureId >= 0 || this._activeIds >= 0) { // 拾取到元素，或者离开元素
+      if (featureId >= 0) { // 拾取到元素，或者离开元素
         this.layer.emit(type, target);
+        this._selectedId = featureId;
       }
+      if (featureId < 0 && this._selectedId != null) {
+        type = 'mouseleave';
+        this.layer.emit(type, target);
+        this._selectedId = null;
+      }
+      this.layer._activeIds = featureId;
 
     });
   }
diff --git a/src/core/engine/picking/picking.js b/src/core/engine/picking/picking.js
index cef3c5057d..c01736fcc7 100755
--- a/src/core/engine/picking/picking.js
+++ b/src/core/engine/picking/picking.js
@@ -33,7 +33,7 @@ class Picking {
     window.addEventListener('resize', this._resizeHandler, false);
   }
   pickdata(event) {
-    const point = { x: event.offsetX, y: event.offsetY, type: event.type };
+    const point = { x: event.offsetX, y: event.offsetY, type: event.type, _parent: event };
     const normalisedPoint = { x: 0, y: 0 };
     normalisedPoint.x = (point.x / this._width) * 2 - 1;
     normalisedPoint.y = -(point.y / this._height) * 2 + 1;
@@ -74,6 +74,7 @@ class Picking {
     return isVisable;
   }
   _pickAllObject(point, normalisedPoint) {
+
     this.world.children.forEach((object, index) => {
       if (!this._layerIsVisable(object)) {
         return;
@@ -81,15 +82,12 @@ class Picking {
       this._filterObject(index);
       const item = this._pick(point, normalisedPoint, object.name);
       item.type = point.type;
+      item._parent = point._parent;
       this._world.emit('pick', item);
       this._world.emit('pick-' + object.name, item);
 
     });
   }
-  // _updateRender() {
-  //   this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
-  // }
-
   _pick(point, normalisedPoint, layerId) {
     this._update(point);
     let id = (this.pixelBuffer[2] * 255 * 255) + (this.pixelBuffer[1] * 255) + (this.pixelBuffer[0]);
diff --git a/src/core/engine/renderer.js b/src/core/engine/renderer.js
index aedae63622..d1c689441f 100644
--- a/src/core/engine/renderer.js
+++ b/src/core/engine/renderer.js
@@ -8,7 +8,7 @@ export default class Renderer {
   }
   initRender() {
     this.renderer = new THREE.WebGLRenderer({
-      antialias: true,
+      antialias: false,
       alpha: true,
       autoClear: false
     });
diff --git a/src/core/layer.js b/src/core/layer.js
index f5f5354b9b..f6fcb6de4f 100644
--- a/src/core/layer.js
+++ b/src/core/layer.js
@@ -77,7 +77,7 @@ export default class Layer extends Base {
     world.add(this._object3D);
     this.layerMesh = null;
     this.layerLineMesh = null;
-    this._initEvents();
+    // this._initEvents();
   }
   /**
    * 将图层添加加到 Object
@@ -269,10 +269,12 @@ export default class Layer extends Base {
   }
   hide() {
     this._visible(false);
+    this.scene._engine.update();
     return this;
   }
   show() {
     this._visible(true);
+    this.scene._engine.update();
     return this;
   }
   setData(data, cfg) {
@@ -312,16 +314,21 @@ export default class Layer extends Base {
     this._setAttrOptions(attrName, attrCfg);
   }
   _initControllers() {
-    const mappingCtr = new Controller.Mapping({ layer: this });
     const pickCtr = new Controller.Picking({ layer: this });
     const interactionCtr = new Controller.Interaction({ layer: this });
-    this.set('mappingController', mappingCtr);
+    const eventCtr = new Controller.Event({ layer: this });
     this.set('pickingController', pickCtr);
     this.set('interacionController', interactionCtr);
+    this.set('eventController', eventCtr);
+  }
+  _mapping() {
+    const mappingCtr = new Controller.Mapping({ layer: this });
+    this.set('mappingController', mappingCtr);
   }
-
   render() {
     if (this.get('layerType') === 'tile') {
+      this._initControllers();
+      this._initInteraction();
       this.scene.style.update(this._attrs);
       return this;
     }
@@ -332,16 +339,13 @@ export default class Layer extends Base {
   // 重绘 度量， 映射，顶点构建
   repaint() {
     this.set('scales', {});
-    const mappingCtr = new Controller.Mapping({ layer: this });
-    this.set('mappingController', mappingCtr);
-    // this._initAttrs();
-    // this._mapping();
+    this._mapping();
     this.redraw();
   }
   // 初始化图层
   init() {
     this._initControllers();
-    // this._initAttrs();
+    this._mapping();
     this._updateDraw();
   }
   _initInteraction() {
@@ -479,7 +483,6 @@ export default class Layer extends Base {
     this.scene.on('pick-' + this.layerId, e => {
       let { featureId, point2d, type } = e;
       // TODO 瓦片图层获取选中数据信息
-
       const lnglat = this.scene.containerToLngLat(point2d);
       let feature = null;
       let style = null;
@@ -507,8 +510,16 @@ export default class Layer extends Base {
 
     });
   }
-  getSelectFeature(featureId) {
-    const feature = this.layerSource.getSelectFeature(featureId);
+  getSelectFeature(featureId, lnglat) {
+    // return {};
+    if (this.get('layerType') === 'tile') {
+      const sourceCache = this.getSourceCache(this.get('sourceOption').id);
+      const feature = sourceCache.getSelectFeature(featureId, this.layerId, lnglat);
+      return {
+        feature
+      };
+    }
+    const feature = this.layerSource && this.layerSource.getSelectFeature(featureId) || {};
     const style = this.layerData[featureId - 1];
     return {
       feature,
@@ -681,5 +692,10 @@ export default class Layer extends Base {
   afterRender() {
 
   }
+
+  // tileLayer
+  getSourceCache(id) {
+    return this.scene.style.getSource(id);
+  }
 }
 
diff --git a/src/core/scene.js b/src/core/scene.js
index 33a0cfb6dc..eb191596ab 100644
--- a/src/core/scene.js
+++ b/src/core/scene.js
@@ -9,6 +9,7 @@ import Global from '../global';
 import { getInteraction } from '../interaction/index';
 import { compileBuiltinModules } from '../geom/shader';
 import Style from './style';
+import Control from './controller/control';
 import { epsg3857 } from '@antv/geo-coord/lib/geo/crs/crs-epsg3857';
 export default class Scene extends Base {
   getDefaultCfg() {
@@ -18,6 +19,7 @@ export default class Scene extends Base {
     super(cfg);
     this._initMap();
     this.crs = epsg3857;
+    this._initContoller();
     // this._initAttribution(); // 暂时取消，后面作为组件去加载
     this.addImage();
     this.fontAtlasManager = new FontAtlasManager();
@@ -31,6 +33,10 @@ export default class Scene extends Base {
     // this._engine.run();
     compileBuiltinModules();
   }
+  _initContoller() {
+    const controlCtr = new Control({ scene: this });
+    this.set('controlController', controlCtr);
+  }
   // 为pickup场景添加 object 对象
   addPickMesh(object) {
     this._engine._picking.add(object);
@@ -93,8 +99,21 @@ export default class Scene extends Base {
   getLayers() {
     return this._layers;
   }
+  getLayer(id) {
+    let res = false;
+    this._layers.forEach(layer => {
+      if (layer.layerId === id) {
+        res = layer;
+        return;
+      }
+    });
+    return res;
+  }
   _addLayer() {
 
+  }
+  getContainer() {
+    return this._container;
   }
   _registEvents() {
     const events = [
@@ -109,14 +128,15 @@ export default class Scene extends Base {
       'dblclick'
     ];
     events.forEach(event => {
-
+     
       this._container.addEventListener(event, e => {
         // 要素拾取
+        if (e.target.nodeName !== 'CANVAS') return;
         e.pixel || (e.pixel = e.point);
         requestAnimationFrame(() => {
           this._engine._picking.pickdata(e);
         });
-      }, false);
+      }, true);
     });
   }
   removeLayer(layer) {
@@ -153,5 +173,12 @@ export default class Scene extends Base {
     this.map.off('mapmove', this._updateRender);
     this.map.off('camerachange', this._updateRender);
   }
-
+ // control
+  addControl(ctr) {
+    this.get('controlController').addControl(ctr);
+    return this;
+  }
+  removeControl(ctr) {
+    this.get('controlController').removeControl(ctr);
+  }
 }
diff --git a/src/core/style.js b/src/core/style.js
index 11d6988eae..79db3db3b3 100644
--- a/src/core/style.js
+++ b/src/core/style.js
@@ -3,6 +3,7 @@ import WorkerPool from '../worker/worker_pool';
 import throttle from '../util/throttle';
 import SourceCache from '../source/source_cache';
 import WorkerController from '../worker/worker_controller';
+const omitOption = [ 'mappingController', 'interacionController', 'pickingController', 'interactions', 'eventController' ];
 // 统一管理所有的Source
 // 统一管理地图样式
 export default class Style extends Base {
@@ -34,8 +35,15 @@ export default class Style extends Base {
   // 设置
   _addTileStyle(layerCfg) {
     const layerid = layerCfg.layerId;
-    this.layerStyles[layerid] = layerCfg;
+    const newLayerCfg = {};
+    for (const key in layerCfg) { // 过滤不可传递对象
+      if (omitOption.indexOf(key) === -1) {
+        newLayerCfg[key] = layerCfg[key];
+      }
+    }
+    this.layerStyles[layerid] = newLayerCfg;
     this._layerStyleGroupBySourceID();
+
     this.WorkerController.broadcast('setLayers', this.layerStyles);
     // TODO 更新 style
 
diff --git a/src/global.js b/src/global.js
index 1f9e5309e9..33c679ba3c 100644
--- a/src/global.js
+++ b/src/global.js
@@ -11,8 +11,8 @@ const Global = {
     mapType: 'AMAP',
     zoom: 5,
     center: [ 107.622, 39.266 ],
-    minZoom: 0,
-    maxZoom: 22,
+    minZoom: 3,
+    maxZoom: 18,
     pitch: 0,
     hash: false
   },
diff --git a/src/index.js b/src/index.js
index 19c15da00c..4f8da9a530 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import './component/css/l7.css';
 import Scene from './core/scene';
 import Global from './global';
 import Source from './core/source';
@@ -5,6 +6,8 @@ import TileSource from './source/tile_source';
 import { registerParser, registerTransform } from './source';
 import { registerInteraction, getInteraction } from './interaction';
 import { registerLayer } from './layer';
+import Popup from './component/popup';
+import * as Control from './component/control';
 const version = Global.version;
 const exported = {
   version,
@@ -15,6 +18,8 @@ const exported = {
   registerTransform,
   registerLayer,
   registerInteraction,
-  getInteraction
+  getInteraction,
+  Popup,
+  Control
 };
 export default exported;
diff --git a/src/layer/tile/vector_tile_mesh.js b/src/layer/tile/vector_tile_mesh.js
index 90fdfc2054..531b33a25a 100644
--- a/src/layer/tile/vector_tile_mesh.js
+++ b/src/layer/tile/vector_tile_mesh.js
@@ -23,10 +23,16 @@ export default class VectorTileMesh {
     const tileMesh = this._tileMaskMesh();
     // this._object3D.add(tileMesh);
     this.maskScene.add(tileMesh);
+    this._bufferData = data;
   }
   _init(data) {
     this._createMesh(data);
+
   }
+  getFeatureIndex(id) {
+    return this._bufferData.featureKey.indexOf(id);
+  }
+
   _createMesh(data) {
     this.mesh = getRender(this.layer.get('type'), data.shape)(null, this.layer, data.buffer);
     if (this.mesh.type !== 'composer') { // 热力图的情况
@@ -121,6 +127,7 @@ export default class VectorTileMesh {
     const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
     return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
   }
+
   destroy() {
     destoryObject(this._object3D);
     destoryObject(this.maskScene);
diff --git a/src/map/AMap.js b/src/map/AMap.js
index a6a101e7ce..b30a0e0f30 100644
--- a/src/map/AMap.js
+++ b/src/map/AMap.js
@@ -170,7 +170,7 @@ export default class GaodeMap extends Base {
       return map.pixelToLngLat(ll);
     };
     scene.lngLatToPixel = lnglat => {
-      return map.lngLatToPixel(new AMap.LngLat(lnglat[0], lnglat[1]));
+      return map.lnglatToPixel(new AMap.LngLat(lnglat[0], lnglat[1]));
     };
     scene.setMapStyle = style => {
       return map.setMapStyle(style);
@@ -184,5 +184,9 @@ export default class GaodeMap extends Base {
       const ll = new AMap.Pixel(pixel.x, pixel.y);
       return map.containerToLngLat(ll);
     };
+    scene.lngLatToContainer = lnglat => {
+      const ll = new AMap.LngLat(lnglat[0], lnglat[1]);
+      return map.lngLatToContainer(ll);
+    };
   }
 }
diff --git a/src/source/parser/vector.js b/src/source/parser/vector.js
index e74cd363a6..2615079b03 100644
--- a/src/source/parser/vector.js
+++ b/src/source/parser/vector.js
@@ -3,7 +3,7 @@ const Extent = 4096;
 export default function vector(data, cfg) {
   const tile = cfg.tile;
   const resultdata = [];
-  const featureKeys = {};
+  const featureKeys = new Int32Array(data.length);
   const x0 = Extent * tile[0];
   const y0 = Extent * tile[1];
   function covertP20(points) {
@@ -13,29 +13,24 @@ export default function vector(data, cfg) {
       return [ x1, -y2, 0 ];
     });
   }
-  let index = 0;
   for (let i = 0; i < data.length; i++) {
     const feature = data.feature(i);
     const coords = feature.loadGeometry();
     const properties = feature.properties;
     let id = i + 1;
-    if (cfg.idField && properties[cfg.idField]) {
-      const value = properties[cfg.idField];
+    if (feature.id || (cfg.idField && properties[cfg.idField])) {
+      const value = feature.id || properties[cfg.idField];
       id = djb2hash(value) % 1000019;
-      featureKeys[id] = {
-        index,
-        idField: value
-      };
+      featureKeys[i] = id;
     }
     const geocoords = classifyRings(coords);
     for (let j = 0; j < geocoords.length; j++) {
       const geo = geocoords[j].map(coord => {
         return covertP20(coord);
       });
-      index++;
       resultdata.push({
         ...properties,
-        _id: feature.id || id,
+        _id: id,
         coordinates: geo
       });
     }
@@ -46,6 +41,7 @@ export default function vector(data, cfg) {
     featureKeys
   };
 
+
 }
 function signedArea(ring) {
   let sum = 0;
diff --git a/src/source/source_cache.js b/src/source/source_cache.js
index a55aaa1f21..3f1c0d3898 100644
--- a/src/source/source_cache.js
+++ b/src/source/source_cache.js
@@ -1,8 +1,11 @@
 import Base from '../core/base';
 import TileCache from '../layer/tile/tile_cache';
 import VectorTileSource from './vector_tile_source';
+import PBF from 'pbf';
+import * as VectorParser from '@mapbox/vector-tile';
 import { toLngLat, Bounds, Point } from '@antv/geo-coord';
 import VectorTileMesh from '../layer/tile/vector_tile_mesh';
+import { epsg3857 } from '@antv/geo-coord/lib/geo/crs/crs-epsg3857';
 // 统一管理 source 添加，管理，更新
 export default class SouceCache extends Base {
   constructor(scene, cfg) {
@@ -18,10 +21,10 @@ export default class SouceCache extends Base {
     this.scene = scene;
     // TODO 销毁函数
     this._tileCache = new TileCache(this.get('cacheLimit'), this._destroyTile.bind(this));
+    this._crs = epsg3857;
     this.layers = this.scene.getLayers();
     this._source = new VectorTileSource(cfg, this.scene.style.WorkerController);
     this.layersTiles = {}; // 存储当前source所有layer的瓦片
-    // this._tiles = new THREE.Object3D();
   }
   getLayerById(id) {
     const layers = this.scene.getLayers();
@@ -31,17 +34,14 @@ export default class SouceCache extends Base {
       }
     }
   }
+
   /**
    * 移除视野外的瓦片，计算新增的瓦片数据
    * @param {*}tileMap 瓦片列表
    */
 
   update() {
-    // if (!layercfg && this.layercfg) return;
-    // this._layercfg = layercfg;
     this._calculateTileIDs();
-    // this.updateList = this._getNewTiles(this._tileMap);// 计算新增瓦片
-    // this._pruneTiles();
     for (let i = 0; i < this.updateTileList.length; i++) {
       // 瓦片相关参数
       const tileId = this.updateTileList[i].join('_');
@@ -51,10 +51,11 @@ export default class SouceCache extends Base {
       if (tiles !== undefined) {
         tileinfo.active = true;
         tileinfo.loaded = true;
-        for (const layerId in tiles) {
+        for (const layerId in tiles.mesh) {
           const layer = this.getLayerById(layerId);
-          const tileMesh = tiles[layerId];
+          const tileMesh = tiles.mesh[layerId];
           layer.tiles.add(tileMesh.getMesh());
+          this._addPickMesh(layer, tileMesh.getMesh());
           this.scene._engine.update();
         }
         this._pruneTiles();
@@ -73,17 +74,50 @@ export default class SouceCache extends Base {
 
   _renderTile(tileinfo, data) {
     const tileId = tileinfo.id;
-    const tiles = {};
-    for (const layerId in data) {
+    const tiles = {
+      rawData: data.rawTileData,
+      mesh: {}
+    };
+    for (const layerId in data.buffer) {
       const layer = this.getLayerById(layerId);
-      const tileMesh = new VectorTileMesh(layer, data[layerId]);
-      tiles[layerId] = tileMesh;
+      const tileMesh = new VectorTileMesh(layer, data.buffer[layerId]);
+      tiles.mesh[layerId] = tileMesh;
       layer.tiles.add(tileMesh.getMesh());
+      this._addPickMesh(layer, tileMesh.getMesh());
       this.scene._engine.update();
     }
 
     this._tileCache.setTile(tiles, tileId);
   }
+  getSelectFeature(featureId, layerId, lnglat) {
+    const zoom = this.tileZoom;
+    const tilePoint = this._crs.lngLatToPoint(toLngLat(lnglat.lng, lnglat.lat), zoom);
+    const tileXY = tilePoint.divideBy(256).floor();
+    const tile = this._getParentTile(tileXY.x, tileXY.y, zoom, zoom - 3);
+    const layer = this.getLayerById(layerId);
+    const sourceLayer = layer.get('sourceOption').parser.sourceLayer;
+    const featureIndex = tile.mesh[layerId].getFeatureIndex(featureId);
+    const feature = this._getVectorFeature(tile.rawData, sourceLayer, featureIndex);
+    return feature ? feature.toGeoJSON(tileXY.x, tileXY.y, zoom) : { };
+  }
+  _getParentTile(x, y, z, minZoom) {
+    if (z < minZoom) return null;
+    const key = [ x, y, z ].join('_');
+    const tile = this._tileCache.getTile(key);
+    if (!tile) {
+      return this._getParentTile(Math.floor(x / 2), Math.floor(y / 2), z - 1);
+    }
+    return tile;
+  }
+
+  _getVectorFeature(rawTile, sourceLayer, featureIndex) {
+    const vectorTile = new VectorParser.VectorTile(new PBF(rawTile));
+    if (featureIndex < 0) {
+      return;
+    }
+    return vectorTile.layers[sourceLayer].feature(featureIndex);
+
+  }
   // 计算视野内的瓦片坐标
   _calculateTileIDs() {
     this._tileMap = {};
@@ -265,6 +299,16 @@ export default class SouceCache extends Base {
         }
       }
     }
+  }
+   // 地图拾取
+  _addPickMesh(layer, meshObj) {
+    if (this.type === 'image') {
+      return;
+    }
+    const pickCtr = layer.get('pickingController');
+    const mesh = meshObj.children[0];
+    mesh.name = meshObj.name;
+    pickCtr.addPickMesh(mesh);
   }
   _removeOutTiles() {
     // 移除视野外的tile
@@ -286,6 +330,8 @@ export default class SouceCache extends Base {
         const key = tile.name;
         if (!this.tileList[key]) {
           layers[i].tiles.remove(tile);
+          const pickCtr = layers[i].get('pickingController');
+          pickCtr && pickCtr.removePickMeshByName(key);
         }
       });
     }
@@ -295,5 +341,4 @@ export default class SouceCache extends Base {
     this._unloadTile(key);
   }
   // 移除视野外的tile
-
 }
diff --git a/src/source/vector_tile_worker_source.js b/src/source/vector_tile_worker_source.js
index 6a16850a02..6e9a4f6b4b 100644
--- a/src/source/vector_tile_worker_source.js
+++ b/src/source/vector_tile_worker_source.js
@@ -41,14 +41,14 @@ export default class VectorTileWorkerSource {
         this.loaded[uid] = workerTile;
         return callback(err);
       }
-      // const rawTileData = response.rawData;
       workerTile.vectorTile = response.vectorTile;
+      const rawTileData = response.rawData;
       workerTile.parse(response.vectorTile, this.layerStyle, this.actor, (err, result) => {
         if (err || !result) return callback(err);
         // Transferring a copy of rawTileData because the worker needs to retain its copy.
         callback(null, {
-          // rawTileData: rawTileData.slice(0),
-          ...result
+          buffer: result,
+          rawTileData: rawTileData.slice(0)
         });
       });
 
diff --git a/src/util/bkdr-hash.js b/src/util/bkdr-hash.js
index c916b85a48..b725e0675f 100644
--- a/src/util/bkdr-hash.js
+++ b/src/util/bkdr-hash.js
@@ -15,6 +15,7 @@ export function BKDRHash(str) {
   return hash;
 }
 export function djb2hash(str) {
+  str = str.toString();
   let hash = 5381,
     i = str.length;
 
diff --git a/src/util/dom.js b/src/util/dom.js
new file mode 100644
index 0000000000..9c41f1f823
--- /dev/null
+++ b/src/util/dom.js
@@ -0,0 +1,80 @@
+import * as Util from './util';
+export function create(tagName, className, container) {
+  const el = document.createElement(tagName);
+  el.className = className || '';
+
+  if (container) {
+    container.appendChild(el);
+  }
+  return el;
+}
+// @function remove(el: HTMLElement)
+// Removes `el` from its parent element
+export function remove(el) {
+  const parent = el.parentNode;
+  if (parent) {
+    parent.removeChild(el);
+  }
+}
+
+// @function addClass(el: HTMLElement, name: String)
+// Adds `name` to the element's class attribute.
+export function addClass(el, name) {
+  if (el.classList !== undefined) {
+    const classes = Util.splitWords(name);
+    for (let i = 0, len = classes.length; i < len; i++) {
+      el.classList.add(classes[i]);
+    }
+  } else if (!hasClass(el, name)) {
+    const className = getClass(el);
+    setClass(el, (className ? className + ' ' : '') + name);
+  }
+}
+
+// @function removeClass(el: HTMLElement, name: String)
+// Removes `name` from the element's class attribute.
+export function removeClass(el, name) {
+  if (el.classList !== undefined) {
+    el.classList.remove(name);
+  } else {
+    setClass(el, Util.trim((' ' + getClass(el) + ' ').replace(' ' + name + ' ', ' ')));
+  }
+}
+
+// @function hasClass(el: HTMLElement, name: String): Boolean
+// Returns `true` if the element's class attribute contains `name`.
+export function hasClass(el, name) {
+  if (el.classList !== undefined) {
+    return el.classList.contains(name);
+  }
+  const className = getClass(el);
+  return className.length > 0 && new RegExp('(^|\\s)' + name + '(\\s|$)').test(className);
+}
+
+// @function setClass(el: HTMLElement, name: String)
+// Sets the element's class.
+export function setClass(el, name) {
+  if (el.className.baseVal === undefined) {
+    el.className = name;
+  } else {
+    // in case of SVG element
+    el.className.baseVal = name;
+  }
+}
+
+// @function getClass(el: HTMLElement): String
+// Returns the element's class.
+export function getClass(el) {
+  // Check if the element is an SVGElementInstance and use the correspondingElement instead
+  // (Required for linked SVG elements in IE11.)
+  if (el.correspondingElement) {
+    el = el.correspondingElement;
+  }
+  return el.className.baseVal === undefined ? el.className : el.className.baseVal;
+}
+
+export function empty(el) {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+}
diff --git a/src/util/event.js b/src/util/event.js
new file mode 100644
index 0000000000..0cbf11991f
--- /dev/null
+++ b/src/util/event.js
@@ -0,0 +1,6 @@
+export function bindAll(fns, context) {
+  fns.forEach(fn => {
+    if (!context[fn]) { return; }
+    context[fn] = context[fn].bind(context);
+  });
+}
diff --git a/src/util/util.js b/src/util/util.js
new file mode 100644
index 0000000000..f571d06f2c
--- /dev/null
+++ b/src/util/util.js
@@ -0,0 +1,9 @@
+export function trim(str) {
+  return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
+}
+
+// @function splitWords(str: String): String[]
+// Trims and splits the string on whitespace and returns the array of parts.
+export function splitWords(str) {
+  return trim(str).split(/\s+/);
+}
diff --git a/src/worker/actor.js b/src/worker/actor.js
index e5b58b0dc6..14a2923f91 100644
--- a/src/worker/actor.js
+++ b/src/worker/actor.js
@@ -1,10 +1,5 @@
 import { serialize } from './worker_transform';
-function bindAll(fns, context) {
-  fns.forEach(fn => {
-    if (!context[fn]) { return; }
-    context[fn] = context[fn].bind(context);
-  });
-}
+import { bindAll } from '../util/event';
 
 export default class Actor {
   constructor(target, parent, mapId) {
diff --git a/src/worker/workerTile.js b/src/worker/workerTile.js
index 6b922e8d41..40426c9435 100644
--- a/src/worker/workerTile.js
+++ b/src/worker/workerTile.js
@@ -2,6 +2,7 @@ import TileMapping from '../core/controller/tile_mapping';
 import { getBuffer } from '../geom/buffer/index';
 import Source from '../core/source';
 import Global from '../global';
+import { feature } from '_@turf_helpers@6.1.4@@turf/helpers';
 const { pointShape } = Global;
 
 export default class WorkerTile {
@@ -25,16 +26,15 @@ export default class WorkerTile {
       const style = sourceStyle[sourcelayer][0];
       style.sourceOption.parser.type = 'vector';
       style.sourceOption.parser.tile = tile;
-      const tileSource2 = new Source({
+      const tileSource = new Source({
         ...style.sourceOption,
         mapType: style.mapType,
         projected: true,
         data: data.layers[sourcelayer]
       });
-
       for (let i = 0; i < sourceStyle[sourcelayer].length; i++) {
         const style = sourceStyle[sourcelayer][i];
-        const tileMapping = new TileMapping(tileSource2, style);
+        const tileMapping = new TileMapping(tileSource, style);
         if (style.type === 'point') {
           style.shape = this._getPointShape(tileMapping);
         }
@@ -53,11 +53,13 @@ export default class WorkerTile {
           shape: style.shape,
           layerId: style.layerId,
           sourcelayer,
-          tileId: this.tileID
+          tileId: this.tileID,
+          featureKey: tileSource.data.featureKeys.slice(0)
         };
       }
     }
     this.status = 'done';
+
     callback(null, { ...sourceLayerData });
   }
   _layerStyleGroupBySourceID(layerStyles) {