feat(demo): add point chart demo

.npmrc

@@ -1,4 +0,0 @@
-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

README.md

@@ -1,7 +1,26 @@
-# L7-POC
+# L7 
-A POC for L7's new architecture.
 
-## Getting Started
+
+[![版本](https://badgen.net/npm/v/@antv/l7)](https://www.npmjs.com/@antv/l7)
+[![NPM downloads](http://img.shields.io/npm/dm/@antv/l7.svg)](http://npmjs.com/@antv/l7)
+![最近提交](https://badgen.net/github/last-commit/antvis/L7)
+
+L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
+
+
+### Installation
+
+```
+ npm install @l7/l7
+
+```
+
+### Features
+
+### Links
+
+
+## Development
 
 使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
 ```bash
@@ -32,7 +51,7 @@ visit http://localhost:8000/
 
 ## Add Package
 
-创建一个新的 package：
+add new package：
 ```bash
 lerna create my-pack -y
 ```

docs/API/L7.en.md

@@ -0,0 +1,6 @@
+---
+title: Introduction
+order: 0
+redirect_from:
+  - /en/docs/API
+---

docs/API/Scene.zh.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',()=>{}) // 地图容器大小改变事件
+```
+
+

docs/API/component/control.en.md

@@ -0,0 +1,137 @@
+---
+title: Map Control
+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
+

docs/API/component/control.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 地图组件
-order: 1
+order: 3
 ---
 # control
 

docs/API/component/marker.en.md

@@ -0,0 +1,83 @@
+---
+title: Map Marker
+order: 3
+---
+
+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);
+```
+
+

docs/API/component/marker.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 地图标注
-order: 0
+order: 3
 ---
 
 Marker 地图标注 目前只支持2D dom标注

docs/API/component/popup.en.md

@@ -0,0 +1,92 @@
+---
+title: Popup
+order: 4
+---
+# 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

docs/API/layer.en.md

@@ -0,0 +1,4 @@
+---
+title: Map Layer
+order: 2
+---

docs/API/layer.zh.md

@@ -0,0 +1,4 @@
+---
+title: 图层
+order: 2
+---

docs/manual/tutorial/data.en.md

@@ -0,0 +1,65 @@
+---
+title: data
+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数据

docs/manual/tutorial/quickstart.en.md

@@ -0,0 +1,6 @@
+---
+title: quickStart
+order: 0
+redirect_from:
+  - /en/docs/tutorial
+---

docs/specification/introduction.md

@@ -1,7 +0,0 @@
----
-title: 简介
-order: 1
-redirect_from:
-  - /zh/docs/specification
----
-L7 地理空间可视化设计语言

examples/gallery/basic/index.en.md

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

examples/heatmap/grid/demo/china.js

@@ -0,0 +1,43 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 47.49999999999995,
+  center: [114.05737552216226, 22.542656745583486],
+  zoom: 12.405122702055305,
+  type: 'mapbox',
+});
+window.mapScene = scene;
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+)
+  .then((res) => res.text())
+  .then((data) => {
+    const layer = new HeatMapGridLayer({})
+      .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 10000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 10;
+    })
+    .shape('square')
+    .style({
+      coverage: 0.8,
+      angle: 0,
+    })
+    .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+    scene.addLayer(layer);
+  });

examples/heatmap/grid/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Grid Map
+order: 1
+---
+
+

examples/heatmap/heatmap/demo/meta.json

@@ -4,7 +4,6 @@
     "en": "heatmap"
   },
   "demos": [
-    
     {
       "filename": "world.js",
       "title": "经典热力图2D",
@@ -14,6 +13,6 @@
       "filename": "world3d.js",
       "title": "经典热力图3D",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ"
-    },
+    }
   ]
 }

examples/heatmap/heatmap/index.en.md

@@ -0,0 +1,6 @@
+---
+title: HeatMap
+order: 0
+redirect_from:
+  - /en/examples/heatmap/
+---

examples/heatmap/hexagon/demo/china.js

@@ -0,0 +1,44 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 47.49999999999995,
+  center: [114.05737552216226, 22.542656745583486],
+  zoom: 3,
+  type: 'mapbox',
+});
+window.mapScene = scene;
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+)
+  .then((res) => res.text())
+  .then((data) => {
+    const layer = new HeatMapGrid3dLayer({})
+      .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'hexagon',
+        size: 10000,
+        field:'v',
+        method:'sum'
+      }
+      ]
+    })
+    .size('sum',(value)=>{
+       return value * 10;
+    })
+    .shape('square')
+     .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+    .style({
+      coverage: 0.8,
+      angle: 0,
+    })
+   
+    scene.addLayer(layer);
+  });

examples/heatmap/hexagon/demo/hexagon.js

@@ -3,12 +3,12 @@ import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
   style: 'light',
-  pitch: 0,
+  pitch: 47.49999999999995,
-  center: [114.0500, 22.5441],
+  center: [114.05737552216226, 22.542656745583486],
-  zoom: 14,
+  zoom: 12.405122702055305,
   type: 'mapbox',
 });
-
+window.mapScene = scene;
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
 )
@@ -19,7 +19,7 @@ fetch(
         transforms: [
           {
             type: 'hexagon',
-            size: 200,
+            size: 100,
             field: 'h12',
             method: 'sum',
           },
@@ -35,16 +35,12 @@ fetch(
       .color(
         'sum',
         [
-          '#ffffcc',
+    '#094D4A', '#146968',
-          '#ffeda0',
+    '#1D7F7E', '#289899',
-          '#fed976',
+    '#34B6B7', '#4AC5AF',
-          '#feb24c',
+    '#5FD3A6', '#7BE39E',
-          '#fd8d3c',
+    '#A1EDB8', '#CEF8D6'
-          '#fc4e2a',
+    ].reverse()
-          '#e31a1c',
-          '#bd0026',
-          '#800026',
-        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/heatmap/hexagon/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "蜂窝热力图",
+    "en": "heatmap"
+  },
+  "demos": [
+    {
+      "filename": "light.js",
+      "title": "蜂窝热力图",
+      "screenshot":""
+    },
+    {
+      "filename": "hexagon.js",
+      "title": "蜂窝热力图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/heatmap/hexagon/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Hexagon Map
+order: 1
+---

examples/line/arc/demo/arcCircle.js

@@ -3,12 +3,12 @@ import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
-  type: 'amap',
+  type: 'mapbox',
   style: 'dark',
-  center: [102.602992, 23.107329],
+  center: [107.77791556935472, 35.443286920228644],
-  zoom: 2,
+  zoom: 2.9142882493605033,
 });
-
+window.mapScene = scene;
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then((res) => res.text())
   .then((data) => {

examples/line/arc/demo/trip_arc.js

@@ -0,0 +1,35 @@
+import { Arc3DLineLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [-74.0334588, 40.7162469],
+  zoom: 10,
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv')
+  .then((res) => res.text())
+  .then((data) => {
+    const layer =
+    new Arc3DLineLayer({})
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'start station longitude',
+        y: 'start station latitude',
+        x1: 'end station longitude',
+        y1: 'end station latitude',
+      },
+    })
+    .size(1)
+    .shape('arc')
+    .color('#8C1EB2')
+    .style({
+      opacity: 0.8,
+      blur: 0.99
+    })
+    ;
+   scene.addLayer(layer);
+  })

examples/line/arc/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Arc Line Map
+order: 1
+---

examples/line/line/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Isoline Map
+order: 2
+redirect_from:
+  - /en/examples/line/
+---

examples/line/line/index.zh.md

@@ -1,6 +1,6 @@
 ---
-title: 等值线
+title: 等值线地图
-order: 0
+order: 2
 redirect_from:
   - /zh/examples/line/
 ---

examples/line/path/demo/road.js

@@ -0,0 +1,36 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  center: [103.7850524, 1.4411409],
+  pitch: 45,
+  zoom: 10,
+  rotation: 10,
+  type: 'mapbox',
+  style: 'light',
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data,{
+          parser:{
+            type:'json',
+            coordinates:'path'
+          }
+        })
+        .size('level',(level)=>{
+          return [1.0 , level * 2]
+        })
+        .shape('line')
+        .color(
+          'level',
+          ['#5B8FF9','#5CCEA1','#5D7092' ]
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/path/index.en.md

@@ -0,0 +1,7 @@
+---
+title: Path Map
+order: 0
+redirect_from:
+  - /en/examples/line/
+---
+

examples/point/3d/demo/clumn_shape.js

@@ -0,0 +1,40 @@
+import { Scene } from '@l7/scene';
+import { Point3dLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 65.68421052631578,
+  type: 'amap',
+  style: 'dark',
+  center: [121.3917,31.259242],
+  zoom: 14.55,
+  rotation: 120
+
+});
+window.mapScene = scene;
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new Point3dLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn','squareColumn'])
+        .size('unit_price', (h)=>{
+          return [ 6,6, h / 500 ]
+        })
+        .color('name',['#739DFF', "#61FCBF",'#FFDE74','#FF896F'])
+        .style({
+          opacity: 1.0,
+        })
+
+      scene.addLayer(pointLayer);
+
+  });
+
+

examples/point/3d/demo/clumn_shape_light.js

@@ -2,13 +2,15 @@ import { Scene } from '@l7/scene';
 import { Point3dLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  pitch: 65.68421052631578,
   type: 'amap',
   style: 'light',
-  center: [121.40, 31.258134],
+  center: [121.3917,31.259242],
-  zoom: 15,
+  zoom: 14.55,
+  rotation: 120
 
 });
+window.mapScene = scene;
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
   .then((res) => res.json())
@@ -24,9 +26,9 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
           }
         }).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn','squareColumn'])
         .size('unit_price', (h)=>{
-          return [ 15,15, h / 1000 ]
+          return [ 6,6, h / 500 ]
         })
-        .color('name',['#49B5AD', "#5B8FF9",'#E4504A','#E99431'])
+        .color('name',['#5B8FF9', "#70E3B5",'#FFD458','#FF7C6A'])
         .style({
           opacity: 1.0,
         })

examples/point/3d/demo/meta.json

@@ -8,18 +8,24 @@
       "filename": "column_light.js",
       "title": "3D柱图_浅色底图",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*5WdiT7MmU_cAAAAAAAAAAABkARQnAQ"
-   
+
     },
     {
-      "filename": "world.js",
+      "filename": "clumn_shape_light.js",
-      "title": "气泡图 - 电厂装机量"
+      "title": "3D 浅色柱图",
-    
+       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*pAKGQrCFSjAAAAAAAAAAAABkARQnAQ"
+
     },
     {
       "filename": "column_dark.js",
       "title": "3D柱图_深色底图",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
-   
+    },
+     {
+      "filename": "clumn_shape.js",
+      "title": "3D 深色柱图",
+       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HNbARpUVOdYAAAAAAAAAAABkARQnAQ"
+
     }
   ]
 }

examples/point/3d/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Column Map
+order: 4
+---

examples/point/3d/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: 3D柱状地图
+title: 3D 柱状地图
 order: 4
 ---

examples/point/basic/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Bubble Map
+order: 0
+redirect_from:
+  - /en/point
+---

examples/point/basic/index.zh.md

@@ -2,5 +2,5 @@
 title: 气泡地图
 order: 0
 redirect_from:
-  - /zh/examples
+  - /zh/examples/
 ---

examples/point/chartmap/demo/meta.json

@@ -5,10 +5,14 @@
   },
   "demos": [
     {
-      "filename": "normal.js",
+      "filename": "chart.js",
-      "title": "海量点",
+      "title": "环图",
+      "screenshot":""
+    },
+    {
+      "filename": "popuplation.js",
+      "title": "环图",
       "screenshot":""
-
     }
   ]
 }

examples/point/chartmap/demo/popuplation.js

@@ -0,0 +1,75 @@
+import { Scene } from '@l7/scene';
+import { Marker, Popup } from '@l7/component'
+import * as G2 from '@antv/g2'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'dark',
+  center: [0, 29.877025],
+  zoom: 0,
+});
+
+scene.on('loaded', () => {
+  new Marker().setLnglat({
+    lng: 112,
+    lat: 30
+  }).addTo(scene);
+  Promise.all([
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+    fetch('https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json').then(d => d.json()),
+    fetch('https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json').then(d => d.json())
+  ]).then(function onLoad([world, center, population]) {
+
+    const popobj = {};
+    population.forEach(element => {
+      popobj[element.Code] = element['Population, female (% of total) (% of total)']
+    });
+    // 数据绑定
+
+    center.features = center.features.map((fe) => {
+      fe.properties.female = popobj[fe.properties.id] * 1 || 0;
+      return fe;
+    })
+    center.features.forEach((point, index) => {
+      const el = document.createElement('div');
+      const coord = point.geometry.coordinates;
+      const v = point.properties.female * 1;
+      if (v < 1 || v> 46 && v < 54) return;
+      const size = 70;
+      const data = [{
+        type: '男性',
+        value: 100.00 - v.toFixed(2)
+      }, {
+        type: '女性',
+        value: v.toFixed(2) * 1
+      }];
+      const chart = new G2.Chart({
+        container: el,
+        width: size,
+        height: size,
+        render: 'canvas',
+        padding: 0
+      });
+      chart.source(data);
+      chart.legend(false);
+      chart.tooltip(false);
+      chart.coord('theta', {
+        radius: 0.9,
+        innerRadius: 0.75
+      });
+      chart.guide().html({
+        position: ['50%', '50%'],
+        html: '<div class="g2-guide-html"><p class="title">' + data[1].type + '</p><p class="value">' + (data[1].value + '%') + '</p></div>'
+      });
+      console.log(data);
+      chart.intervalStack().position('value').color('type', ['#eceef1', '#f0657d',]).opacity(1);
+      chart.render();
+      new Marker().setLnglat({
+        lng: coord[0],
+        lat: coord[1]
+      }).addTo(scene);
+    })
+
+  });
+})

examples/point/chartmap/index.en.md

@@ -0,0 +1,5 @@
+---
+title: Chart Map
+order: 6
+---
+

examples/point/chartmap/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: 复合图表地图
-order: 7
+order: 6
 ---

examples/point/image/demo/locate.js

@@ -0,0 +1,30 @@
+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: [116.276227, 35.256776],
+  zoom: 6,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json')
+  .then((res) => res.json())
+  .then((data) => {
+  scene.addImage(
+    'marker',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gxtYSIbHgaYAAAAAAAAAAABkARQnAQ',
+  );
+   const imageLayer = new PointImageLayer()
+      .source(data,)
+      .shape('marker')
+      .size(15);
+        scene.addLayer(imageLayer);
+         
+  });
+
+window.mapscene =scene;
+
+

examples/point/image/demo/weather.js

@@ -3,11 +3,12 @@ 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],
+  center: [120.5969, 29.7918],
-  zoom: 15,
+  pitch: 35,
+  zoom: 7,
+  rotation: 4.183582
 });
 scene.addImage('00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ');
 scene.addImage('01', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ');

examples/point/image/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Symbol Map
+order: 2
+---

examples/point/marker/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Custom Marker
+order: 7
+---

examples/point/marker/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: 自定义符号
+title: 自定义Marker
 order: 7
 ---

examples/point/scatter/demo/meta.json

@@ -4,16 +4,17 @@
     "en": "Category"
   },
   "demos": [
+    {
+      "filename": "scatter.js",
+      "title": "定点图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Jt3ZSb8VH98AAAAAAAAAAABkARQnAQ"
+
+    },
     {
       "filename": "normal.js",
       "title": "海量点",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "scatter.js",
-      "title": "定点图",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*s5lpTYp2hZYAAAAAAAAAAABkARQnAQ"
-
     }
+
   ]
 }

examples/point/scatter/demo/scatter.js

@@ -8,64 +8,7 @@ const scene = new Scene({
   pitch: 0,
   zoom: 5.740491857794806
 });
-const colorObj = {
+
-  redyellow: [
-    '#8A191A', '#AE3235',
-    '#CC464B', '#E26A5D',
-    '#EC8765', '#F0A66C',
-    '#F4BC8F', '#FFCEA7',
-    '#FFE4CE', '#FFF2E8'
-  ],
-  yellow: [
-    '#7B320A', '#B35B21',
-    '#D2722E', '#F0883A',
-    '#FBA045', '#FAB04B',
-    '#FAC760', '#FBD78C',
-    '#FCE6B3', '#FCF3DB'
-  ],
-  blue_green: [
-    '#094D4A', '#146968',
-    '#1D7F7E', '#289899',
-    '#34B6B7', '#4AC5AF',
-    '#5FD3A6', '#7BE39E',
-    '#A1EDB8', '#CEF8D6'
-  ],
-  blue: [
-    '#0A3663', '#1558AC',
-    '#3771D9', '#4D89E5',
-    '#64A5D3', '#72BED6',
-    '#83CED6', '#A6E1E0',
-    '#B8EFE2', '#D7F9F0'
-  ],
-  purple: [
-    '#312B60', '#4A457E',
-    '#615C99', '#816CAD',
-    '#A67FB5', '#C997C7',
-    '#DEB8D4', '#F5D4E6',
-    '#FAE4F1', '#FFF3FC'
-  ],
-  color1: [
-    '#E4682F', '#FF8752',
-    '#FFA783', '#FFBEA8',
-    '#FFDCD6', '#EEF3FF',
-    '#C8D7F5', '#A5C1FC',
-    '#7FA7F9', '#5F8AE5'
-  ],
-  color2: [
-    '#F1646A', '#F48789',
-    '#F7A9AC', '#FBCCCD',
-    '#FDEEEE', '#EEF3FF',
-    '#C8DAFE', '#A5C1FC',
-    '#80A8FB', '#5B8EF8'
-  ],
-  color3: [
-    '#EEF3FF', '#C8DAFE',
-    '#A5C1FC', '#80A8FB',
-    '#5B8EF8', '#FCF6FA',
-    '#F5E4EF', '#F7CDDF',
-    '#ED9CBE', '#D1749B'
-  ]
-}
 fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
   .then((res) => res.text())
   .then((data) => {
@@ -81,7 +24,13 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46
         })
         .shape('circle')
         .size(4)
-        .color('Magnitude',colorObj.yellow)
+        .color('Magnitude',[
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ])
         .style({
           opacity: 0.5,
           strokeWidth: 0,

examples/point/scatter/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Scatter Map
+order: 1
+---

examples/point/scatter/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: "散点图"
+title: "散点地图"
 order: 1
 ---

examples/polygon/3d/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Extrude Map
+order: 0
+redirect_from:
+  - /en/examples/polygon/
+---

examples/polygon/basic/demo/fill.js

@@ -6,67 +6,9 @@ const scene = new Scene({
   type: 'amap',
   style: 'light',
   center: [116.3237, 39.8829],
-  zoom: 8
+  zoom: 9
 });
-const colorObj = {
+window.mapScene = scene;
-  redyellow: [
-    '#8A191A', '#AE3235',
-    '#CC464B', '#E26A5D',
-    '#EC8765', '#F0A66C',
-    '#F4BC8F', '#FFCEA7',
-    '#FFE4CE', '#FFF2E8'
-  ],
-  yellow: [
-    '#7B320A', '#B35B21',
-    '#D2722E', '#F0883A',
-    '#FBA045', '#FAB04B',
-    '#FAC760', '#FBD78C',
-    '#FCE6B3', '#FCF3DB'
-  ],
-  blue_green: [
-    '#094D4A', '#146968',
-    '#1D7F7E', '#289899',
-    '#34B6B7', '#4AC5AF',
-    '#5FD3A6', '#7BE39E',
-    '#A1EDB8', '#CEF8D6'
-  ],
-  blue: [
-    '#0A3663', '#1558AC',
-    '#3771D9', '#4D89E5',
-    '#64A5D3', '#72BED6',
-    '#83CED6', '#A6E1E0',
-    '#B8EFE2', '#D7F9F0'
-  ],
-  purple: [
-    '#312B60', '#4A457E',
-    '#615C99', '#816CAD',
-    '#A67FB5', '#C997C7',
-    '#DEB8D4', '#F5D4E6',
-    '#FAE4F1', '#FFF3FC'
-  ],
-  color1: [
-    '#E4682F', '#FF8752',
-    '#FFA783', '#FFBEA8',
-    '#FFDCD6', '#EEF3FF',
-    '#C8D7F5', '#A5C1FC',
-    '#7FA7F9', '#5F8AE5'
-  ],
-  color2: [
-    '#F1646A', '#F48789',
-    '#F7A9AC', '#FBCCCD',
-    '#FDEEEE', '#EEF3FF',
-    '#C8DAFE', '#A5C1FC',
-    '#80A8FB', '#5B8EF8'
-  ],
-  color3: [
-    '#EEF3FF', '#C8DAFE',
-    '#A5C1FC', '#80A8FB',
-    '#5B8EF8', '#FCF6FA',
-    '#F5E4EF', '#F7CDDF',
-    '#ED9CBE', '#D1749B'
-  ]
-}
-
 fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json')
   .then((res) => res.json())
   .then((data) => {
@@ -74,7 +16,13 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7
       new PolygonLayer({
       })
       .source(data)
-       .color('unit_price', colorObj.blue_green)
+       .color('unit_price', [
+    '#1A4397', '#2555B7',
+    '#3165D1', '#467BE8',
+    '#6296FE', '#7EA6F9',
+    '#98B7F7', '#BDD0F8',
+    '#DDE6F7', '#F2F5FC'
+    ].reverse())
        .shape('fill')
        .style({
         opacity: 1
@@ -85,7 +33,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7
       })
       .source(data)
        .color('#fff')
-       .size(0.5)
+       .size(0.3)
        .style({
         opacity: 1
       })

examples/polygon/basic/demo/meta.json

@@ -11,7 +11,12 @@
     },
     {
       "filename": "fill.js",
-      "title": "分类填充图",
+      "title": "连续填充图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*g93EQYYz9HEAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "population.js",
+      "title": "世界地图 女性人口比例",
       "screenshot": ""
     }
   ]

examples/polygon/basic/demo/polygon.js

@@ -1,5 +1,5 @@
 import { Scene } from '@l7/scene';
-import { PolygonLayer } from '@l7/layers'
+import { PolygonLayer, LineLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
   pitch: 0,
@@ -20,7 +20,20 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
       .color('name', colors).shape('fill')
       .style({
         opacity: 0.9
-      }).render();
+      });
+
+       const layer2 =
+      new LineLayer({
+        zIndex: 2
+      })
+      .source(data)
+       .color('#fff')
+       .size(0.3)
+       .style({
+        opacity: 1
+      })
+   
     scene.addLayer(layer);
+    scene.addLayer(layer2);
     console.log(layer);
   });

examples/polygon/basic/demo/population.js

@@ -0,0 +1,52 @@
+import { Scene } from '@l7/scene';
+import { PolygonLayer, LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [0, 29.877025],
+  zoom: 0,
+});
+Promise.all([
+  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json').then(d => d.json())
+]).then(function onLoad([world, population]) {
+    const popobj = {};
+    population.forEach(element => {
+      popobj[element.Code] = element['Population, female (% of total) (% of total)']
+    });
+   // 数据绑定
+    world.features = world.features.map((fe)=>{
+      fe.properties.female= popobj[fe.id] * 1|| 0;
+      return fe;
+    })
+    console.log(world);
+  var colors = ['#b2182b','#ef8a62','#fddbc7','#f7f7f7','#d1e5f0','#67a9cf','#2166ac'];
+  const layer =
+      new PolygonLayer({
+      })
+      .source(world)
+      .scale('female', {
+        type:'quantile'
+      })
+      .color('female', colors).shape('fill')
+      .style({
+        opacity: 0.9
+      });
+
+  const layer2 =
+    new LineLayer({
+      zIndex: 2
+    })
+      .source(world)
+      .color('#fff')
+      .size(0.3)
+      .style({
+        opacity: 1
+      })
+
+  scene.addLayer(layer);
+  scene.addLayer(layer2);
+  console.log(layer);
+});

examples/polygon/basic/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Choropleth Map
+order: 0
+redirect_from:
+  - /en/examples
+---

examples/raster/basic/demo/light.js

@@ -0,0 +1,74 @@
+
+import { Scene } from '@l7/scene';
+import { RasterLayer } from '@l7/layers'
+import * as GeoTIFF from 'geotiff';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [121.2680, 30.3628],
+  zoom: 3,
+});
+ async function getTiffData() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/6fd83a0e-50da-4266-94e0-05dec9da1c87.dat',
+  );
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image = await tiff.getImage();
+  const width = image.getWidth();
+  const height = image.getHeight();
+  const values = await image.readRasters();
+  console.log(values);
+  return {
+    data: values[0],
+    width,
+    height
+  };
+}
+
+async function addLayer() {
+  const tiffdata = await getTiffData();
+
+  const layer = new RasterLayer({});
+  layer
+    .source(tiffdata.data, {
+      parser: {
+        type: 'raster',
+        width: tiffdata.width,
+        height: tiffdata.height,
+        min: 0,
+        max: 300,
+        extent: [119.871826171875,
+              30.0262995822237,  120.50216674804688,
+              30.433281874927655]
+      },
+    })
+    .style({
+      heightRatio:10,
+      opacity: 0.8,
+      rampColors: {
+        colors: [
+          '#002466',
+          '#0D408C',
+          '#105CB3',
+          '#1A76C7',
+          '#2894E0',
+          '#3CB4F0',
+          '#65CEF7',
+          '#98E3FA',
+          '#CFF6FF',
+          '#E8FCFF',
+        ],
+        positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
+      },
+    });
+    return layer;
+}
+scene.on('loaded', async () =>{
+  const layer = await addLayer();
+  scene.addLayer(layer);
+  scene.render();
+})
+

examples/raster/basic/demo/meta.json

@@ -12,6 +12,10 @@
     {
       "filename": "raster.js",
       "title": "地形"
+    },
+    {
+      "filename": "light.js",
+      "title": "夜光图"
     }
   ]
 }

examples/raster/basic/demo/raster.js

@@ -1,16 +1,15 @@
 import { Scene } from '@l7/scene';
 import { RasterLayer } from '@l7/layers'
-import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
+import * as GeoTIFF from 'geotiff';
 const scene = new Scene({
   id: 'map',
   pitch: 0,
-  type: 'amap',
+  type: 'mapbox',
   style: 'light',
   center: [121.2680, 30.3628],
-  zoom: 13,
+  zoom: 3,
 });
  async function getTiffData() {
-     debugger
   const response = await fetch(
     'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
   );
@@ -45,6 +44,7 @@ async function addLayer() {
       },
     })
     .style({
+      heightRatio:10,
       opacity: 0.8,
       rampColors: {
         colors: [
@@ -64,7 +64,9 @@ async function addLayer() {
     });
     return layer;
 }
-scene.on('loaded',()=>{
+scene.on('loaded', async () =>{
-  addLayer();
+  const layer = await addLayer();
+  scene.addLayer(layer);
+  scene.render();
 })
 

examples/raster/basic/demo/raster2d.ts

@@ -0,0 +1,72 @@
+import { Scene } from '@l7/scene';
+import { Raster2DLayer } from '@l7/layers'
+import * as GeoTIFF from 'geotiff';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'light',
+  center: [121.2680, 30.3628],
+  zoom: 3,
+});
+ async function getTiffData() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
+  );
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image = await tiff.getImage();
+  const width = image.getWidth();
+  const height = image.getHeight();
+  const values = await image.readRasters();
+  return {
+    data: values[0],
+    width,
+    height,
+    min: 0,
+    max: 8000,
+  };
+}
+
+async function addLayer() {
+  const tiffdata = await getTiffData();
+
+  const layer = new Raster2DLayer({});
+  layer
+    .source(tiffdata.data, {
+      parser: {
+        type: 'raster',
+        width: tiffdata.width,
+        height: tiffdata.height,
+        min: 0,
+        max: 8000,
+        extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+      },
+    })
+    .style({
+      heightRatio:10,
+      opacity: 0.8,
+      rampColors: {
+        colors: [
+          '#002466',
+          '#0D408C',
+          '#105CB3',
+          '#1A76C7',
+          '#2894E0',
+          '#3CB4F0',
+          '#65CEF7',
+          '#98E3FA',
+          '#CFF6FF',
+          '#E8FCFF',
+        ],
+        positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
+      },
+    });
+    return layer;
+}
+scene.on('loaded', async () =>{
+  const layer = await addLayer();
+  scene.addLayer(layer);
+  scene.render();
+})
+

examples/raster/basic/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Raster Map
+order: 0
+---

examples/raster/basic/index.zh.md

@@ -1,6 +1,4 @@
 ---
 title: 栅格图层
 order: 0
-redirect_from:
-  - /zh/examples/raster/
 ---

examples/scene/control/demo/popup.js

@@ -1,57 +0,0 @@
-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);
-

examples/tutorial/control/demo/amap.js

@@ -7,7 +7,7 @@ const scene = new Scene({
   type: 'amap',
   style: 'dark',
   center: [121.40, 31.258134],
-  zoom: 5,
+  zoom: 14,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
@@ -39,7 +39,6 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
       };
       const layersControl = new Layers({
         overlayers: overlayers,
-        baseLayers,
       });
       
       scene.addControl(layersControl);
@@ -50,7 +49,9 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
 
 
   const zoomControl = new Zoom();
-  const scaleControl = new Scale();
+  const scaleControl = new Scale({
+    position:"bottomright"
+  });
 
   scene.addControl(zoomControl);
   scene.addControl(scaleControl);

examples/tutorial/control/index.en.md

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

examples/tutorial/data/index.en.md

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

examples/tutorial/map/index.en.md

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

examples/tutorial/map/index.zh.md

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

gatsby-browser.js

@@ -1,9 +1,9 @@
 
-import './packages/component/src/css/l7.css';
+require('./site/css/demo.css');
-import './site/css/demo.css'
 require('./packages/component/src/css/l7.css');
-window.GeoTIFF = require('geotiff/dist/geotiff.bundle.js')
+window.geotiff = require('geotiff/dist/geotiff.bundle.min.js')
 window.scene = require('./packages/scene/src');
 window.layers= require('./packages/layers/src');
 window.component= require('./packages/component/src');
-window.g2plot = require('@antv/g2plot');
+window.g2 = require('@antv/g2');
+//

gatsby-config.js

@@ -4,7 +4,7 @@ module.exports = {
       resolve: '@antv/gatsby-theme-antv',
       options: {
         GATrackingId: 'UA-148148901-7',
-        pathPrefix: '/l7',
+        pathPrefix: '/L7',
       },
     },
   ],
@@ -13,26 +13,21 @@ module.exports = {
     description: 'Large-scale WebGL-powered  Geospatial data visualization analysis framework',
     githubUrl: 'https://github.com/antvis/L7',
     navs: [
-      {
-        slug: 'docs/specification',
-        title: {
-          zh: '设计语言',
-          en: 'Specification',
-        },
-      },
       {
         slug: 'docs/API',
         title: {
           zh: '文档',
-          en: 'document',
+          en: 'Document',
         },
+        redirect: 'API/L7',
       },
       {
         slug: 'docs/tutorial',
         title: {
           zh: '教程',
-          en: 'tutorial',
+          en: 'Tutorial',
         },
+        redirect: 'tutorial/quickstart',
       },
       {
         slug: 'examples',
@@ -49,23 +44,23 @@ module.exports = {
         slug: 'specification',
         title: {
           zh: '简介',
-          en: 'introduction',
+          en: 'Introduction',
         },
       },
       {
         slug: 'manual/tutorial',
         title: {
           zh: '教程',
-          en: 'tutorial',
+          en: 'Tutorial',
         },
       },
       {
-        slug: 'API/L7.md',
+        slug: 'API/L7',
         title: {
           zh: '简介',
-          en: 'intro',
+          en: 'Introduction',
         },
-        order:1,
+        order:0,
       },
       {
         slug: 'API/component',
@@ -90,7 +85,7 @@ module.exports = {
         icon: 'point',
         title: {
           zh: '点图层',
-          en: 'PointLayer',
+          en: 'Point Layer',
         },
       },
       {
@@ -98,7 +93,7 @@ module.exports = {
         icon: 'line',
         title: {
           zh: '线图层',
-          en: 'LineLayer',
+          en: 'Line Layer',
         },
       },
       {
@@ -106,7 +101,7 @@ module.exports = {
         icon: 'polygon',
         title: {
           zh: '面图层',
-          en: 'PolygonLayer',
+          en: 'Polygon Layer',
         },
       },
       {
@@ -114,7 +109,7 @@ module.exports = {
         icon: 'heatmap',
         title: {
           zh: '热力图',
-          en: 'HeatMapLayer',
+          en: 'HeatMap Layer',
         },
         order:5,
       },
@@ -123,7 +118,7 @@ module.exports = {
         icon: 'raster',
         title: {
           zh: '栅格图层',
-          en: 'RasterLayer',
+          en: 'Raster Layer',
         },
       },
       {
@@ -131,7 +126,7 @@ module.exports = {
         icon: 'map',
         title: {
           zh: '教程示例',
-          en: 'tutorial',
+          en: 'Tutorial demo',
         },
       },
     ],

gatsby-node.js

@@ -1,5 +1,4 @@
 const path = require('path');
-
 exports.onCreateWebpackConfig = ({ getConfig, stage, plugins }) => {
   const config = getConfig();
   config.resolve.extensions.push('.glsl');

package.json

@@ -5,6 +5,7 @@
     "url": "https://github.com/antvis/L7"
   },
   "devDependencies": {
+    "@antv/g2": "^3.5.9",
     "@antv/gatsby-theme-antv": "^0.9.52",
     "@babel/cli": "^7.6.4",
     "@babel/core": "^7.6.4",
@@ -54,6 +55,7 @@
     "enzyme-adapter-react-16": "^1.5.0",
     "enzyme-to-json": "^3.0.0-beta6",
     "gatsby": "^2.17.7",
+    "gatsby-plugin-google-analytics": "^2.1.27",
     "gatsby-remark-prettier": "^1.0.0",
     "geotiff": "^1.0.0-beta.6",
     "gh-pages": "^2.1.1",
@@ -73,7 +75,7 @@
     "raw-loader": "^1.0.0",
     "react": "^16.8.6",
     "react-docgen-typescript-loader": "^3.1.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.12.0",
     "react-i18next": "^11.0.1",
     "rimraf": "^2.6.2",
     "rollup": "^1.27.0",
@@ -149,7 +151,6 @@
     }
   },
   "dependencies": {
-    "@antv/g2plot": "^0.1.0-beta.5",
     "geotiff": "^1.0.0-beta.6"
   }
 }

packages/component/src/control/layer.ts

@@ -111,11 +111,11 @@ export default class Layers extends Control {
       className + '-list',
     ) as HTMLElement);
 
-    if (collapsed) {
+    // if (collapsed) {
-      this.mapsService.on('click', this.collapse);
+    //   this.mapsService.on('click', this.collapse);
-      container.addEventListener('mouseenter', this.expand);
+    //   container.addEventListener('mouseenter', this.expand);
-      container.addEventListener('mouseleave', this.collapse);
+    //   container.addEventListener('mouseleave', this.collapse);
-    }
+    // }
 
     this.layersLink = DOM.create('a', className + '-toggle', container);
     const link = this.layersLink;
@@ -124,6 +124,7 @@ export default class Layers extends Control {
     if (!collapsed) {
       this.expand();
     }
+    this.expand();
 
     this.baseLayersList = DOM.create('div', className + '-base', form);
     this.separator = DOM.create('div', className + '-separator', form);

packages/component/src/css/l7.css

@@ -2,7 +2,10 @@
 	position: absolute !important;
 	top: 0;
 	left: 0;
-	z-index: 5;
+  z-index: 5;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 .l7-popup-anchor-top,
 .l7-popup-anchor-top-left,
@@ -355,34 +358,6 @@
 	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;
@@ -795,9 +770,6 @@
   height: 14px;
   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;

packages/component/src/marker.ts

@@ -169,7 +169,7 @@ export default class Marker {
       svg.appendChild(path);
       element.appendChild(svg);
     }
-    DOM.addClass(element, 'l7-marker');
+    DOM.addClass(element, 'l7_marker');
     element.addEventListener('click', (e: MouseEvent) => {
       this.onMapClick(e);
     });

packages/core/src/shaders/light.glsl

@@ -11,7 +11,7 @@ float calc_lighting(vec4 pos) {
       // //cal light weight
     vec3 viewDir = normalize(u_CameraPosition - worldPos);
 
-    vec3 lightDir = normalize(vec3(1, -10.5, 12));
+    vec3 lightDir = normalize(vec3(1, 10.5, 12));
 
     vec3 halfDir = normalize(viewDir+lightDir);
       // //lambert
@@ -22,4 +22,4 @@ float calc_lighting(vec4 pos) {
     float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
 
     return lightWeight;
-}
+}

packages/layers/src/index.ts

@@ -13,12 +13,14 @@ import Point3dLayer from './point/extrude';
 import PointLayer from './point/fill';
 import PointImageLayer from './point/image';
 import PointNormalLayer from './point/normal';
+
 import TextLayer from './point/text';
 // import Point from './point/point';
 import PolygonLayer from './polygon';
 import Polygon3DLayer from './polygon/polygon3D';
 import ImageLayer from './raster/image';
 import RasterLayer from './raster/raster';
+import Raster2DLayer from './raster/raster2d';
 
 import ConfigSchemaValidationPlugin from './plugins/ConfigSchemaValidationPlugin';
 import DataMappingPlugin from './plugins/DataMappingPlugin';
@@ -97,6 +99,7 @@ export {
   HeatMapGrid3dLayer,
   HeatMapHexagonLayer,
   HeatMapGridLayer,
+  Raster2DLayer,
   // ImageLayer,
   // HeatMapLayer,
 };

packages/layers/src/raster/raster.ts

@@ -22,6 +22,7 @@ interface IRasterLayerStyleOptions {
   max: number;
   extent: [number, number, number, number];
   rampColors: IColorRamp;
+  heightRatio: number;
 }
 
 export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
@@ -42,7 +43,7 @@ export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
   }
 
   protected renderModels() {
-    const { opacity } = this.getStyleOptions();
+    const { opacity, heightRatio = 10 } = this.getStyleOptions();
     const parserDataItem = this.getSource().data.dataArray[0];
     const { coordinates, width, height, min, max } = parserDataItem;
     this.models.forEach((model) =>
@@ -54,6 +55,7 @@ export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
           u_width: width,
           u_height: height,
           u_max: max,
+          u_heightRatio: heightRatio,
           u_colorTexture: this.colorTexture,
           u_extent: [...coordinates[0], ...coordinates[1]],
         },
@@ -72,6 +74,7 @@ export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
       height: parserDataItem.height,
       format: gl.LUMINANCE,
       type: gl.FLOAT,
+      aniso: 4,
     });
     const { rampColors } = this.getStyleOptions();
     const imageData = generateColorRamp(rampColors as IColorRamp);

packages/layers/src/raster/raster2d.ts

@@ -0,0 +1,125 @@
+import {
+  AttributeType,
+  gl,
+  IEncodeFeature,
+  ILayer,
+  ITexture2D,
+} from '@l7/core';
+import BaseLayer from '../core/BaseLayer';
+import { RasterImageTriangulation } from '../core/triangulation';
+import { generateColorRamp, IColorRamp } from '../utils/color';
+import rasterImageFrag from './shaders/raster_2d_frag.glsl';
+import rasterImageVert from './shaders/raster_2d_vert.glsl';
+interface IRasterLayerStyleOptions {
+  opacity: number;
+  min: number;
+  max: number;
+  rampColors: IColorRamp;
+}
+
+export default class Raster2dLayer extends BaseLayer<IRasterLayerStyleOptions> {
+  public name: string = 'RasterLayer';
+  protected texture: ITexture2D;
+  protected colorTexture: ITexture2D;
+
+  protected getConfigSchema() {
+    return {
+      properties: {
+        opacity: {
+          type: 'number',
+          minimum: 0,
+          maximum: 1,
+        },
+      },
+    };
+  }
+
+  protected renderModels() {
+    const { opacity } = this.getStyleOptions();
+    const parserDataItem = this.getSource().data.dataArray[0];
+    const { min, max } = parserDataItem;
+    if (this.texture) {
+      this.models.forEach((model) =>
+        model.draw({
+          uniforms: {
+            u_opacity: opacity || 1,
+            u_texture: this.texture,
+            u_min: min,
+            u_max: max,
+            u_colorTexture: this.colorTexture,
+          },
+        }),
+      );
+    }
+
+    return this;
+  }
+
+  protected buildModels() {
+    this.registerBuiltinAttributes(this);
+    const source = this.getSource();
+    const { createTexture2D } = this.rendererService;
+    const parserDataItem = this.getSource().data.dataArray[0];
+    this.texture = createTexture2D({
+      data: parserDataItem.data,
+      width: parserDataItem.width,
+      height: parserDataItem.height,
+      format: gl.LUMINANCE,
+      type: gl.FLOAT,
+      aniso: 4,
+    });
+    const { rampColors } = this.getStyleOptions();
+    const imageData = generateColorRamp(rampColors as IColorRamp);
+    this.colorTexture = createTexture2D({
+      data: imageData.data,
+      width: imageData.width,
+      height: imageData.height,
+      flipY: true,
+    });
+    this.models = [
+      this.buildLayerModel({
+        moduleName: 'Raster3DImage',
+        vertexShader: rasterImageVert,
+        fragmentShader: rasterImageFrag,
+        triangulation: RasterImageTriangulation,
+        primitive: gl.TRIANGLES,
+        depth: { enable: false },
+        blend: {
+          enable: true,
+          func: {
+            srcRGB: gl.SRC_ALPHA,
+            srcAlpha: 1,
+            dstRGB: gl.ONE_MINUS_SRC_ALPHA,
+            dstAlpha: 1,
+          },
+        },
+      }),
+    ];
+  }
+
+  private registerBuiltinAttributes(layer: ILayer) {
+    // point layer size;
+    layer.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 2,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+        ) => {
+          return [vertex[3], vertex[4]];
+        },
+      },
+    });
+  }
+}

packages/layers/src/raster/shaders/raster_2d_frag.glsl

@@ -0,0 +1,18 @@
+precision mediump float;
+uniform float u_opacity: 1.0;
+uniform sampler2D u_texture;
+uniform sampler2D u_colorTexture;
+uniform float u_min;
+uniform float u_max;
+varying vec2 v_texCoord;
+
+void main() {
+
+  float value = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).a;
+   value = clamp(value,u_min,u_max);
+  float value1 =  (value - u_min) / (u_max -u_min);
+  vec2 ramp_pos = vec2(
+        fract(16.0 * (1.0 - value1)),
+        floor(16.0 * (1.0 - value1)) / 16.0);
+  gl_FragColor =  texture2D(u_colorTexture,ramp_pos);;
+}

packages/layers/src/raster/shaders/raster_2d_vert.glsl

@@ -0,0 +1,11 @@
+precision highp float;
+uniform mat4 u_ModelMatrix;
+attribute vec3 a_Position;
+attribute vec2 a_Uv;
+varying vec2 v_texCoord;
+#pragma include "projection"
+void main() {
+   v_texCoord = a_Uv;
+   vec4 project_pos = project_position(vec4(a_Position, 1.0));
+   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+}

packages/layers/src/raster/shaders/raster_vert.glsl

@@ -1,8 +1,6 @@
 precision highp float;
-
-uniform mat4 u_ModelMatrix;
 attribute vec3 a_Position;
-
+uniform mat4 u_ModelMatrix;
 uniform vec4 u_extent;
 uniform sampler2D u_texture;
 uniform sampler2D u_colorTexture;
@@ -10,9 +8,11 @@ uniform float u_min;
 uniform float u_max;
 uniform float u_width;
 uniform float u_height;
+uniform float u_heightRatio;
 
 varying vec2 v_texCoord;
 varying vec4 v_color;
+
 #pragma include "projection"
 void main() {
   vec2 uv = a_Position.xy / vec2(u_width, u_height);
@@ -35,6 +35,6 @@ void main() {
 
   //  vec2 range = u_extent.zw - u_extent.xy;
   //  vec4 project_pos = project_position(vec4(pos, 0, 1.0));
-   gl_Position = project_common_position_to_clipspace(vec4(pos.xy, project_scale(value) * 10., 1.0));
+   gl_Position = project_common_position_to_clipspace(vec4(pos.xy, project_scale(value) * u_heightRatio, 1.0));
 
 }

packages/maps/src/amap/index.ts

@@ -50,7 +50,7 @@ export default class AMapService implements IMapService {
       const amap = mapContainer.getElementsByClassName(
         'amap-maps',
       )[0] as HTMLElement;
-      this.markerContainer = DOM.create('div', 'l7_marker', amap);
+      this.markerContainer = DOM.create('div', 'l7-marker', amap);
     }
   }
   public getMarkerContainer(): HTMLElement {

site/css/demo.css

@@ -14,3 +14,22 @@
   text-align: center;
   user-select: none;
 }
+.g2-guide-html {
+  width: 50px;
+  height: 50px;
+  vertical-align: middle;
+  text-align: center;
+  line-height: 0.1
+}
+
+.g2-guide-html .title {
+  font-size: 12px;
+  color: #8c8c8c;
+  font-weight: 300;
+}
+
+.g2-guide-html .value {
+  font-size: 18px;
+  color: #000;
+  font-weight: bold;
+}

site/locale.json

@@ -1 +1,15 @@
-{}
+{
+  "L7 地理空间可视化引擎": "Geospatial Visualization Analysis Framework",
+  "地理空间数据可视化": "Geospatial Data Visualization Analysis Framework",
+  "L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。": "Large-scale WebGL-powered  Geospatial data visualization analysis framework",
+  "架构上灵活可扩展":"Flexible and scalable",
+  "业务上简洁且通用":"Simple and Universal",
+  "可视化上酷炫动感":"Cool and Dynamic",
+  "支持地图底图，渲染引擎，图层自由定制、扩展，组合":"Support many basemap, many rendering engine, and layer free customization, extension, combination",
+  "以图形符号学地理设计体系理论基础，易用，易理解，专业，专注":"Base  on Semiology of Graphics , easy to use, easy to understand, professional, focused",
+  "支持海量数据，2D、3D，动态，可交互，高性能渲染":"Support massive data, 2D, 3D, dynamic, interactive, high performance rendering",
+  "蚂蚁数据可视化": "AntV",
+  "继续了解": "More",
+  "更新": "Update",
+  "下载使用":"Download"
+}

site/pages/index.zh.tsx

@@ -13,63 +13,40 @@ const IndexPage = () => {
   const features = [
     {
       icon:
-        'https://gw.alipayobjects.com/zos/basement_prod/5dbaf094-c064-4a0d-9968-76020b9f1510.svg',
+        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*EpwBRpW2X-4AAAAAAAAAAABkARQnAQ',
       title: t('架构上灵活可扩展'),
       description: t('支持地图底图，渲染引擎，图层自由定制、扩展，组合'),
     },
     {
       icon:
-        'https://gw.alipayobjects.com/zos/basement_prod/0a0371ab-6bed-41ad-a99b-87a5044ba11b.svg',
+        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bjWeSqCAyWoAAAAAAAAAAABkARQnAQ',
-      title: t('业务上简洁，通用'),
+      title: t('业务上简洁且通用'),
-      description: t(
+      description: t('以图形符号学地理设计体系理论基础，易用，易理解，专业 专注',
-        '以图形符号学地理设计体系理论基础，易用，易理解，且专业，专注，',
       ),
     },
     {
       icon:
-        'https://gw.alipayobjects.com/zos/basement_prod/716d0bc0-e311-4b28-b79f-afdd16e8148e.svg',
+        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8UXGTKDotJwAAAAAAAAAAABkARQnAQ',
-      title: t('可视化上酷炫，动感'),
+      title: t('可视化上酷炫动感'),
-      description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染。'),
+      description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染'),
     },
   ];
-
+  const bannerButtons = [
-  const companies = [
     {
-      name: '公司1',
+      text: t('图表示例'),
-      img:
+      link: '/examples/point/basic',
-        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Z1NnQ6L4xCIAAAAAAAAAAABkARQnAQ',
+      type: 'primary',
     },
     {
-      name: '公司2',
+      text: t('下载使用'),
-      img:
+      link: '/docs/API/L7',
-        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6u3hTpsd7h8AAAAAAAAAAABkARQnAQ',
-    },
-    {
-      name: '公司3',
-      img:
-        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Fw8HTbFgUdAAAAAAAAAAAABkARQnAQ',
-    },
-    {
-      name: '公司4',
-      img:
-        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*lUdjTqQix48AAAAAAAAAAABkARQnAQ',
-    },
-    {
-      name: '公司5',
-      img:
-        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1q8NQZ9GaN0AAAAAAAAAAABkARQnAQ',
-    },
-    {
-      name: '公司6',
-      img:
-        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*SqmTSqj4FjEAAAAAAAAAAABkARQnAQ',
     },
   ];
 
   const notifications = [
     {
       type: t('测试'),
-      title: t('G6 3.2 全新上线！'),
+      title: t('L7  2.0 beta'),
       date: '2019.12.04',
       link: '#',
     },
@@ -79,9 +56,8 @@ const IndexPage = () => {
     {
       logo:
         'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',
-      title: '浅色朴素色板',
+      title: t('浅色朴素色板'),
-      description:
+      description: t('可视化分析应用'),
-        '可视化分析应用',
       link: '#',
       image:
         'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
@@ -89,39 +65,35 @@ const IndexPage = () => {
     {
       logo:
         'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*ekkhR7ISzUsAAAAAAAAAAABkARQnAQ',
-      title: '深色酷炫色板',
+      title: t('深色酷炫色板'),
-      description:
+      description: t('酷炫地图应用'),
-        '酷炫地图应用',
       image:
         'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
     },
   ];
 
-  const downloadButton = {
-    text: '下载使用',
-    link: 'https://antv.alipay.com/zh-cn/index.html',
-  };
-
   return (
     <>
       <SEO title={t('蚂蚁地理空间数据可视化')} lang={i18n.language} />
       <Banner
-        coverImage={<BannerSVG />}
+        coverImage={
+          <img
+            class="Notification-module--number--31-3Z"
+            style={{ marginLeft: '125px', marginTop: '100px', height: '500px' }}
+            src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JTQgTKOaC1UAAAAAAAAAAABkARQnAQ"
+          />
+        }
         title={t('L7 地理空间可视化引擎')}
         description={t(
           'L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。',
         )}
-        buttonText={t('继续了解')}
+        buttons={bannerButtons}
-        buttonHref={'#products'}
         notifications={notifications}
         className="banner"
-        video="https://mdn.alipayobjects.com/afts/file/A*qmPlRYhAlBkAAAAAAAAAAABjAQAAAQ?bz=antv_site"
         githubStarLink="https://github.com/antvis/L7/stargazers"
-        downloadButton={downloadButton}
       />
       <Features features={features} style={{ width: '100%' }} />
       <Cases cases={cases} />
-      <Companies title={t('合作公司')} companies={companies} />
     </>
   );
 };