From 83a1b840dff765f9b6365f3b10b9adc0369199f6 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Tue, 7 Jan 2020 21:15:23 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20update=20=E5=9B=BE=E5=B1=82=E5=BC=95?= =?UTF-8?q?=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/layer/heatmap_layer/grid.en.md | 14 +++- docs/api/layer/heatmap_layer/grid.zh.md | 12 +++- docs/api/layer/heatmap_layer/hexagon.en.md | 8 ++- docs/api/layer/heatmap_layer/hexagon.zh.md | 11 ++- docs/api/layer/heatmap_layer/normal.en.md | 7 ++ docs/api/layer/heatmap_layer/normal.zh.md | 7 ++ .../layer/{image_layer => }/imagelayer.en.md | 8 ++- .../layer/{image_layer => }/imagelayer.zh.md | 10 +-- docs/api/layer/layer.en.md | 4 +- docs/api/layer/layer.zh.md | 5 +- docs/api/layer/line_layer/arc.en.md | 39 +++++------ docs/api/layer/line_layer/arc.zh.md | 43 ++++++------ docs/api/layer/line_layer/path.en.md | 49 +++++++++++++ docs/api/layer/line_layer/path.zh.md | 2 +- docs/api/layer/point_layer/bubble.en.md | 60 +++++++++++++++- docs/api/layer/point_layer/cluster.en.md | 68 ++++++++++++++++++- docs/api/layer/point_layer/dot.en.md | 4 ++ docs/api/layer/point_layer/dot.zh.md | 3 + docs/api/layer/point_layer/scatter.en.md | 43 ++++++++++++ .../layer/polygon_layer/polygonlayer.en.md | 12 ++-- .../layer/polygon_layer/polygonlayer.zh.md | 11 +-- docs/api/layer/raster_layer.en.md | 41 +++++++++++ docs/api/layer/raster_layer.zh.md | 40 +++++++++++ docs/api/source/raster.en.md | 27 ++++++++ docs/api/source/raster.zh.md | 27 ++++++++ docs/api/source/source.zh.md | 20 +++++- docs/tutorial/quickstart.zh.md | 2 +- examples/point/bubble/demo/color.js | 1 + examples/point/bubble/demo/point.js | 1 + examples/point/bubble/demo/world.js | 1 + examples/point/cluster/demo/cluster.js | 2 +- examples/point/column/demo/clumn_shape.js | 1 + .../point/column/demo/clumn_shape_light.js | 1 + examples/point/column/demo/column_dark.js | 1 + examples/point/column/demo/column_light.js | 1 + examples/point/scatter/demo/scatter.js | 1 + examples/point/text/demo/meta.json | 4 +- examples/point/text/demo/polygon_text.js | 8 ++- examples/point/text/index.en.md | 28 ++++++++ examples/polygon/fill/demo/fill.js | 1 + examples/polygon/fill/demo/polygon.js | 1 + examples/polygon/fill/demo/population.js | 1 + gatsby-config.js | 18 ++++- packages/l7/README.md | 2 +- stories/Components/components/Scale.tsx | 28 +++++++- stories/Layers/components/Point.tsx | 3 +- stories/Picking/components/Highlight.tsx | 25 ++++++- 47 files changed, 621 insertions(+), 85 deletions(-) rename docs/api/layer/{image_layer => }/imagelayer.en.md (84%) rename docs/api/layer/{image_layer => }/imagelayer.zh.md (80%) create mode 100644 docs/api/layer/line_layer/path.en.md create mode 100644 docs/api/layer/point_layer/scatter.en.md create mode 100644 docs/api/layer/raster_layer.en.md create mode 100644 docs/api/layer/raster_layer.zh.md create mode 100644 docs/api/source/raster.en.md create mode 100644 docs/api/source/raster.zh.md diff --git a/docs/api/layer/heatmap_layer/grid.en.md b/docs/api/layer/heatmap_layer/grid.en.md index 617350c29e..0d347accfa 100644 --- a/docs/api/layer/heatmap_layer/grid.en.md +++ b/docs/api/layer/heatmap_layer/grid.en.md @@ -6,6 +6,13 @@ order: 1 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 +## 使用 + +```javascript +import { HeatMapLayer] } from '@antv/l7'; + +``` + ## source 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson. @@ -41,19 +48,20 @@ layer.source(data, { 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 -#### 2d +### 2d - circle, - triangle - square -- heaxgon +- hexagon ```javascript + layer.shape(circle); ``` -#### 3d +### 3d - cylinder - triangleColumn diff --git a/docs/api/layer/heatmap_layer/grid.zh.md b/docs/api/layer/heatmap_layer/grid.zh.md index acb1f1d64c..4cc7924b39 100644 --- a/docs/api/layer/heatmap_layer/grid.zh.md +++ b/docs/api/layer/heatmap_layer/grid.zh.md @@ -5,6 +5,12 @@ order: 1 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 +## 使用 +```javascript +import { HeatMapLayer] } from '@antv/l7'; + +``` + ## source 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson. @@ -40,7 +46,7 @@ layer.source(data, { 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 -#### 2d +### 2d - circle, - triangle @@ -52,7 +58,7 @@ layer.shape(circle); ``` -#### 3d +### 3d - cylinder - triangleColumn @@ -102,7 +108,7 @@ layer.size('value', (value)=>{}) // 回调函数设置高度 ## 完整实例代码 ```javascript -onst layer = new HeatmapLayer({}) +const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', diff --git a/docs/api/layer/heatmap_layer/hexagon.en.md b/docs/api/layer/heatmap_layer/hexagon.en.md index 5d84a24070..8493c7bb78 100644 --- a/docs/api/layer/heatmap_layer/hexagon.en.md +++ b/docs/api/layer/heatmap_layer/hexagon.en.md @@ -4,6 +4,10 @@ order: 1 --- 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 +## 使用 +```javascript +import { HeatMapLayer] } from '@antv/l7'; +``` ## source 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson. @@ -39,7 +43,7 @@ layer.source(data, { 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 -#### 2d +### 2d - circle, - triangle @@ -51,7 +55,7 @@ layer.shape(circle); ``` -#### 3d +### 3d - cylinder - triangleColumn diff --git a/docs/api/layer/heatmap_layer/hexagon.zh.md b/docs/api/layer/heatmap_layer/hexagon.zh.md index 58547e137a..f13b7144e8 100644 --- a/docs/api/layer/heatmap_layer/hexagon.zh.md +++ b/docs/api/layer/heatmap_layer/hexagon.zh.md @@ -5,6 +5,13 @@ order: 1 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 +## 使用 + +```javascript +import { HeatMapLayer] } from '@antv/l7'; + +``` + ## source 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson. @@ -41,7 +48,7 @@ layer.source(data, { 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 -#### 2d +### 2d - circle, - triangle @@ -53,7 +60,7 @@ layer.shape(circle); ``` -#### 3d +### 3d - cylinder - triangleColumn diff --git a/docs/api/layer/heatmap_layer/normal.en.md b/docs/api/layer/heatmap_layer/normal.en.md index b1b0cbde49..7705b74a5d 100644 --- a/docs/api/layer/heatmap_layer/normal.en.md +++ b/docs/api/layer/heatmap_layer/normal.en.md @@ -3,6 +3,13 @@ title: 经典热力图 order: 1 --- +## 使用 + +```javascript +import { HeatMapLayer] } from '@antv/l7'; + +``` + ## shape 常量 heatmap diff --git a/docs/api/layer/heatmap_layer/normal.zh.md b/docs/api/layer/heatmap_layer/normal.zh.md index b1b0cbde49..7705b74a5d 100644 --- a/docs/api/layer/heatmap_layer/normal.zh.md +++ b/docs/api/layer/heatmap_layer/normal.zh.md @@ -3,6 +3,13 @@ title: 经典热力图 order: 1 --- +## 使用 + +```javascript +import { HeatMapLayer] } from '@antv/l7'; + +``` + ## shape 常量 heatmap diff --git a/docs/api/layer/image_layer/imagelayer.en.md b/docs/api/layer/imagelayer.en.md similarity index 84% rename from docs/api/layer/image_layer/imagelayer.en.md rename to docs/api/layer/imagelayer.en.md index 1aa89d7da4..8a4b867e65 100644 --- a/docs/api/layer/image_layer/imagelayer.en.md +++ b/docs/api/layer/imagelayer.en.md @@ -2,13 +2,15 @@ title: ImageLayer order: 5 --- - -# ImageLayer - ## 简介 将图片添加到地图上，需要指定图片的经纬度范围 +## 使用 +```javascript +import { ImageLayer } from '@antv/l7'; +``` + ### 代码示例 ```javascript diff --git a/docs/api/layer/image_layer/imagelayer.zh.md b/docs/api/layer/imagelayer.zh.md similarity index 80% rename from docs/api/layer/image_layer/imagelayer.zh.md rename to docs/api/layer/imagelayer.zh.md index 1aa89d7da4..7998b68809 100644 --- a/docs/api/layer/image_layer/imagelayer.zh.md +++ b/docs/api/layer/imagelayer.zh.md @@ -1,13 +1,15 @@ --- -title: ImageLayer +title: 图片图层 order: 5 --- - -# ImageLayer - ## 简介 将图片添加到地图上，需要指定图片的经纬度范围 +## 使用 + +```javascript +import { ImageLayer } from '@antv/l7'; +``` ### 代码示例 diff --git a/docs/api/layer/layer.en.md b/docs/api/layer/layer.en.md index af26053af4..e2b3005a91 100644 --- a/docs/api/layer/layer.en.md +++ b/docs/api/layer/layer.en.md @@ -12,12 +12,14 @@ L7 Layer 接口设计遵循图形语法，在可视表达上 语法示例 ```javascript -new Layer(option) +const layer= new Layer(option) .source() .color() .size() .shape() .style(); + +scene.addLayer(layer) ``` ## 构造函数 diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index dd75034d6a..eb31e049d7 100644 --- a/docs/api/layer/layer.zh.md +++ b/docs/api/layer/layer.zh.md @@ -12,12 +12,15 @@ L7 Layer 接口设计遵循图形语法，在可视表达上 语法示例 ```javascript -new Layer(option) +const layer= new Layer(option) .source() .color() .size() .shape() .style(); + +scene.addLayer(layer) + ``` ## 构造函数 diff --git a/docs/api/layer/line_layer/arc.en.md b/docs/api/layer/line_layer/arc.en.md index 78e87d4bdd..7e1ab3ff8f 100644 --- a/docs/api/layer/line_layer/arc.en.md +++ b/docs/api/layer/line_layer/arc.en.md @@ -30,26 +30,7 @@ order: 1 - arc3d 3d 弧线地图 3D 视角 -### 示例代码 -```javascript -const layer = new LineLayer({}) - .source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2' - } - }) - .size(1) - .shape('arc') - .color('#8C1EB2') - .style({ - opacity: 0.8, - }); -``` ### animate #### 开启关闭动画 @@ -73,3 +54,23 @@ layer.animate({ }) ``` +### 示例代码 + +```javascript +const layer = new LineLayer({}) + .source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2' + } + }) + .size(1) + .shape('arc') + .color('#8C1EB2') + .style({ + opacity: 0.8, + }); +``` diff --git a/docs/api/layer/line_layer/arc.zh.md b/docs/api/layer/line_layer/arc.zh.md index 78e87d4bdd..8d03d67f91 100644 --- a/docs/api/layer/line_layer/arc.zh.md +++ b/docs/api/layer/line_layer/arc.zh.md @@ -29,27 +29,6 @@ order: 1 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 - arc3d 3d 弧线地图 3D 视角 - -### 示例代码 - -```javascript -const layer = new LineLayer({}) - .source(data, { - parser: { - type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2' - } - }) - .size(1) - .shape('arc') - .color('#8C1EB2') - .style({ - opacity: 0.8, - }); -``` ### animate #### 开启关闭动画 @@ -73,3 +52,25 @@ layer.animate({ }) ``` + + +### 示例代码 + +```javascript +const layer = new LineLayer({}) + .source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2' + } + }) + .size(1) + .shape('arc') + .color('#8C1EB2') + .style({ + opacity: 0.8, + }); +``` diff --git a/docs/api/layer/line_layer/path.en.md b/docs/api/layer/line_layer/path.en.md new file mode 100644 index 0000000000..5190ca91f6 --- /dev/null +++ b/docs/api/layer/line_layer/path.en.md @@ -0,0 +1,49 @@ +--- +title: Path +order: 1 +--- +用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等 + +## 使用 + +### shape +shape 设置成line即可绘制路线图 +- line + +### size +路径图线的size支持两个维度 + +- width 宽度 +- height 高度 + +```javascript + layer.size([2,10]) // 绘制宽度为2，高度为10的路径 + + layer.size('height',[]) +``` +### animate + +#### 开启关闭动画 + +```javascript +layer.animate(true) +layer.animate(false) +``` + +#### 设置动画参数 + +- duration 动画时间 单位(s)秒 +- interval 轨迹间隔, 取值区间 0 - 1 +- trailLength 轨迹长度 取值区间 0 - 1 + +```javascript +layer.animate({ + duration: 4, + interval: 0.2, + trailLength: 0.1 + +}) +``` + + + diff --git a/docs/api/layer/line_layer/path.zh.md b/docs/api/layer/line_layer/path.zh.md index 1a2602b6b4..ad9ce5a75a 100644 --- a/docs/api/layer/line_layer/path.zh.md +++ b/docs/api/layer/line_layer/path.zh.md @@ -19,7 +19,7 @@ shape 设置成line即可绘制路线图 ```javascript layer.size([2,10]) // 绘制宽度为2，高度为10的路径 - layer.size('',[]) + layer.size('height',[]) ``` ### animate diff --git a/docs/api/layer/point_layer/bubble.en.md b/docs/api/layer/point_layer/bubble.en.md index 0911915fec..452ea0e5ff 100644 --- a/docs/api/layer/point_layer/bubble.en.md +++ b/docs/api/layer/point_layer/bubble.en.md @@ -1,4 +1,62 @@ --- -title: bubble +title: 气泡图 order: 1 --- +气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。 + +## 使用 + +气泡图通过PointLayer对象实例化， + +```javascript +import { PointLayer } from '@antv/l7'; + +``` +### shape + + 通常气泡图shape 设置为 **circle** + +### size + +气泡图大小，需要指定数据映射字段 + +```javascript + +const bubble = +new PointLayer() + .source(data) + .shape(circle) + .size('mag',[0, 25]) + .color('red') + .style({ + opacity: 0.3, + strokeWidth: 1 + }) +``` + +### animate + +气泡图支持水波动画效果 + +#### 开启关闭动画 + +```javascript +layer.animate(true) +layer.animate(false) +``` +#### 水波配置项 + +- speed 水波速度 +- rings 水波环数 + + + +## tips + +目前style的配置项只支持全局设置，不支持数据映射。 + +如果 opacity 设置为 0.3 则所有的气泡都是 0.3 + +style方法如果没有设置 stroke, 默认于气泡的填充色相同 + + diff --git a/docs/api/layer/point_layer/cluster.en.md b/docs/api/layer/point_layer/cluster.en.md index d8cd791560..d8edbb3299 100644 --- a/docs/api/layer/point_layer/cluster.en.md +++ b/docs/api/layer/point_layer/cluster.en.md @@ -2,8 +2,72 @@ title: 聚合图 order: 5 --- +## 使用 + +目前只有点数据支持聚类方法 + +数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数 + +### Source +[source 文档](../../source/source) + +### 配置项 + - cluster **boolean** 是否聚合 + - clusterOption 聚合配置项 + - radius 聚合半径 **number** default 40 + - minZoom: 最小聚合缩放等级 **number** default 0 + - maxZoom: 最大聚合缩放等级 **number** default 16 + +数据聚合之后，源数据会增加 point_count属性，在可视化渲染时可以根据 point_count 进行数据映射。 + +#### 方法 + + **getClusters(zoom: number)** + + 获取指定缩放等级的聚合数据 + + - zoom 缩放等级 + + **getClustersLeaves(id: string)** + + 根据id获取聚合节点的数据 + + - id 聚合数据id + + -##使用 +```javascript -目前只有点图层支持聚类方法 +layer.source(pointsData, { + cluster: true, + }); + +// 设置配置项 +layer.source(pointsData, { + cluster: true, + clusterOption:{ + radius:40, + } + }); +``` + + +### 完整示例 + +```javascript +const pointLayer = new PointLayer({}) + .source(pointsData, { + cluster: true, + }) + .shape('circle') + .scale('point_count', { + type: 'quantile', + }) + .size('point_count', [5, 10, 15, 20, 25]) + .color('red') + .style({ + opacity: 0.3, + strokeWidth: 1, + }); +``` diff --git a/docs/api/layer/point_layer/dot.en.md b/docs/api/layer/point_layer/dot.en.md index be0809b75b..cb67c57374 100644 --- a/docs/api/layer/point_layer/dot.en.md +++ b/docs/api/layer/point_layer/dot.en.md @@ -7,8 +7,11 @@ order: 3 ## 使用 ### shape + - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape + ### color + - 无权重 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮 - 有权重 @@ -16,6 +19,7 @@ order: 3 ```javascript + const pointLayer = new PointLayer() .source(data) .size(2) diff --git a/docs/api/layer/point_layer/dot.zh.md b/docs/api/layer/point_layer/dot.zh.md index be0809b75b..7e63a90809 100644 --- a/docs/api/layer/point_layer/dot.zh.md +++ b/docs/api/layer/point_layer/dot.zh.md @@ -8,7 +8,9 @@ order: 3 ### shape - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape + ### color + - 无权重 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮 - 有权重 @@ -16,6 +18,7 @@ order: 3 ```javascript + const pointLayer = new PointLayer() .source(data) .size(2) diff --git a/docs/api/layer/point_layer/scatter.en.md b/docs/api/layer/point_layer/scatter.en.md new file mode 100644 index 0000000000..9ee1fac6de --- /dev/null +++ b/docs/api/layer/point_layer/scatter.en.md @@ -0,0 +1,43 @@ +--- +title: 散点图 +order: 2 +--- +在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。 + +## 使用 +散点图通过PointLayer对象实例化 + +### shape + +- circle +- square +- hexagon +- triangle +- pentagon +- octogon +- hexagram +- rhombus +- vesica + +散点图shape 一般设置成常量 + +### color + +color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。 + +### size +散点图一般等大小的图形,size 一般设置成常量 + +```javascript + +const scatter = +new PointLayer() + .source(data) + .shape(circle) + .size(5) + .color('red') + .style({ + opacity: 0.3, + strokeWidth: 1 + }) +``` diff --git a/docs/api/layer/polygon_layer/polygonlayer.en.md b/docs/api/layer/polygon_layer/polygonlayer.en.md index 91688b3e0e..55e7fbb1ca 100644 --- a/docs/api/layer/polygon_layer/polygonlayer.en.md +++ b/docs/api/layer/polygon_layer/polygonlayer.en.md @@ -2,12 +2,16 @@ title: PolygonLayer order: 0 --- - -# 填充图 - 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 -### shape +## 使用 + +```javascript +import { PolygonLayer } from '@antv/l7'; + +``` + +## shape 填充图支持 3 种 shape diff --git a/docs/api/layer/polygon_layer/polygonlayer.zh.md b/docs/api/layer/polygon_layer/polygonlayer.zh.md index 91688b3e0e..10d940b670 100644 --- a/docs/api/layer/polygon_layer/polygonlayer.zh.md +++ b/docs/api/layer/polygon_layer/polygonlayer.zh.md @@ -2,12 +2,15 @@ title: PolygonLayer order: 0 --- - -# 填充图 - 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 -### shape +## 使用 + +```javascript +import { PolygonLayer } from '@antv/l7'; +``` + +## shape 填充图支持 3 种 shape diff --git a/docs/api/layer/raster_layer.en.md b/docs/api/layer/raster_layer.en.md new file mode 100644 index 0000000000..80fd9c40df --- /dev/null +++ b/docs/api/layer/raster_layer.en.md @@ -0,0 +1,41 @@ +--- +title: Raster +order: 5 +--- + +Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。 + +L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为Source 传入。 + +## 使用 + +```javascript +import { RasterLayer } from '@antv/l7'; +``` + +## source + + 见 [raster source](../source/raster) + +## shape + + ```raster``` + +## size +无 +## color +无 +## style + +- clampLow Boolean 默认 false, 设置为true，低于domain的数据将不显示 +- clampHigh Boolean 默认 false, 设置为true，高于domain的数据将不显示 +- opacity: 0.8 Number 透明度 +- domain: [ 0, 8000 ] 数据映射区间 +- noDataValue Number noDataValue 不会显示 +- rampColors: { + colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(), + positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] + } // 色带 + + :warning: color, position 的长度要相同 + diff --git a/docs/api/layer/raster_layer.zh.md b/docs/api/layer/raster_layer.zh.md new file mode 100644 index 0000000000..92b879b271 --- /dev/null +++ b/docs/api/layer/raster_layer.zh.md @@ -0,0 +1,40 @@ +--- +title: 栅格图层 +order: 5 +--- + +Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。 + +L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为Source 传入。 +## 使用 + +```javascript +import { RasterLayer } from '@antv/l7'; +``` + +## source + + 见 [raster source](../source/raster) + +## shape + + ```raster``` + +## size +无 +## color +无 +## style + +- clampLow Boolean 默认 false, 设置为true，低于domain的数据将不显示 +- clampHigh Boolean 默认 false, 设置为true，高于domain的数据将不显示 +- opacity: 0.8 Number 透明度 +- domain: [ 0, 8000 ] 数据映射区间 +- noDataValue Number noDataValue 不会显示 +- rampColors: { + colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(), + positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] + } // 色带 + + :warning: color, position 的长度要相同 + diff --git a/docs/api/source/raster.en.md b/docs/api/source/raster.en.md new file mode 100644 index 0000000000..c581ee58dc --- /dev/null +++ b/docs/api/source/raster.en.md @@ -0,0 +1,27 @@ +--- +title: Raster +order: 5 +--- + +Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。 + +## parser + +- type: raster +- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat] +- width 数据宽度 +- height 数据高度 + +根据图片的经纬度范围，将图片添加到地图上。 + +```javascript +layer.source( + 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', + { + parser: { + type: 'raster', + extent: [121.168, 30.2828, 121.384, 30.4219], + }, + }, +); +``` diff --git a/docs/api/source/raster.zh.md b/docs/api/source/raster.zh.md new file mode 100644 index 0000000000..80b9fd5254 --- /dev/null +++ b/docs/api/source/raster.zh.md @@ -0,0 +1,27 @@ +--- +title: 栅格 +order: 5 +--- + +Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。 + +## parser + +- type: raster +- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat] +- width 数据宽度 +- height 数据高度 + +根据图片的经纬度范围，将图片添加到地图上。 + +```javascript +layer.source( + 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', + { + parser: { + type: 'raster', + extent: [121.168, 30.2828, 121.384, 30.4219], + }, + }, +); +``` diff --git a/docs/api/source/source.zh.md b/docs/api/source/source.zh.md index 5ba2121752..ddf88abd52 100644 --- a/docs/api/source/source.zh.md +++ b/docs/api/source/source.zh.md @@ -80,6 +80,23 @@ layer.setData(data); ### transforms + tranforms 处理的是的标准化之后的数据 + 标准化之后的数据结构包括 coordinates 地理坐标字段，以及其他属性字段。 + + 处理完之后返回的也是标准数据 + +``` javascript + [{ + coordinates: [[]] // 地理坐标字段 + _id:'',// 标准化之后新增字段 + name:'' + value:'' + // .... + }] + + +``` + 目前支持两种热力图使用的数据处理方法 grid，hexagon transform 配置项 - type 数据处理类型 @@ -95,6 +112,7 @@ layer.setData(data); - method:聚合方法   count,max,min,sum,mean5 个统计维度 ```javascript + layer.source(data, { transforms: [ { @@ -105,8 +123,8 @@ layer.source(data, { }, ], }); -``` +``` #### hexagon 生成六边形网格布局，根据数据字段统计 diff --git a/docs/tutorial/quickstart.zh.md b/docs/tutorial/quickstart.zh.md index 5e20272393..cbab7889ec 100644 --- a/docs/tutorial/quickstart.zh.md +++ b/docs/tutorial/quickstart.zh.md @@ -37,7 +37,7 @@ Install the npm package. ```bash // L7 依赖 -npm install --save @antv/l7@beta +npm install --save @antv/l7 // 第三方底图依赖 npm install --save @antv/l7-maps; diff --git a/examples/point/bubble/demo/color.js b/examples/point/bubble/demo/color.js index 47b8b8fa83..c0f5ca28b0 100644 --- a/examples/point/bubble/demo/color.js +++ b/examples/point/bubble/demo/color.js @@ -36,6 +36,7 @@ fetch( 'vesica' ]) .size('unit_price', [ 10, 25 ]) + .active(true) .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ]) .style({ opacity: 0.3, diff --git a/examples/point/bubble/demo/point.js b/examples/point/bubble/demo/point.js index e167950498..e50e064c23 100644 --- a/examples/point/bubble/demo/point.js +++ b/examples/point/bubble/demo/point.js @@ -25,6 +25,7 @@ fetch( .color('mag', mag => { return mag > 4.5 ? '#5B8FF9' : '#5CCEA1'; }) + .active(true) .style({ opacity: 0.3, strokeWidth: 1 diff --git a/examples/point/bubble/demo/world.js b/examples/point/bubble/demo/world.js index b30c794a67..fa2d1a5787 100644 --- a/examples/point/bubble/demo/world.js +++ b/examples/point/bubble/demo/world.js @@ -31,6 +31,7 @@ fetch( '#A1EDB8', '#CEF8D6' ]) + .active(true) .style({ opacity: 0.5, strokeWidth: 0 diff --git a/examples/point/cluster/demo/cluster.js b/examples/point/cluster/demo/cluster.js index 4a49edd008..aa5ebd4507 100644 --- a/examples/point/cluster/demo/cluster.js +++ b/examples/point/cluster/demo/cluster.js @@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842 type: 'quantile' }) .size('point_count', [ 5, 10, 15, 20, 25 ]) - .animate(false) + .active(true) .color('yellow') .style({ opacity: 0.5, diff --git a/examples/point/column/demo/clumn_shape.js b/examples/point/column/demo/clumn_shape.js index a0d134a043..591c7c7276 100644 --- a/examples/point/column/demo/clumn_shape.js +++ b/examples/point/column/demo/clumn_shape.js @@ -25,6 +25,7 @@ fetch( y: 'latitude' } }) + .active(true) .shape('name', [ 'cylinder', 'triangleColumn', diff --git a/examples/point/column/demo/clumn_shape_light.js b/examples/point/column/demo/clumn_shape_light.js index c3ad3a2cb0..930dd98231 100644 --- a/examples/point/column/demo/clumn_shape_light.js +++ b/examples/point/column/demo/clumn_shape_light.js @@ -31,6 +31,7 @@ fetch( 'hexagonColumn', 'squareColumn' ]) + .active(true) .size('unit_price', h => { return [ 6, 6, h / 500 ]; }) diff --git a/examples/point/column/demo/column_dark.js b/examples/point/column/demo/column_dark.js index b2c3ea49fe..d012a0f878 100644 --- a/examples/point/column/demo/column_dark.js +++ b/examples/point/column/demo/column_dark.js @@ -26,6 +26,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .size('t', function(level) { return [ 1, 2, level * 2 + 20 ]; }) + .active(true) .color('t', [ '#094D4A', '#146968', diff --git a/examples/point/column/demo/column_light.js b/examples/point/column/demo/column_light.js index e8470d47e7..0e06b97cf6 100644 --- a/examples/point/column/demo/column_light.js +++ b/examples/point/column/demo/column_light.js @@ -27,6 +27,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .size('t', function(level) { return [ 1, 2, level * 2 + 20 ]; }) + .active(true) .color('#006CFF') .style({ opacity: 1.0 diff --git a/examples/point/scatter/demo/scatter.js b/examples/point/scatter/demo/scatter.js index f09afbfdce..4c4adf0e6e 100644 --- a/examples/point/scatter/demo/scatter.js +++ b/examples/point/scatter/demo/scatter.js @@ -26,6 +26,7 @@ fetch( }) .shape('circle') .size(4) + .active(true) .color('Magnitude', [ '#0A3663', '#1558AC', diff --git a/examples/point/text/demo/meta.json b/examples/point/text/demo/meta.json index 6ef3d3e083..603cfec008 100644 --- a/examples/point/text/demo/meta.json +++ b/examples/point/text/demo/meta.json @@ -7,12 +7,12 @@ { "filename": "point_text.js", "title": "点数据标注", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ" }, { "filename": "polygon_text.js", "title": "面数据标注", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ" } ] diff --git a/examples/point/text/demo/polygon_text.js b/examples/point/text/demo/polygon_text.js index 5ae1ae1e0c..598cbf6b4f 100644 --- a/examples/point/text/demo/polygon_text.js +++ b/examples/point/text/demo/polygon_text.js @@ -22,7 +22,13 @@ fetch( .shape('name', 'text') .size(18) .style({ - opacity: 0.8 + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 + strokeOpacity: 1.0 }); scene.addLayer(layer); }); diff --git a/examples/point/text/index.en.md b/examples/point/text/index.en.md index 0db29cdff9..dbcfb0ff41 100644 --- a/examples/point/text/index.en.md +++ b/examples/point/text/index.en.md @@ -2,3 +2,31 @@ title: label order: 1 --- +文本标注图层 + +## 使用 + +## shape +- text +文本渲染需要将指定字段的shape设置成 text + +```javascript +layer.shape('name','text') +``` +## color + + 同layer color + +## size + + 同layer size + +## style + +- textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left +- textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] +- spacing: 2, // 字符间距 +- padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 +- stroke: '#ffffff', // 描边颜色 +- strokeWidth: 0.3, // 描边宽度 +- strokeOpacity: 1.0 diff --git a/examples/polygon/fill/demo/fill.js b/examples/polygon/fill/demo/fill.js index 06feefed18..e437e578bb 100644 --- a/examples/polygon/fill/demo/fill.js +++ b/examples/polygon/fill/demo/fill.js @@ -34,6 +34,7 @@ fetch( ].reverse() ) .shape('fill') + .active(true) .style({ opacity: 1 }); diff --git a/examples/polygon/fill/demo/polygon.js b/examples/polygon/fill/demo/polygon.js index a5b2b9db05..71502592d9 100644 --- a/examples/polygon/fill/demo/polygon.js +++ b/examples/polygon/fill/demo/polygon.js @@ -28,6 +28,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json') .source(data) .color('name', colors) .shape('fill') + .active(true) .style({ opacity: 0.9 }); diff --git a/examples/polygon/fill/demo/population.js b/examples/polygon/fill/demo/population.js index e014c809a4..011c51b749 100644 --- a/examples/polygon/fill/demo/population.js +++ b/examples/polygon/fill/demo/population.js @@ -47,6 +47,7 @@ Promise.all([ }) .color('female', colors) .shape('fill') + .active(true) .style({ opacity: 0.9 }); diff --git a/gatsby-config.js b/gatsby-config.js index 7cfe211e50..f8b87173b9 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -117,13 +117,29 @@ module.exports = { }, order: 4 }, + { + slug: 'api/layer/image_layer', + title: { + zh: '图片图层', + en: 'IMageLayer' + }, + order: 5 + }, + { + slug: 'api/layer/raster_layer', + title: { + zh: '栅格图', + en: 'RasterLayer' + }, + order: 6 + }, { slug: 'api/layer/cityBuilding', title: { zh: '城市建筑', en: 'CityBuilding' }, - order: 6 + order: 8 }, { slug: 'api/source', diff --git a/packages/l7/README.md b/packages/l7/README.md index f1ff969e9b..881a6bb0cb 100644 --- a/packages/l7/README.md +++ b/packages/l7/README.md @@ -11,7 +11,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework ### Installation ``` - npm install @antv/l7@beta + npm install @antv/l7 ``` diff --git a/stories/Components/components/Scale.tsx b/stories/Components/components/Scale.tsx index dcc52eebb6..b5e218a875 100644 --- a/stories/Components/components/Scale.tsx +++ b/stories/Components/components/Scale.tsx @@ -1,5 +1,5 @@ // @ts-ignore -import { PolygonLayer, Scale, Scene } from '@antv/l7'; +import { PolygonLayer, Scale, Scene, PointLayer } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; import * as React from 'react'; @@ -14,11 +14,15 @@ export default class ScaleComponent extends React.Component { const response = await fetch( 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', ); + const response2 = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', + ); + const pointsData = await response2.json(); const data = await response.json(); const scene = new Scene({ id: 'map', map: new Mapbox({ - style: 'mapbox://styles/mapbox/streets-v9', + style: 'dark', center: [110.19382669582967, 30.258134], pitch: 0, zoom: 3, @@ -40,10 +44,28 @@ export default class ScaleComponent extends React.Component { ]) .shape('fill') .style({ - opacity: 0.3, + opacity: 1.0, }); scene.addLayer(layer); + const pointLayer = new PointLayer() + .source(pointsData, { + cluster: true, + }) + .shape('circle') + .scale('point_count', { + type: 'quantile', + }) + .size('point_count', [5, 10, 15, 20, 25]) + .animate(false) + .active(true) + .color('yellow') + .style({ + opacity: 0.5, + strokeWidth: 1, + }); + scene.addLayer(pointLayer); + const scaleControl = new Scale(); scene.addControl(scaleControl); } diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index d0f41040a8..d97f5a2fc6 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -19,7 +19,7 @@ export default class Point3D extends React.Component { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ center: [120.19382669582967, 30.258134], pitch: 0, style: 'dark', @@ -37,6 +37,7 @@ export default class Point3D extends React.Component { }) .size('point_count', [5, 10, 15, 20, 25]) .animate(false) + .active(true) .color('yellow') .style({ opacity: 0.5, diff --git a/stories/Picking/components/Highlight.tsx b/stories/Picking/components/Highlight.tsx index beeb6de485..6c1d711e36 100644 --- a/stories/Picking/components/Highlight.tsx +++ b/stories/Picking/components/Highlight.tsx @@ -1,5 +1,5 @@ // @ts-ignore -import { PolygonLayer, Scene } from '@antv/l7'; +import { PolygonLayer, Scene, PointLayer } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; import * as dat from 'dat.gui'; import * as React from 'react'; @@ -23,10 +23,14 @@ export default class Highlight extends React.Component { const response = await fetch( 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', ); + const response2 = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', + ); + const pointsData = await response2.json(); const scene = new Scene({ id: 'map', map: new Mapbox({ - style: 'mapbox://styles/mapbox/streets-v9', + style: 'dark', center: [110.19382669582967, 50.258134], pitch: 0, zoom: 3, @@ -58,6 +62,23 @@ export default class Highlight extends React.Component { opacity: 1.0, }); scene.addLayer(layer); + const pointLayer = new PointLayer() + .source(pointsData, { + cluster: true, + }) + .shape('circle') + .scale('point_count', { + type: 'quantile', + }) + .size('point_count', [5, 10, 15, 20, 25]) + .animate(false) + .active(true) + .color('yellow') + .style({ + opacity: 0.5, + strokeWidth: 1, + }); + scene.addLayer(pointLayer); this.scene = scene; /*** 运行时修改样式属性 ***/