From fa3dc2794d8d5d1b2a1e7c88f228ea914789a62e Mon Sep 17 00:00:00 2001
From: thinkinggis <lzx199065@gmail.com>
Date: Thu, 21 Nov 2019 17:52:18 +0800
Subject: [PATCH] refactor(l7 lib): update libs

---
 README.md                                     |   2 +-
 demos/raster/basic/demo/image.js              |   4 +-
 docs/api/quickstart.en.md                     |   2 +-
 docs/api/scene.en.md                          | 135 +++++++-----------
 docs/api/scene.zh.md                          |  52 +++----
 examples/gallery/basic/demo/arcCircle.js      |   3 +-
 examples/gallery/basic/demo/bus_dark.js       |   3 +-
 examples/gallery/basic/demo/column_dark.js    |   4 +-
 examples/gallery/basic/demo/light.js          |   3 +-
 examples/gallery/basic/demo/normal.js         |   4 +-
 examples/gallery/basic/demo/point.js          |   3 +-
 examples/heatmap/grid/demo/china.js           |   3 +-
 examples/heatmap/grid/demo/grid1.js           |   3 +-
 examples/heatmap/grid/demo/heatmap3.js        |   3 +-
 examples/heatmap/grid/demo/world.js           |   3 +-
 examples/heatmap/heatmap/demo/heatmap.js      |   3 +-
 examples/heatmap/heatmap/demo/heatmap3d.js    |   3 +-
 .../heatmap/heatmap/demo/heatmap_purple.js    |   3 +-
 examples/heatmap/hexagon/demo/china.js        |   3 +-
 examples/heatmap/hexagon/demo/hexagon.js      |   3 +-
 examples/heatmap/hexagon/demo/light.js        |   3 +-
 examples/heatmap/hexagon/demo/world.js        |   3 +-
 examples/line/arc/demo/arc.js                 |   3 +-
 examples/line/arc/demo/arcCircle.js           |   3 +-
 examples/line/arc/demo/trip_arc.js            |   3 +-
 examples/line/arc/demo/trip_arc_dark.js       |   3 +-
 examples/line/isoline/demo/ele.js             |   3 +-
 examples/line/isoline/demo/ele_dark.js        |   3 +-
 examples/line/isoline/demo/isoline.js         |   3 +-
 examples/line/line/demo/isoline.js            |   3 +-
 examples/line/path/demo/bus_dark.js           |   5 +-
 examples/line/path/demo/bus_light.js          |   3 +-
 examples/line/path/demo/road_dark.js          |   3 +-
 examples/line/path/demo/road_light.js         |   3 +-
 examples/point/bubble/demo/color.js           |   4 +-
 examples/point/bubble/demo/point.js           |   3 +-
 examples/point/bubble/demo/scatter.js         |   3 +-
 examples/point/bubble/demo/world.js           |   3 +-
 examples/point/chart/demo/bar.js              |   3 +-
 examples/point/chart/demo/chart.js            |   3 +-
 examples/point/chart/demo/ring.js             |   3 +-
 examples/point/column/demo/clumn_shape.js     |   3 +-
 .../point/column/demo/clumn_shape_light.js    |   3 +-
 examples/point/column/demo/column_dark.js     |   3 +-
 examples/point/column/demo/column_light.js    |   3 +-
 examples/point/image/demo/image.js            |   3 +-
 examples/point/image/demo/locate.js           |   3 +-
 examples/point/image/demo/weather.js          |   3 +-
 examples/point/marker/demo/marker.js          |   4 +-
 examples/point/scatter/demo/normal.js         |   3 +-
 examples/point/scatter/demo/normal2.js        |   3 +-
 examples/polygon/3d/demo/polygon.js           |   3 +-
 examples/polygon/fill/demo/fill.js            |   3 +-
 examples/polygon/fill/demo/polygon.js         |   4 +-
 examples/polygon/fill/demo/population.js      |   3 +-
 examples/raster/basic/demo/image.js           |  10 +-
 examples/raster/basic/demo/radar.js           |   8 +-
 gatsby-browser.js                             |   1 +
 package.json                                  |   1 +
 site/pages/index.zh.tsx                       |  11 ++
 60 files changed, 150 insertions(+), 233 deletions(-)

diff --git a/README.md b/README.md
index d703f26d97..a868ee2b72 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
 ### Installation
 
 ```
- npm install @antv/l7
+ npm install @antv/l7@beta
 
 ```
 
diff --git a/demos/raster/basic/demo/image.js b/demos/raster/basic/demo/image.js
index ade1323c73..ffeeed5bdd 100644
--- a/demos/raster/basic/demo/image.js
+++ b/demos/raster/basic/demo/image.js
@@ -1,5 +1,5 @@
-import { Scene } from '@l7/scene';
-import { ImageLayer } from '@l7/layers'
+
+import { Scene,ImageLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/docs/api/quickstart.en.md b/docs/api/quickstart.en.md
index 91a02644b5..8f134112c9 100644
--- a/docs/api/quickstart.en.md
+++ b/docs/api/quickstart.en.md
@@ -1,5 +1,5 @@
 ---
-title: quickStart
+title: QuickStart
 order: 0
 redirect_from:
   - /en/docs/tutorial
diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md
index 345f9e5dc7..bb3f095542 100644
--- a/docs/api/scene.en.md
+++ b/docs/api/scene.en.md
@@ -1,15 +1,40 @@
 ---
-title: Scene
+title: 场景 Scene
 order: 1
 ---
 
-## 简介
-`Scene `基础的地图类,提供地图创建，图层创建，管理等功能
+# 简介
+
+## Scene
+
+L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
+
+
+## Map
+
+ L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
+ 只需要通过Scene传入地图配置项即可。
+
+目前L7 支持两种地图底图
+
+- 高德地图 国内业务场景 合规中国地图
+- MapBox 国际业务，或者内网离线部署场景
+
+
+###  map
+
+可以通过scene map 属性获取 map实例
+
+```javascript
+ const map = scene.map
+
+```
+为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
 
 示例代码
 
 ```javascript
-import {Scene} from '@l7/scene';
+import {Scene} from '@antv/scene';
 const scene =new L7.Scene({
     id:'map',
     mapStyle:'dark',
@@ -21,75 +46,15 @@ const scene =new L7.Scene({
 
 ### 构造函数
 
-**Scene**<br />支持两种实例化方式
-
-- 独立实例化 内部根据id自动穿件地图实例
-- 传入地图实例
+**Scene** 
 
 
 
 
-
-#### 独立实例化 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} [必选]
 
@@ -103,10 +68,23 @@ scene.map
 ### pitch
 地图初始俯仰角度 {number}  default 0
 
-### mapSyle
-地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
+### style
 
-设置地图的显示样式，目前支持两种地图样式：<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/)
+简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
+- dark
+- light
+- normal
+
+除了内置的样式，你也可以传入自定义的其他属性。
+
+比如高德地图
+
+```javascript
+ {
+   style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
+ }
+
+```
 
 
 ### minZoom
@@ -227,21 +205,6 @@ 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]
@@ -259,7 +222,7 @@ scene.fitBounds([112,32,114,35]);
 scene.removeLayer(layer)
 ```
 
-参数<br />`layer`  {Layer}
+参数 `layer`  {Layer}
 
 ### getLayers
  获取所有的layer
diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md
index a0eb5cc2eb..bb3f095542 100644
--- a/docs/api/scene.zh.md
+++ b/docs/api/scene.zh.md
@@ -21,11 +21,20 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
 - MapBox 国际业务，或者内网离线部署场景
 
 
+###  map
+
+可以通过scene map 属性获取 map实例
+
+```javascript
+ const map = scene.map
+
+```
+为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
 
 示例代码
 
 ```javascript
-import {Scene} from '@l7/scene';
+import {Scene} from '@antv/scene';
 const scene =new L7.Scene({
     id:'map',
     mapStyle:'dark',
@@ -42,15 +51,6 @@ const scene =new L7.Scene({
 
 
 
-
-
-## map
-L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
-
-```javascript
-scene.map
-```
-
 ## 配置项
 
 ### 地图配置项
@@ -68,16 +68,23 @@ scene.map
 ### pitch
 地图初始俯仰角度 {number}  default 0
 
-### mapSyle
+### style
 
-简化地图样式设置，L7 内置了三种主题默认样式
+简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
 - dark
 - light
 - normal
 
-地图样式 {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/)
+比如高德地图
+
+```javascript
+ {
+   style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
+ }
+
+```
 
 
 ### minZoom
@@ -198,21 +205,6 @@ 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]
@@ -230,7 +222,7 @@ scene.fitBounds([112,32,114,35]);
 scene.removeLayer(layer)
 ```
 
-参数<br />`layer`  {Layer}
+参数 `layer`  {Layer}
 
 ### getLayers
  获取所有的layer
diff --git a/examples/gallery/basic/demo/arcCircle.js b/examples/gallery/basic/demo/arcCircle.js
index 1e3c6cf053..b146911eea 100644
--- a/examples/gallery/basic/demo/arcCircle.js
+++ b/examples/gallery/basic/demo/arcCircle.js
@@ -1,5 +1,4 @@
-import { LineLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/gallery/basic/demo/bus_dark.js b/examples/gallery/basic/demo/bus_dark.js
index bac741e028..8827fe4144 100644
--- a/examples/gallery/basic/demo/bus_dark.js
+++ b/examples/gallery/basic/demo/bus_dark.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   center: [ 103.83735604457024, 1.360253881403068 ],
diff --git a/examples/gallery/basic/demo/column_dark.js b/examples/gallery/basic/demo/column_dark.js
index 42a1d405f8..9308b7b8fc 100644
--- a/examples/gallery/basic/demo/column_dark.js
+++ b/examples/gallery/basic/demo/column_dark.js
@@ -1,6 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
-
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 35.210526315789465,
diff --git a/examples/gallery/basic/demo/light.js b/examples/gallery/basic/demo/light.js
index b82b29bca7..e9003bd989 100644
--- a/examples/gallery/basic/demo/light.js
+++ b/examples/gallery/basic/demo/light.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/gallery/basic/demo/normal.js b/examples/gallery/basic/demo/normal.js
index 6111b8d699..02f6b5c522 100644
--- a/examples/gallery/basic/demo/normal.js
+++ b/examples/gallery/basic/demo/normal.js
@@ -1,5 +1,5 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
+
 const scene = new Scene({
   id: 'map',
   type: 'amap',
diff --git a/examples/gallery/basic/demo/point.js b/examples/gallery/basic/demo/point.js
index d9a622c9db..90544ac834 100644
--- a/examples/gallery/basic/demo/point.js
+++ b/examples/gallery/basic/demo/point.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 64.88,
diff --git a/examples/heatmap/grid/demo/china.js b/examples/heatmap/grid/demo/china.js
index d4c8d255f6..ed4d905e4c 100644
--- a/examples/heatmap/grid/demo/china.js
+++ b/examples/heatmap/grid/demo/china.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'light',
diff --git a/examples/heatmap/grid/demo/grid1.js b/examples/heatmap/grid/demo/grid1.js
index 6e84814be9..bae6518f1c 100644
--- a/examples/heatmap/grid/demo/grid1.js
+++ b/examples/heatmap/grid/demo/grid1.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/heatmap/grid/demo/heatmap3.js b/examples/heatmap/grid/demo/heatmap3.js
index 7ba761b1b0..b910353cf5 100644
--- a/examples/heatmap/grid/demo/heatmap3.js
+++ b/examples/heatmap/grid/demo/heatmap3.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'light',
diff --git a/examples/heatmap/grid/demo/world.js b/examples/heatmap/grid/demo/world.js
index 3dbd9c88eb..efa07a2378 100644
--- a/examples/heatmap/grid/demo/world.js
+++ b/examples/heatmap/grid/demo/world.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/heatmap/heatmap/demo/heatmap.js b/examples/heatmap/heatmap/demo/heatmap.js
index 33371ea29d..890eae042c 100644
--- a/examples/heatmap/heatmap/demo/heatmap.js
+++ b/examples/heatmap/heatmap/demo/heatmap.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { HeatmapLayer } from '@l7/layers';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/heatmap/heatmap/demo/heatmap3d.js b/examples/heatmap/heatmap/demo/heatmap3d.js
index b6c687f80f..d8c7417b14 100644
--- a/examples/heatmap/heatmap/demo/heatmap3d.js
+++ b/examples/heatmap/heatmap/demo/heatmap3d.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { HeatmapLayer } from '@l7/layers';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/heatmap/heatmap/demo/heatmap_purple.js b/examples/heatmap/heatmap/demo/heatmap_purple.js
index 2c5214cb62..dc7f578655 100644
--- a/examples/heatmap/heatmap/demo/heatmap_purple.js
+++ b/examples/heatmap/heatmap/demo/heatmap_purple.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { HeatmapLayer } from '@l7/layers';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/heatmap/hexagon/demo/china.js b/examples/heatmap/hexagon/demo/china.js
index f6c7ee98ac..03a2afc650 100644
--- a/examples/heatmap/hexagon/demo/china.js
+++ b/examples/heatmap/hexagon/demo/china.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/heatmap/hexagon/demo/hexagon.js b/examples/heatmap/hexagon/demo/hexagon.js
index 22309c9f7e..a8c88c6998 100644
--- a/examples/heatmap/hexagon/demo/hexagon.js
+++ b/examples/heatmap/hexagon/demo/hexagon.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'light',
diff --git a/examples/heatmap/hexagon/demo/light.js b/examples/heatmap/hexagon/demo/light.js
index b82b29bca7..e9003bd989 100644
--- a/examples/heatmap/hexagon/demo/light.js
+++ b/examples/heatmap/hexagon/demo/light.js
@@ -1,5 +1,4 @@
-import { HeatmapLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
diff --git a/examples/heatmap/hexagon/demo/world.js b/examples/heatmap/hexagon/demo/world.js
index 245eb6bc17..dcf3c75c4d 100644
--- a/examples/heatmap/hexagon/demo/world.js
+++ b/examples/heatmap/hexagon/demo/world.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { HeatmapLayer } from '@l7/layers';
+import { Scene, HeatmapLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   style: 'light',
diff --git a/examples/line/arc/demo/arc.js b/examples/line/arc/demo/arc.js
index 7d9330816a..7da1c8b128 100644
--- a/examples/line/arc/demo/arc.js
+++ b/examples/line/arc/demo/arc.js
@@ -1,5 +1,4 @@
-import { LineLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/line/arc/demo/arcCircle.js b/examples/line/arc/demo/arcCircle.js
index 346a044551..e0592e91cf 100644
--- a/examples/line/arc/demo/arcCircle.js
+++ b/examples/line/arc/demo/arcCircle.js
@@ -1,5 +1,4 @@
-import { LineLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/line/arc/demo/trip_arc.js b/examples/line/arc/demo/trip_arc.js
index bfc2c62d81..aee084549a 100644
--- a/examples/line/arc/demo/trip_arc.js
+++ b/examples/line/arc/demo/trip_arc.js
@@ -1,5 +1,4 @@
-import { LineLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 60,
diff --git a/examples/line/arc/demo/trip_arc_dark.js b/examples/line/arc/demo/trip_arc_dark.js
index 05114d0faa..efed67f4c4 100644
--- a/examples/line/arc/demo/trip_arc_dark.js
+++ b/examples/line/arc/demo/trip_arc_dark.js
@@ -1,5 +1,4 @@
-import { LineLayer } from '@l7/layers';
-import { Scene } from '@l7/scene';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 60,
diff --git a/examples/line/isoline/demo/ele.js b/examples/line/isoline/demo/ele.js
index acb143d941..7ec7faf05c 100644
--- a/examples/line/isoline/demo/ele.js
+++ b/examples/line/isoline/demo/ele.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 53.6305,
diff --git a/examples/line/isoline/demo/ele_dark.js b/examples/line/isoline/demo/ele_dark.js
index a7e91d9ad4..272c067cf1 100644
--- a/examples/line/isoline/demo/ele_dark.js
+++ b/examples/line/isoline/demo/ele_dark.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 26.842105263157915,
diff --git a/examples/line/isoline/demo/isoline.js b/examples/line/isoline/demo/isoline.js
index efda905fc8..e1e5aa4fb3 100644
--- a/examples/line/isoline/demo/isoline.js
+++ b/examples/line/isoline/demo/isoline.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/line/line/demo/isoline.js b/examples/line/line/demo/isoline.js
index aa9828a82d..e1e5aa4fb3 100644
--- a/examples/line/line/demo/isoline.js
+++ b/examples/line/line/demo/isoline.js
@@ -1,5 +1,4 @@
-import { Scene } from './node_modules/@l7/scene';
-import { LineLayer } from './node_modules/@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/line/path/demo/bus_dark.js b/examples/line/path/demo/bus_dark.js
index f1df3747d3..edeec43a5d 100644
--- a/examples/line/path/demo/bus_dark.js
+++ b/examples/line/path/demo/bus_dark.js
@@ -1,8 +1,7 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
-  center: [ 103.83735604457024, 1.360253881403068 ],
+  center: [ 103.83735, 1.3602538 ],
   pitch: 4.00000000000001,
   zoom: 10.210275860702593,
   rotation: 19.313180925794313,
diff --git a/examples/line/path/demo/bus_light.js b/examples/line/path/demo/bus_light.js
index 5ed5a806c9..5f2bc7b881 100644
--- a/examples/line/path/demo/bus_light.js
+++ b/examples/line/path/demo/bus_light.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   center: [ 103.83735604457024, 1.360253881403068 ],
diff --git a/examples/line/path/demo/road_dark.js b/examples/line/path/demo/road_dark.js
index 9c867c292d..0a9b9a96e3 100644
--- a/examples/line/path/demo/road_dark.js
+++ b/examples/line/path/demo/road_dark.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   center: [ 116.3956, 39.9392 ],
diff --git a/examples/line/path/demo/road_light.js b/examples/line/path/demo/road_light.js
index 01407c55c2..2b87ef7fbf 100644
--- a/examples/line/path/demo/road_light.js
+++ b/examples/line/path/demo/road_light.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers';
+import { Scene, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   center: [ 116.3956, 39.9392 ],
diff --git a/examples/point/bubble/demo/color.js b/examples/point/bubble/demo/color.js
index bfd9450294..b23edb9df4 100644
--- a/examples/point/bubble/demo/color.js
+++ b/examples/point/bubble/demo/color.js
@@ -1,5 +1,5 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
+
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/point/bubble/demo/point.js b/examples/point/bubble/demo/point.js
index e44d076368..7838f9369b 100644
--- a/examples/point/bubble/demo/point.js
+++ b/examples/point/bubble/demo/point.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/point/bubble/demo/scatter.js b/examples/point/bubble/demo/scatter.js
index 884dfedece..136571b925 100644
--- a/examples/point/bubble/demo/scatter.js
+++ b/examples/point/bubble/demo/scatter.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   type: 'amap',
diff --git a/examples/point/bubble/demo/world.js b/examples/point/bubble/demo/world.js
index b89cae4e45..a2b2ad0e42 100644
--- a/examples/point/bubble/demo/world.js
+++ b/examples/point/bubble/demo/world.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/point/chart/demo/bar.js b/examples/point/chart/demo/bar.js
index f0e43874db..6500ef294c 100644
--- a/examples/point/chart/demo/bar.js
+++ b/examples/point/chart/demo/bar.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { Marker } from '@l7/component';
+import { Scene, Marker } from '@antv/l7';
 import * as G2 from '@antv/g2';
 const scene = new Scene({
   id: 'map',
diff --git a/examples/point/chart/demo/chart.js b/examples/point/chart/demo/chart.js
index bae4c58db9..ff538f3ab2 100644
--- a/examples/point/chart/demo/chart.js
+++ b/examples/point/chart/demo/chart.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { Marker } from '@l7/component';
+import { Scene, Marker } from '@antv/l7';
 import * as G2 from '@antv/g2';
 const scene = new Scene({
   id: 'map',
diff --git a/examples/point/chart/demo/ring.js b/examples/point/chart/demo/ring.js
index 4401242d9d..251d4fd6db 100644
--- a/examples/point/chart/demo/ring.js
+++ b/examples/point/chart/demo/ring.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { Marker } from '@l7/component';
+import { Scene, Marker } from '@antv/l7';
 import * as G2 from '@antv/g2';
 
 const CSS = `.l7-marker .g2-guide-html {
diff --git a/examples/point/column/demo/clumn_shape.js b/examples/point/column/demo/clumn_shape.js
index c1265e15c0..a42a9efe09 100644
--- a/examples/point/column/demo/clumn_shape.js
+++ b/examples/point/column/demo/clumn_shape.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 66.02383,
diff --git a/examples/point/column/demo/clumn_shape_light.js b/examples/point/column/demo/clumn_shape_light.js
index 0cf8f527f0..86adec4ec2 100644
--- a/examples/point/column/demo/clumn_shape_light.js
+++ b/examples/point/column/demo/clumn_shape_light.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 60,
diff --git a/examples/point/column/demo/column_dark.js b/examples/point/column/demo/column_dark.js
index 42a1d405f8..19a62a865a 100644
--- a/examples/point/column/demo/column_dark.js
+++ b/examples/point/column/demo/column_dark.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 
 const scene = new Scene({
   id: 'map',
diff --git a/examples/point/column/demo/column_light.js b/examples/point/column/demo/column_light.js
index 685999cff5..3663d33fc5 100644
--- a/examples/point/column/demo/column_light.js
+++ b/examples/point/column/demo/column_light.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 48.62562,
diff --git a/examples/point/image/demo/image.js b/examples/point/image/demo/image.js
index d9e6c56638..7527385370 100644
--- a/examples/point/image/demo/image.js
+++ b/examples/point/image/demo/image.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/point/image/demo/locate.js b/examples/point/image/demo/locate.js
index a7443e4abd..1fe607a556 100644
--- a/examples/point/image/demo/locate.js
+++ b/examples/point/image/demo/locate.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/point/image/demo/weather.js b/examples/point/image/demo/weather.js
index a8ab5e55ff..ee50c7c78f 100644
--- a/examples/point/image/demo/weather.js
+++ b/examples/point/image/demo/weather.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   type: 'amap',
diff --git a/examples/point/marker/demo/marker.js b/examples/point/marker/demo/marker.js
index 5c9c428122..bb7930bf8e 100644
--- a/examples/point/marker/demo/marker.js
+++ b/examples/point/marker/demo/marker.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { Marker } from '@l7/component';
+import { Scene, Marker } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   type: 'amap',
@@ -8,7 +7,6 @@ const scene = new Scene({
   pitch: 0,
   zoom: 4
 });
-
 scene.on('loaded', () => {
   addMarkers();
 });
diff --git a/examples/point/scatter/demo/normal.js b/examples/point/scatter/demo/normal.js
index 6111b8d699..64e85903fa 100644
--- a/examples/point/scatter/demo/normal.js
+++ b/examples/point/scatter/demo/normal.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   type: 'amap',
diff --git a/examples/point/scatter/demo/normal2.js b/examples/point/scatter/demo/normal2.js
index d9a622c9db..90544ac834 100644
--- a/examples/point/scatter/demo/normal2.js
+++ b/examples/point/scatter/demo/normal2.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers';
+import { Scene, PointLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 64.88,
diff --git a/examples/polygon/3d/demo/polygon.js b/examples/polygon/3d/demo/polygon.js
index 1edfcbda7c..d35193c9d5 100644
--- a/examples/polygon/3d/demo/polygon.js
+++ b/examples/polygon/3d/demo/polygon.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PolygonLayer } from '@l7/layers';
+import { Scene, PolygonLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/polygon/fill/demo/fill.js b/examples/polygon/fill/demo/fill.js
index 9745bfb83c..1970c12f1b 100644
--- a/examples/polygon/fill/demo/fill.js
+++ b/examples/polygon/fill/demo/fill.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PolygonLayer, LineLayer } from '@l7/layers';
+import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/polygon/fill/demo/polygon.js b/examples/polygon/fill/demo/polygon.js
index 5bda22aa84..ab607e7b65 100644
--- a/examples/polygon/fill/demo/polygon.js
+++ b/examples/polygon/fill/demo/polygon.js
@@ -1,5 +1,5 @@
-import { Scene } from '@l7/scene';
-import { PolygonLayer, LineLayer } from '@l7/layers';
+
+import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/polygon/fill/demo/population.js b/examples/polygon/fill/demo/population.js
index 4dffd60a8a..48f17f3ff6 100644
--- a/examples/polygon/fill/demo/population.js
+++ b/examples/polygon/fill/demo/population.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { PolygonLayer, LineLayer } from '@l7/layers';
+import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
diff --git a/examples/raster/basic/demo/image.js b/examples/raster/basic/demo/image.js
index 49ab82e123..6eb1c8e43a 100644
--- a/examples/raster/basic/demo/image.js
+++ b/examples/raster/basic/demo/image.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { ImageLayer } from '@l7/layers';
+import { Scene, ImageLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
@@ -19,6 +18,7 @@ layer.source(
     }
   }
 );
-scene.on('loaded', () => {
-  scene.addLayer(layer);
-});
+scene.addLayer(layer);
+// scene.on('loaded', () => {
+//   scene.addLayer(layer);
+// });
diff --git a/examples/raster/basic/demo/radar.js b/examples/raster/basic/demo/radar.js
index e5b1486ad7..49b8cbb2eb 100644
--- a/examples/raster/basic/demo/radar.js
+++ b/examples/raster/basic/demo/radar.js
@@ -1,5 +1,4 @@
-import { Scene } from '@l7/scene';
-import { ImageLayer } from '@l7/layers';
+import { Scene, ImageLayer } from '@antv/l7';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
@@ -19,6 +18,5 @@ layer.source(
     }
   }
 );
-scene.on('loaded', () => {
-  scene.addLayer(layer);
-});
+scene.addLayer(layer);
+
diff --git a/gatsby-browser.js b/gatsby-browser.js
index d8b2a8344b..6eee86f17a 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -6,4 +6,5 @@ window.scene = require('./packages/scene/src');
 window.layers = require('./packages/layers/src');
 window.component = require('./packages/component/src');
 window.g2 = require('@antv/g2');
+window.l7 = require("@antv/l7");
 //
diff --git a/package.json b/package.json
index 0bfd8c2720..0c704510cd 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   "devDependencies": {
     "@antv/g2": "^3.5.9",
     "@antv/gatsby-theme-antv": "^0.9.52",
+    "@antv/l7": "2.0.0-beta.4",
     "@babel/cli": "^7.6.4",
     "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-decorators": "^7.6.0",
diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx
index c4578a2078..eb3ae773c4 100644
--- a/site/pages/index.zh.tsx
+++ b/site/pages/index.zh.tsx
@@ -33,6 +33,16 @@ const IndexPage = () => {
       description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染'),
     },
   ];
+  const companies = [
+    { name: '阿里云', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ' },
+    { name: '支付宝', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ', },
+    { name: '天猫', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ', },
+    { name: '淘宝网', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ', },
+    { name: '网商银行', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ', },
+    { name: '盒马',img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ePJMQZCb8vkAAAAAAAAAAABkARQnAQ', },
+    { name: 'yunos', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ', },
+    { name: '菜鸟', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ', },
+  ];
   const bannerButtons = [
     {
       text: t('图表示例'),
@@ -91,6 +101,7 @@ const IndexPage = () => {
         notifications={notifications}
         className="banner"
         githubStarLink="https://github.com/antvis/L7/stargazers"
+        
       />
       <Features features={features} style={{ width: '100%' }} />
       <Cases cases={cases} />