Merge pull request #54 from antvis/site

add website
2019-11-10 21:29:53 +08:00 · 2019-11-10 21:29:53 +08:00 · 89424b8fc2
parent d49ba3ee42 0e000f5715
commit 89424b8fc2
178 changed files with 15637 additions and 430 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,5 @@
+{
+  "globals": {
+    "AMap": true
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -67,3 +67,92 @@ jspm_packages/
 lib/

 .DS_Store
+public
+.cache/redirects.json
+.cache/redux.state
+.cache/caches/gatsby-transformer-remark/diskstore-0b12f383a1ce9a8cdbb2a4f52cf8af84.json
+.cache/caches/gatsby-transformer-remark/diskstore-1ea0cd3c8f491f1774b8edd1ce38b1f9.json
+.cache/caches/gatsby-transformer-remark/diskstore-2b8cd1df4f8a6941bff4108301b5d6a9.json
+.cache/caches/gatsby-transformer-remark/diskstore-2c713f7ba9a30ac45cbadf6d86d5d544.json
+.cache/caches/gatsby-transformer-remark/diskstore-2e9a5d11bfbd9e331e877b0e013a0ab8.json
+.cache/caches/gatsby-transformer-remark/diskstore-03f70e3c5a52291e52b331e3d35900a4.json
+.cache/caches/gatsby-transformer-remark/diskstore-5a894e6dcf41aaf38dcfe7c4ef24bb6c.json
+.cache/caches/gatsby-transformer-remark/diskstore-5aa0c32748bae2a74e08828fed4fd3a6.json
+.cache/caches/gatsby-transformer-remark/diskstore-5be2deb5db771c62d6348aacc8798213.json
+.cache/caches/gatsby-transformer-remark/diskstore-5ce457da6f1384d2d0a1c8d65aa7035f.json
+.cache/caches/gatsby-transformer-remark/diskstore-5e29728bfdb977a2a740b90f7e81c026.json
+.cache/caches/gatsby-transformer-remark/diskstore-6e44d9bde57e425196c802f385c59145.json
+.cache/caches/gatsby-transformer-remark/diskstore-7c691ebc8b681ec76a0dd2b62e2186ba.json
+.cache/caches/gatsby-transformer-remark/diskstore-8a657829abac5ed5e9e205e519d6ded0.json
+.cache/caches/gatsby-transformer-remark/diskstore-8c6f6648e48a1e25d0879cba52c6f15c.json
+.cache/caches/gatsby-transformer-remark/diskstore-9a6db7a621d98f2e40fca942ffec8d7f.json
+.cache/caches/gatsby-transformer-remark/diskstore-09be3cfc8fb53b393e594e000fb9c3c4.json
+.cache/caches/gatsby-transformer-remark/diskstore-9ea0254de64dbc01eafc57f7dafb6400.json
+.cache/caches/gatsby-transformer-remark/diskstore-9fb8c242123b7f40762c92122bacea8e.json
+.cache/caches/gatsby-transformer-remark/diskstore-31a80985ee546abb7aa91ce454986fb1.json
+.cache/caches/gatsby-transformer-remark/diskstore-34caa57442541fb555e65adf766c9dbf.json
+.cache/caches/gatsby-transformer-remark/diskstore-35f1e3ed2504889557819cd85f730da3.json
+.cache/caches/gatsby-transformer-remark/diskstore-51d0f3b693c1d063f395570395293fb4.json
+.cache/caches/gatsby-transformer-remark/diskstore-60ffaa0253ce67428f5a7e31a4a0bad1.json
+.cache/caches/gatsby-transformer-remark/diskstore-61c1d71d82d9e8cb724bc675e994ee07.json
+.cache/caches/gatsby-transformer-remark/diskstore-62ff8f6ebb8d87c110d712e03f9a98e9.json
+.cache/caches/gatsby-transformer-remark/diskstore-63f86e913288c0406ba43ec83f25684f.json
+.cache/caches/gatsby-transformer-remark/diskstore-97cfab1e1ad583ea0fa987b5c84f159c.json
+.cache/caches/gatsby-transformer-remark/diskstore-314bc0cb54aa930a49cfb58df8b50ffa.json
+.cache/caches/gatsby-transformer-remark/diskstore-335fc52df6558698584a4c58a93133dc.json
+.cache/caches/gatsby-transformer-remark/diskstore-468b5bae8ef758f28811323986a026ca.json
+.cache/caches/gatsby-transformer-remark/diskstore-479f7412bfaf2ad395f176418584631a.json
+.cache/caches/gatsby-transformer-remark/diskstore-509da604a7cd9c41a31392dd15cfd143.json
+.cache/caches/gatsby-transformer-remark/diskstore-833c6a9868536cc7f0ee995069745bd6.json
+.cache/caches/gatsby-transformer-remark/diskstore-3240b72791cdbb0de473bd7b0fc3f4a3.json
+.cache/caches/gatsby-transformer-remark/diskstore-4959c881d2fccc57dea5cba657223041.json
+.cache/caches/gatsby-transformer-remark/diskstore-6195db1b342fb1235a247e18694e1cc8.json
+.cache/caches/gatsby-transformer-remark/diskstore-8152d0a6832522eb79f34eecc5e89cd4.json
+.cache/caches/gatsby-transformer-remark/diskstore-9429c44d730cc08b4b28804d3d7d5a2c.json
+.cache/caches/gatsby-transformer-remark/diskstore-19012e1f6f28c599baa0778f3e002c21.json
+.cache/caches/gatsby-transformer-remark/diskstore-20649dc8fd4cdde49b1d9ea0c26371b2.json
+.cache/caches/gatsby-transformer-remark/diskstore-96374eabb69d89610d3ad583e7ef7bfc.json
+.cache/caches/gatsby-transformer-remark/diskstore-164252f91872bc33e77d29eb616fafa1.json
+.cache/caches/gatsby-transformer-remark/diskstore-419766453a3a10f392d412948ad4520a.json
+.cache/caches/gatsby-transformer-remark/diskstore-2763556052b3406bbcf4532fe8fa5d4e.json
+.cache/caches/gatsby-transformer-remark/diskstore-a9a7598872d374acd56469ecbe4a84da.json
+.cache/caches/gatsby-transformer-remark/diskstore-a7725b15bd64a40f9d4d5eb35340b314.json
+.cache/caches/gatsby-transformer-remark/diskstore-aae05a37d5dbc73377131a3df8a830bd.json
+.cache/caches/gatsby-transformer-remark/diskstore-b0407a444ef8acb3f4819a2fd00c5ae3.json
+.cache/caches/gatsby-transformer-remark/diskstore-b923ecb39dc7dd6f4752bf9bbf5c94da.json
+.cache/caches/gatsby-transformer-remark/diskstore-b089023713dde4294665d832c48ccd63.json
+.cache/caches/gatsby-transformer-remark/diskstore-bbdcb1122dc2a86aef4134f4c5c42dc1.json
+.cache/caches/gatsby-transformer-remark/diskstore-bd3cd1387f798ad20e18475f0929f324.json
+.cache/caches/gatsby-transformer-remark/diskstore-be4a0f00b712d152c6b7536968d29cef.json
+.cache/caches/gatsby-transformer-remark/diskstore-bea1dfafb379b4e5e4393814eff70f54.json
+.cache/caches/gatsby-transformer-remark/diskstore-bee012580db1a2e5f57e03421caf971f.json
+.cache/caches/gatsby-transformer-remark/diskstore-bf54f7f5282b043f03b2a3733bdac4f3.json
+.cache/caches/gatsby-transformer-remark/diskstore-bf0995ffe3e44d36b50e8f808495c563.json
+.cache/caches/gatsby-transformer-remark/diskstore-bf3648bcc8f9d552a4439069ae408fad.json
+.cache/caches/gatsby-transformer-remark/diskstore-c32f0608dadae224d91a44d7bb4b66db.json
+.cache/caches/gatsby-transformer-remark/diskstore-c320ffacf9b8eef3d92229d6a1a70d96.json
+.cache/caches/gatsby-transformer-remark/diskstore-ca2fb97dfd9c7f243ca223efc08ffba5.json
+.cache/caches/gatsby-transformer-remark/diskstore-ca3867e16d821cfd8579d7b29582e0b8.json
+.cache/caches/gatsby-transformer-remark/diskstore-cbe5331f7cf63c058404726cdea224c2.json
+.cache/caches/gatsby-transformer-remark/diskstore-cc83f0f387424948934f22053503ed85.json
+.cache/caches/gatsby-transformer-remark/diskstore-d0b48925fc35a486d2edcefd379a8067.json
+.cache/caches/gatsby-transformer-remark/diskstore-d2b3f82b0a8e66040aa810a8958afe0d.json
+.cache/caches/gatsby-transformer-remark/diskstore-d4b28ce0015b79c52ff804a21a129aa0.json
+.cache/caches/gatsby-transformer-remark/diskstore-d41ece99b0e508f70b31a8152b25f8a5.json
+.cache/caches/gatsby-transformer-remark/diskstore-db5d13902d2d007ceff5537b4ca04b11.json
+.cache/caches/gatsby-transformer-remark/diskstore-dc1901f7f1baf243df1556f52717b2ba.json
+.cache/caches/gatsby-transformer-remark/diskstore-ddc1db31dfe2bcb6d2040bce323f5828.json
+.cache/caches/gatsby-transformer-remark/diskstore-df75817e83ad0a2f79b98ce42e6056a8.json
+.cache/caches/gatsby-transformer-remark/diskstore-e49d5822f90847d686ab7ed05c412e0b.json
+.cache/caches/gatsby-transformer-remark/diskstore-e2145ab61e30e98413fb69c2f3d5098f.json
+.cache/caches/gatsby-transformer-remark/diskstore-e8067f3515dcae00ea981c2733ca40cb.json
+.cache/caches/gatsby-transformer-remark/diskstore-e72135977ad05cc3007997a59f58e7ed.json
+.cache/caches/gatsby-transformer-remark/diskstore-ec259f9adac459854ebecf9375d97a8d.json
+.cache/caches/gatsby-transformer-remark/diskstore-ee0df53bccbd3ad6e6ad1b28c1331ca4.json
+.cache/caches/gatsby-transformer-remark/diskstore-f5cfa5aac1b0651a071bc0b0f90efa3c.json
+.cache/caches/gatsby-transformer-remark/diskstore-f9c2ec20398ba84a7058c3475b4845c3.json
+.cache/caches/gatsby-transformer-remark/diskstore-f250d30e0f7c9f0380924fbf1033efc3.json
+.cache/caches/gatsby-transformer-remark/diskstore-fb18e835921f3dc32ae5b74bdfb36220.json
+.cache/caches/gatsby-transformer-remark/diskstore-fbddf0de549e59cfa8bf242898a85984.json
+.cache/caches/gatsby-transformer-remark/diskstore-feb74fcce830febf6919bf3857a7765f.json
+.cache/caches/gatsby-transformer-remark/diskstore-fffb15ec8285c18963c880046e7fccce.json
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,4 @@
+sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
+electron_mirror=https://npm.taobao.org/mirrors/electron/
+registry=https://registry.npm.taobao.org
--- a/.storybook/addons.ts
+++ b/.storybook/addons.ts
@ -1,3 +1,3 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-notes/register';
-import '@storybook/addon-storysource/register';
+import '@storybook/addon-storysource/register';
--- a/README.md
+++ b/README.md
@ -23,6 +23,13 @@ yarn storybook
 yarn commit
 ```

+## view doc example
+
+```bash
+  npm  start
+```
+visit http://localhost:8000/
+
 ## Add Package

 创建一个新的 package：
@ -43,4 +50,4 @@ yarn workspaces run add lodash
 将 typescript 设置为 root 的开发依赖
 ```bash
 yarn add -W -D typescript jest
-```
+```
--- a/babel.config.js
+++ b/babel.config.js
@ -1,7 +1,21 @@
 // @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
 module.exports = (api) => {
-  api.cache(true);
-
+  api.cache(() => process.env.NODE_ENV);
+  if(api.env("site")) { //
+    return {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "loose": true,
+            "modules": false
+          }
+        ],
+        '@babel/preset-react',
+        "babel-preset-gatsby"
+      ]
+    };
+  }
  return {
    presets: [
      [
--- a/dev-docs/TAA.md
+++ b/dev-docs/TAA.md
@ -71,7 +71,7 @@ this.cameraService.jitterProjectionMatrix(
 useFramebuffer(this.outputRenderTarget, () => {
  this.blendModel.draw({
    uniforms: {
-      u_Opacity: layerStyleOptions.opacity || 1,
+      u_opacity: layerStyleOptions.opacity || 1,
      u_MixRatio: this.frame === 0 ? 1 : 0.9,
      u_Diffuse1: this.sampleRenderTarget,
      u_Diffuse2:
@ -115,4 +115,4 @@ layer.multiPassRenderer.getPostProcessor().render(layer);
 * 「Three.js - TAA example」[🔗](https://threejs.org/examples/#webgl_postprocessing_taa)
 * 「Paper - Amortized Supersampling」[🔗](http://hhoppe.com/supersample.pdf)
 * 「GDC - Temporal Reprojection Anti-Aliasing in INSIDE」[🔗](http://twvideo01.ubm-us.net/o1/vault/gdc2016/Presentations/Pedersen_LasseJonFuglsang_TemporalReprojectionAntiAliasing.pdf)
-* 「知乎 - 低差异序列（一）- 常见序列的定义及性质」[🔗](https://zhuanlan.zhihu.com/p/20197323)
+* 「知乎 - 低差异序列（一）- 常见序列的定义及性质」[🔗](https://zhuanlan.zhihu.com/p/20197323)
--- a/docs/API/L7.md
+++ b/docs/API/L7.md
@ -0,0 +1,6 @@
+---
+title: 简介
+order: 0
+redirect_from:
+  - /zh/docs/API
+---
--- a/docs/API/Scene.md
+++ b/docs/API/Scene.md
@ -0,0 +1,321 @@
+---
+title: Scene
+order: 1
+---
+
+## 简介
+`Scene `基础的地图类,提供地图创建，图层创建，管理等功能
+
+示例代码
+
+```javascript
+import {Scene} from '@l7/scene';
+const scene =new L7.Scene({
+    id:'map',
+    mapStyle:'dark',
+    center:[ 110.770672, 34.159869 ],
+    pitch:45
+})
+```
+
+
+### 构造函数
+
+**Scene**<br />支持两种实例化方式
+
+- 独立实例化 内部根据id自动穿件地图实例
+- 传入地图实例
+
+
+
+
+
+#### 独立实例化 Scene
+
+```javascript
+const scene = new L7.Scene({
+  id: 'map',
+  mapStyle: 'dark', 
+  center: [ 120.19382669582967, 30.258134 ],
+  pitch: 0,
+  zoom: 12,
+  maxZoom:20,
+  minZoom:0,
+});
+```
+
+
+#### 根据map 实例创建Sence
+
+_L7 基于高德地图3D模式开发的，因此传入Map实例 __viewModes需要设置成3d_<br />_
+```javascript
+var mapinstance = new AMap.Map('map',{
+    center: [ 120.19382669582967, 30.258134 ],
+    viewMode: '3D',
+    pitch: 0,
+    zoom: 12,
+    maxZoom:20,
+    minZoom:0,
+ });
+
+const scene = new L7.Scene({
+  mapStyle: 'dark',
+  map:mapinstance
+});
+```
+
+
+## map
+L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
+
+```javascript
+scene.map
+```
+
+
+## 构造类
+
+### PointLayer
+新建点图层
+
+### PolylineLayer
+新建线图层
+
+### PolygonLayer
+新建面图层
+
+### ImageLayer
+新建图片图层
+
+
+## 配置项
+
+### id
+需传入 dom 容器或者容器 id  {domObject || string} [必选]
+
+
+### zoom
+地图初始显示级别 {number}  （0-22）
+
+### center
+地图初始中心经纬度 {Lnglat}
+
+### pitch
+地图初始俯仰角度 {number}  default 0
+
+### mapSyle
+地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
+
+设置地图的显示样式，目前支持两种地图样式：<br />第一种：自定义地图样式，如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式；<br />第二种：官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
+
+
+### minZoom
+地图最小缩放等级 {number}  default 0  (0-22)
+
+### maxZoom
+地图最大缩放等级 {number}  default 22  (0-22)
+
+### rotateEnable
+地图是否可旋转 {Boolean} default true
+
+
+
+
+## 方法
+
+### getZoom
+获取当前缩放等级
+
+```javascript
+scene.getZoom();
+```
+
+return  {float}  当前缩放等级
+
+### getLayers()
+获取所有的地图图层
+```javascript
+scene.getLayers();
+```
+
+return 图层数组  {Array}
+
+
+### getCenter()
+获取地图中心点
+```javascript
+scene.getCenter()
+```
+
+return {Lnglat} :地图中心点
+
+### getSize()
+获取地图容器大小
+```javascript
+scene.getSize()
+```
+return { Object } 地图容器的 width,height
+
+### getPitch()
+获取地图俯仰角
+```javascript
+scene.getPitch();
+```
+
+return {number} pitch
+
+### setCenter()
+设置地图中心点坐标
+
+```javascript
+scene.setCenter([lng,lat])
+```
+
+参数：`center`  {LngLat} 地图中心点
+
+
+### setZoomAndCenter
+设置地图等级和中心
+```javascript
+scene.setZoomAndCenter(zoom,center)
+```
+
+参数：zoom {number}<br />center {LngLat}
+
+
+### setRotation
+设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
+```javascript
+scene.setRotation(rotation)
+```
+
+参数： `rotation`   {number}
+
+### zoomIn
+地图放大一级
+```javascript
+scene.zoomIn()
+```
+
+### zoomOut
+地图缩小一级
+```javascript
+scene.ZoomOUt()
+```
+
+### panTo
+地图平移到指定的位置
+```javascript
+scene.panTo(LngLat)
+```
+
+参数：`center`  LngLat 中心位置坐标
+
+### panBy
+以像素为单位沿X方向和Y方向移动地图
+```javascript
+scene.panBy(x,y)
+```
+参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y`  {number} 垂直方向移动像素 向下为正方向
+
+
+### setPitch
+设置地图仰俯角度
+```javascript
+scene.setPitch(pitch)
+```
+
+参数 :<br />   `pitch`  {number}
+
+### 
+
+### setStatus
+设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等   
+
+```javascript
+    scene.setStatus({
+      dragEnable: true,
+      keyboardEnable: true,
+      doubleClickZoom: true,
+      zoomEnable: true,
+      rotateEnable: true
+    });
+```
+
+
+### fitBounds
+地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
+
+```javascript
+scene.fitBounds([112,32,114,35]);
+```
+
+
+
+### removeLayer
+移除layer
+
+```javascript
+scene.removeLayer(layer)
+```
+
+参数<br />`layer`  {Layer}
+
+### getLayers
+ 获取所有的layer
+
+```javascript
+scene.getLayers()
+```
+
+return  layers  {array}
+
+## 事件
+
+
+### on
+事件监听
+
+#### 参数
+`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
+
+
+### off
+移除事件监听<br />`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
+
+
+### 地图事件
+```javascript
+scene.on('loaded',()=>{})  //地图加载完成触发
+scene.on('mapmove',()=>{}) // 地图平移时触发事件
+scene.on('movestart',()=>{}) // 地图平移开始时触发
+scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
+scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
+scene.on('zoomstart',()=>{}) // 缩放开始时触发
+scene.on('zoomend',()=>{}) // 缩放停止时触发
+```
+
+
+### 鼠标事件
+
+```javascript
+scene.on('click', (ev)=>{});             // 鼠标左键点击事件
+scene.on('dblclick', (ev)=>{});          // 鼠标左键双击事件
+scene.on('mousemove', (ev)=>{});        // 鼠标在地图上移动时触发
+scene.on('mousewheel', (ev)=>{});        // 鼠标滚轮开始缩放地图时触发
+scene.on('mouseover', (ev)=>{});         // 鼠标移入地图容器内时触发
+scene.on('mouseout', (ev)=>{});           // 鼠标移出地图容器时触发
+scene.on('mouseup', (ev)=>{});         // 鼠标在地图上单击抬起时触发
+scene.on('mousedown', (ev)=>{});         // 鼠标在地图上单击按下时触发
+scene.on('rightclick', (ev)=>{});              // 鼠标右键单击事件
+scene.on('dragstart', (ev)=>{});           //开始拖拽地图时触发
+scene.on('dragging', (ev)=>{});         // 拖拽地图过程中触发
+scene.on('dragend', (ev)=>{});         //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
+```
+
+### 其它事件
+```javascript
+scene.on('resize',()=>{}) // 地图容器大小改变事件
+```
+
+
--- a/docs/API/component/control.md
+++ b/docs/API/component/control.md
@ -0,0 +1,137 @@
+---
+title: 地图组件
+order: 1
+---
+# control
+
+地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
+
+
+## 构造函数
+
+```javascript
+const baseControl = new L7.Control.Base(option);
+```
+
+
+#### option
+ position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
+
+
+#### scene 内置地图组件
+zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表
+
+**scene配置项设置控件添加状态**
+
+```javascript
+scene = new L7.scene({
+   zoomControl: true,
+   scaleControl: true,
+   attributionControl: true
+})
+```
+
+#### 
+
+#### Zoom
+放大缩小组件 默认 左上角
+
+```javascript
+ new L7.Control.Zoom({
+      position: 'topleft'
+    }).addTo(scene);
+```
+
+
+#### Scale
+比例尺组件默认左下角
+
+```javascript
+ new L7.Control.Scale({
+      position: 'bottomleft'
+    }).addTo(scene);
+```
+
+
+#### attribution
+默认右下角
+
+```javascript
+new L7.Control.Attribution({
+      position: 'bottomleft'
+    }).addTo(scene);
+```
+
+
+#### layer
+图层列表目前只支持可视化overlayers 图层控制
+
+```javascript
+ var overlayers = {
+        "围栏填充": layer,
+        "围栏边界": layer2
+      };
+new L7.Control.Layers({
+  overlayers: overlayers
+}).addTo(scene);
+```
+
+
+## 方法
+
+#### onAdd
+组件添加到地图Scene时调用，自定义组件时需要实现此方法
+
+
+#### addTo
+添加到地图scene
+
+```javascript
+control.addTo(scene);
+```
+
+
+#### setPosition
+设置组件位置
+
+```javascript
+control.setPosition('bottomright');
+```
+
+
+#### remove
+移除地图组件
+
+```javascript
+control.remove();
+```
+
+
+
+## 示例代码
+
+
+#### 自定义图例控件
+[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
+
+```javascript
+var legend = new L7.Control.Base({
+        position: 'bottomright'
+      });
+      legend.onAdd = function() {
+        var el = document.createElement('div');
+        el.className = 'infolegend legend';
+        var grades = [0, 8, 15, 30, 65, 120];
+        for (var i = 0; i < grades.length; i++) {
+          el.innerHTML += '<i style="background:' + colors[i] + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
+        }
+        return el;
+      };
+      legend.addTo(scene);
+
+```
+
+## 
+
+## FAQ
+
--- a/docs/API/component/marker.md
+++ b/docs/API/component/marker.md
@ -0,0 +1,83 @@
+---
+title: 地图标注
+order: 0
+---
+
+Marker 地图标注 目前只支持2D dom标注
+
+
+## 构造函数
+Marker<br />`const Marker = new L7.Marker(option)`
+
+
+#### option
+
+- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色
+- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id
+- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
+- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
+
+
+## 方法
+
+#### setLnglat
+设置marker经纬度位置
+
+#### addTo
+将marker添加到地图Scene
+
+#### remove
+移除marker
+
+#### getElement
+获取marker dom Element
+
+#### getLngLat
+获取marker经纬度坐标
+
+#### togglePopup
+开启或者关闭marker弹出框
+
+#### setPopup
+为marker设置popup
+
+#### getPopup
+获取marker弹出框
+
+
+## 示例代码
+
+#### 默认Marker
+**<br />` const marker = new L7.Marker({color:'blue'})`
+
+
+#### 自定义Marker
+
+```javascript
+var el = document.createElement('label');
+       el.className = 'lableclass';
+       el.textContent = data[i].v;
+       el.style.background = getColor(data[i].v);
+       new L7.Marker({
+         element: el
+       })
+       .setLnglat([data[i].x * 1, data[i].y])
+        .addTo(scene);
+```
+
+
+#### 设置 popup
+
+```javascript
+  var popup = new L7.Popup({
+          anchor: 'left'
+        }).setText(item.name);
+
+new L7.Marker({
+  element: el
+}).setLnglat(item.coordinates)
+  .setPopup(popup)
+  .addTo(scene);
+```
+
+
--- a/docs/API/component/popup.md
+++ b/docs/API/component/popup.md
@ -0,0 +1,92 @@
+---
+title: 地图信息框
+order: 0
+---
+# popup
+
+地图标注信息窗口，用于展示地图要素的属性信息
+
+
+## 构造函数
+Popup
+
+```javascript
+const popup = new L7.Popup(option)
+```
+
+
+#### option
+
+- closeButton
+- closeOnClick
+- maxWidth
+- anchor
+
+
+## 方法
+
+#### setLnglat
+设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
+
+```javascript
+popup.setLnglat([112, 32]);
+```
+
+
+#### addTo
+**参数**：scene 地图scene实例
+
+将popup添加到地图scene显示
+
+```javascript
+popup.addTo(scene);
+```
+
+
+#### setHtml
+**参数**：html 字符串
+
+设置popup html 内容
+
+```javascript
+var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n        <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n        <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n        ';
+popup.setHtml(html);
+
+```
+
+
+#### setText
+设置 popup 显示文本内容
+
+```javascript
+popup.setText('hello world');
+```
+
+
+#### remove
+移除popup
+
+```javascript
+popup.remove()
+```
+
+
+## 事件
+
+#### close
+
+```javascript
+popup.on('close',()=>{})
+```
+
+
+## 示例代码
+
+#### 添加popup
+
+```
+  var html = '<p>'+feature.m+'</p>';
+  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
+```
+
+### FAQ
--- a/docs/manual/tutorial/data.md
+++ b/docs/manual/tutorial/data.md
@ -0,0 +1,65 @@
+---
+title: 数据
+order: 1
+---
+
+## 数据
+
+目前L7支持的数据格式有GeoJson,CSV,JSon Image
+
+GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
+
+
+## GeoJSON
+
+> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
+
+
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              110.478515625,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              32.76880048488168
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
+
+## 地理统计分析工具
+[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
+
+## 在线工具
+
+[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
+
+[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据
--- a/docs/manual/tutorial/quickStart.md
+++ b/docs/manual/tutorial/quickStart.md
@ -0,0 +1,8 @@
+---
+title: 快速上手
+order: 0
+redirect_from:
+  - /zh/docs/tutorial
+---
+
+内容
--- a/docs/specification/introduction.md
+++ b/docs/specification/introduction.md
@ -0,0 +1,7 @@
+---
+title: 简介
+order: 1
+redirect_from:
+  - /zh/docs/specification
+---
+L7 地理空间可视化设计语言
--- a/examples/data/basic/demo/line.js
+++ b/examples/data/basic/demo/line.js
@ -0,0 +1,39 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 13,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size(1)
+        .shape('line')
+        .color(
+          'ELEV',
+          [
+            '#E8FCFF',
+            '#CFF6FF',
+            '#A1E9ff',
+            '#65CEF7',
+            '#3CB1F0',
+            '#2894E0',
+            '#1772c2',
+            '#105CB3',
+            '#0D408C',
+            '#002466',
+          ].reverse(),
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/data/basic/demo/meta.json
+++ b/examples/data/basic/demo/meta.json
@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "line.js",
+      "title": "线图层",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/data/basic/index.zh.md
+++ b/examples/data/basic/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 数据
+order: 0
+---
--- a/examples/gallery/basic/demo/line.js
+++ b/examples/gallery/basic/demo/line.js
@ -0,0 +1,39 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 13,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size(1)
+        .shape('line')
+        .color(
+          'ELEV',
+          [
+            '#E8FCFF',
+            '#CFF6FF',
+            '#A1E9ff',
+            '#65CEF7',
+            '#3CB1F0',
+            '#2894E0',
+            '#1772c2',
+            '#105CB3',
+            '#0D408C',
+            '#002466',
+          ].reverse(),
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/gallery/basic/demo/meta.json
+++ b/examples/gallery/basic/demo/meta.json
@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "line.js",
+      "title": "线图层",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/gallery/basic/index.zh.md
+++ b/examples/gallery/basic/index.zh.md
@ -0,0 +1,4 @@
+---
+title: Gallery
+order: 0
+---
--- a/examples/heatmap/basic/demo/grid.js
+++ b/examples/heatmap/basic/demo/grid.js
@ -0,0 +1,55 @@
+import { Scene } from '@l7/scene';
+import { HeatMapGridLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'amap',
+  zoom: 16,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapGridLayer({
+      })
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
+        transforms: [
+          {
+            type: 'grid',
+            size: 50,
+            field: 'count',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (value) => {
+        return value;
+      })
+      .shape('square')
+      .style({
+        coverage: 0.8,
+        angle: 0,
+        opacity: 0.6,
+      })
+      .color('count', [
+        '#002466',
+        '#105CB3',
+        '#2894E0',
+        '#CFF6FF',
+        '#FFF5B8',
+        '#FFAB5C',
+        '#F27049',
+        '#730D1C',
+      ]);
+    scene.addLayer(layer);
+
+
+  });
--- a/examples/heatmap/basic/demo/meta.json
+++ b/examples/heatmap/basic/demo/meta.json
@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "网格热力图",
+    "en": "heatmap"
+  },
+  "demos": [
+    {
+      "filename": "grid.js",
+      "title": "网格热力图"
+    },
+    {
+      "filename": "world.js",
+      "title": "世界电厂热力图"
+    }
+  ]
+}
--- a/examples/heatmap/basic/demo/world.js
+++ b/examples/heatmap/basic/demo/world.js
@ -0,0 +1,53 @@
+import { Scene } from '@l7/scene';
+import { HeatMapGridLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'amap',
+  zoom: 3,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapGridLayer({
+      })
+      .source(data, {
+        transforms: [
+          {
+            type: 'grid',
+            size: 100000,
+            field: 'capacity',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (value) => {
+        return value;
+      })
+      .scale('sum',{
+        type:'quantile',
+      })
+      .shape('square')
+      .style({
+        coverage: 1,
+        angle: 0,
+        opacity: 1.0,
+      })
+      .color('sum', [
+        '#002466',
+        '#105CB3',
+        '#2894E0',
+        '#CFF6FF',
+        '#FFF5B8',
+        '#FFAB5C',
+        '#F27049',
+        '#730D1C',
+      ]);
+    scene.addLayer(layer);
+
+
+  });
--- a/examples/heatmap/basic/index.zh.md
+++ b/examples/heatmap/basic/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 网格热力图
+order: 1
+---
--- a/examples/heatmap/heatmap/demo/grid.js
+++ b/examples/heatmap/heatmap/demo/grid.js
@ -0,0 +1,55 @@
+import { Scene } from '@l7/scene';
+import { HeatMapGridLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'amap',
+  zoom: 16,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapGridLayer({
+      })
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
+        transforms: [
+          {
+            type: 'grid',
+            size: 50,
+            field: 'count',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (value) => {
+        return value;
+      })
+      .shape('square')
+      .style({
+        coverage: 0.8,
+        angle: 0,
+        opacity: 0.6,
+      })
+      .color('count', [
+        '#002466',
+        '#105CB3',
+        '#2894E0',
+        '#CFF6FF',
+        '#FFF5B8',
+        '#FFAB5C',
+        '#F27049',
+        '#730D1C',
+      ]);
+    scene.addLayer(layer);
+
+
+  });
--- a/examples/heatmap/heatmap/demo/meta.json
+++ b/examples/heatmap/heatmap/demo/meta.json
@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "网格热力图",
+    "en": "heatmap"
+  },
+  "demos": [
+    {
+      "filename": "grid.js",
+      "title": "网格热力图"
+    },
+    {
+      "filename": "world.js",
+      "title": "世界电厂热力图"
+    }
+  ]
+}
--- a/examples/heatmap/heatmap/demo/world.js
+++ b/examples/heatmap/heatmap/demo/world.js
@ -0,0 +1,39 @@
+import { Scene } from '@l7/scene';
+import { HeatMapLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'mapbox',
+  zoom: 3,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapLayer({
+      })
+      .source(data)
+      .size('capacity', [0, 1]) // weight映射通道
+      .style({
+        intensity: 10,
+        radius: 5,
+        opacity: 1.0,
+        rampColors: {
+          colors: [
+            '#2E8AE6',
+            '#69D1AB',
+            '#DAF291',
+            '#FFD591',
+            '#FF7A45',
+            '#CF1D49',
+          ],
+          positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
+        },
+      });
+    scene.addLayer(layer);
+
+
+  });
--- a/examples/heatmap/heatmap/index.zh.md
+++ b/examples/heatmap/heatmap/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 热力图
+order: 0
+---
--- a/examples/line/arc/demo/arc.js
+++ b/examples/line/arc/demo/arc.js
@ -0,0 +1,44 @@
+import { ArcLineLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'dark',
+  center: [102.602992, 23.107329],
+  zoom: 0,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json')
+  .then((res) => res.json())
+  .then((data) => {
+
+    function getAirportCoord(idx) {
+      return [data.airports[idx][3], data.airports[idx][4]];
+    }
+    const routes = data.routes.map(function (airline) {
+      return {
+        coord: [
+          getAirportCoord(airline[1]),
+          getAirportCoord(airline[2])
+        ]
+      }
+    });
+
+    const layer =
+      new ArcLineLayer({})
+        .source(routes, {
+          parser: {
+            type: 'json',
+            coordinates: 'coord',
+          },
+        })
+        .size(0.6)
+        .shape('arc')
+        .color('rgb(5, 5, 50)')
+        .style({
+          opacity: 0.05,
+        })
+      ;
+    scene.addLayer(layer);
+  })
--- a/examples/line/arc/demo/arc3d.js
+++ b/examples/line/arc/demo/arc3d.js
@ -0,0 +1,34 @@
+import { Arc3DLineLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 40,
+  type: 'amap',
+  style: 'dark',
+  center: [102.602992, 23.107329],
+  zoom: 3,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
+  .then((res) => res.text())
+  .then((data) => {
+    const layer =
+    new Arc3DLineLayer({})
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng1',
+        y: 'lat1',
+        x1: 'lng2',
+        y1: 'lat2',
+      },
+    })
+    .size(1)
+    .shape('arc')
+    .color('#1558AC')
+    .style({
+      opacity: 0.8,
+    })
+    ;
+   scene.addLayer(layer);
+  })
--- a/examples/line/arc/demo/arcCircle.js
+++ b/examples/line/arc/demo/arcCircle.js
@ -0,0 +1,35 @@
+import { Arc2DLineLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [102.602992, 23.107329],
+  zoom: 2,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
+  .then((res) => res.text())
+  .then((data) => {
+    const layer =
+    new Arc2DLineLayer({})
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng1',
+        y: 'lat1',
+        x1: 'lng2',
+        y1: 'lat2',
+      },
+    })
+    .size(1)
+    .shape('arc')
+    .color('#113681')
+    .style({
+      opacity: 0.8,
+      blur: 0.99
+    })
+    ;
+   scene.addLayer(layer);
+  })
--- a/examples/line/arc/demo/meta.json
+++ b/examples/line/arc/demo/meta.json
@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "弧线",
+    "en": "line"
+  },
+  "demos": [
+
+    {
+      "filename": "arc3d.js",
+      "title": "3D弧线"
+
+    },
+    {
+      "filename": "arcCircle.js",
+      "title": "大圆弧线"
+
+    },
+    {
+      "filename": "arc.js",
+      "title": "弧线"
+
+    }
+  ]
+}
--- a/examples/line/arc/index.zh.md
+++ b/examples/line/arc/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 弧线
+order: 1
+---
--- a/examples/line/basic/demo/line.js
+++ b/examples/line/basic/demo/line.js
@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 14,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size('ELEV', (h) => {
+          return h % 50 === 0 ? 1.0 : 0.5;
+        })
+        .shape('line')
+        .scale('ELEV', {
+          type: 'quantize'
+        })
+        .color(
+          'ELEV',
+          [ '#E4682F',
+            '#FF8752',
+            '#FFA783',
+            '#FFBEA8',
+            '#FFDCD6',
+            '#EEF3FF',
+            '#C8D7F5',
+            '#A5C1FC',
+            '#7FA7F9',
+            '#5F8AE5' ].reverse()
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/line/basic/demo/line2.js
+++ b/examples/line/basic/demo/line2.js
@ -0,0 +1,28 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 4,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .scale('value',{
+          type: 'quantile'
+        })
+        .size('value', [0.5, 1, 1.5, 2])
+        .shape('line')
+        .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/line/basic/demo/meta.json
+++ b/examples/line/basic/demo/meta.json
@ -0,0 +1,20 @@
+{
+  "title": {
+    "zh": "线图层",
+    "en": "line"
+  },
+  "demos": [
+    {
+      "filename": "path.js",
+      "title": "路径"
+    },
+    {
+      "filename": "line.js",
+      "title": "等高线"
+    },
+    {
+      "filename": "line2.js",
+      "title": "等值线"
+    }
+  ]
+}
--- a/examples/line/basic/demo/path.js
+++ b/examples/line/basic/demo/path.js
@ -0,0 +1,28 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [120.2336, 30.2002],
+  zoom: 15,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size(1.5)
+        .shape('line')
+        .color(
+          'name',
+          ['#5B8FF9','#5CCEA1','#7B320A' ]
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/line/basic/index.zh.md
+++ b/examples/line/basic/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 路径
+order: 0
+---
--- a/examples/line/dash/demo/line.js
+++ b/examples/line/dash/demo/line.js
@ -0,0 +1,44 @@
+import { Scene } from '@l7/scene';
+import { DashLineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 14,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new DashLineLayer({
+      })
+        .source(data)
+        .size('ELEV', (h) => {
+          return h % 50 === 0 ? 1.0 : 0.5;
+        })
+        .shape('line')
+        .scale('ELEV', {
+          type: 'quantize'
+        })
+        .color(
+          'ELEV',
+          [ '#E4682F',
+            '#FF8752',
+            '#FFA783',
+            '#FFBEA8',
+            '#FFDCD6',
+            '#EEF3FF',
+            '#C8D7F5',
+            '#A5C1FC',
+            '#7FA7F9',
+            '#5F8AE5' ].reverse()
+        ).style({
+          dashArray:[10, 1],
+        })
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/line/dash/demo/line2.js
+++ b/examples/line/dash/demo/line2.js
@ -0,0 +1,28 @@
+import { Scene } from '@l7/scene';
+import { DashLineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 4,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new DashLineLayer({
+      })
+        .source(data)
+        .scale('value',{
+          type: 'quantile'
+        })
+        .size('value', [0.5, 1, 1.5, 2])
+        .shape('line')
+        .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/line/dash/demo/meta.json
+++ b/examples/line/dash/demo/meta.json
@ -0,0 +1,20 @@
+{
+  "title": {
+    "zh": "线图层",
+    "en": "line"
+  },
+  "demos": [
+    {
+      "filename": "path.js",
+      "title": "路径"
+    },
+    {
+      "filename": "line.js",
+      "title": "等高线"
+    },
+    {
+      "filename": "line2.js",
+      "title": "等值线"
+    }
+  ]
+}
--- a/examples/line/dash/demo/path.js
+++ b/examples/line/dash/demo/path.js
@ -0,0 +1,96 @@
+import { Scene } from '@l7/scene';
+import { DashLineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [120.2336, 30.2002],
+  zoom: 3,
+});
+const lineData ={
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            102.98583984374999,
+            37.666429212090605
+          ],
+          [
+            111.33544921874999,
+            37.23032838760387
+          ],
+          [
+            111.24755859375,
+            34.92197103616377
+          ],
+          [
+            98.15185546874999,
+            35.44277092585766
+          ],
+          [
+            98.701171875,
+            41.09591205639546
+          ],
+          [
+            100.5908203125,
+            41.0130657870063
+          ],
+          [
+            101.09619140625,
+            41.0130657870063
+          ],
+          [
+            101.689453125,
+            41.0130657870063
+          ],
+          [
+            102.26074218749999,
+            41.0130657870063
+          ],
+          [
+            102.26074218749999,
+            40.58058466412761
+          ],
+          [
+            102.23876953125,
+            40.329795743702064
+          ],
+          [
+            102.23876953125,
+            39.977120098439634
+          ],
+          [
+            102.26074218749999,
+            40.212440718286466
+          ],
+          [
+            102.48046875,
+            39.87601941962116
+          ]
+        ]
+      }
+    }
+  ]
+};
+fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new DashLineLayer({
+      })
+        .source(lineData)
+        .size(1.5)
+        .shape('line')
+        .color(
+          '#5B8FF9'
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/line/dash/index.zh.md
+++ b/examples/line/dash/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 虚线
+order: 0
+---
--- a/examples/marker/basic/demo/line.js
+++ b/examples/marker/basic/demo/line.js
@ -0,0 +1,39 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 13,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size(1)
+        .shape('line')
+        .color(
+          'ELEV',
+          [
+            '#E8FCFF',
+            '#CFF6FF',
+            '#A1E9ff',
+            '#65CEF7',
+            '#3CB1F0',
+            '#2894E0',
+            '#1772c2',
+            '#105CB3',
+            '#0D408C',
+            '#002466',
+          ].reverse(),
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/marker/basic/demo/meta.json
+++ b/examples/marker/basic/demo/meta.json
@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "line.js",
+      "title": "线图层",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/marker/basic/index.zh.md
+++ b/examples/marker/basic/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 标注
+order: 0
+---
--- a/examples/point/basic/demo/color.js
+++ b/examples/point/basic/demo/color.js
@ -0,0 +1,39 @@
+import { Scene } from '@l7/scene';
+import { PointLayer, PointImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+  minZoom: 10
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('#5B8FF9')
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+          strokeColor: "#5B8FF9",
+
+        })
+
+        scene.addLayer(pointLayer);
+
+  });
+
+
--- a/examples/point/basic/demo/meta.json
+++ b/examples/point/basic/demo/meta.json
@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "point.js",
+      "title": "气泡图"
+   
+    },
+    {
+      "filename": "world.js",
+      "title": "气泡图 - 电厂装机量"
+    
+    }
+  ]
+}
--- a/examples/point/basic/demo/point.js
+++ b/examples/point/basic/demo/point.js
@ -0,0 +1,37 @@
+import { Scene } from '@l7/scene';
+import { PointLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('name',['#49B5AD', "#5B8FF9"])
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+        })
+
+      scene.addLayer(pointLayer);
+
+  });
+
+
--- a/examples/point/basic/demo/world.js
+++ b/examples/point/basic/demo/world.js
@ -0,0 +1,32 @@
+import { Scene } from '@l7/scene';
+import { PointLayer, PointImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 1,
+  maxZoom: 10
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+        new PointLayer({
+        })
+        .source(data).shape('circle')
+        .size('capacity', [0, 20])
+        .color('status', ['#ced1cc','#ffc83e','#ff8767','#dd54b6','#a45edb'])
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+
+        })
+
+        scene.addLayer(pointLayer);
+
+  });
+
+
--- a/examples/point/basic/index.zh.md
+++ b/examples/point/basic/index.zh.md
@ -0,0 +1,6 @@
+---
+title: 气泡图
+order: 0
+redirect_from:
+  - /zh/examples
+---
--- a/examples/point/image/demo/image.js
+++ b/examples/point/image/demo/image.js
@ -0,0 +1,41 @@
+import { Scene } from '@l7/scene';
+import { PointImageLayer } from '@l7/layers'
+console.log(this);
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+  scene.addImage(
+    '00',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',
+  );
+  scene.addImage(
+    '01',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ',
+  );
+  scene.addImage(
+    '02',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
+  );
+   const imageLayer = new PointImageLayer()
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude'
+        }
+      })
+      .shape('name', ['00', '01','02'])
+      .size(20);
+        scene.addLayer(imageLayer);
+  });
+
+
--- a/examples/point/image/demo/meta.json
+++ b/examples/point/image/demo/meta.json
@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "point.js",
+      "title": "气泡图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/point/image/demo/size.js
+++ b/examples/point/image/demo/size.js
@ -0,0 +1,41 @@
+import { Scene } from '@l7/scene';
+import { PointImageLayer } from '@l7/layers'
+console.log(this);
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+  scene.addImage(
+    '00',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',
+  );
+  scene.addImage(
+    '01',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ',
+  );
+  scene.addImage(
+    '02',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
+  );
+   const imageLayer = new PointImageLayer()
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude'
+        }
+      })
+      .shape('name', ['00', '01','02'])
+      .size('unit_price', [30, 100])
+       scene.addLayer(imageLayer);
+  });
+
+
--- a/examples/point/image/index.zh.md
+++ b/examples/point/image/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 符号图
+order: 1
+---
--- a/examples/polygon/basic/demo/meta.json
+++ b/examples/polygon/basic/demo/meta.json
@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "point.js",
+      "title": "面图层",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/polygon/basic/demo/polygon.js
+++ b/examples/polygon/basic/demo/polygon.js
@ -0,0 +1,26 @@
+import { Scene } from '@l7/scene';
+import { PolygonLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 3,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
+  .then((res) => res.json())
+  .then((data) => {
+    var colors = ["#D7F9F0", "#A6E1E0", "#72BED6", "#5B8FF9", "#3474DB", "#005CBE",'#00419F','#00287E'];
+    const layer =
+      new PolygonLayer({
+      })
+      .source(data)
+      .color('name', colors).shape('fill')
+      .style({
+        opacity: 0.9
+      }).render();
+    scene.addLayer(layer);
+    console.log(layer);
+  });
--- a/examples/polygon/basic/index.zh.md
+++ b/examples/polygon/basic/index.zh.md
@ -0,0 +1,6 @@
+---
+title: 面图层
+order: 0
+redirect_from:
+  - /zh/examples
+---
--- a/examples/raster/basic/demo/line.js
+++ b/examples/raster/basic/demo/line.js
@ -0,0 +1,39 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 13,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size(1)
+        .shape('line')
+        .color(
+          'ELEV',
+          [
+            '#E8FCFF',
+            '#CFF6FF',
+            '#A1E9ff',
+            '#65CEF7',
+            '#3CB1F0',
+            '#2894E0',
+            '#1772c2',
+            '#105CB3',
+            '#0D408C',
+            '#002466',
+          ].reverse(),
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });
--- a/examples/raster/basic/demo/meta.json
+++ b/examples/raster/basic/demo/meta.json
@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "line.js",
+      "title": "线图层",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/raster/basic/index.zh.md
+++ b/examples/raster/basic/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 栅格图层
+order: 0
+---
--- a/examples/scene/basic/demo/amap.js
+++ b/examples/scene/basic/demo/amap.js
@ -0,0 +1,9 @@
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 5,
+});
--- a/examples/scene/basic/demo/mapbox.js
+++ b/examples/scene/basic/demo/mapbox.js
@ -0,0 +1,10 @@
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [ -97.119140625, 38.75408327579141],
+  zoom: 2,
+});
+
--- a/examples/scene/basic/demo/meta.json
+++ b/examples/scene/basic/demo/meta.json
@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/scene/basic/index.zh.md
+++ b/examples/scene/basic/index.zh.md
@ -0,0 +1,7 @@
+---
+title: 地图
+order: 0
+---
+初始 L7 地图实例
+
+
--- a/examples/scene/control/demo/amap.js
+++ b/examples/scene/control/demo/amap.js
@ -0,0 +1,57 @@
+import { Scene } from '@l7/scene';
+import { PointLayer } from '@l7/layers'
+import { Scale, Zoom, Layers } from '@l7/component';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 5,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('name',['#49B5AD', "#5B8FF9"])
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+        })
+
+      scene.addLayer(pointLayer);
+      var overlayers = {
+        "围栏填充": pointLayer,
+      };
+      var baseLayers = {
+        "基础地图": pointLayer,
+      };
+      const layersControl = new Layers({
+        overlayers: overlayers,
+        baseLayers,
+      });
+      
+      scene.addControl(layersControl);
+
+  });
+
+
+
+
+  const zoomControl = new Zoom();
+  const scaleControl = new Scale();
+
+  scene.addControl(zoomControl);
+  scene.addControl(scaleControl);
+ 
--- a/examples/scene/control/demo/mapbox.js
+++ b/examples/scene/control/demo/mapbox.js
@ -0,0 +1,17 @@
+import { Scene } from '@l7/scene';
+import { Scale, Zoom } from '@l7/component';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [-97.119140625, 38.75408327579141],
+  zoom: 2,
+});
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale();
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+
+
--- a/examples/scene/control/demo/meta.json
+++ b/examples/scene/control/demo/meta.json
@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图组件",
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件"
+    }
+  ]
+}
--- a/examples/scene/control/index.zh.md
+++ b/examples/scene/control/index.zh.md
@ -0,0 +1,6 @@
+---
+title: 组件
+order: 0
+---
+
+
--- a/examples/scene/map/demo/amap.js
+++ b/examples/scene/map/demo/amap.js
@ -0,0 +1,9 @@
+import { Scene } from './node_modules/@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 5,
+});
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@ -0,0 +1,5 @@
+import './packages/component/src/css/l7.css';
+window.scene = require('@l7/scene');
+window.layers= require('@l7/layers');
+window.component= require('@l7/component');
+
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -0,0 +1,161 @@
+module.exports = {
+  plugins: [
+    {
+      resolve: '@antv/gatsby-theme-antv',
+      options: {
+        pathPrefix: '/gatsby-theme-antv',
+      },
+    },
+  ],
+  siteMetadata: {
+    title: 'L7',
+    description: 'Large-scale WebGL-powered  Geospatial data visualization analysis framework',
+    githubUrl: 'https://github.com/antvis/antvis.github.io',
+    navs: [
+      {
+        slug: 'docs/specification',
+        title: {
+          zh: '设计语言',
+          en: 'Specification',
+        },
+      },
+      {
+        slug: 'docs/API',
+        title: {
+          zh: '文档',
+          en: 'document',
+        },
+      },
+      {
+        slug: 'docs/tutorial',
+        title: {
+          zh: '教程',
+          en: 'tutorial',
+        },
+      },
+      {
+        slug: 'examples',
+        title: {
+          zh: '图表演示',
+          en: 'Examples',
+        },
+        redirect: 'point/basic',
+      },
+        // target: '_blank',
+    ],
+    docs: [
+      {
+        slug: 'specification',
+        title: {
+          zh: '简介',
+          en: 'introduction',
+        },
+      },
+      {
+        slug: 'manual/tutorial',
+        title: {
+          zh: '教程',
+          en: 'tutorial',
+        },
+      },
+      {
+        slug: 'API/L7.md',
+        title: {
+          zh: '简介',
+          en: 'intro',
+        },
+        order:1,
+      },
+      {
+        slug: 'API/component',
+        title: {
+          zh: '组件',
+          en: 'Component',
+        },
+        order:1,
+      },
+    ],
+    examples: [
+      {
+        slug: 'gallery',
+        icon: 'gallery',
+        title: {
+          zh: 'Gallery',
+          en: 'Gallery',
+        },
+      },
+      {
+        slug: 'data',
+        icon: 'data',
+        title: {
+          zh: '数据源',
+          en: 'data',
+        },
+      },
+      {
+        slug: 'scene',
+        icon: 'map',
+        title: {
+          zh: '场景',
+          en: 'Scene',
+        },
+      },
+      {
+        slug: 'point',
+        icon: 'point',
+        title: {
+          zh: '点图层',
+          en: 'PointLayer',
+        },
+      },
+      {
+        slug: 'line',
+        icon: 'line',
+        title: {
+          zh: '线图层',
+          en: 'LineLayer',
+        },
+      },
+      {
+        slug: 'polygon',
+        icon: 'polygon',
+        title: {
+          zh: '面图层',
+          en: 'PolygonLayer',
+        },
+      },
+      {
+        slug: 'heatmap',
+        icon: 'heatmap',
+        title: {
+          zh: '热力图',
+          en: 'HeatMapLayer',
+        },
+        order:5,
+      },
+      {
+        slug: 'raster',
+        icon: 'raster',
+        title: {
+          zh: '栅格图层',
+          en: 'RasterLayer',
+        },
+      },
+      {
+        slug: 'marker',
+        icon: 'mapmarker',
+        title: {
+          zh: '标注',
+          en: 'Marker',
+        },
+      }
+    ],
+    exampleContainer: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
+    playground: {
+      container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
+      playgroundDidMount: 'console.log("playgroundDidMount");',
+      playgroundWillUnmount: 'console.log("scene");',
+    },
+  },
+
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,11 @@
 {
  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/L7"
+  },
  "devDependencies": {
+    "@antv/gatsby-theme-antv": "^0.9.7",
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-decorators": "^7.6.0",
@ -33,6 +38,7 @@
    "babel-plugin-css-modules-transform": "^1.6.2",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-transform-postcss": "^0.3.0",
+    "babel-preset-gatsby": "^0.2.20",
    "clean-webpack-plugin": "^0.1.19",
    "commitizen": "^4.0.3",
    "copy-webpack-plugin": "^4.5.2",
@ -43,6 +49,8 @@
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "enzyme-to-json": "^3.0.0-beta6",
+    "gatsby": "^2.17.7",
+    "gh-pages": "^2.1.1",
    "gl": "^4.4.0",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^3.0.9",
@ -59,6 +67,7 @@
    "react": "^16.8.6",
    "react-docgen-typescript-loader": "^3.1.0",
    "react-dom": "^16.8.6",
+    "react-i18next": "^11.0.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^1.0.0",
@ -81,6 +90,11 @@
    "worker-loader": "^2.0.0"
  },
  "scripts": {
+    "start": "export NODE_ENV=site && npm run site:develop",
+    "site:develop": "gatsby develop --open -H 0.0.0.0",
+    "site:build": "npm run site:clean && export NODE_ENV=site &&  gatsby build --prefix-paths",
+    "site:clean": "gatsby clean",
+    "site:deploy": "npm run site:build && gh-pages -d public",
    "prebuild": "run-p tsc lint",
    "build": "lerna exec --parallel 'BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
    "postbuild": "yarn build:declarations",
--- a/packages/component/src/control/BaseControl.ts
+++ b/packages/component/src/control/BaseControl.ts
@ -1,6 +1,14 @@
-import { IControlService, IMapService, lazyInject, TYPES } from '@l7/core';
+import {
+  IControlService,
+  ILayerService,
+  IMapService,
+  IRendererService,
+  lazyInject,
+  TYPES,
+} from '@l7/core';
 import { DOM } from '@l7/utils';
 import { EventEmitter } from 'eventemitter3';
+import { inject } from 'inversify';

 export enum PositionType {
  'TOPRIGHT' = 'topright',
@ -20,9 +28,15 @@ export interface IControlOption {
 export default class Control extends EventEmitter {
  public controlOption: IControlOption;
  protected mapsService: IMapService;
+  protected container: HTMLElement;
+
+  @lazyInject(TYPES.IRendererService)
+  protected readonly renderService: IRendererService;
+  @lazyInject(TYPES.ILayerService)
+  protected readonly layerService: ILayerService;
  @lazyInject(TYPES.IControlService)
  private readonly controlService: IControlService;
-  private container: HTMLElement;
+
  private isShow: boolean;

  constructor(cfg?: Partial<IControlOption>) {
--- a/packages/component/src/control/layer.ts
+++ b/packages/component/src/control/layer.ts
@ -10,12 +10,22 @@ export interface ILayerControlOption extends IControlOption {
  autoZIndex: boolean;
  hideSingleBase: boolean;
  sortLayers: boolean;
+
+  sortFunction: (...args: any[]) => any;
+}
+interface IInputItem extends HTMLInputElement {
+  layerId: string;
 }
 export default class Layers extends Control {
  private layerControlInputs: any[];
  private layers: any[];
  private lastZIndex: number;
  private handlingClick: boolean;
+  private layersLink: HTMLElement;
+  private baseLayersList: HTMLElement;
+  private separator: HTMLElement;
+  private overlaysList: HTMLElement;
+  private form: HTMLElement;

  constructor(cfg: Partial<ILayerControlOption>) {
    super(cfg);
@ -23,16 +33,25 @@ export default class Layers extends Control {
    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);
-    // }
+    const { baseLayers = {}, overlayers = {} } = this.controlOption;

-    // for (const i in overlays) {
-    //   this._addLayer(overlays[i], i, true);
-    // }
-    // bindAll([ '_checkDisabledLayers', '_onLayerChange', 'collapse', 'extend', 'expand', '_onInputClick' ], this);
+    Object.keys(baseLayers).forEach((name: string, index: number) => {
+      this.addLayer(baseLayers[name], name, false);
+    });
+    Object.keys(overlayers).forEach((name: any, index: number) => {
+      this.addLayer(overlayers[name], name, true);
+    });
+    bindAll(
+      [
+        'checkDisabledLayers',
+        'onLayerChange',
+        'collapse',
+        'extend',
+        'expand',
+        'onInputClick',
+      ],
+      this,
+    );
  }

  public getDefault() {
@ -44,4 +63,248 @@ export default class Layers extends Control {
      sortLayers: false,
    };
  }
+  public onAdd(MapService: IMapService) {
+    this.initLayout();
+    this.update();
+    this.mapsService.on('zoomend', this.checkDisabledLayers);
+    this.layers.forEach((layerItem) => {
+      layerItem.layer.on('remove', this.onLayerChange);
+      layerItem.layer.on('add', this.onLayerChange);
+    });
+    return this.container;
+  }
+
+  public addVisualLayer(layer: any, name: string | number) {
+    this.addLayer(layer, name, true);
+    return this.mapsService ? this.update() : this;
+  }
+  public expand() {
+    const { height } = this.renderService.getViewportSize();
+    DOM.addClass(this.container, 'l7-control-layers-expanded');
+    this.form.style.height = 'null';
+    const acceptableHeight = 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;
+  }
+
+  public collapse() {
+    DOM.removeClass(this.container, 'l7-control-layers-expanded');
+    return this;
+  }
+
+  private initLayout() {
+    const className = 'l7-control-layers';
+    const container = (this.container = DOM.create('div', className));
+    const { collapsed } = this.controlOption;
+
+    // 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',
+    ) as HTMLElement);
+
+    if (collapsed) {
+      this.mapsService.on('click', this.collapse);
+      container.addEventListener('mouseenter', this.expand);
+      container.addEventListener('mouseleave', this.collapse);
+    }
+
+    this.layersLink = DOM.create('a', className + '-toggle', container);
+    const link = this.layersLink;
+    // 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);
+  }
+
+  private update() {
+    if (!this.container) {
+      return this;
+    }
+
+    DOM.empty(this.baseLayersList);
+    DOM.empty(this.overlaysList);
+
+    this.layerControlInputs = [];
+    let baseLayersPresent;
+    let overlaysPresent;
+    let i;
+    let obj;
+    let 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.controlOption.hideSingleBase) {
+      baseLayersPresent = baseLayersPresent && baseLayersCount > 1;
+      this.baseLayersList.style.display = baseLayersPresent ? '' : 'none';
+    }
+
+    this.separator.style.display =
+      overlaysPresent && baseLayersPresent ? '' : 'none';
+
+    return this;
+  }
+
+  private checkDisabledLayers() {
+    const inputs = this.layerControlInputs;
+    let input: IInputItem;
+    let layer;
+    const zoom = this.mapsService.getZoom();
+
+    for (let i = inputs.length - 1; i >= 0; i--) {
+      input = inputs[i];
+      layer = this.layerService.getLayer(input.layerId);
+      if (layer) {
+        input.disabled = layer.visible && !layer.isVisible();
+      }
+    }
+  }
+
+  private addLayer(layer: any, name: string | number, overlay: boolean) {
+    if (this.mapsService) {
+      layer.on('add', this.onLayerChange);
+      layer.on('remove', this.onLayerChange);
+    }
+    this.layers.push({
+      layer,
+      name,
+      overlay,
+    });
+    const { sortLayers, sortFunction, autoZIndex } = this.controlOption;
+    if (sortLayers) {
+      this.layers.sort((a, b) => {
+        return sortFunction(a.layer, b.layer, a.name, b.name);
+      });
+    }
+
+    if (autoZIndex && layer.setZIndex) {
+      this.lastZIndex++;
+      layer.setZIndex(this.lastZIndex);
+    }
+
+    this.expandIfNotCollapsed();
+  }
+
+  private expandIfNotCollapsed() {
+    if (this.mapsService && !this.controlOption.collapsed) {
+      this.expand();
+    }
+    return this;
+  }
+
+  private onLayerChange(e: any) {
+    if (!this.handlingClick) {
+      this.update();
+    }
+
+    const obj = this.layerService.getLayer(e.target.layerId);
+
+    const type = obj.overlay
+      ? e.type === 'add'
+        ? 'overlayadd'
+        : 'overlayremove'
+      : e.type === 'add'
+      ? 'baselayerchange'
+      : null;
+
+    if (type) {
+      this.emit(type, obj); // TODO:图
+    }
+  }
+
+  private createRadioElement(name: string, checked: boolean): ChildNode {
+    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 as ChildNode;
+  }
+
+  private addItem(obj: any) {
+    const label = document.createElement('label');
+    const checked =
+      this.layerService.getLayer(obj.layer.id) && obj.layer.isVisible();
+    let input: IInputItem;
+
+    if (obj.overlay) {
+      input = document.createElement('input') as IInputItem;
+      input.type = 'checkbox';
+      input.className = 'l7-control-layers-selector';
+      input.defaultChecked = checked;
+    } else {
+      input = this.createRadioElement('l7-base-layers', checked) as IInputItem;
+    }
+    this.layerControlInputs.push(input);
+    input.layerId = obj.layer.id;
+    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;
+  }
+
+  private onInputClick() {
+    const inputs = this.layerControlInputs;
+    let input;
+    let layer;
+    const addedLayers = [];
+    const removedLayers = [];
+    this.handlingClick = true;
+    for (let i = inputs.length - 1; i >= 0; i--) {
+      input = inputs[i];
+      layer = this.layerService.getLayer(input.layerId);
+
+      if (input.checked) {
+        addedLayers.push(layer);
+      } else if (!input.checked) {
+        removedLayers.push(layer);
+      }
+    }
+    removedLayers.forEach((l: any) => {
+      l.hide();
+    });
+    addedLayers.forEach((l: any) => {
+      l.show();
+    });
+
+    this.handlingClick = false;
+  }
 }
--- a/packages/component/src/control/logo.ts
+++ b/packages/component/src/control/logo.ts
@ -0,0 +1,25 @@
+import { IMapService } from '@l7/core';
+import { bindAll, DOM } from '@l7/utils';
+import Control, { IControlOption, PositionType } from './BaseControl';
+export default class Logo extends Control {
+  public getDefault() {
+    return {
+      position: PositionType.BOTTOMLEFT,
+    };
+  }
+  public onAdd(MapService: IMapService) {
+    const className = 'l7-control-logo';
+    const container = DOM.create('div', className);
+    const anchor: HTMLLinkElement = DOM.create(
+      'a',
+      'l7-ctrl-logo',
+    ) as HTMLLinkElement;
+    anchor.target = '_blank';
+    anchor.rel = 'noopener nofollow';
+    anchor.href = 'https://antv.alipay.com/l7';
+    anchor.setAttribute('aria-label', 'AntV logo');
+    anchor.setAttribute('rel', 'noopener nofollow');
+    container.appendChild(anchor);
+    return container;
+  }
+}
--- a/packages/component/src/css/l7.css
+++ b/packages/component/src/css/l7.css
@ -279,7 +279,7 @@
 .l7-right .l7-control {
 	margin-right: 10px;
  }
-  
+
  /* attribution and scale controls */

 .l7-control-container .l7-control-attribution {
@ -350,6 +350,406 @@
 	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.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;
+  font-size: 19px;
+  padding: 8px;
+	}
+.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-cont.l7-marker {
+	position: absolute !important;
+	top: 0;
+	left: 0;
+	z-index: 5;
+}
+.l7-popup-anchor-top,
+.l7-popup-anchor-top-left,
+.l7-popup-anchor-top-right {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.l7-popup-anchor-bottom,
+.l7-popup-anchor-bottom-left,
+.l7-popup-anchor-bottom-right {
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.l7-popup-anchor-left {
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.l7-popup-anchor-right {
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+.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-anchor-top .l7-popup-tip {
+	-webkit-align-self: center;
+	align-self: center;
+	border-top: none;
+	border-bottom-color: #fff;
+}
+
+.l7-popup-anchor-top-left .l7-popup-tip {
+	-webkit-align-self: flex-start;
+	align-self: flex-start;
+	border-top: none;
+	border-left: none;
+	border-bottom-color: #fff;
+}
+
+.l7-popup-anchor-top-right .l7-popup-tip {
+	-webkit-align-self: flex-end;
+	align-self: flex-end;
+	border-top: none;
+	border-right: none;
+	border-bottom-color: #fff;
+}
+
+.l7-popup-anchor-bottom .l7-popup-tip {
+	-webkit-align-self: center;
+	align-self: center;
+	border-bottom: none;
+	border-top-color: #fff;
+}
+
+.l7-popup-anchor-bottom-left .l7-popup-tip {
+	-webkit-align-self: flex-start;
+	align-self: flex-start;
+	border-bottom: none;
+	border-left: none;
+	border-top-color: #fff;
+}
+
+.l7-popup-anchor-bottom-right .l7-popup-tip {
+	-webkit-align-self: flex-end;
+	align-self: flex-end;
+	border-bottom: none;
+	border-right: none;
+	border-top-color: #fff;
+}
+
+.l7-popup-anchor-left .l7-popup-tip {
+	-webkit-align-self: center;
+	align-self: center;
+	border-left: none;
+	border-right-color: #fff;
+}
+
+.l7-popup-anchor-right .l7-popup-tip {
+	-webkit-align-self: center;
+	align-self: center;
+	border-right: none;
+	border-left-color: #fff;
+}
+
+.l7-popup-close-button {
+	position: absolute;
+	right: 0;
+	top: 0;
+	border: 0;
+	padding: 0;
+	font-size: 25px;
+	line-height: 20px;
+	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;
+}
+
+.l7-popup-anchor-top-left .l7-popup-content {
+	border-top-left-radius: 0;
+}
+
+.l7-popup-anchor-top-right .l7-popup-content {
+	border-top-right-radius: 0;
+}
+
+.l7-popup-anchor-bottom-left .l7-popup-content {
+	border-bottom-left-radius: 0;
+}
+
+.l7-popup-anchor-bottom-right .l7-popup-content {
+	border-bottom-right-radius: 0;
+}
+
+.l7-popup-track-pointer {
+	display: none;
+}
+
+.l7-popup-track-pointer * {
+	pointer-events: none;
+	user-select: none;
+}
+
+.l7-map:hover .l7-popup-track-pointer {
+	display: flex;
+}
+
+.l7-map:active .l7-popup-track-pointer {
+	display: none;
+}
+
+.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;
+	width: 36px;
+	height: 36px;
+  line-height: 30px;
+  font-size: 30px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: #8E9DAB;
+	}
+.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-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+.l7-control-hide {
+	display: none;
+}
+.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;
+  padding: 5px 5px 2px 5px;
+  background: rgba(255, 255, 255, 0.7);
+	}
+.l7-left .l7-control-scale {
+	margin-left: 5px;
+	}
+.l7-bottom .l7-control-scale {
+	margin-bottom: 5px;
+	}
+.l7-control-scale-line {
+	border: 2px solid #8E9DAB;
+  border-top: none;
+  color: #8e9dab;
+	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.8);
+	}
+.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;
+  }
+  /*logo */
+
+  .l7-ctrl-logo {
+    background-size: 100% 100%;
+    width: 89px;
+    height: 16px;
+    margin: 0 0 -3px -3px;
+    display: block;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    background-image: url('../images/logo.png');
+}
+
+
+	/* layers control */
+
+.l7-control-layers {
+	box-shadow: 0 1px 8px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 2px;
+	}
 .l7-control-layers-toggle {
 	background-image: url(../images/layers.svg);
 	width: 36px;
@ -373,7 +773,7 @@
 	}
 .l7-control-layers-expanded {
 	padding: 6px 10px 6px 6px;
-	color: #333;
+	color: #59626B;
 	background: #fff;
 	}
 .l7-control-layers-scrollbar {
@ -387,11 +787,27 @@
 	top: 1px;
 	}
 .l7-control-layers label {
-	display: block;
-	}
+  display: block;
+  padding: 8px;
+  }
+.l7-control-layers label input[type="radio"], input[type="checkbox"]{
+  width: 19px;
+  height: 19px;
+  margin: 0;
+  vertical-align: middle;
+  -ms-transform: scale(1.5); /* IE 9 */
+  -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
+  transform: scale(1.5);
+}
 .l7-control-layers-separator {
 	height: 0;
-	border-top: 1px solid #ddd;
+	border-top: 1px solid #D8D8D8;
 	margin: 5px -10px 5px -6px;
+}
+
+.l7-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
 	}

--- a/packages/component/src/images/layers.png
+++ b/packages/component/src/images/layers.png
--- a/packages/component/src/images/layers.svg
+++ b/packages/component/src/images/layers.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566292427369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8341" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M256 341.333333l256 128 256-128-256-128-256 128z m276.864-208.384l341.034667 173.909334c20.736 10.581333 28.202667 34.56 16.682666 53.632a41.386667 41.386667 0 0 1-16.64 15.317333l-341.077333 173.909333a46.336 46.336 0 0 1-41.728 0L150.101333 375.808c-20.736-10.581333-28.202667-34.56-16.682666-53.632a41.386667 41.386667 0 0 1 16.64-15.317333l341.077333-173.909334c12.970667-6.613333 28.757333-6.613333 41.728 0z m0 587.349334a45.653333 45.653333 0 0 1-41.728 0l-341.034667-176.938667c-20.736-10.752-28.202667-35.157333-16.682666-54.528a41.642667 41.642667 0 0 1 16.64-15.573333 34.901333 34.901333 0 0 1 32.213333 0l308.906667 160.213333c12.928 6.741333 28.714667 6.741333 41.685333 0l308.864-160.213333a34.901333 34.901333 0 0 1 32.170667 0c20.736 10.752 28.202667 35.157333 16.682666 54.528a41.642667 41.642667 0 0 1-16.64 15.573333l-341.077333 176.938667z m0 170.666666a45.653333 45.653333 0 0 1-41.728 0l-341.034667-176.938666c-20.736-10.752-28.202667-35.157333-16.682666-54.528a41.642667 41.642667 0 0 1 16.64-15.573334 34.901333 34.901333 0 0 1 32.213333 0l308.906667 160.213334c12.928 6.741333 28.714667 6.741333 41.685333 0l308.864-160.213334a34.901333 34.901333 0 0 1 32.170667 0c20.736 10.752 28.202667 35.157333 16.682666 54.528a41.642667 41.642667 0 0 1-16.64 15.573334l-341.077333 176.938666z" fill="#000000" p-id="8342"></path></svg>
--- a/packages/component/src/images/logo.png
+++ b/packages/component/src/images/logo.png
--- a/packages/component/src/index.ts
+++ b/packages/component/src/index.ts
@ -1,6 +1,9 @@
 import Control from './control/BaseControl';
+import Layers from './control/layer';
+import Logo from './control/logo';
 import Scale from './control/scale';
 import Zoom from './control/zoom';
 import Marker from './marker';
 import Popup from './popup';
-export { Control, Scale, Zoom, Marker, Popup };
+
+export { Control, Logo, Scale, Zoom, Layers, Marker, Popup };
--- a/packages/core/src/inversify.config.ts
+++ b/packages/core/src/inversify.config.ts
@ -53,7 +53,7 @@ const container = new Container();
 container
  .bind<ISceneService>(TYPES.ISceneService)
  .to(SceneService)
-  .inSingletonScope();
+  .inTransientScope();
 container
  .bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
  .to(GlobalConfigService)
@ -100,7 +100,7 @@ container

 // @see https://github.com/inversify/InversifyJS/blob/master/wiki/inheritance.md#what-can-i-do-when-my-base-class-is-provided-by-a-third-party-module
 decorate(injectable(), EventEmitter);
-
+container.bind(TYPES.IEventEmitter).to(EventEmitter);
 // 支持 L7 使用 new 而非容器实例化的场景，同时禁止 lazyInject cache
 // @see https://github.com/inversify/inversify-inject-decorators#caching-vs-non-caching-behaviour
 const DECORATORS = getDecorators(container, false);
--- a/packages/core/src/services/asset/FontService.ts
+++ b/packages/core/src/services/asset/FontService.ts
@ -64,6 +64,7 @@ export default class FontService implements IFontService {
  private key: string;
  private cache: LRUCache = new LRUCache(CACHE_LIMIT);
  public init() {
+    this.cache.clear();
    this.fontOptions = {
      fontFamily: DEFAULT_FONT_FAMILY,
      fontWeight: DEFAULT_FONT_WEIGHT,
--- a/packages/core/src/services/asset/IIconService.ts
+++ b/packages/core/src/services/asset/IIconService.ts
@ -5,11 +5,11 @@ export type Listener = (...args: any[]) => void;
 export interface IIconValue {
  x: number;
  y: number;
-  image: HTMLImageElement;
+  image?: HTMLImageElement;
 }
 export interface IIcon {
  id: string;
-  image: HTMLImageElement;
+  image?: HTMLImageElement;
  height: number;
  width: number;
 }
--- a/packages/core/src/services/asset/IconService.ts
+++ b/packages/core/src/services/asset/IconService.ts
@ -33,15 +33,26 @@ export default class IconService extends EventEmitter implements IIconService {
    if (this.hasImage(id)) {
      throw new Error('Image Id already exists');
    }
-
+    this.iconData.push({
+      id,
+      width: imageSize,
+      height: imageSize,
+    });
+    this.updateIconMap();
    this.loadImage(image).then((img) => {
      imagedata = img as HTMLImageElement;
-      this.iconData.push({
-        id,
-        image: imagedata,
-        width: imageSize,
-        height: imageSize,
+      const iconImage = this.iconData.find((icon: IIcon) => {
+        return icon.id === id;
      });
+      if (iconImage) {
+        iconImage.image = imagedata;
+      }
+      // this.iconData.push({
+      //   id,
+      //   image: imagedata,
+      //   width: imageSize,
+      //   height: imageSize,
+      // });
      this.update();
    });
  }
@ -86,7 +97,9 @@ export default class IconService extends EventEmitter implements IIconService {
    this.canvas.height = this.canvasHeight;
    Object.keys(this.iconMap).forEach((item: string) => {
      const { x, y, image } = this.iconMap[item];
-      this.ctx.drawImage(image, x, y, imageSize, imageSize);
+      if (image) {
+        this.ctx.drawImage(image, x, y, imageSize, imageSize);
+      }
    });
  }

--- a/packages/core/src/services/component/ControlService.ts
+++ b/packages/core/src/services/component/ControlService.ts
@ -15,6 +15,7 @@ export default class ControlService implements IControlService {
  public controlContainer: HTMLElement;
  private controls: IControl[] = [];
  public init(cfg: IControlServiceCfg) {
+    this.destroy();
    this.container = cfg.container;
    this.initControlPos();
  }
@ -23,7 +24,6 @@ export default class ControlService implements IControlService {
    ctr.addTo(mapService); // scene对象
    this.controls.push(ctr);
  }
-
  public removeControl(ctr: IControl): this {
    const index = this.controls.indexOf(ctr);
    if (index > -1) {
@ -68,7 +68,9 @@ export default class ControlService implements IControlService {
        DOM.remove(this.controlCorners[i]);
      }
    }
-    DOM.remove(this.controlContainer);
+    if (this.controlContainer) {
+      DOM.remove(this.controlContainer);
+    }
    delete this.controlCorners;
    delete this.controlContainer;
  }
--- a/packages/core/src/services/interaction/InteractionService.ts
+++ b/packages/core/src/services/interaction/InteractionService.ts
@ -23,6 +23,7 @@ export default class InteractionService extends EventEmitter

  public init() {
    // 注册事件在地图底图上
+    this.clear();
    this.addEventListenerOnMap();
  }

@ -68,4 +69,11 @@ export default class InteractionService extends EventEmitter
  private onHover = ({ x, y }: MouseEvent) => {
    this.emit(InteractionEvent.Hover, { x, y });
  };
+  private clear() {
+    if (this.hammertime) {
+      this.hammertime.destroy();
+    }
+    this.removeEventListenerOnMap();
+    this.off(InteractionEvent.Hover);
+  }
 }
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@ -6,6 +6,7 @@ import { ISource, ISourceCFG } from '../source/ISourceService';
 import {
  IEncodeFeature,
  IScale,
+  IScaleOptions,
  IStyleAttributeService,
  StyleAttrField,
  StyleAttributeOption,
@ -32,8 +33,10 @@ export interface IPickedFeature {
 export interface ILayer {
  id: string; // 一个场景中同一类型 Layer 可能存在多个
  name: string; // 代表 Layer 的类型
-  // visible: boolean;
-  // zIndex: number;
+  visible: boolean;
+  zIndex: number;
+  minZoom: number;
+  maxZoom: number;
  configService: IGlobalConfigService;
  plugins: ILayerPlugin[];
  hooks: {
@ -62,8 +65,12 @@ export interface ILayer {
  // filter(field: string, value: StyleAttributeOption): ILayer;
  // active(option: ActiveOption): ILayer;
  style(options: unknown): ILayer;
-  // hide(): ILayer;
-  // show(): ILayer;
+  hide(): ILayer;
+  show(): ILayer;
+  setIndex(index: number): ILayer;
+  isVisible(): boolean;
+  setMaxZoom(min: number): ILayer;
+  setMinZoom(max: number): ILayer;
  // animate(field: string, option: any): ILayer;
  render(): ILayer;
  destroy(): void;
@ -74,6 +81,13 @@ export interface ILayer {
  setEncodedData(encodedData: IEncodeFeature[]): void;
  getEncodedData(): IEncodeFeature[];
  getStyleOptions(): Partial<ILayerInitializationOptions>;
+  getScaleOptions(): IScaleOptions;
+  /**
+   * 事件
+   */
+  on(type: string, hander: (...args: any[]) => void): void;
+  off(type: string, hander: (...args: any[]) => void): void;
+  once(type: string, hander: (...args: any[]) => void): void;
  /**
   * JSON Schema 用于校验配置项
   */
@ -96,6 +110,10 @@ export interface ILayerPlugin {
 * Layer 初始化参数
 */
 export interface ILayerInitializationOptions {
+  minZoom: number;
+  maxZoom: number;
+  visible: boolean;
+  zIndex: number;
  enableMultiPassRenderer: boolean;
  passes: Array<string | [string, { [key: string]: unknown }]>;

@ -129,6 +147,10 @@ export interface ILayerInitializationOptions {
 export interface ILayerService {
  add(layer: ILayer): void;
  initLayers(): void;
+  getLayers(): ILayer[];
+  getLayer(name: string): ILayer | undefined;
+  remove(layer: ILayer): void;
+  updateRenderOrder(): void;
  renderLayers(): void;
  destroy(): void;
 }
--- a/packages/core/src/services/layer/IStyleAttributeService.ts
+++ b/packages/core/src/services/layer/IStyleAttributeService.ts
@ -46,6 +46,9 @@ export interface IScaleOption {
  format?: () => any;
  domain?: any[];
 }
+export interface IScaleOptions {
+  [key: string]: IScale;
+}
 export interface IStyleScale {
  scale: any;
  field: string;
--- a/packages/core/src/services/layer/LayerService.ts
+++ b/packages/core/src/services/layer/LayerService.ts
@ -17,6 +17,10 @@ export default class LayerService implements ILayerService {

  public add(layer: ILayer) {
    this.layers.push(layer);
+    this.initPlugin(layer);
+    layer.init();
+    // 添加完成需要触发重绘
+    // this.renderLayers();
  }

  public initLayers() {
@ -29,10 +33,29 @@ export default class LayerService implements ILayerService {
    });
  }

+  public getLayers(): ILayer[] {
+    return this.layers;
+  }
+
+  public getLayer(id: string): ILayer | undefined {
+    return this.layers.find((layer) => layer.id === id);
+  }
+
+  public remove(layer: ILayer): void {
+    const layerIndex = this.layers.indexOf(layer);
+    if (layerIndex > -1) {
+      this.layers.splice(layerIndex, 1);
+    }
+    layer.destroy();
+    this.renderLayers();
+  }
+
  public renderLayers() {
    // TODO：脏检查，只渲染发生改变的 Layer
+    //
+    this.clear();
    this.layers
-      // .filter((layer) => layer.isDirty())
+      .filter((layer) => layer.isVisible())
      .forEach((layer) => {
        // trigger hooks
        layer.hooks.beforeRender.call();
@ -41,8 +64,27 @@ export default class LayerService implements ILayerService {
      });
  }

+  public updateRenderOrder() {
+    this.layers.sort((pre: ILayer, next: ILayer) => {
+      return pre.zIndex - next.zIndex;
+    });
+    this.renderLayers();
+  }
+
  public destroy() {
    this.layers.forEach((layer) => layer.destroy());
    this.layers = [];
  }
+  private initPlugin(layer: ILayer) {
+    for (const plugin of layer.plugins) {
+      plugin.apply(layer);
+    }
+  }
+  private clear() {
+    this.renderService.clear({
+      color: [0, 0, 0, 0],
+      depth: 1,
+      framebuffer: null,
+    });
+  }
 }
--- a/packages/core/src/services/log/LogService.ts
+++ b/packages/core/src/services/log/LogService.ts
@ -2,7 +2,7 @@ import { injectable } from 'inversify';
 import { Log } from 'probe.gl';
 import { ILogService } from './ILogService';

-const Logger = new Log({ id: 'L7' }).enable();
+const Logger = new Log({ id: 'L7' }).enable(false);

@injectable()
 export default class LogService implements ILogService {
--- a/packages/core/src/services/map/IMapService.ts
+++ b/packages/core/src/services/map/IMapService.ts
@ -22,6 +22,7 @@ export interface IMapService {

  on(type: string, hander: (...args: any[]) => void): void;
  off(type: string, hander: (...args: any[]) => void): void;
+  once(type: string, hander: (...args: any[]) => void): void;
  // get dom
  getContainer(): HTMLElement | null;
  getSize(): [number, number];
@ -59,6 +60,8 @@ export enum MapType {
  mapbox = 'mapbox',
 }

+export const MapServiceEvent = ['mapload'];
+
 /**
 * 地图初始化配置项
 */
--- a/packages/core/src/services/renderer/IModel.ts
+++ b/packages/core/src/services/renderer/IModel.ts
@ -54,6 +54,8 @@ export interface IModelInitializationOptions {
   */
  instances?: number;

+  colorMask?: [boolean, boolean, boolean, boolean];
+
  /**
   * depth buffer
   */
--- a/packages/core/src/services/renderer/passes/BasePostProcessingPass.ts
+++ b/packages/core/src/services/renderer/passes/BasePostProcessingPass.ts
@ -87,7 +87,6 @@ export default class BasePostProcessingPass<InitializationOptions = {}>
    const postProcessor = layer.multiPassRenderer.getPostProcessor();
    const { useFramebuffer, getViewportSize } = this.rendererService;
    const { width, height } = getViewportSize();
-
    useFramebuffer(
      this.renderToScreen ? null : postProcessor.getWriteFBO(),
      () => {
--- a/packages/core/src/services/renderer/passes/PixelPickingPass.ts
+++ b/packages/core/src/services/renderer/passes/PixelPickingPass.ts
@ -97,7 +97,7 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
        depth: 1,
      });

-      this.logger.info(`picking fbo cleared ${width} ${height}`);
+      // this.logger.info(`picking fbo cleared ${width} ${height}`);

      /**
       * picking pass 不需要 multipass，原因如下：
--- a/packages/core/src/services/renderer/passes/PostProcessor.ts
+++ b/packages/core/src/services/renderer/passes/PostProcessor.ts
@ -52,7 +52,6 @@ export default class PostProcessor implements IPostProcessor {
  public async render(layer: ILayer) {
    for (let i = 0; i < this.passes.length; i++) {
      const pass = this.passes[i];
-
      // last pass should render to screen
      pass.setRenderToScreen(this.isLastEnabledPass(i));
      await pass.render(layer);
--- a/packages/core/src/services/renderer/passes/TAAPass.ts
+++ b/packages/core/src/services/renderer/passes/TAAPass.ts
@ -232,7 +232,7 @@ export default class TAAPass<InitializationOptions = {}>
      this.blendModel.draw({
        uniforms: {
          // @ts-ignore
-          u_Opacity: layerStyleOptions.opacity || 1,
+          u_opacity: layerStyleOptions.opacity || 1,
          u_MixRatio: this.frame === 0 ? 1 : 0.9,
          u_Diffuse1: this.sampleRenderTarget,
          u_Diffuse2:
--- a/packages/core/src/services/scene/ISceneService.ts
+++ b/packages/core/src/services/scene/ISceneService.ts
@ -13,4 +13,5 @@ export interface ISceneService {
  render(): void;
  destroy(): void;
 }
-export const SceneEventList = ['loaded', 'resize', 'destroy'];
+// scene 事件
+export const SceneEventList = ['loaded', 'maploaded', 'resize', 'destroy'];
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566292427369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8341" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M256 341.333333l256 128 256-128-256-128-256 128z m276.864-208.384l341.034667 173.909334c20.736 10.581333 28.202667 34.56 16.682666 53.632a41.386667 41.386667 0 0 1-16.64 15.317333l-341.077333 173.909333a46.336 46.336 0 0 1-41.728 0L150.101333 375.808c-20.736-10.581333-28.202667-34.56-16.682666-53.632a41.386667 41.386667 0 0 1 16.64-15.317333l341.077333-173.909334c12.970667-6.613333 28.757333-6.613333 41.728 0z m0 587.349334a45.653333 45.653333 0 0 1-41.728 0l-341.034667-176.938667c-20.736-10.752-28.202667-35.157333-16.682666-54.528a41.642667 41.642667 0 0 1 16.64-15.573333 34.901333 34.901333 0 0 1 32.213333 0l308.906667 160.213333c12.928 6.741333 28.714667 6.741333 41.685333 0l308.864-160.213333a34.901333 34.901333 0 0 1 32.170667 0c20.736 10.752 28.202667 35.157333 16.682666 54.528a41.642667 41.642667 0 0 1-16.64 15.573333l-341.077333 176.938667z m0 170.666666a45.653333 45.653333 0 0 1-41.728 0l-341.034667-176.938666c-20.736-10.752-28.202667-35.157333-16.682666-54.528a41.642667 41.642667 0 0 1 16.64-15.573334 34.901333 34.901333 0 0 1 32.213333 0l308.906667 160.213334c12.928 6.741333 28.714667 6.741333 41.685333 0l308.864-160.213334a34.901333 34.901333 0 0 1 32.170667 0c20.736 10.752 28.202667 35.157333 16.682666 54.528a41.642667 41.642667 0 0 1-16.64 15.573334l-341.077333 176.938666z" fill="#000000" p-id="8342"></path></svg>