Merge pull request #62 from antvis/site

Site

.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

.storybook/l7.css

@@ -1,3 +1,6 @@
+.l7-marker-container {
+ width:100%
+}
 .l7-marker {
 	position: absolute !important;
 	top: 0;
@@ -279,7 +282,7 @@
 .l7-right .l7-control {
 	margin-right: 10px;
   }
-  
+
   /* attribution and scale controls */
 
 .l7-control-container .l7-control-attribution {

README.md

@@ -1,7 +1,26 @@
-# L7-POC
-A POC for L7's new architecture.
+# L7 
 
-## 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
 ```

demos/raster/basic/demo/image.js

@@ -0,0 +1,25 @@
+import { Scene } from '@l7/scene';
+import { ImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.2680, 30.3628],
+  zoom: 13,
+});
+
+const layer = new ImageLayer({});
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'image',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+scene.on('loaded',()=>{
+  scene.addLayer(layer);
+})
+

demos/raster/basic/demo/meta.json

@@ -0,0 +1,21 @@
+{
+  "title": {
+    "zh": "栅格图层",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "image.js",
+      "title": "图片",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "raster.js",
+      "title": "地形"
+    },
+    {
+      "filename": "light.js",
+      "title": "夜光图"
+    }
+  ]
+}

demos/raster/basic/demo/raster.js

@@ -1,55 +1,14 @@
 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 addLayer() {
-  const tiffdata = await this.getTiffData();
-  const layer = new RasterLayer({});
-  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({
-      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;
-}
-addLayer()
-scene.on('loaded',()=>{
-  const layer = addLayer();
-  scene.addLayer(layer);
-})
-
  async function getTiffData() {
   const response = await fetch(
     'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
@@ -68,3 +27,35 @@ scene.on('loaded',()=>{
     max: 8000,
   };
 }
+
+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: 8000,
+        extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+      },
+    })
+    .style({
+      heightRatio:100,
+      opacity: 0.8,
+      rampColors: {
+        colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
+      },
+    });
+    return layer;
+}
+scene.on('loaded', async () =>{
+  const layer = await addLayer();
+  scene.addLayer(layer);
+  scene.render();
+})
+

demos/raster/basic/index.en.md

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

demos/raster/basic/index.zh.md

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

demos/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);

demos/tutorial/control/index.en.md

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

demos/tutorial/data/index.en.md

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

demos/tutorial/map/index.en.md

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

demos/tutorial/map/index.zh.md

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

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/demo/arcCircle.js

@@ -0,0 +1,35 @@
+import { Arc2DLineLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'dark',
+  center: [107.77791556935472, 35.443286920228644],
+  zoom: 2.9142882493605033,
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
+  .then((res) => res.text())
+  .then((data) => {
+    const layer =
+    new Arc2DLineLayer({})
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng1',
+        y: 'lat1',
+        x1: 'lng2',
+        y1: 'lat2',
+      },
+    })
+    .size(1)
+    .shape('arc')
+    .color('#8C1EB2')
+    .style({
+      opacity: 0.8,
+      blur: 0.99
+    })
+    ;
+   scene.addLayer(layer);
+  })

examples/gallery/basic/demo/bus_dark.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  center: [103.83735604457024,1.360253881403068],
+  pitch:  4.00000000000001,
+  zoom: 10.210275860702593,
+  rotation: 19.313180925794313,
+  type: 'mapbox',
+  style: 'dark',
+});
+
+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 * 1]
+        })
+        .shape('line')
+        .color(
+          'level',
+          [
+            '#312B60', '#4A457E',
+            '#615C99', '#816CAD',
+            '#A67FB5', '#C997C7',
+            '#DEB8D4', '#F5D4E6',
+            '#FAE4F1', '#FFF3FC'
+          ].slice(0,8)
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/gallery/basic/demo/light.js

@@ -0,0 +1,59 @@
+import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 43,
+  center: [120.13383079335335,29.651873105004427],
+  zoom: 7.068989519212174,
+  type: 'mapbox',
+});
+
+
+window.mapScene = scene;
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
+)
+  .then((res) => res.text())
+  .then((data) => {
+    const layer = new HeatMapGrid3dLayer({})
+      .source(data, {
+
+        parser:{
+           type:'csv',
+            x:'lng',
+            y:'lat',
+        },
+        transforms: [
+          {
+            type: 'hexagon',
+            size: 2500,
+            field: 'v',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (sum)=>{
+        return sum * 200;
+      })
+      .shape('hexagon')
+      .style({
+        coverage: 0.8,
+        angle: 0,
+        opacity: 1.0,
+      })
+      .color(
+        'sum',
+        [
+          '#094D4A', '#146968',
+          '#1D7F7E', '#289899',
+          '#34B6B7', '#4AC5AF',
+          '#5FD3A6', '#7BE39E',
+          '#A1EDB8', '#C3F9CC',
+          '#DEFAC0', '#ECFFB1'
+        ]
+      );
+    scene.addLayer(layer);
+
+  });

examples/gallery/basic/demo/meta.json

@@ -5,9 +5,35 @@
   },
   "demos": [
     {
-      "filename": "line.js",
-      "title": "线图层",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "filename": "column_dark.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "arcCircle.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "bus_dark.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "light.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HxpoRIcBA80AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "point.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ"
+    }
+    ,
+    {
+      "filename": "normal.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/gallery/basic/demo/normal.js

@@ -0,0 +1,34 @@
+
+import { Scene } from '@l7/scene';
+import { PointNormalLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'dark',
+  center: [121.417463, 31.215175],
+  pitch: 0,
+  zoom: 11
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
+  .then((res) => res.text())
+  .then((data) => {
+    const pointLayer =
+      new PointNormalLayer({
+      })
+      .source(data, {
+        parser: {
+          type: 'csv',
+          y: 'lat',
+          x: 'lng'
+        }
+      }).size(0.5)
+      .color('#080298')
+      .style({
+          opacity:1.,
+        })
+
+      scene.addLayer(pointLayer);
+
+  })

examples/gallery/basic/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Gallery
+order: 0
+redirect_from:
+  - /zh/examples/
+---

examples/gallery/basic/index.zh.md

@@ -1,4 +1,6 @@
 ---
 title: Gallery
 order: 0
+redirect_from:
+  - /zh/examples/
 ---

examples/heatmap/grid/demo/china.js

@@ -0,0 +1,52 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
+  type: 'amap',
+});
+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: 20000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('square')
+    .style({
+      coverage: 1,
+      angle: 0,
+    })
+    .color('count', [
+      '#0B0030', '#100243',
+      '#100243', '#1B048B',
+      '#051FB7', '#0350C1',
+      '#0350C1', '#0072C4',
+      '#0796D3', '#2BA9DF',
+      '#30C7C4', '#6BD5A0',
+      '#A7ECB2', '#D0F4CA'
+    ].reverse())
+
+    scene.addLayer(layer);
+  });

examples/heatmap/grid/demo/grid.js

@@ -1,51 +0,0 @@
-import { Scene } from '@l7/scene';
-import { HeatMapGridLayer } from '@l7/layers';
-const scene = new Scene({
-  id: 'map',
-  style: 'light',
-  pitch: 0,
-  center: [116.49434030056, 39.868073421167621],
-  type: 'mapbox',
-  zoom: 16,
-});
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new HeatMapGridLayer({
-      })
-      .source(data, {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-        transforms: [
-          {
-            type: 'grid',
-            size: 20,
-            field: 'count',
-            method: 'sum',
-          },
-        ],
-      })
-      .size('sum', (value) => {
-        return value;
-      })
-      .shape('circle')
-      .style({
-        coverage: 0.8,
-        angle: 0,
-        opacity: 1.0,
-      })
-      .color('count',  ['#0A3663', '#1558AC',
-      '#3771D9', '#4D89E5',
-      '#64A5D3', '#72BED6',
-      '#83CED6', '#A6E1E0',
-      '#B8EFE2', '#D7F9F0']);
-    scene.addLayer(layer);
-    console.log(layer);
-
-
-  });

examples/heatmap/grid/demo/grid1.js

@@ -0,0 +1,47 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 0,
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
+  type: 'amap',
+});
+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 * 0;
+    })
+    .shape('square')
+    .style({
+      coverage: 1,
+      angle: 0,
+    })
+    .color('count', [
+      '#FF4818', '#F7B74A',
+      '#FFF598', '#FF40F3',
+      '#9415FF', '#421EB2'
+    ].reverse())
+    scene.addLayer(layer);
+  });

examples/heatmap/grid/demo/heatmap3.js

@@ -0,0 +1,50 @@
+import { HeatMapGridLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  pitch: 0,
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
+  type: 'amap',
+});
+
+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: 20000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('circle')
+    .style({
+      coverage: 0.9,
+      angle: 0,
+    })
+    .color('count', [
+      '#8C1EB2','#8C1EB2','#DA05AA',
+       '#F0051A','#FF2A3C','#FF4818',
+      '#FF4818', '#FF8B18',
+      '#F77B00', '#ED9909',
+      '#ECC357', '#EDE59C'
+    ].reverse())
+    scene.addLayer(layer);
+  });

examples/heatmap/grid/demo/meta.json

@@ -5,14 +5,28 @@
   },
   "demos": [
     {
-      "filename": "grid.js",
+      "filename": "china.js",
       "title": "网格热力图",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*anD-Q4u83R0AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "grid1.js",
+      "title": "",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tAGKS6EClQ4AAAAAAAAAAABkARQnAQ"
+
+    },
+    {
+      "filename": "heatmap3.js",
+      "title": "网格布局 圆形",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6cA0R6us9osAAAAAAAAAAABkARQnAQ"
+
     },
     {
       "filename": "world.js",
-      "title": "世界电厂热力图",
-      "screenshot":""
+      "title": "网格热力图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6danQJDzkyoAAAAAAAAAAABkARQnAQ"
+
     }
+
   ]
 }

examples/heatmap/grid/demo/world.js

@@ -1,48 +1,49 @@
-import { Scene } from '@l7/scene';
 import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  style: 'dark',
   pitch: 0,
-  center: [116.49434030056, 39.868073421167621],
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
   type: 'amap',
-  zoom: 3,
 });
 
-fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
-  .then((res) => res.json())
+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({
-      })
+    const layer = new HeatMapGridLayer({})
       .source(data, {
-        transforms: [
-          {
-            type: 'hexagon',
-            size: 200000,
-            field: 'capacity',
-            method: 'sum',
-          },
-        ],
-      })
-      .size('sum', (value) => {
-        return value * 50;
-      })
-      .shape('hexagon')
-      .style({
-        coverage: 0.9,
-        angle: 0,
-        opacity: 1.0,
-      })
-      .color('sum', [
-            '#2E8AE6',
-            '#69D1AB',
-            '#DAF291',
-            '#FFD591',
-            '#FF7A45',
-            '#CF1D49',
-      ]);
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 10000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('square')
+    .style({
+      coverage: 1,
+      angle: 0,
+    })
+    .color('count', [
+      '#FF3417', '#FF7412',
+      '#FFB02A', '#FFE754',
+      '#46F3FF', '#02BEFF',
+      '#1A7AFF', '#0A1FB2'
+    ].reverse())
     scene.addLayer(layer);
-
-
   });

examples/heatmap/grid/index.en.md

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

examples/heatmap/heatmap/demo/heatmap3d.js

@@ -3,7 +3,7 @@ import { HeatMapLayer } from '@l7/layers';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
-  pitch: 0,
+  pitch: 57.4999999,
   center: [116.49434030056, 39.868073421167621],
   type: 'mapbox',
   zoom: 3,

examples/heatmap/heatmap/demo/heatmap_purple.js

@@ -0,0 +1,31 @@
+import { Scene } from '@l7/scene';
+import { HeatMapLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 0,
+  center: [127.5671666579043,7.445038892195569],
+  type: 'mapbox',
+  zoom: 2.632456779444394
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapLayer({
+      })
+      .source(data).size('mag', [0, 1.0]) // weight映射通道
+        .style({
+          intensity: 2,
+          radius: 20,
+          opacity: 1.0,
+          rampColors: {
+            colors: [ '#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2' ].reverse(),
+            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
+          }
+        })
+    scene.addLayer(layer);
+
+
+  });

examples/heatmap/heatmap/demo/meta.json

@@ -5,15 +5,20 @@
   },
   "demos": [
     {
-      "filename": "world3d.js",
-
-      "title": "经典热力图3D",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "world.js",
+      "filename": "heatmap.js",
       "title": "经典热力图2D",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "heatmap_purple.js",
+      "title": "经典热力图2D",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DFwET7xJTA8AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "heatmap3d.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,48 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 47.49999999999995,
+  center: [112.50447776627743,30.830476390931125],
+  zoom: 3.9879693680088626,
+  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: 17000,
+        field:'v',
+        method:'sum'
+      }
+      ]
+    })
+    .size('sum',(value)=>{
+       return value * 20;
+    })
+    .shape('hexagon')
+     .color('count',[
+      '#FF4818', '#F7B74A',
+      '#FFF598', '#FF40F3',
+      '#9415FF', '#421EB2'
+    ].reverse())
+    .style({
+      coverage: 0.9,
+      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,
-  center: [114.0500, 22.5441],
-  zoom: 14,
+  pitch: 47.49999999999995,
+  center: [114.05737552216226, 22.542656745583486],
+  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',
-          '#ffeda0',
-          '#fed976',
-          '#feb24c',
-          '#fd8d3c',
-          '#fc4e2a',
-          '#e31a1c',
-          '#bd0026',
-          '#800026',
-        ].reverse(),
+    '#094D4A', '#146968',
+    '#1D7F7E', '#289899',
+    '#34B6B7', '#4AC5AF',
+    '#5FD3A6', '#7BE39E',
+    '#A1EDB8', '#CEF8D6'
+    ].reverse()
       );
     scene.addLayer(layer);
   });

examples/heatmap/hexagon/demo/light.js

@@ -2,78 +2,16 @@ import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
 import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  style: 'dark',
   pitch: 43,
-  center: [119.9719107,29.4924299],
-  zoom: 7.2,
+  center: [120.13383079335335,29.651873105004427],
+  zoom: 7.068989519212174,
   type: 'mapbox',
 });
+
+
 window.mapScene = scene;
-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'
-  ],
-  color4: [ '#421EB2', '#8C1EB2', '#F27DEB', '#FFF598', '#F7B74A', '#FF4818' ],
-  colors6: [ '#FBE0B2', '#F6BB91', '#F88E8B', '#5C6CE5', '#110A6C', '#0D0943' ],
-  colors5: [ '#F86A7E', '#F79794', '#D0A8AD', '#8596A4', '#0D7D9E', '#07485B' ],
-  colors11: [ '#005F6D', '#0F9EA3', '#B9CDC5', '#DF881C', '#AE571E', '#6C2C03' ],
-  colors7: [ '#D66A74', '#EF808B', '#F09FAF', '#B1C987', '#789676', '#636C58' ],
-  colors8: [ '#5E023A', '#C52C6A', '#F0C4E8', '#F7CAB8', '#7EBCA9', '#117D8D' ],
-  colors9: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ]
-}
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
 )
@@ -107,8 +45,15 @@ fetch(
       })
       .color(
         'sum',
-        colorObj.blue.slice(0,7).reverse(),
+        [
+          '#094D4A', '#146968',
+          '#1D7F7E', '#289899',
+          '#34B6B7', '#4AC5AF',
+          '#5FD3A6', '#7BE39E',
+          '#A1EDB8', '#C3F9CC',
+          '#DEFAC0', '#ECFFB1'
+        ]
       );
     scene.addLayer(layer);
-    console.log(layer);
+
   });

examples/heatmap/hexagon/demo/meta.json

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

examples/heatmap/hexagon/demo/world.js

@@ -0,0 +1,49 @@
+import { Scene } from '@l7/scene';
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'amap',
+  zoom: 3,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapGrid3dLayer({
+      })
+      .source(data, {
+        transforms: [
+          {
+            type: 'hexagon',
+            size: 90000,
+            field: 'capacity',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (value) => {
+        return value * 50;
+      })
+      .shape('hexagon')
+      .style({
+        coverage: 0.9,
+        angle: 0,
+        opacity: 1.0,
+      })
+      .color('sum',  [
+        '#1D2BB2', '#06117C',
+        '#06117C', '#06117C',
+        '#1D2BB2', '#1D2BB2',
+        '#1D2BB2', '#0F62FF',
+        '#0F62FF', '#0CB7FF',
+        '#0CB7FF', '#52F1FC'
+
+      ].reverse());
+    scene.addLayer(layer);
+
+
+  });

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],
-  zoom: 2,
+  center: [107.77791556935472, 35.443286920228644],
+  zoom: 2.9142882493605033,
 });
-
+window.mapScene = scene;
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then((res) => res.text())
   .then((data) => {
@@ -25,7 +25,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
     })
     .size(1)
     .shape('arc')
-    .color('#113681')
+    .color('#8C1EB2')
     .style({
       opacity: 0.8,
       blur: 0.99

examples/line/arc/demo/meta.json

@@ -4,11 +4,10 @@
     "en": "line"
   },
   "demos": [
-
     {
-      "filename": "arc3d.js",
-      "title": "3D弧线"
-
+      "filename": "arcCircle.js",
+      "title": "大圆弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "arc.js",
@@ -16,9 +15,15 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "arcCircle.js",
-      "title": "大圆弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
+      "filename": "trip_arc_dark.js",
+      "title": "3D 弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jXsbSYCqLu8AAAAAAAAAAABkARQnAQ"
+
+    },
+    {
+      "filename": "trip_arc.js",
+      "title": "3D 弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*29BZTqIJkuEAAAAAAAAAAABkARQnAQ"
 
     }
   ]

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: 60,
+  type: 'mapbox',
+  style: 'light',
+  center: [-74.06355155037261,40.73507179789368],
+  zoom: 11.8623,
+});
+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('#0C47BF')
+    .style({
+      opacity: 1,
+      blur: 0.9
+    })
+    ;
+   scene.addLayer(layer);
+  })

examples/line/arc/demo/trip_arc_dark.js

@@ -2,13 +2,15 @@ import { Arc3DLineLayer } from '@l7/layers';
 import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  pitch: 40,
-  type: 'amap',
+  pitch: 60,
+  type: 'mapbox',
   style: 'dark',
-  center: [102.602992, 23.107329],
-  zoom: 3,
+  center: [104.92827320100344,41.209090496438364],
+  zoom: 2.8844827033002813,
+ rotation: 80,
 });
 
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then((res) => res.text())
   .then((data) => {
@@ -25,10 +27,9 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
     })
     .size(1)
     .shape('arc')
-    .color('#1558AC')
+    .color('#FF7C6A')
     .style({
       opacity: 0.8,
     })
-    ;
-   scene.addLayer(layer);
-  })
+    scene.addLayer(layer);
+  });

examples/line/arc/index.en.md

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

examples/line/isoline/demo/ele.js

@@ -2,11 +2,11 @@ import { Scene } from '@l7/scene';
 import { LineLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  pitch: 40.89473684210526,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 23.107329],
-  zoom: 14,
+  center: [102.60244, 23.10556],
+  zoom: 14.28,
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')

examples/line/isoline/demo/ele_dark.js

@@ -2,11 +2,11 @@ import { Scene } from '@l7/scene';
 import { LineLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  pitch: 26.842105263157915,
   type: 'amap',
   style: 'dark',
-  center: [102.602992, 23.107329],
-  zoom: 14,
+  center: [102.601919, 23.108997],
+  zoom: 14.22,
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
@@ -24,19 +24,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
           type: 'quantize'
         })
         .color(
-          'ELEV',
-          [ '#E4682F',
-            '#FF8752',
-            '#FFA783',
-            '#FFBEA8',
-            '#FFDCD6',
-            '#EEF3FF',
-            '#C8D7F5',
-            '#A5C1FC',
-            '#7FA7F9',
-            '#5F8AE5' ].reverse()
+          'ELEV',[
+    '#094D4A', '#146968',
+    '#1D7F7E', '#289899',
+    '#34B6B7', '#4AC5AF',
+    '#5FD3A6', '#7BE39E',
+    '#A1EDB8', '#CEF8D6'
+    ],
         )
     scene.addLayer(layer);
     console.log(layer);
 
-  });
+  });

examples/line/isoline/demo/isoline.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 33.107329],
-  zoom: 3.5,
+  center: [104.117492,36.492696],
+  zoom: 3.89,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
@@ -21,8 +21,13 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-227
         })
         .size('value', [0.5, 1, 1.5, 2])
         .shape('line')
-        .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+        .color('value',  [
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ].reverse())
     scene.addLayer(layer);
-    console.log(layer);
 
   });

examples/line/isoline/demo/meta.json

@@ -12,12 +12,12 @@
     {
       "filename": "ele_dark.js",
       "title": "等高线",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X1LgSKQbrD0AAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "linedash.js",
+      "filename": "isoline.js",
       "title": "等高线",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YBNRRrk5IV4AAAAAAAAAAABkARQnAQ"
     }
 
   ]

examples/line/isoline/index.en.md

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

examples/line/isoline/index.zh.md

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

examples/line/line/demo/isoline.js

@@ -1,19 +1,19 @@
-import { Scene } from '@l7/scene';
-import { DashLineLayer } from '@l7/layers'
+import { Scene } from './node_modules/@l7/scene';
+import { LineLayer } from './node_modules/@l7/layers'
 const scene = new Scene({
   id: 'map',
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 33.107329],
-  zoom: 3.5,
+  center: [104.117492,36.492696],
+  zoom: 3.89,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
   .then((res) => res.json())
   .then((data) => {
     const layer =
-      new DashLineLayer({
+      new LineLayer({
       })
         .source(data)
         .scale('value',{
@@ -21,8 +21,13 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-227
         })
         .size('value', [0.5, 1, 1.5, 2])
         .shape('line')
-        .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+        .color('value',  [
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ].reverse())
     scene.addLayer(layer);
-    console.log(layer);
 
   });

examples/line/path/demo/bus_dark.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  center: [103.83735604457024,1.360253881403068],
+  pitch:  4.00000000000001,
+  zoom: 10.210275860702593,
+  rotation: 19.313180925794313,
+  type: 'mapbox',
+  style: 'dark',
+});
+
+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 [0.8 , level * 1]
+        })
+        .shape('line')
+        .color(
+          'level',
+          [
+            '#312B60', '#4A457E',
+            '#615C99', '#816CAD',
+            '#A67FB5', '#C997C7',
+            '#DEB8D4', '#F5D4E6',
+            '#FAE4F1', '#FFF3FC'
+          ].slice(0,8)
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/path/demo/bus_light.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  center: [103.83735604457024,1.360253881403068],
+  pitch:  4.00000000000001,
+  zoom: 10.210275860702593,
+  rotation: 19.313180925794313,
+  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 [0.8 , level * 1]
+        })
+        .shape('line')
+        .color(
+          'level',
+          [
+            '#0A3663', '#1558AC',
+            '#3771D9', '#4D89E5',
+            '#64A5D3', '#72BED6',
+            '#83CED6', '#A6E1E0',
+            '#B8EFE2', '#D7F9F0'
+          ].slice(0,8)
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/path/demo/meta.json

@@ -4,21 +4,21 @@
     "en": "line"
   },
   "demos": [
+    {
+      "filename": "bus_light.js",
+      "title": "公交线路",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fuSLRL8Ym4kAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "bus_dark.js",
+      "title": "公交线路",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "road_light.js",
       "title": "路径",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ"
     },
-    {
-      "filename": "line.js",
-      "title": "等高线",
-      "screenshot":""
-    },
-    {
-      "filename": "line2.js",
-      "title": "等值线",
-      "screenshot":""
-    },
     {
       "filename": "road_dark.js",
       "title": "路径",

examples/line/path/index.en.md

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

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

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

examples/point/basic/demo/text.js

@@ -1,41 +0,0 @@
-import { Scene } from '@l7/scene';
-import { PointLayer, PointImageLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [121.40, 31.258134],
-  zoom: 15,
-  minZoom: 10
-});
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const pointLayer =
-      new PointLayer({
-      })
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'longitude',
-            y: 'latitude'
-          }
-        }).shape('circle')
-        .size('unit_price', [5, 25])
-        .color('#5B8FF9')
-        .label('name')
-        .style({
-          opacity: 0.3,
-          strokeWidth: 1,
-          strokeColor: "#5B8FF9",
-
-        })
-
-        scene.addLayer(pointLayer);
-        console.log(pointLayer);
-
-  });
-
-

examples/point/bubble/demo/color.js

@@ -9,7 +9,7 @@ const scene = new Scene({
   zoom: 15,
   minZoom: 10
 });
-
+scene.mapScene = scene;
 fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
   .then((res) => res.json())
   .then((data) => {
@@ -34,10 +34,10 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
           'vesica',
         ])
         .size('unit_price', [10, 25])
-        .color('name',['#E4504A',"#E99431", "#EBCC53","#43A5DA","#6CC175"])
+        .color('name',['#5B8FF9',"#5CCEA1", "#5D7092","#F6BD16","#E86452"])
         .style({
-          opacity:1.0,
-          strokeWidth: 1,
+          opacity:0.3,
+          strokeWidth: 2,
 
         })
 

examples/point/bubble/demo/meta.json

@@ -5,14 +5,19 @@
   },
   "demos": [
     {
-      "filename": "buble.js",
+      "filename": "point.js",
       "title": "气泡图",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_9ETS5_1yCEAAAAAAAAAAABkARQnAQ"
    
+    }, 
+    {
+      "filename": "color.js",
+      "title": "形状映射",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K8ACRr5TY7UAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "world.js",
-      "title": "气泡图 - 电厂装机量",
+      "title": "气泡图",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DMREQYwsCF4AAAAAAAAAAABkARQnAQ"
     
     },

examples/point/bubble/demo/normal.js

@@ -0,0 +1,36 @@
+
+import { Scene } from '@l7/scene';
+import { PointNormalLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 64.88,
+  type: 'amap',
+  style: 'dark',
+  center: [114.060288, 22.53684],
+  zoom: 15.63,
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointNormalLayer({
+       
+      })
+        .source(data)
+        .size(2)
+        .color('h8',[
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ])
+        .style({
+          opacity:1.,
+        })
+
+      scene.addLayer(pointLayer);
+
+  })

examples/point/bubble/demo/point.js

@@ -9,20 +9,18 @@ const scene = new Scene({
   zoom: 5.32,
   maxZoom: 10
 });
-window.mapScene = scene;
+
+
 fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
   .then((res) => res.json())
   .then((data) => {
-  
+
     const pointLayer =
         new PointLayer({
         })
         .source(data)
         .shape('circle')
-        .size('mag', [5, 16])
-        .scale('mag',{
-          type:'quantile'
-        })
+        .size('mag', [1, 25])
         .color('mag',(mag)=>{
            return mag > 4.5? "#5B8FF9" : '#5CCEA1';
         })
@@ -33,4 +31,5 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842
 
         scene.addLayer(pointLayer);
 
-  });
+  });
+

examples/point/bubble/index.en.md

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

examples/point/bubble/index.zh.md

@@ -1,6 +1,4 @@
 ---
 title: 气泡地图
 order: 0
-redirect_from:
-  - /zh/examples
 ---

examples/point/chart/demo/bar.js

@@ -0,0 +1,70 @@
+import { Scene } from '@l7/scene';
+import { Marker, Popup } from '@l7/component'
+import * as G2 from '@antv/g2'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'light',
+  center: [2.6125016864608597,49.359131],
+  pitch: 0,
+  zoom: 4.19
+});
+
+scene.on('loaded',()=>{
+  addChart();
+})
+function addChart() {
+  fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
+  .then((res) => res.json())
+  .then((data) => {
+    data.nodes.forEach(function (item) {
+      const el = document.createElement('div');
+      const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
+
+      const size = Math.min(parseInt(total / 30000), 70);
+      if(size< 30) {
+        return
+      }
+      console.log(total);
+      const itemData = [{
+        item: 'Agriculture',
+        count: item.gdp.Agriculture,
+        percent: item.gdp.Agriculture / total
+      }, {
+        item: 'Industry',
+        count: item.gdp.Industry,
+        percent: item.gdp.Industry / total
+      }, {
+        item: 'Service',
+        count: item.gdp.Service,
+        percent: item.gdp.Service / total
+      }];
+
+
+      const chart = new G2.Chart({
+        container: el,
+        width: size,
+        height: size,
+        render: 'svg',
+        padding: 0,
+      });
+      chart.legend(false);
+      chart.source(itemData);
+      chart.tooltip(false);
+      chart.axis('count', {
+        grid:false
+      });
+      chart.interval().position('item*count').color('item',['#5CCEA1','#5D7092','#5B8FF9']).opacity(1);
+      chart.render();
+      new Marker({
+        element: el
+      }).setLnglat({
+        lng:item.coordinates[0],
+        lat:item.coordinates[1]
+      }).addTo(scene);
+    });
+
+  });
+
+}
+

examples/point/chart/demo/chart.js

@@ -0,0 +1,91 @@
+import { Scene } from '@l7/scene';
+import { Marker, Popup } from '@l7/component'
+import * as G2 from '@antv/g2'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'light',
+  center: [2.6125016864608597,49.359131],
+  pitch: 0,
+  zoom: 4.19
+});
+
+scene.on('loaded',()=>{
+  addChart();
+})
+window.mapScene = scene;
+function addChart() {
+  fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
+  .then((res) => res.json())
+  .then((data) => {
+    data.nodes.forEach(function (item) {
+      const el = document.createElement('div');
+      const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
+
+      const size = Math.min(parseInt(total / 30000), 70);
+      if(size< 30) {
+        return
+      }
+      const itemData = [{
+        item: 'Agriculture',
+        count: item.gdp.Agriculture,
+        percent: item.gdp.Agriculture / total
+      }, {
+        item: 'Industry',
+        count: item.gdp.Industry,
+        percent: item.gdp.Industry / total
+      }, {
+        item: 'Service',
+        count: item.gdp.Service,
+        percent: item.gdp.Service / total
+      }];
+
+      var sliceNumber = 0.02;
+
+      // 自定义 other 的图形，增加两条线
+      G2.Shape.registerShape('interval', 'sliceShape', {
+        draw: function draw(cfg, container) {
+          var points = cfg.points;
+          var path = [];
+          path.push(['M', points[0].x, points[0].y]);
+          path.push(['L', points[1].x, points[1].y - sliceNumber]);
+          path.push(['L', points[2].x, points[2].y - sliceNumber]);
+          path.push(['L', points[3].x, points[3].y]);
+          path.push('Z');
+          path = this.parsePath(path);
+          return container.addShape('path', {
+            attrs: {
+              fill: cfg.color,
+              path: path
+            }
+          });
+        }
+      });
+
+      var chart = new G2.Chart({
+        container: el,
+        width: size,
+        height: size,
+        render: 'svg',
+        padding: 0,
+      });
+      chart.legend(false);
+      chart.source(itemData);
+      chart.coord('theta', {
+        innerRadius: 0.6
+      });
+      chart.tooltip(false);
+      chart.intervalStack().position('percent').color('item',['#5CCEA1','#5D7092','#5B8FF9']).shape('sliceShape');
+      chart.render();
+      new Marker({
+        element: el
+      }).setLnglat({
+        lng:item.coordinates[0],
+        lat:item.coordinates[1]
+      }).addTo(scene);
+    });
+
+  });
+
+}
+

examples/point/chart/demo/meta.json

@@ -0,0 +1,23 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "bar.js",
+      "title": "柱图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-Tw3TLzyJ5wAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "chart.js",
+      "title": "环图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uq_RQqyMrbQAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ring.js",
+      "title": "环图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*zUu0RYKaF28AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/point/chart/demo/ring.js

@@ -0,0 +1,102 @@
+import { Scene } from '@l7/scene';
+import { Marker, Popup } from '@l7/component'
+import * as G2 from '@antv/g2'
+
+const CSS = `.l7-marker .g2-guide-html {
+  width: 50px;
+  height: 50px;
+  vertical-align: middle;
+  text-align: center;
+  line-height: 0.1
+}
+
+l7-marker .g2-guide-html .title {
+  font-size: 12px;
+  color: #8c8c8c;
+  font-weight: 300;
+}
+
+l7-marker .g2-guide-html .value {
+  font-size: 18px;
+  color: #000;
+  font-weight: bold;
+}
+`
+function loadCssCode(code) {
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  style.rel = 'stylesheet';
+  // for Chrome Firefox Opera Safari
+  style.appendChild(document.createTextNode(code));
+  // for IE
+  // style.styleSheet.cssText = code;
+  var head = document.getElementsByTagName('head')[0];
+  head.appendChild(style);
+}
+loadCssCode(CSS);
+
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'mapbox',
+  style: 'dark',
+  center: [52.21496184144132, 24.121126851768906],
+  zoom: 3.802,
+});
+window.mapScene = scene;
+scene.on('loaded', () => {
+  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 = 60;
+      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: 'svg',
+        padding: 0
+      });
+      chart.source(data);
+      chart.legend(false);
+      chart.tooltip(false);
+      chart.coord('theta', {
+        radius: 0.9,
+        innerRadius: 0.6
+      });
+      chart.intervalStack().position('value').color('type', ['#5CCEA1','#5B8FF9']).opacity(1);
+      chart.render();
+      new Marker(
+        { element: el}
+      ).setLnglat({
+        lng: coord[0],
+        lat: coord[1]
+      }).addTo(scene);
+    })
+
+  });
+})

examples/point/chart/index.en.md

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

examples/point/chart/index.zh.md

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

examples/point/chartmap/demo/chart.js

@@ -1,139 +0,0 @@
-import { Scene } from '@l7/scene';
-import { Marker } from '@l7/component'
-import G2Plot from '@antv/g2plot'
-const scene = new Scene({
-  id: 'map',
-  type: 'amap',
-  style: 'light',
-  center: [-122.80009283836715, 37.05881309947238],
-  pitch: 0,
-  zoom: 5
-});
-
-// fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
-//   .then((res) => res.text())
-//   .then((data) => {
-//     data.nodes.forEach(function (item) {
-//       const el = document.createElement('div');
-//       const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
-
-//       const size = Math.max(Math.min(parseInt(total / 20000), 150), 30);
-//       const itemData = [{
-//         item: 'Agriculture',
-//         count: item.gdp.Agriculture,
-//         percent: item.gdp.Agriculture / total
-//       }, {
-//         item: 'Industry',
-//         count: item.gdp.Industry,
-//         percent: item.gdp.Industry / total
-//       }, {
-//         item: 'Service',
-//         count: item.gdp.Service,
-//         percent: item.gdp.Service / total
-//       }];
-
-//       const config = {
-//         "title": {
-//           "visible": false,
-//           "text": "环图",
-//           "style": {
-//             "fill": "rgba(0, 0, 0, 0.85)"
-//           }
-//         },
-//         "description": {
-//           "visible": false,
-//           "text": "一个简单的环图",
-//           "style": {
-//             "fill": "rgba(0, 0, 0, 0.85)",
-//             "bottom_margin": 10
-//           }
-//         },
-//         "padding": "auto",
-//         "legend": {
-//           "visible": false,
-//           "position": "top-left"
-//         },
-//         "tooltip": {
-//           "visible": false,
-//           "shared": false,
-//           "crosshairs": null
-//         },
-//         "xAxis": {
-//           "visible": true,
-//           "autoHideLabel": false,
-//           "autoRotateLabel": false,
-//           "autoRotateTitle": false,
-//           "grid": {
-//             "visible": false
-//           },
-//           "line": {
-//             "visible": false
-//           },
-//           "tickLine": {
-//             "visible": true
-//           },
-//           "label": {
-//             "visible": true
-//           },
-//           "title": {
-//             "visible": false,
-//             "offset": 12
-//           }
-//         },
-//         "yAxis": {
-//           "visible": true,
-//           "autoHideLabel": false,
-//           "autoRotateLabel": false,
-//           "autoRotateTitle": true,
-//           "grid": {
-//             "visible": true
-//           },
-//           "line": {
-//             "visible": false
-//           },
-//           "tickLine": {
-//             "visible": false
-//           },
-//           "label": {
-//             "visible": true
-//           },
-//           "title": {
-//             "visible": false,
-//             "offset": 12
-//           }
-//         },
-//         "label": {
-//           "visible": true,
-//           "type": "outer",
-//           "style": {
-//             "fill": "rgba(0, 0, 0, 0.65)"
-//           }
-//         },
-//         "width": 317,
-//         "height": 249,
-//         "forceFit": false,
-//         "radius": 1,
-//         "pieStyle": {
-//           "stroke": "white",
-//           "lineWidth": 1
-//         },
-//         "innerRadius": 0.74,
-//         "animation": false,
-//         "colorField": "x",
-//         "angleField": "y",
-//         "color": null
-//       }
-//       const plot = new G2Plot.Ring(el, {
-//         data: itemData,
-//         ...config,
-//       });
-//       plot.render();
-//       var popup = new L7.Popup({
-//         anchor: 'left'
-//       }).setText(item.name);
-//       new Marker({
-//         element: el
-//       }).setLnglat(item.coordinates).setPopup(popup).addTo(scene);
-//     });
-
-//   });