From 6cd3fee9345c9e34a07326bb8c52281fd427beb4 Mon Sep 17 00:00:00 2001 From: shihui Date: Fri, 31 Dec 2021 17:47:44 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E7=82=B9=E5=9B=BE?= =?UTF-8?q?=E5=B1=82=E7=9A=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/point_layer/pointlayer.zh.md | 121 +++++++++++++++++--------- docs/api/point_layer/simple.en.md | 6 ++ docs/api/point_layer/simple.zh.md | 51 +++++++++++ docs/api/point_layer/wave.en.md | 6 ++ docs/api/point_layer/wave.zh.md | 51 +++++++++++ 5 files changed, 194 insertions(+), 41 deletions(-) create mode 100644 docs/api/point_layer/simple.en.md create mode 100644 docs/api/point_layer/simple.zh.md create mode 100644 docs/api/point_layer/wave.en.md create mode 100644 docs/api/point_layer/wave.zh.md diff --git a/docs/api/point_layer/pointlayer.zh.md b/docs/api/point_layer/pointlayer.zh.md index 5cdded6efa..ff0b5106f7 100644 --- a/docs/api/point_layer/pointlayer.zh.md +++ b/docs/api/point_layer/pointlayer.zh.md @@ -7,39 +7,97 @@ order: 0 ## 简介 -点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。 +点数据的展示，根据经纬点绘制图形，数据源支持 JSON、GeoJSON、CSV 三种数据格式。 +- [GeoJSON](../source/geojson/#point) +- [CSV](../source/csv/#parser) +- [JSON](../source/json/#点数据) -shape 支持 +🌟 通常每种数据都需要相应的 parser 解析数据 + +```javascript +// 传入 JSON 类型的数据 +var data = [ + { + lng: 120, + lat: 30 + }, + ... +] + +var layer = new PointLayer() +.source(data, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + } +}) + +// 传入 GeoJSON 类型数据 *** L7 默认支持，不需要 parser 解析 +var data = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'Polygon', + coordinates: [ + [120, 30], + ... + ] + }, + }, + ], + }; + +var layer = new PointLayer() +.source(data) + +// 传入 txt 类型数据 +var data = `from,to,value,type,lng1,lat1,lng2,lat2 +鎷夎惃,娴疯タ,6.91,move_out,91.111891,29.662557,97.342625,37.373799 +鎷夎惃,鎴愰兘,4.79,move_out,91.111891,29.662557,104.067923,30.679943 +鎷夎惃,閲嶅簡,2.41,move_out,91.111891,29.662557,106.530635,29.544606 +鎷夎惃,鍖椾含,2.05,move_out,91.111891,29.662557,116.395645,39.929986 +...` + +var layer = new PointLayer() +.source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + } +}) +``` + +## shape 类型 + +PointLayer 图层支持多种 shape 类型，通过改变 shape 我们可以显示不同的点 + +**2D 符号图** + +案例 + +``` +'simple', 'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica', + +``` **3D 类型 柱图** +案例 + ``` 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' ``` -**2D 符号图** +🌟 若是使用简单的圆点图层，建议使用 simple 代替 circle 以获得更好的性能 -``` -'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica', -``` - -## source - -点数据类型，根据经纬点绘制图形,目前支持三种数据结构 - -- [GeoJSON](../source/geojson/#point) -- [CSV](../source/csv/#parser) -- [JSON](../source/json/#点数据) - -**图片标注** - -通过 `Scene.addImage()` 可以添加图片资源 - -### 代码示例 - -#### 基本图形显示示例 +### 基本用法 ```javascript import { PointLayer } from '@antv/l7'; @@ -68,23 +126,4 @@ const layer = PointLayer({ ]); ``` -#### 符号图 - -使用图片添加地图标注 - -```javascript -scene.addImage( - 'local', - 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png', -); - -const layer = new PointLayer({ - zIndex: 4, -}) - .source(city) - .size(20.0) - .shape('local') - .color('#0D408C'); -``` - `markdown:docs/common/layer/base.md` diff --git a/docs/api/point_layer/simple.en.md b/docs/api/point_layer/simple.en.md new file mode 100644 index 0000000000..700038c822 --- /dev/null +++ b/docs/api/point_layer/simple.en.md @@ -0,0 +1,6 @@ +--- +title: Simple point +order: 3 +--- + +`markdown:docs/api/point_layer/simple.zh.md` diff --git a/docs/api/point_layer/simple.zh.md b/docs/api/point_layer/simple.zh.md new file mode 100644 index 0000000000..65ff6c5523 --- /dev/null +++ b/docs/api/point_layer/simple.zh.md @@ -0,0 +1,51 @@ +--- +title: 简单点图层 +order: 3 +--- + +`markdown:docs/common/style.md` + +亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况 + +## 使用 + +### shape + +- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape + +### color + +- 无权重 + 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮 +- 有权重 + 如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。 + +```javascript +const pointLayer = new PointLayer() + .source(data) + .size(2) + .shape('dot') + .color('h8', [ + '#0A3663', + '#1558AC', + '#3771D9', + '#4D89E5', + '#64A5D3', + '#72BED6', + '#83CED6', + '#A6E1E0', + '#B8EFE2', + '#D7F9F0', + ]) + .style({ + opacity: 1, + }); + +scene.addLayer(pointLayer); +``` + +## 相关 demo + +[城市亮度图](../../../examples/point/dot#normal2) + +`markdown:docs/common/layer/base.md` diff --git a/docs/api/point_layer/wave.en.md b/docs/api/point_layer/wave.en.md new file mode 100644 index 0000000000..f4218ce09d --- /dev/null +++ b/docs/api/point_layer/wave.en.md @@ -0,0 +1,6 @@ +--- +title: Wave point +order: 3 +--- + +`markdown:docs/api/point_layer/wave.zh.md` diff --git a/docs/api/point_layer/wave.zh.md b/docs/api/point_layer/wave.zh.md new file mode 100644 index 0000000000..97a5e6efab --- /dev/null +++ b/docs/api/point_layer/wave.zh.md @@ -0,0 +1,51 @@ +--- +title: 水波图 +order: 3 +--- + +`markdown:docs/common/style.md` + +亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况 + +## 使用 + +### shape + +- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape + +### color + +- 无权重 + 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮 +- 有权重 + 如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。 + +```javascript +const pointLayer = new PointLayer() + .source(data) + .size(2) + .shape('dot') + .color('h8', [ + '#0A3663', + '#1558AC', + '#3771D9', + '#4D89E5', + '#64A5D3', + '#72BED6', + '#83CED6', + '#A6E1E0', + '#B8EFE2', + '#D7F9F0', + ]) + .style({ + opacity: 1, + }); + +scene.addLayer(pointLayer); +``` + +## 相关 demo + +[城市亮度图](../../../examples/point/dot#normal2) + +`markdown:docs/common/layer/base.md`