fix(demo): demo

antvis · Nov 20, 2019 · a4e49a6 · a4e49a6
1 parent d44583f
commit a4e49a6
Show file tree

Hide file tree

Showing 20 changed files with 1,032 additions and 24 deletions.
diff --git a/.cache/redirects.json b/.cache/redirects.json
@@ -0,0 +1,56 @@
+[
+  {
+    "fromPath": "/en/docs/api",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/en/docs/api/L7"
+  },
+  {
+    "fromPath": "/zh/docs/api",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/docs/api/L7"
+  },
+  {
+    "fromPath": "/zh/docs/tutorial",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/docs/api/quickstart"
+  },
+  {
+    "fromPath": "/en/docs/tutorial",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/en/docs/api/quickstart"
+  },
+  {
+    "fromPath": "/zh/examples/raster/",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/raster/basic"
+  },
+  {
+    "fromPath": "/zh/examples/polygon/",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/polygon/3d"
+  },
+  {
+    "fromPath": "/zh/examples/heatmap/",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/heatmap/heatmap"
+  },
+  {
+    "fromPath": "/en/examples",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/en/examples/gallery/basic"
+  },
+  {
+    "fromPath": "/zh/examples",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/gallery/basic"
+  }
+]
diff --git a/.cache/redux.state b/.cache/redux.state
diff --git a/docs/API/L7.en.md b/docs/API/L7.en.md
@@ -4,4 +4,72 @@ order: 0
 redirect_from:
   - /en/docs/api
 ---
-# An open source large-scale geospatial data visualization analysis development framework powered by WebGL
+####  An open source large-scale geospatial data visualization analysis development framework powered by WebGL
+
+L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
+
+<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
+<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
+      <source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
+      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
+<p>Your user agent does not support the HTML5 Video element.</p>
+</video>
+
+## 核心特性
+
+
+🌏 数据驱动可视化展示
+
+数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
+
+🌏 2D，3D 一体化的海量数据高性能渲染
+
+百万级空间数据实时，动态渲染。
+
+🌏 简单灵活的数据接入
+
+支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
+
+ 🌏 多地图底图支持，支持离线内网部署
+
+高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
+
+## 支持丰富的图表类型
+
+### 点图层
+
+ - 气泡图
+ - 散点图
+ - 符号地图
+ - 3D柱状地图
+ - 聚合地图
+ - 复合图表地图
+ - 自定义Marker
+
+### 线图层
+
+- 路径地图
+- 弧线，支持2D弧线、3D弧线以及大圆航线
+- 等值线
+
+### 面图层
+
+- 填充图
+- 3D填充图
+
+### 热力图
+
+- 经典热力图
+- 蜂窝热力图
+- 网格热力图
+
+### 栅格地图
+- 图片
+- Raster
+
+## L7 2.0 Roadmap
+
+![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
+
+
+更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
diff --git a/docs/API/L7.zh.md b/docs/API/L7.zh.md
@@ -19,19 +19,19 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 ## 核心特性
 
 
-### 🌏 数据驱动可视化展示
+🌏 数据驱动可视化展示
 
 数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
 
-### 🌏 2D，3D 一体化的海量数据高性能渲染
+🌏 2D，3D 一体化的海量数据高性能渲染
 
 百万级空间数据实时，动态渲染。
 
-### 🌏 简单灵活的数据接入
+🌏 简单灵活的数据接入
 
 支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
 
-### 🌏 多地图底图支持，支持离线内网部署
+ 🌏 多地图底图支持，支持离线内网部署
 
 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
 

diff --git a/docs/API/component/control.en.md b/docs/API/component/control.en.md
@@ -1,5 +1,5 @@
 ---
-title: sControl
+title: Control
 order: 1
 ---
 # control

diff --git a/docs/API/layer/heatmap.en.md b/docs/API/layer/heatmap.en.md
@@ -1,4 +1,205 @@
 ---
 title: HeatmapLayer
 order: 5
----
+---
+
+# heatmapLayer
+
+
+### 简介
+
+热力图图层，包含三种类型的，
+- 方格热力图 
+
+将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
+
+- 六边形热力图 
+
+将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
+
+- 经典热力图 
+
+
+
+⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
+
+### source
+
+热力图只支持点数据作为数据源
+
+布局方法 通过source的 tansforms属性配置
+
+- type  数据聚合类型 grid、hexagon
+- size  网格半径 单位 米
+- field  聚合字段
+- method 聚合方法  count,max,min,sum,mean5个统计维度
+
+```javascript
+
+layer.source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 15000,
+        field:'v', 
+        method:'sum'
+      }
+    ],
+    }
+```
+
+### shape
+
+不同类型热力图shape支持
+
+|  | 2D | 3d |
+| --- | --- | --- |
+| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
+| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
+| 普通热力图 | heatmap | heatmap |
+
+
+热力图布局下只shape方法只支持常量的可视化。
+
+```javascript
+HeatmapLayer.shape('square');
+HeatmapLayer.shape('hexagon');
+// 默认类型可以不设置
+```
+
+### size
+当前版本 shape 为grid，hexagon不需要设置 size 映射
+
+default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
+
+**size(field,values) **
+
+- field: 热力图权重字段
+- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
+
+```javascript
+HeatmapLayer.size ('field', [0, 1])
+```
+
+
+### color
+default heatMap 类型不需设置 color映射
+
+color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
+
+
+
+### style
+
+grid hexagon 可以通过style 设置透明度
+
+default热力图需要通过style配置参数热力图参数
+
+- intensity   全局热力权重   推荐权重范围 1-5
+- radius  热力半径，单位像素
+- rampColors 色带参数
+  - colors  颜色数组
+  - positions 数据区间
+
+```javascript
+  HeatmapLayer.style({
+      intensity: 3,
+      radius: 20,
+      rampColors: {
+        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+      }
+    })
+```
+
+
+### 完整代码示例
+
+#### 普通热力图
+
+```javascript
+// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json 
+
+   HeatmapLayer({
+      zIndex: 2
+    })
+    .source(data)
+    .size('mag', [ 0, 1 ]) // weight映射通道
+    .style({
+      intensity: 3,
+      radius: 20,
+      rampColors: {
+        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+      }
+    })
+```
+
+
+
+#### 网格热力图
+
+```javascript
+var layer = scene.HeatmapLayer({
+      zIndex: 2
+    })
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+
+        {
+        type: 'grid',
+        size: 15000,
+        field:'v',
+        method:'sum'
+      }
+      ]
+    })
+    .shape('grid')
+    .style({
+      coverage: 0.8
+    })
+    .color('count', 
+    ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+
+```
+
+
+#### 六边形热力图
+
+```javascript
+ var layer = scene.HeatmapLayer({
+      zIndex: 2
+    }).
+   souce(data,{
+    parser:{
+      type:'csv',
+      x:lng,
+      y:lat,
+    },
+   transforms:[
+     {
+      type:'hexgon',
+      size:1500,
+      field:'count',
+      operation: 'sum',
+     }
+   ] 
+  })
+  .shape('hexgon')
+  .size(1000) 
+  .color('sum')
+  .style({
+    coverage:0.8
+  })
+render()
+```