From 36b3092aab86d0f7d493e0f3923311b9a8e50a01 Mon Sep 17 00:00:00 2001 From: shihui Date: Wed, 29 Dec 2021 17:08:46 +0800 Subject: [PATCH] style: lint style --- docs/api/heatmap_layer/grid.en.md | 5 +- docs/api/heatmap_layer/grid.zh.md | 1 + docs/api/heatmap_layer/hexagon.en.md | 2 + docs/api/heatmap_layer/hexagon.zh.md | 2 + docs/api/heatmap_layer/normal.en.md | 1 - docs/api/heatmap_layer/normal.zh.md | 2 + docs/api/line_layer/arc.en.md | 1 + docs/api/line_layer/arc.zh.md | 20 ++++--- docs/api/line_layer/linelayer.en.md | 1 + docs/api/line_layer/linelayer.zh.md | 70 ++++++++++++----------- docs/api/line_layer/path.en.md | 1 + docs/api/line_layer/path.zh.md | 6 +- docs/api/point_layer/bubble.en.md | 1 + docs/api/point_layer/bubble.zh.md | 2 +- docs/api/point_layer/chart.zh.md | 1 + docs/api/point_layer/cluster.en.md | 2 + docs/api/point_layer/cluster.zh.md | 1 + docs/api/point_layer/column.zh.md | 14 +++-- docs/api/point_layer/pointlayer.zh.md | 2 + docs/api/point_layer/scatter.zh.md | 2 + docs/api/point_layer/symbol.zh.md | 1 + docs/api/point_layer/text.zh.md | 1 + docs/api/polygon_layer/extrude.en.md | 2 +- docs/api/polygon_layer/extrude.zh.md | 15 ++--- docs/api/polygon_layer/fill.en.md | 1 + docs/api/polygon_layer/fill.zh.md | 8 ++- docs/api/polygon_layer/polygonlayer.zh.md | 1 + 27 files changed, 100 insertions(+), 66 deletions(-) diff --git a/docs/api/heatmap_layer/grid.en.md b/docs/api/heatmap_layer/grid.en.md index 238d7ca1d4..77862f3b4a 100644 --- a/docs/api/heatmap_layer/grid.en.md +++ b/docs/api/heatmap_layer/grid.en.md @@ -2,6 +2,7 @@ title: GridHeatMapLayer order: 1 --- + `markdown:docs/common/style.md` 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 @@ -10,8 +11,7 @@ order: 1 ```javascript import { HeatmapLayer } from '@antv/l7'; - -```` +``` ## source @@ -147,4 +147,5 @@ const layer = new HeatmapLayer({}) scene.addLayer(layer); ``` + `markdown:docs/common/layer/base.md` diff --git a/docs/api/heatmap_layer/grid.zh.md b/docs/api/heatmap_layer/grid.zh.md index e83c4ea2d4..933f29580f 100644 --- a/docs/api/heatmap_layer/grid.zh.md +++ b/docs/api/heatmap_layer/grid.zh.md @@ -2,6 +2,7 @@ title: 网格热力图 order: 1 --- + `markdown:docs/common/style.md` 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 diff --git a/docs/api/heatmap_layer/hexagon.en.md b/docs/api/heatmap_layer/hexagon.en.md index 62ef566455..a69c4d65e3 100644 --- a/docs/api/heatmap_layer/hexagon.en.md +++ b/docs/api/heatmap_layer/hexagon.en.md @@ -2,6 +2,7 @@ title: Hexagon HeatMap order: 1 --- + `markdown:docs/common/style.md` 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 @@ -130,4 +131,5 @@ const layer = new HeatmapLayer({ coverage: 0.8, }); ``` + `markdown:docs/common/layer/base.md` diff --git a/docs/api/heatmap_layer/hexagon.zh.md b/docs/api/heatmap_layer/hexagon.zh.md index 9a55ccbf31..4c4f8ae58e 100644 --- a/docs/api/heatmap_layer/hexagon.zh.md +++ b/docs/api/heatmap_layer/hexagon.zh.md @@ -2,6 +2,7 @@ title: 蜂窝热力图 order: 1 --- + `markdown:docs/common/style.md` 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 @@ -130,4 +131,5 @@ const layer = new HeatmapLayer({ coverage: 0.8, }); ``` + `markdown:docs/common/layer/base.md` diff --git a/docs/api/heatmap_layer/normal.en.md b/docs/api/heatmap_layer/normal.en.md index 1819b5841a..a8a7bb8827 100644 --- a/docs/api/heatmap_layer/normal.en.md +++ b/docs/api/heatmap_layer/normal.en.md @@ -4,4 +4,3 @@ order: 1 --- `markdown:docs/api/heatmap_layer/normal.zh.md` - diff --git a/docs/api/heatmap_layer/normal.zh.md b/docs/api/heatmap_layer/normal.zh.md index 5cc6f567b7..330020f6e9 100644 --- a/docs/api/heatmap_layer/normal.zh.md +++ b/docs/api/heatmap_layer/normal.zh.md @@ -2,6 +2,7 @@ title: 经典热力图 order: 1 --- + `markdown:docs/common/style.md` ## 使用 @@ -64,4 +65,5 @@ heatmapLayer() }, }); ``` + `markdown:docs/common/layer/base.md` diff --git a/docs/api/line_layer/arc.en.md b/docs/api/line_layer/arc.en.md index 1ac3fa7bca..3303cbdf76 100644 --- a/docs/api/line_layer/arc.en.md +++ b/docs/api/line_layer/arc.en.md @@ -2,4 +2,5 @@ title: ArcLayer order: 1 --- + `markdown:docs/api/line_layer/arc.zh.md` diff --git a/docs/api/line_layer/arc.zh.md b/docs/api/line_layer/arc.zh.md index 479ae589b3..ff2ac6d494 100644 --- a/docs/api/line_layer/arc.zh.md +++ b/docs/api/line_layer/arc.zh.md @@ -2,6 +2,7 @@ title: 弧线图 order: 1 --- + `markdown:docs/common/style.md` 将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等 @@ -61,16 +62,16 @@ L7 目前动画参数为相对单位，我们默认一条线段的长度为 1 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。 - ### arc style 额外参数控制 + 在 arc 弧线的 style 方法中支持有额外的参数，可以对弧线样式进行更细微的调整。 #### segmentNumber 弧线分段数 + arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需要这么多的分段数，适当降低分段数量可以在保证效果的情况下提高性能。 - ```javascript - const layer = new LineLayer({}) +const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', @@ -89,10 +90,11 @@ arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需 ``` #### thetaOffset 弧度参数 + thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314 ```javascript - const layer = new LineLayer({}) +const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', @@ -106,9 +108,10 @@ thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314 .shape('arc') .color('#8C1EB2') .style({ - thetaOffset: 0.35 + thetaOffset: 0.35, }); ``` + ### 示例代码 ```javascript @@ -134,7 +137,6 @@ const layer = new LineLayer({}) 线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高。 - ```javascript const layer = new LineLayer({}) .source(data, { @@ -150,13 +152,13 @@ const layer = new LineLayer({}) .shape('arc') .color('#8C1EB2') .style({ - sourceColor: '#f00', // 起点颜色 - targetColor: '#0f0' // 终点颜色 + sourceColor: '#f00', // 起点颜色 + targetColor: '#0f0', // 终点颜色 }); ``` ### demo 示例 -[弧线 demo]( ../../../examples/gallery/basic#arcCircle) +[弧线 demo](../../../examples/gallery/basic#arcCircle) `markdown:docs/common/layer/base.md` diff --git a/docs/api/line_layer/linelayer.en.md b/docs/api/line_layer/linelayer.en.md index 887e393bb8..b0777cd611 100644 --- a/docs/api/line_layer/linelayer.en.md +++ b/docs/api/line_layer/linelayer.en.md @@ -2,4 +2,5 @@ title: LineLayer order: 0 --- + `markdown:docs/api/line_layer/linelayer.zh.md` diff --git a/docs/api/line_layer/linelayer.zh.md b/docs/api/line_layer/linelayer.zh.md index 5a3424c209..dec526ac3c 100644 --- a/docs/api/line_layer/linelayer.zh.md +++ b/docs/api/line_layer/linelayer.zh.md @@ -2,7 +2,9 @@ title: LineLayer order: 2 --- + `markdown:docs/common/style.md` + ## 线图层 ### shape @@ -17,16 +19,15 @@ order: 2 ⚠️ 弧线只需要设置起止点坐标即可 ```javascript - new LineLayer() - .source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2', - }, - }) +new LineLayer().source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2', + }, +}); ``` 如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 @@ -73,7 +74,6 @@ lineLayer.size([1, 2]); // 宽度为1，高度2 线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高 - ```javascript const layer = new LineLayer({}) .source(data, { @@ -89,23 +89,24 @@ const layer = new LineLayer({}) .shape('arc') .color('#8C1EB2') .style({ - sourceColor: '#f00', // 起点颜色 - targetColor: '#0f0' // 终点颜色 + sourceColor: '#f00', // 起点颜色 + targetColor: '#0f0', // 终点颜色 }); ``` ### 设置顶点高度 + 线图层支持给每个顶点赋予高度值，同时允许用户在 style 方法中通过 vertexHeightScale 属性设置高度比例。 ```javascript const layer = new LineLayer({}) -.source(data) -.size(1) -.shape('line') -.style({ - vertexHeightScale: 30, -}) -.color('#ccc'); + .source(data) + .size(1) + .shape('line') + .style({ + vertexHeightScale: 30, + }) + .color('#ccc'); scene.addLayer(layer); ``` @@ -118,25 +119,26 @@ scene.addLayer(layer); "name": "tw", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ - { - "type": "Feature", - "properties": { }, - "geometry": { - "type": "LineString", "coordinates": + { + "type": "Feature", + "properties": { }, + "geometry": { + "type": "LineString", "coordinates": [ - [ 121.519153647, 25.288692533, 41.0 ], - [ 121.529153646999987, 25.288692533, 35.0 ], - [ 121.539153647, 25.288692533, 27.0 ], - [ 121.549153647, 25.288692533, 66.0 ], - [ 121.559153646999988, 25.288692533, 83.0 ], - [ 121.569153647, 25.288692533, 88.0 ] - ] - } + [ 121.519153647, 25.288692533, 41.0 ], + [ 121.529153646999987, 25.288692533, 35.0 ], + [ 121.539153647, 25.288692533, 27.0 ], + [ 121.549153647, 25.288692533, 66.0 ], + [ 121.559153646999988, 25.288692533, 83.0 ], + [ 121.569153647, 25.288692533, 88.0 ] + ] + } }, ... } - + ``` + [使用完整 demo](../../../examples/line/isoline#height) `markdown:docs/common/layer/base.md` diff --git a/docs/api/line_layer/path.en.md b/docs/api/line_layer/path.en.md index 1557b3fd45..6dd843c499 100644 --- a/docs/api/line_layer/path.en.md +++ b/docs/api/line_layer/path.en.md @@ -2,4 +2,5 @@ title: Path order: 1 --- + `markdown:docs/api/line_layer/path.zh.md` diff --git a/docs/api/line_layer/path.zh.md b/docs/api/line_layer/path.zh.md index f7239cbfec..4d3a581f64 100644 --- a/docs/api/line_layer/path.zh.md +++ b/docs/api/line_layer/path.zh.md @@ -2,6 +2,7 @@ title: 路径图 order: 1 --- + `markdown:docs/common/style.md` 用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等 @@ -30,7 +31,6 @@ layer.size('height', []); 线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高 - ```javascript const layer = new LineLayer({}) .source(data, { @@ -46,8 +46,8 @@ const layer = new LineLayer({}) .shape('arc') .color('#8C1EB2') .style({ - sourceColor: '#f00', // 起点颜色 - targetColor: '#0f0' // 终点颜色 + sourceColor: '#f00', // 起点颜色 + targetColor: '#0f0', // 终点颜色 }); ``` diff --git a/docs/api/point_layer/bubble.en.md b/docs/api/point_layer/bubble.en.md index c9bacd7d50..9e43ee0eed 100644 --- a/docs/api/point_layer/bubble.en.md +++ b/docs/api/point_layer/bubble.en.md @@ -2,4 +2,5 @@ title: Bubble Map order: 1 --- + `markdown:docs/api/point_layer/bubble.zh.md` diff --git a/docs/api/point_layer/bubble.zh.md b/docs/api/point_layer/bubble.zh.md index 2c9e36b593..469e9ee938 100644 --- a/docs/api/point_layer/bubble.zh.md +++ b/docs/api/point_layer/bubble.zh.md @@ -2,6 +2,7 @@ title: 气泡图 order: 1 --- + `markdown:docs/common/style.md` 气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。 @@ -58,4 +59,3 @@ layer.animate(false); style 方法如果没有设置 stroke, 默认于气泡的填充色相同 `markdown:docs/common/layer/base.md` - diff --git a/docs/api/point_layer/chart.zh.md b/docs/api/point_layer/chart.zh.md index 02dec2e79c..44704b22a1 100644 --- a/docs/api/point_layer/chart.zh.md +++ b/docs/api/point_layer/chart.zh.md @@ -2,6 +2,7 @@ title: 复合图表地图 order: 6 --- + `markdown:docs/common/style.md` 使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 diff --git a/docs/api/point_layer/cluster.en.md b/docs/api/point_layer/cluster.en.md index 1a28b10bcf..725002850d 100644 --- a/docs/api/point_layer/cluster.en.md +++ b/docs/api/point_layer/cluster.en.md @@ -2,6 +2,7 @@ title: Cluster Map order: 5 --- + `markdown:docs/api/point_layer/cluster.zh.md` ## 使用 @@ -70,4 +71,5 @@ const pointLayer = new PointLayer({}) strokeWidth: 1, }); ``` + `markdown:docs/common/layer/base.md` diff --git a/docs/api/point_layer/cluster.zh.md b/docs/api/point_layer/cluster.zh.md index 6a5adf0a52..90c5c88012 100644 --- a/docs/api/point_layer/cluster.zh.md +++ b/docs/api/point_layer/cluster.zh.md @@ -2,6 +2,7 @@ title: 聚合图 order: 5 --- + `markdown:docs/common/style.md` ## 使用 diff --git a/docs/api/point_layer/column.zh.md b/docs/api/point_layer/column.zh.md index 7fe7c1a0f8..5ac7e7d3d9 100644 --- a/docs/api/point_layer/column.zh.md +++ b/docs/api/point_layer/column.zh.md @@ -2,6 +2,7 @@ title: 3D 柱图 order: 5 --- + `markdown:docs/common/style.md` 3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。 @@ -58,11 +59,12 @@ const column = new PointLayer({}) opacity: 1.0, }); ``` + ### animate - 3D 柱图支持生长动画 + +3D 柱图支持生长动画 animate 方法支持的布尔值和对象参数 - ```javascript animate(true) animate(false) @@ -75,6 +77,7 @@ animateOptions: { repeat?: number = 1; } ``` + ## 额外的 style 配置 - sourceColor 设置 3D 柱图起始颜色（3D 柱图设置颜色渐变时会覆盖 color 设置的颜色） @@ -87,9 +90,9 @@ animateOptions: { style({ opacityLinear: { enable: true, // true - false - dir: 'up' // up - down - } -}) + dir: 'up', // up - down + }, +}); ``` - lightEnable 是否开启光照 @@ -101,6 +104,7 @@ layer.style({ targetColor: 'yellow', }); ``` + [光标柱图](../../../../examples/point/column#column_light) [渐变柱图](../../../../examples/point/column#column_linear) diff --git a/docs/api/point_layer/pointlayer.zh.md b/docs/api/point_layer/pointlayer.zh.md index 1b05255318..5cdded6efa 100644 --- a/docs/api/point_layer/pointlayer.zh.md +++ b/docs/api/point_layer/pointlayer.zh.md @@ -2,6 +2,7 @@ title: PointLayer order: 0 --- + `markdown:docs/common/style.md` ## 简介 @@ -85,4 +86,5 @@ const layer = new PointLayer({ .shape('local') .color('#0D408C'); ``` + `markdown:docs/common/layer/base.md` diff --git a/docs/api/point_layer/scatter.zh.md b/docs/api/point_layer/scatter.zh.md index 5858e174b2..d982e31bb6 100644 --- a/docs/api/point_layer/scatter.zh.md +++ b/docs/api/point_layer/scatter.zh.md @@ -2,6 +2,7 @@ title: 散点图 order: 2 --- + `markdown:docs/common/style.md` 在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。 @@ -43,4 +44,5 @@ const scatter = new PointLayer() strokeWidth: 1, }); ``` + `markdown:docs/common/layer/base.md` diff --git a/docs/api/point_layer/symbol.zh.md b/docs/api/point_layer/symbol.zh.md index 85fcdbd1fe..df3f236b6a 100644 --- a/docs/api/point_layer/symbol.zh.md +++ b/docs/api/point_layer/symbol.zh.md @@ -2,6 +2,7 @@ title: 符号图 order: 4 --- + `markdown:docs/common/style.md` 在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况 diff --git a/docs/api/point_layer/text.zh.md b/docs/api/point_layer/text.zh.md index d53e3d0fb0..a71041a659 100644 --- a/docs/api/point_layer/text.zh.md +++ b/docs/api/point_layer/text.zh.md @@ -2,6 +2,7 @@ title: 文本标注 order: 4 --- + `markdown:docs/common/style.md` 为图层添加文本标注 diff --git a/docs/api/polygon_layer/extrude.en.md b/docs/api/polygon_layer/extrude.en.md index 611b5d1dea..6a2e377dbd 100644 --- a/docs/api/polygon_layer/extrude.en.md +++ b/docs/api/polygon_layer/extrude.en.md @@ -2,5 +2,5 @@ title: fill 3D order: 1 --- -`markdown:docs/api/polygon_layer/extrude.zh.md` +`markdown:docs/api/polygon_layer/extrude.zh.md` diff --git a/docs/api/polygon_layer/extrude.zh.md b/docs/api/polygon_layer/extrude.zh.md index 1e4c053514..a9f8484885 100644 --- a/docs/api/polygon_layer/extrude.zh.md +++ b/docs/api/polygon_layer/extrude.zh.md @@ -2,6 +2,7 @@ title: 3D填充图 order: 1 --- + `markdown:docs/common/style.md` ## 使用 @@ -34,18 +35,18 @@ layer.size('floor', (floor) => { }); ``` -## 额外的 style 配置 +## 额外的 style 配置 -- pickLight 设置 3D 填充图 +- pickLight 设置 3D 填充图 -pickLight 默认为 false 表示对拾取的颜色不进行光照计算，开启后会增加部分额外的计算。 +pickLight 默认为 false 表示对拾取的颜色不进行光照计算，开启后会增加部分额外的计算。 ```javascript style({ - pickLight: true // 默认为 false -}) -``` + pickLight: true, // 默认为 false +}); +``` -[光照拾取](../../../../examples/react/covid#covid_extrude) +[光照拾取](../../../../examples/react/covid#covid_extrude) `markdown:docs/common/layer/base.md` diff --git a/docs/api/polygon_layer/fill.en.md b/docs/api/polygon_layer/fill.en.md index 2c60d38450..c097a89aa6 100644 --- a/docs/api/polygon_layer/fill.en.md +++ b/docs/api/polygon_layer/fill.en.md @@ -2,4 +2,5 @@ title: fill order: 1 --- + `markdown:docs/api/polygon_layer/fill.zh.md` diff --git a/docs/api/polygon_layer/fill.zh.md b/docs/api/polygon_layer/fill.zh.md index cf59ef0203..3536bd7571 100644 --- a/docs/api/polygon_layer/fill.zh.md +++ b/docs/api/polygon_layer/fill.zh.md @@ -2,6 +2,7 @@ title: 填充图 order: 1 --- + `markdown:docs/common/style.md` ## 使用 @@ -31,10 +32,11 @@ layer.shape('fill'); style({ opacityLinear: { enable: true, // true - false - dir: 'in' // in - out - } -}) + dir: 'in', // in - out + }, +}); ``` + [径向渐变 in](../../../examples/polygon/fill#china_linear_in) [径向渐变 out](../../../examples/polygon/fill#china_linear_out) diff --git a/docs/api/polygon_layer/polygonlayer.zh.md b/docs/api/polygon_layer/polygonlayer.zh.md index 2f3520b9a6..0d412badd9 100644 --- a/docs/api/polygon_layer/polygonlayer.zh.md +++ b/docs/api/polygon_layer/polygonlayer.zh.md @@ -2,6 +2,7 @@ title: PolygonLayer order: 0 --- + `markdown:docs/common/style.md` 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。