docs: update docs

docs/api/changelog.en.md

@@ -7,21 +7,22 @@ order: 10
 
 ###✨ Features
 
-•  新增 l7-react 版本
+-  新增 l7-react 版本
-• 可自定义样式的聚合图 MakerLayer
+-  可自定义样式的聚合图 MakerLayer
-• 新增 quantile、quantize 度量
+-  新增 quantile、quantize 度量
-• 地图导出功能
+-  地图导出功能
 
 ### 🍏 Improvements
 
-• IE 11 支持
+-  IE 11 支持
-• 更新拾取机制，拾取更高效
+-  更新拾取机制，拾取更高效
-• 优化依赖包减少包体积
+-  优化依赖包减少包体积
 
 ### 🐞 Bug Fixes
 
-• setData 更新机制
+- setData 更新机制
-• color,size,shape 更新重绘问题
+- color,size,shape 更新重绘问题
+
 
 ## 2020.01.06 2.0 正式版
 

docs/api/changelog.zh.md

@@ -7,41 +7,21 @@ order: 10
 
 ###✨ Features
 
-•  新增 l7-react 版本
+-  新增 l7-react 版本
-• 可自定义样式的聚合图 MakerLayer
+-  可自定义样式的聚合图 MakerLayer
-• 新增 quantile、quantize 度量
+-  新增 quantile、quantize 度量
-• 地图导出功能
+-  地图导出功能
 
 ### 🍏 Improvements
 
-• IE 11 支持
+-  IE 11 支持
-• 更新拾取机制，拾取更高效
+-  更新拾取机制，拾取更高效
-• 优化依赖包减少包体积
+-  优化依赖包减少包体积
 
 ### 🐞 Bug Fixes
 
-• setData 更新机制
+- setData 更新机制
-• color,size,shape 更新重绘问题
+- color,size,shape 更新重绘问题
-
-## 2020.03.12 2.1 正式版
-
-###✨ Features
-
-•  新增 l7-react 版本
-• 可自定义样式的聚合图 MakerLayer
-• 新增 quantile、quantize 度量
-• 地图导出功能
-
-### 🍏 Improvements
-
-• IE 11 支持
-• 更新拾取机制，拾取更高效
-• 优化依赖包减少包体积
-
-### 🐞 Bug Fixes
-
-• setData 更新机制
-• color,size,shape 更新重绘问题
 
 ## 2020.01.06 2.0 正式版
 
@@ -51,6 +31,7 @@ order: 10
 
 • 新增弧线图，路径图动画功能
 
+
 • 新增气泡图水波动画功能
 
 • 新增聚合地图

docs/api/component/popup.zh.md

@@ -94,28 +94,11 @@ popup.open();
 
 #### close
 
-显示 popup
+关闭 popup
 
 ```javascript
 popup.close();
 ```
-
-#### open
-
-显示 popup
-
-```javascript
-popup.open();
-```
-
-#### close
-
-显示 popup
-
-```javascript
-popup.close();
-```
-
 #### remove
 
 移除 popup

docs/api/layer/layer.en.md

@@ -1,13 +1,11 @@
 ---
-title: Layer
+title: Base Layer
 order: 0
 ---
 
-# Layer
-
 ## 简介
 
-L7 Layer 接口设计遵循图形语法，在可视表达上
+L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。
 
 语法示例
 

docs/api/layer/layer.zh.md

@@ -1,13 +1,11 @@
 ---
-title: Layer
+title: 图层基类
 order: 0
 ---
 
-# Layer
-
 ## 简介
 
-L7 Layer 接口设计遵循图形语法，在可视表达上
+L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。
 
 语法示例
 

docs/api/layer/line_layer/arc.en.md

@@ -1,5 +1,5 @@
 ---
-title: 弧线图
+title: ArcLayer
 order: 1
 ---
 将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等

docs/api/layer/point_layer/bubble.en.md

@@ -1,5 +1,5 @@
 ---
-title: 气泡图
+title: Buble Map
 order: 1
 ---
 气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。

docs/api/layer/point_layer/chart.en.md

@@ -1,5 +1,9 @@
 ---
-title: 复合图表地图
+title: Chart Map
 order: 6
 ---
 使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
+
+通过自定义Marker 实现自定义图表
+
+[demo示例](../../../../examples/point/chart)

docs/api/layer/point_layer/chart.zh.md

@@ -3,3 +3,7 @@ title: 复合图表地图
 order: 6
 ---
 使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
+
+通过自定义Marker 实现自定义图表
+
+[demo示例](../../../../examples/point/chart)

docs/api/layer/point_layer/cluster.en.md

@@ -1,5 +1,5 @@
 ---
-title: 聚合图
+title: Cluster Map
 order: 5
 ---
 ## 使用

docs/api/layer/point_layer/column.en.md

@@ -0,0 +1,58 @@
+---
+title: 3D Column
+order: 5
+---
+3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
+
+## 使用
+
+3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape
+### shape
+
+3D Shape 支持
+
+- cylinder 
+- triangleColumn
+- hexagonColumn
+- squareColumn
+
+### size
+
+  3D柱图size 需要设置三个维度 [w, l, z]
+  - w 宽
+  - l 长
+  - z 高度
+
+size设置成常量
+
+```
+ layer.size([2,2,3])
+ ```
+size 回调函数设置
+
+```
+ layer.size('unit_price', h => {
+        return [ 6, 6, h / 500 ];
+    })
+```
+
+
+
+```javascript
+
+const column = new PointLayer({})
+      .source(data)
+      .shape('name', [
+        'cylinder',
+        'triangleColumn',
+        'hexagonColumn',
+        'squareColumn'
+      ])
+      .size('unit_price', h => {
+        return [ 6, 6, h / 500 ];
+      })
+      .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
+      .style({
+        opacity: 1.0
+      });
+```

docs/api/layer/point_layer/dot.en.md

@@ -1,5 +1,5 @@
 ---
-title: 亮度图
+title: Dot Density
 order: 3
 ---
 亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况

docs/api/layer/point_layer/marker.en.md

@@ -1,5 +1,5 @@
 ---
-title: 自定义 Marker
+title: Custom Marker
 order: 7
 ---
 可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

docs/api/layer/point_layer/pointlayer.en.md

@@ -3,8 +3,6 @@ title: PointLayer
 order: 0
 ---
 
-# PointLayer
-
 ## 简介
 
 点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。

docs/api/layer/point_layer/scatter.en.md

@@ -1,5 +1,5 @@
 ---
-title: 散点图
+title: Scatter Map
 order: 2
 ---
 在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。

docs/api/layer/point_layer/symbol.en.md

@@ -1,4 +1,45 @@
 ---
-title: 符号图
+title: Symbol Map
 order: 4
 ---
+在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
+
+
+
+## 使用
+
+符号图 通过PointLayer对象实例化，将shape设置成图片符号
+
+### shape
+
+通过scene addImage 方法
+
+addImage()
+ 参数：
+ - id 图片的id,
+ - url 图片的url
+ 
+ ```javascript
+ scene.addImage(
+      '00',
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
+  );
+
+```
+⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
+
+符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
+
+```javascript
+const scatter = 
+new PointLayer()
+    .source(data)
+    .shape('00')
+    .size(5)
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```
+## 相关demo

docs/api/layer/point_layer/text.en.md

@@ -0,0 +1,42 @@
+---
+title: Label
+order: 4
+---
+为图层添加文本标注
+
+## 使用
+
+地图标注需要添加一个新的图层的实现
+
+### shape
+
+- field 标注的字段名称
+- shapeType 'text'
+
+```javascript
+layer.shape('name','text')
+
+```
+
+### color
+同layer
+
+### size
+同layer
+
+### style
+
+- opacity  `number`  
+- textAnchor  `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
+- spacing:  `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+- padding:  `[number, number]`  文本相对锚点的偏移量 [x, y]
+- stroke: `string`; 描边颜色
+- strokeWidth `number` 描边宽度
+- strokeOpacity `number` 描边透明度
+- fontWeight `string` 字体粗细
+- fontFamily `string` 字号
+- textOffset `[number, number]`  文本偏移量
+- textAllowOverlap: `boolean` 是否允许文字遮盖
+
+## 相关demo
+[文本标注](../../../../examples/point/text)

docs/api/layer/point_layer/text.zh.md

@@ -0,0 +1,42 @@
+---
+title: 文本标注
+order: 4
+---
+为图层添加文本标注
+
+## 使用
+
+地图标注需要添加一个新的图层的实现
+
+### shape
+
+- field 标注的字段名称
+- shapeType 'text'
+
+```javascript
+layer.shape('name','text')
+
+```
+
+### color
+同layer
+
+### size
+同layer
+
+### style
+
+- opacity  `number`  
+- textAnchor  `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
+- spacing:  `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+- padding:  `[number, number]`  文本相对锚点的偏移量 [x, y]
+- stroke: `string`; 描边颜色
+- strokeWidth `number` 描边宽度
+- strokeOpacity `number` 描边透明度
+- fontWeight `string` 字体粗细
+- fontFamily `string` 字号
+- textOffset `[number, number]`  文本偏移量
+- textAllowOverlap: `boolean` 是否允许文字遮盖
+
+## 相关demo
+[文本标注](../../../../examples/point/text)

docs/api/map.en.md

@@ -1,5 +1,5 @@
 ---
-title: 地图 Map
+title: Map
 order: 2
 ---
 

docs/api/react/popup.en.md

@@ -1,5 +1,5 @@
 ---
-title: Popup 组件
+title: Popup Component
 order: 4
 ---
 

docs/tutorial/data.en.md

@@ -1,5 +1,5 @@
 ---
-title: 数据
+title: Source
 order: 2
 ---
 

docs/tutorial/demo.en.md

@@ -1,5 +1,5 @@
 ---
-title: 本地运行demo
+title: Local demo
 order: 1
 ---
 

docs/tutorial/map/amap.en.md

@@ -1,5 +1,5 @@
 ---
-title: GaodeMap BaseMap
+title: GaodeMap
 order: 0
 ---
 

docs/tutorial/map/blankmap.en.md

@@ -8,7 +8,7 @@ order: 2
 
 L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
 
-😃不需要使用mapbox token 拿来就用，不要注册mapbox账户
+😃不需要使用mapbox token，也不需要注册mapbox账户
 
 ```javascript
 const scene = new Scene({

docs/tutorial/map/blankmap.zh.md

@@ -8,7 +8,7 @@ order: 2
 
 L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
 
-不需要使用mapbox token 也不需要注册mapbox账户
+不需要使用mapbox token ,也不需要注册mapbox账户
 
 ```javascript
 const scene = new Scene({

docs/tutorial/map/offline.en.md

@@ -1,4 +1,139 @@
 ---
-title: Offline
+title: Use Offline
 order: 0
 ---
+
+目前L7 支持高德和Mapbox两种底图，高德地图由于使用在线API不能做的离线部署，如果你有离线部署的需求可以采用MapBox做底图。L7 在接口层统一了不同底图直接的差异，一套可视化代码可以运行在L7 支持的任意底图上。本文主要介绍如何离线使用，国内加速使用MapBox，同时也提供了在线的字体服务，你也可也下载到本地使用。
+
+### L7 如何引入Mapbox
+
+```javascript
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'dark',
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313,
+    token:'xxxx'
+  })
+});
+
+```
+
+
+### 为什么离线化
+
+- 离线部署
+- 国内加速
+- 不使用mapbox token
+
+### 如何离线化使用MapBox
+你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。
+
+mapbox本身数据资源在国外如果在国内单独部署使用，加载速度体验还是很好的
+
+我们先了解一下MapBox样式包含哪些配置项。
+
+#### Mapbox样式参数
+
+- version：JS SDK对应版本必须为8，
+- name：样式的命名，
+- sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。
+- glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。
+- sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式
+- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。
+
+具体参数及其api可以参考mapbox官网
+
+如果做到本地化只需要 sprite，glyphs 本地化就可以了，地图服务可以加载其他服务。
+
+如果你不需要使用MapBox数据服务，可视化层完成用L7渲染那就更简单了
+
+你只需要将MapBox的地图样式设置 `blank`
+
+```javascript
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'blank',
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313
+  })
+});
+```
+
+blank 样式以为无底图样式，这种样式下就不需要使用mapbox服务，也不需要使用mapbox的token了
+
+<a name="cGfei"></a>
+#### 本地化雪碧图
+如果你需要使用mapbox字段的图片标注，你需要本地化雪碧图资源<br />只需要下载两个文件即可<br />sprite.json 主要记录每个图表在大图上位置<br />sprite.png  每个小图标组成的大图
+
+在线雪碧图服务地址:<br />[https://lzxue.github.io/font-glyphs/sprite/sprite](https://lzxue.github.io/font-glyphs/sprite/sprite)
+
+
+<a name="KWyGs"></a>
+#### 本地化字体
+ 如果需要使用mapbox文章标注功能需要本地化，如果你的渲染能力都是用L7实现的，这个过程也是不需要的。
+
+L7 提供了在线字体服务<br /> 目前支持4种字
+
+- 阿里巴巴普惠体
+- noto
+- opensan
+- roboto
+
+_如果你有新的字体需求可提PR，帮你自动生成在线可用的字体服务，你可以在线使用，也可以下载到本地使用。_
+
+字体服务下载：[gh-pages分支](https://github.com/lzxue/font-glyphs/tree/gh-pages) 你可以clone下来直接使用。
+
+**你也可以使用在线服务**<br />**<br />github服务<br />[https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf](https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf)<br />蚂蚁CDN：<br />[https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf](https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf)
+
+<a name="oeqps"></a>
+#### 地图服务本地化
+1.加载[第三方底图](https://github.com/htoooth/Leaflet.ChineseTmsProviders)，栅格瓦片图层做底图，如天地图，高德，google的栅格瓦片都可以<br />2.下载[opensteetmap ](https://openmaptiles.com/downloads/planet/)矢量瓦片地图做底图<br />3.自己业务数据发布底图服务，或者矢量瓦片服务。
+
+**这里还有个更完备的解决方案**<br /> [https://jingsam.github.io/foxgis-server-lite/#/](https://jingsam.github.io/foxgis-server-lite/#/)
+
+#### 
+所有的服务资源已经准备好了，这样我们就可以独立使用mapbox服务，不需要再申请mapbox的token了
+
+```javascript
+ 
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: {
+        "version": 8,
+          "name": "blank",
+          "sprite": "https://lzxue.github.io/font-glyphs/sprite/sprite",
+          "glyphs": "https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf",
+           "sources": {},
+           "layers": [
+             {
+               id: 'background',
+               type: 'background',
+               paint: {
+                 'background-color': 'white',
+               },
+             },
+           ]
+         },
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313,
+    token:'xxxx'
+  })
+});
+```
+
+离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1575463410498-0784ce76-743d-4cc4-8d68-964dfd010925.png#align=left&display=inline&height=514&name=image.png&originHeight=514&originWidth=824&size=156914&status=done&style=none&width=824)
+

docs/tutorial/quickstart.en.md

@@ -7,7 +7,7 @@ redirect_from:
 
 ## L7 
 
-Current version:  ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7/beta)
+Current version:  ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7)
 
 # 使用方法
 

examples/react/covid/demo/covid_column.tsx

@@ -62,7 +62,6 @@ function joinData(geodata: any, ncovData: any) {
   });
   return geodata;
 }
-
 const World = React.memo(function Map() {
   const [data, setData] = React.useState();
   const [filldata, setfillData] = React.useState();

site/pages/index.zh.tsx

@@ -96,9 +96,9 @@ const IndexPage = () => {
     },
     {
       type: t('新版发布'),
-      title: t('L7 2.0 正式版'),
+      title: t('L7 2.1 正式版'),
-      date: '2020.01.06',
+      date: '2020.03.12',
-      link: 'https://www.yuque.com/antv/blog/haygzb',
+      link: ' https://www.yuque.com/antv/blog/ows55v',
     },
   ];