refactor(amap): rename Amap to GaodeMap 避免和高德全局对象Amap冲突

docs/api/scene.en.md

@@ -10,10 +10,10 @@ order: 2
 ```javascript
 // Module 引用
 import { Scene } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,
@@ -23,7 +23,7 @@ const scene = new Scene({
 // CDN 使用方法
 const scene = new L7.Scene({
   id: 'map',
-  map: new L7.AMap({
+  map: new L7.GaodeMap({
     style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,
@@ -58,7 +58,7 @@ const map = scene.map
 ```javascript
 const scene =new L7.Scene({
   id: 'map',
-  map: new L7.AMap({
+  map: new L7.GaodeMap({
     style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,

docs/api/scene.zh.md

@@ -10,10 +10,10 @@ order: 2
 ```javascript
 // Module 引用
 import { Scene } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,
@@ -23,7 +23,7 @@ const scene = new Scene({
 // CDN 使用方法
 const scene = new L7.Scene({
   id: 'map',
-  map: new L7.AMap({
+  map: new L7.GaodeMap({
     style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,
@@ -58,7 +58,7 @@ const map = scene.map
 ```javascript
 const scene =new L7.Scene({
   id: 'map',
-  map: new L7.AMap({
+  map: new L7.GaodeMap({
     style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,

docs/tutorial/map/amap.en.md

@@ -1,5 +1,5 @@
 ---
-title: AMap BaseMap
+title: GaodeMap BaseMap
 order: 0
 ---
 
@@ -35,7 +35,7 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    map: new L7.AMap({
+    map: new L7.GaodeMap({
       style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
@@ -111,7 +111,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 
   const scene = new L7.Scene({
     id: 'map',
-    map: new L7.AMap({
+    map: new L7.GaodeMap({
       style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,

docs/tutorial/map/amap.zh.md

@@ -35,7 +35,7 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    map: new L7.AMap({
+    map: new L7.GaodeMap({
       style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
@@ -111,7 +111,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 
   const scene = new L7.Scene({
     id: 'map',
-    map: new L7.AMap({
+    map: new L7.GaodeMap({
       style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,

docs/tutorial/quickstart.en.md

@@ -47,7 +47,7 @@ yarn add  --save @antv/l7@beta
 然后就可以使用其中包含的场景和各类图层：
 ```typescript
 import { Scene, PolygonLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 (async function() {
   // 获取数据
@@ -59,7 +59,7 @@ import { AMap } from '@antv/l7-maps';
   // 创建场景
   const scene = new Scene({
     id: 'map',
-    map: new AMap({
+    map: new GaodeMap({
       center: [110.19382669582967, 50.258134],
       pitch: 0,
       style: 'dark',
@@ -93,7 +93,7 @@ import { AMap } from '@antv/l7-maps';
 
 
 L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
-* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
+* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/GaodeMap.tsx)
 * [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
 
 
@@ -102,10 +102,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
 React 组件待开发，目前可以暂时以 Submodule 方式使用：
 ```tsx
 import { Scene, PolygonLayer} from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class AMap extends React.Component {
+export default class GaodeMap extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -118,7 +118,7 @@ export default class AMap extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      map: new AMap({
+      map: new GaodeMap({
         center: [110.19382669582967, 50.258134],
         pitch: 0,
         style: 'dark',

docs/tutorial/quickstart.zh.md

@@ -47,7 +47,7 @@ yarn add  --save @antv/l7@beta
 然后就可以使用其中包含的场景和各类图层：
 ```typescript
 import { Scene, PolygonLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 (async function() {
   // 获取数据
@@ -59,7 +59,7 @@ import { AMap } from '@antv/l7-maps';
   // 创建场景
   const scene = new Scene({
     id: 'map',
-    map: new AMap({
+    map: new GaodeMap({
       center: [110.19382669582967, 50.258134],
       pitch: 0,
       style: 'dark',
@@ -93,7 +93,7 @@ import { AMap } from '@antv/l7-maps';
 
 
 L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
-* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
+* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/GaodeMap.tsx)
 * [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
 
 
@@ -102,10 +102,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
 React 组件待开发，目前可以暂时以 Submodule 方式使用：
 ```tsx
 import { Scene, PolygonLayer} from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class AMap extends React.Component {
+export default class GaodeMap extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -118,7 +118,7 @@ export default class AMap extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      map: new AMap({
+      map: new GaodeMap({
         center: [110.19382669582967, 50.258134],
         pitch: 0,
         style: 'dark',

examples/gallery/basic/demo/column_dark.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 35.210526315789465,
     style: 'dark',
     center: [ 104.288144, 31.239692 ],

examples/gallery/basic/demo/normal.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     center: [ 121.417463, 31.215175 ],
     pitch: 0,
     zoom: 11

examples/gallery/basic/demo/point.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 64.88,
     style: 'dark',
     center: [ 114.060288, 22.53684 ],

examples/heatmap/grid/demo/china.js

@@ -1,9 +1,9 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'light',
     pitch: 0,
     center: [ 107.054293, 35.246265 ],

examples/heatmap/grid/demo/grid1.js

@@ -1,9 +1,9 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'dark',
     pitch: 0,
     center: [ 110.097892, 33.853662 ],

examples/heatmap/grid/demo/heatmap3.js

@@ -1,9 +1,9 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'light',
     pitch: 0,
     center: [ 110.097892, 33.853662 ],

examples/heatmap/grid/demo/world.js

@@ -1,9 +1,9 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'dark',
     pitch: 0,
     center: [ 110.097892, 33.853662 ],

examples/heatmap/hexagon/demo/world.js

@@ -1,9 +1,9 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'light',
     pitch: 0,
     center: [ 104.995156, 31.450658 ],

examples/line/isoline/demo/ele.js

@@ -1,9 +1,9 @@
 import { Scene, LineLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 53.6305,
     style: 'light',
     center: [ 102.600579, 23.114887 ],

examples/line/isoline/demo/ele_dark.js

@@ -1,9 +1,9 @@
 import { Scene, LineLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 26.842105263157915,
     style: 'dark',
     center: [ 102.599436, 23.116371 ],

examples/line/isoline/demo/isoline.js

@@ -1,9 +1,9 @@
 import { Scene, LineLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 104.117492, 36.492696 ],

examples/line/line/demo/isoline.js

@@ -1,9 +1,9 @@
 import { Scene, LineLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 104.117492, 36.492696 ],

examples/point/bubble/demo/color.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 121.435159, 31.256971 ],

examples/point/bubble/demo/point.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     type: 'amap',
     style: 'light',

examples/point/bubble/demo/scatter.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'light',
     center: [ -121.24357, 37.58264 ],
     pitch: 0,

examples/point/chart/demo/bar.js

@@ -1,10 +1,10 @@
 import { Scene, Marker } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'light',
     center: [ 2.6125016864608597, 49.359131 ],
     pitch: 0,

examples/point/chart/demo/chart.js

@@ -1,10 +1,10 @@
 import { Scene, Marker } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'light',
     center: [ 2.6125016864608597, 49.359131 ],
     pitch: 0,

examples/point/column/demo/clumn_shape.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 66.02383,
     style: 'dark',
     center: [ 121.400257, 31.25287 ],

examples/point/column/demo/column_dark.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 35.210526315789465,
     style: 'dark',
     center: [ 104.288144, 31.239692 ],

examples/point/column/demo/column_light.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 48.62562,
     style: 'light',
     center: [ 104.026043, 31.847 ],

examples/point/image/demo/image.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 121.434765, 31.256735 ],

examples/point/image/demo/locate.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 116.276227, 35.256776 ],

examples/point/image/demo/weather.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'dark',
     center: [ 120.5969, 29.7918 ],
     pitch: 35,

examples/point/marker/demo/marker.js

@@ -1,9 +1,9 @@
 import { Scene, Marker } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'light',
     center: [ 105.790327, 36.495636 ],
     pitch: 0,

examples/point/scatter/demo/normal.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     style: 'dark',
     center: [ 121.417463, 31.215175 ],
     pitch: 0,

examples/point/scatter/demo/normal2.js

@@ -1,9 +1,9 @@
 import { Scene, PointLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 64.88,
     style: 'dark',
     center: [ 114.060288, 22.53684 ],

examples/polygon/3d/demo/polygon.js

@@ -1,9 +1,9 @@
 import { Scene, PolygonLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'dark',
     center: [ 114.050008, 22.529272 ],

examples/polygon/fill/demo/fill.js

@@ -1,9 +1,9 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 116.368652, 39.93866 ],

examples/polygon/fill/demo/polygon.js

@@ -1,9 +1,9 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 107.042225, 37.66565 ],

examples/raster/basic/demo/image.js

@@ -1,9 +1,9 @@
 import { Scene, ImageLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'light',
     center: [ 121.268, 30.3628 ],

examples/raster/basic/demo/radar.js

@@ -1,9 +1,9 @@
 import { Scene, ImageLayer } from '@antv/l7';
-import { AMap } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new AMap({
+  map: new GaodeMap({
     pitch: 0,
     style: 'dark',
     center: [ 115.5268, 34.3628 ],

examples/tutorial/control/demo/amap.js

@@ -0,0 +1,51 @@
+import { PointLayer, Scale, Scene, Layers, Zoom } from '@antv/l7';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [ 121.40, 31.258134 ],
+  zoom: 14
+});
+
+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);
+    const overlayers = {
+      围栏填充: pointLayer
+    };
+    const layersControl = new Layers({
+      overlayers
+    });
+
+    scene.addControl(layersControl);
+
+  });
+
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale({
+  position: 'bottomright'
+});
+
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+

examples/tutorial/control/demo/mapbox.js

@@ -0,0 +1,17 @@
+import { Scale, Zoom, Scene } from '@antv/l7';
+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({
+  position: 'rightbottom'
+});
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+

examples/tutorial/control/demo/meta.json

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图组件",
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件"
+    }
+  ]
+}

examples/tutorial/control/demo/popup.js

@@ -0,0 +1,53 @@
+import { Scale, Zoom, Scene, Layers, PointLayer } from '@antv/l7';
+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);
+    const overlayers = {
+      围栏填充: pointLayer
+    };
+    const baseLayers = {
+      基础地图: pointLayer
+    };
+    const layersControl = new Layers({
+      overlayers,
+      baseLayers
+    });
+
+    scene.addControl(layersControl);
+
+  });
+
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale();
+
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+

examples/tutorial/control/index.en.md

@@ -0,0 +1,4 @@
+---
+title: control
+order: 2
+---

examples/tutorial/control/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 组件
+order: 2
+---
+
+

examples/tutorial/data/demo/line.js

@@ -0,0 +1,37 @@
+import { LineLayer, Scene } from '@antv/l7';
+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);
+
+  });

examples/tutorial/data/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"
+    }
+  ]
+}

examples/tutorial/data/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Data
+order: 1
+---

examples/tutorial/data/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 数据
+order: 1
+---

examples/tutorial/map/demo/amap.js

@@ -0,0 +1,9 @@
+import { Scene } from '@antv/l7';
+new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [ 121.40, 31.258134 ],
+  zoom: 5
+});

examples/tutorial/map/demo/mapbox.js

@@ -0,0 +1,10 @@
+import { Scene } from '@antv/l7';
+new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [ -97.119140625, 38.75408327579141 ],
+  zoom: 2
+});
+

examples/tutorial/map/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"
+    }
+  ]
+}

examples/tutorial/map/index.en.md

@@ -0,0 +1,6 @@
+---
+title: map
+order: 0
+---
+初始 L7 地图实例
+

examples/tutorial/map/index.zh.md

@@ -0,0 +1,9 @@
+---
+title: 地图
+order: 0
+redirect_from:
+  - /zh/tutorial
+---
+初始 L7 地图实例
+
+

packages/layers/src/point/models/extrude.ts

@@ -1,7 +1,7 @@
 import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 import { PointExtrudeTriangulation } from '../../core/triangulation';
-import pointExtrudeVert from '../shaders/extrude3_vert.glsl';
+import pointExtrudeVert from '../shaders/extrude_vert.glsl';
 import pointExtrudeFrag from '../shaders/extrude_frag.glsl';
 interface IPointLayerStyleOptions {
   opacity: number;

packages/layers/src/point/shaders/extrude3_vert.glsl

@@ -1,33 +0,0 @@
-precision highp float;
-
-#define ambientRatio 0.5
-#define diffuseRatio 0.3
-#define specularRatio 0.2
-
-attribute vec3 a_Position;
-attribute vec3 a_Pos;
-attribute vec4 a_Color;
-attribute vec3 a_Size;
-attribute vec3 a_Normal;
-
-uniform mat4 u_ModelMatrix;
-varying vec4 v_color;
-
-#pragma include "projection"
-#pragma include "light"
-#pragma include "picking"
-
-void main() {
-  vec3 size = a_Size * a_Position;
-
-  vec2 offset = project_pixel(size.xy);
-
-  vec4 project_pos = project_position(vec4(a_Pos.xy, 0, 1.0));
-  vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z), 1.0);
-
-  float lightWeight = calc_lighting(pos);
-  v_color =vec4(a_Color.rgb * lightWeight, a_Color.w); 
-
-  gl_Position = project_common_position_to_clipspace(pos);
-  setPickingColor(a_PickingColor);
-}

packages/layers/src/point/shaders/extrude_vert.glsl

@@ -26,24 +26,7 @@ void main() {
   vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z), 1.0);
 
   float lightWeight = calc_lighting(pos);
-
+  v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);
-//  vec3 worldPos = vec3(pos * u_ModelMatrix);
-
-//  vec3 worldNormal = vec3(vec4(a_Normal,1.0));
-//   // //cal light weight
-//  vec3 viewDir = normalize(u_CameraPosition - worldPos);
-
-//  vec3 lightDir = normalize(vec3(1, -10.5, 12));
-
-//  vec3 halfDir = normalize(viewDir+lightDir);
-//   // //lambert
-//  float lambert = dot(worldNormal, lightDir);
-//     //specular
-//  float specular = pow( max(0.0, dot(worldNormal, halfDir)), 32.0);
-//     //sum to light weight
-//  float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
-
-  v_color =vec4(a_Color.rgb*lightWeight, a_Color.w); 
 
   gl_Position = project_common_position_to_clipspace(pos);
   setPickingColor(a_PickingColor);

packages/layers/src/polygon/polygon3D.ts

@@ -1,98 +0,0 @@
-import { AttributeType, gl, IEncodeFeature, ILayer } from '@antv/l7-core';
-import BaseLayer from '../core/BaseLayer';
-import { PolygonExtrudeTriangulation } from '../core/triangulation';
-import polygonExtrudeFrag from './shaders/polygon_extrude_frag.glsl';
-import polygonExtrudeVert from './shaders/polygon_extrude_vert.glsl';
-interface IPointLayerStyleOptions {
-  opacity: number;
-}
-export default class PolygonLayer extends BaseLayer<IPointLayerStyleOptions> {
-  public name: string = 'PolygonLayer';
-
-  protected getConfigSchema() {
-    return {
-      properties: {
-        opacity: {
-          type: 'number',
-          minimum: 0,
-          maximum: 1,
-        },
-      },
-    };
-  }
-
-  protected renderModels() {
-    const { opacity } = this.getLayerConfig();
-    this.models.forEach((model) =>
-      model.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-        },
-      }),
-    );
-    return this;
-  }
-
-  protected buildModels() {
-    this.registerBuiltinAttributes();
-    this.models = [
-      this.buildLayerModel({
-        moduleName: 'polygonExtrude',
-        vertexShader: polygonExtrudeVert,
-        fragmentShader: polygonExtrudeFrag,
-        triangulation: PolygonExtrudeTriangulation,
-      }),
-    ];
-  }
-
-  private registerBuiltinAttributes() {
-    // point layer size;
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'normal',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_Normal',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.STATIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 3,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-          normal: number[],
-        ) => {
-          return normal;
-        },
-      },
-    });
-
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'size',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_Size',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 1,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
-          const { size } = feature;
-          return Array.isArray(size) ? [size[0]] : [size as number];
-        },
-      },
-    });
-  }
-}

packages/layers/src/polygon/shaders/polygon_extrude_vert.glsl

@@ -13,6 +13,7 @@ uniform mat4 u_ModelMatrix;
 varying vec4 v_Color;
 
 #pragma include "projection"
+#pragma include "light"
 #pragma include "picking"
 
 void main() {
@@ -20,24 +21,9 @@ void main() {
 
   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
-  vec3 worldPos = vec3(project_pos * u_ModelMatrix);
+  float lightWeight = calc_lighting(pos);
-
-  vec3 worldNormal = vec3(vec4(a_Normal,1.0) * u_ModelMatrix);
-  //  vec3 worldNormal = project_normal(a_Normal);
-  // //cal light weight
-  vec3 viewDir = normalize(u_CameraPosition - worldPos);
-
-  vec3 lightDir = normalize(vec3(1, -10.5, 12));
-
-  vec3 halfDir = normalize(viewDir+lightDir);
-  // //lambert
-  float lambert = dot(worldNormal, lightDir);
-  //specular
-  float specular = pow( max(0.0, dot(worldNormal, halfDir)), 16.0);
-  //sum to light weight
-  float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
   // v_Color = a_Color;
-  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w); 
+  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
 
   setPickingColor(a_PickingColor);
-}
+}

packages/maps/src/index.ts

@@ -1,4 +1,4 @@
-import AMap from './amap/Wrapper';
+import GaodeMap from './amap/Wrapper';
 import Mapbox from './mapbox/Wrapper';
 
-export { AMap, Mapbox };
+export { GaodeMap, Mapbox };

packages/renderer/src/regl/index.ts

@@ -54,7 +54,6 @@ export default class ReglRendererService implements IRendererService {
           'OES_element_index_uint',
           'EXT_shader_texture_lod', // IBL
           'OES_standard_derivatives', // wireframe
-          'EXT_SRGB', // baseColor emmisive
           'OES_texture_float', // shadow map
           'WEBGL_depth_texture',
           'angle_instanced_arrays',