p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Shihui (#1001) 

* docs: 完善官网关于雷达图的文档和 demo

* style: lint style

* docs: 完善官网关于水面的 demo 和文档

* style: lint style

* docs: 官网案例页面展示图片替换小图片
This commit is contained in:
YiQianYao 2022-03-11 16:15:24 +08:00 committed by GitHub
parent 749af46ea5
commit 490b3fcd94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 282 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/api/point_layer/radar.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: Radar point
order: 3
---
`markdown:docs/api/point_layer/radar.zh.md`

38
docs/api/point_layer/radar.zh.md Normal file
View File

@ -0,0 +1,38 @@
---
title: 雷达图
order: 3
---
`markdown:docs/common/style.md`
点图层还支持一种特殊的图层类型：雷达图。
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*YJmVRpmW7FEAAAAAAAAAAAAAARQnAQ'>
## 使用
🌟 从 v2.8.3 版本开始支持雷达图。
### shape
- radar
### animate
雷达图需要显示设置为 true
```javascript
.animate(true)
.animate({
enable: true
})
```
#### style 配置项
- speed 旋转速度，默认为 1，值越大转速越快
[在线案例](../../../examples/point/scatter#radarPoint)
`markdown:docs/common/layer/base.md`

6
docs/api/polygon_layer/water.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: Water Layer
order: 2
---
`markdown:docs/api/polygon_layer/water.zh.md`

70
docs/api/polygon_layer/water.zh.md Normal file
View File

@ -0,0 +1,70 @@
---
title: 水面图层
order: 2
---
`markdown:docs/common/style.md`
## 使用
水面图层是对 PolygonLayer 的扩展，因此在使用上和普通的 PolygonLayer 的图层类似。
🌟 从 v2.8.1 版本开始支持简单水面。
🌟 从 v2.8.4 版本开始支持拟真水面。
## 拟真水面
<img width="60%" style="display: block;margin: 0 auto;" alt="拟真水面" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*BiawTbtX-CYAAAAAAAAAAAAAARQnAQ">
### shape
我们需要设置 shape 为 ocean
### animate
我们需要显示的设置 animate 为 true
```javascript
layer.aniamte(true);
```
### style 配置
- watercolor 浅水区域的颜色 默认为 '#6D99A8'
- watercolor2 深水区域的颜色 默认为 '#0F121C'
[在线案例](../../../examples/polygon/fill#ocean)
## 简单水面
<img width="60%" style="display: block;margin: 0 auto;" alt="简单水面" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1kqvSYvWP3MAAAAAAAAAAAAAARQnAQ">
### shape
我们需要设置 shape 为 water
### animate
我们需要显示的设置 animate 为 true
```javascript
layer.aniamte(true);
```
### style 配置
- speed 我们可以通过 speed 来控制水面的流速度
```javascript
style({
speed: 0.5,
});
```
- waterTexture 我们可以通过设置该属性来替换水面的纹理
默认值是 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
[在线案例](../../../examples/polygon/fill#water)
`markdown:docs/common/layer/base.md`

16
examples/gallery/animate/demo/meta.json
View File

@ -7,42 +7,42 @@
{ {
"filename": "grid.js", "filename": "grid.js",
"title": "网格地图", "title": "网格地图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*HulgSKEJAKMAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*h-AMQodd7s4AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "build_sweep.js", "filename": "build_sweep.js",
"title": "圆形扫光城市", "title": "圆形扫光城市",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KiwgTLrn0OkAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*TVs2R4bBH6wAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "wind.js", "filename": "wind.js",
"title": "风场图层", "title": "风场图层",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Kp0XTrOMu8wAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*K6NHRL_fjTQAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "amap_car.js", "filename": "amap_car.js",
"title": "旅行轨迹", "title": "旅行轨迹",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*d7EtTpdsScIAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ghmURqau13sAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "animate_path_texture.js", "filename": "animate_path_texture.js",
"title": "路径贴图", "title": "路径贴图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0DwvSIHihVEAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "plane_animate.js", "filename": "plane_animate.js",
"title": "航向图", "title": "航向图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*B645Q4K9PxYAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*8h-QSqDgzxYAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "turin.js", "filename": "turin.js",
"title": "都灵道路图", "title": "都灵道路图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mo_7Q6sTqOIAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*P1o6R7jm0JsAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "route_line.js", "filename": "route_line.js",
"title": "航线图", "title": "航线图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qRFaR7Ko274AAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*NEKUR6HzXFEAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

12
examples/gallery/basic/demo/meta.json
View File

@ -7,33 +7,33 @@
{ {
"filename": "column_dark.js", "filename": "column_dark.js",
"title": "3D柱图深色", "title": "3D柱图深色",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FGjMT4CenkkAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "arcCircle.js", "filename": "arcCircle.js",
"title": "弧线地图", "title": "弧线地图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*hX_VQ5q77xMAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "bus_dark.js", "filename": "bus_dark.js",
"title": "公交线路深色", "title": "公交线路深色",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*cvU2R7WFfeAAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "light.js", "filename": "light.js",
"title": "蜂窝图3D", "title": "蜂窝图3D",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*PtMUR6hsN9EAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "point.js", "filename": "point.js",
"title": "海量点", "title": "海量点",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OiQxQKq-P9MAAAAAAAAAAAAAARQnAQ"
} }
, ,
{ {
"filename": "normal.js", "filename": "normal.js",
"title": "亮度图", "title": "亮度图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qI2gRo_w0XoAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

9
examples/point/bubble/demo/meta.json
View File

@ -7,23 +7,22 @@
{ {
"filename": "point.js", "filename": "point.js",
"title": "气泡图", "title": "气泡图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fNGiS7YI1tIAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*BGJfT5GYaZAAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "color.js", "filename": "color.js",
"title": "形状映射", "title": "形状映射",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iN0nTYRDd3AAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*p48-TK_yGZ8AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "world.js", "filename": "world.js",
"title": "气泡图", "title": "气泡图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*v5j_QZEL-1YAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ecV4T63Yk40AAAAAAAAAAAAAARQnAQ"
}, { }, {
"filename": "scatter.js", "filename": "scatter.js",
"title": "气泡图动画", "title": "气泡图动画",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*L-wETZt7WHwAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Jd4HQpnWQaQAAAAAAAAAAAAAARQnAQ"
} }

6
examples/point/chart/demo/meta.json
View File

@ -7,17 +7,17 @@
{ {
"filename": "bar.js", "filename": "bar.js",
"title": "柱图", "title": "柱图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*XEPUSISnWUAAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "chart.js", "filename": "chart.js",
"title": "环图", "title": "环图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X06uT50Ll7QAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EqfuRqkVZG4AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "ring.js", "filename": "ring.js",
"title": "环图", "title": "环图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-oG0T64BnZoAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*_pt_RoTbm0MAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

4
examples/point/cluster/demo/meta.json
View File

@ -7,12 +7,12 @@
{ {
"filename": "cluster.js", "filename": "cluster.js",
"title": "聚合图", "title": "聚合图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*_KdAR67mrNUAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "cluster2.js", "filename": "cluster2.js",
"title": "充电桩分布聚合图", "title": "充电桩分布聚合图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*dy0NSJHoRSYAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ATjEQKEScq8AAAAAAAAAAAAAARQnAQ"
} }
] ]

10
examples/point/column/demo/meta.json
View File

@ -7,27 +7,27 @@
{ {
"filename": "column_light.js", "filename": "column_light.js",
"title": "3D柱图 光标", "title": "3D柱图 光标",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*_TDOQqKJSsIAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*UGw1T6ms2D0AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "column_linear.js", "filename": "column_linear.js",
"title": "3D 渐变柱图", "title": "3D 渐变柱图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*txz2TbKe7YEAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GJhASbfQTK8AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "clumn_shape_light.js", "filename": "clumn_shape_light.js",
"title": "3D 浅色柱图", "title": "3D 浅色柱图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*D5OLTLz79kQAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*msKiTojYyhwAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "column_dark.js", "filename": "column_dark.js",
"title": "3D柱图 深色底图", "title": "3D柱图 深色底图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GPSqRpn-_TAAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FG4fT7h5AYMAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "clumn_shape.js", "filename": "clumn_shape.js",
"title": "3D 深色柱图", "title": "3D 深色柱图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*3aKjS56f6OYAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*9EoxQpBxNyIAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

4
examples/point/dot/demo/meta.json
View File

@ -7,12 +7,12 @@
{ {
"filename": "normal2.js", "filename": "normal2.js",
"title": "城市亮度图", "title": "城市亮度图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OiQxQKq-P9MAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "normal.js", "filename": "normal.js",
"title": "海量点", "title": "海量点",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qI2gRo_w0XoAAAAAAAAAAAAAARQnAQ"
} }
] ]

10
examples/point/image/demo/meta.json
View File

@ -7,27 +7,27 @@
{ {
"filename": "image.js", "filename": "image.js",
"title": "符号图", "title": "符号图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oVyHT5S3sv0AAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*uzwBSLxwZGMAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "fillimage.js", "filename": "fillimage.js",
"title": "台风路径模拟", "title": "台风路径模拟",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*yJLsS44dI14AAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mWtoQbgBCDEAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "locate.js", "filename": "locate.js",
"title": "精确符号", "title": "精确符号",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DgoWS7-XKdUAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*rkFFQYBOJt4AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "weather.js", "filename": "weather.js",
"title": "天气", "title": "天气",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-nk1RZJeGooAAAAAAAAAAABkARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CC5YRp2OY3gAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "road.js", "filename": "road.js",
"title": "路线图", "title": "路线图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*DT1yQb5cqmIAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*N-9MRZLlPXgAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

6
examples/point/marker/demo/meta.json
View File

@ -7,19 +7,19 @@
{ {
"filename": "markerlayer.js", "filename": "markerlayer.js",
"title": "MarkerLayer 统一管理Marker", "title": "MarkerLayer 统一管理Marker",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*RC80R7x7aV0AAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*zb-0TrdH8wUAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "clustermarker.js", "filename": "clustermarker.js",
"title": "MarkerLayer 聚合Marker", "title": "MarkerLayer 聚合Marker",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*YbNZRZP69IcAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*h6_kQKiM2cwAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "marker.js", "filename": "marker.js",
"title": "温度", "title": "温度",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*2MTARZusZmwAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*m0rwQZBpZ6MAAAAAAAAAAAAAARQnAQ"
} }
] ]

9
examples/point/scatter/demo/meta.json
View File

@ -7,7 +7,7 @@
{ {
"filename": "scatter.js", "filename": "scatter.js",
"title": "散点图", "title": "散点图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*hH8lT6AWcqEAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "dynamicScatter.js", "filename": "dynamicScatter.js",
@ -22,7 +22,12 @@
{ {
"filename": "animatePoint.js", "filename": "animatePoint.js",
"title": "水波散点", "title": "水波散点",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*uuT9Rox3eKoAAAAAAAAAAAAAARQnAQ" "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*N7KDR4kfIDQAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "radarPoint.js",
"title": "雷达图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*nfAwRaTOYj0AAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

39
examples/point/scatter/demo/radarPoint.js Normal file
View File

@ -0,0 +1,39 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
center: [ 120, 30 ],
zoom: 13
})
});
const layer = new PointLayer()
.source(
[
{
lng: 120,
lat: 30
}
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
}
)
.shape('radar')
.size(100)
.color('#d00')
.style({
speed: 5
})
.animate(true);
scene.on('loaded', () => {
scene.addLayer(layer);
});

2
examples/point/simple/demo/meta.json
View File

@ -7,7 +7,7 @@
{ {
"filename": "simple.js", "filename": "simple.js",
"title": "简单点图层", "title": "简单点图层",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*X5UJT7cF13QAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*NHMmTr0SMFQAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

14
examples/point/text/demo/meta.json
View File

@ -7,37 +7,37 @@
{ {
"filename": "point_text.js", "filename": "point_text.js",
"title": "点数据标注", "title": "点数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*9j1wR5V1580AAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*QAfOQr1alNoAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "polygon_text.js", "filename": "polygon_text.js",
"title": "面数据标注", "title": "面数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KmnXTK3jJkUAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1iRfT56__38AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "iconfont.js", "filename": "iconfont.js",
"title": "图标标注", "title": "图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*sny8QaWLuuEAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1Ox-T7mht18AAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "iconfonts.js", "filename": "iconfonts.js",
"title": "天气图标标注", "title": "天气图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*VQGpRrZCiIcAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*NCz5R7YA3VIAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "styleMap.js", "filename": "styleMap.js",
"title": "文本动态偏移", "title": "文本动态偏移",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ob6QQ6KBftQAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*cfShR4lVaUYAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "temperture.js", "filename": "temperture.js",
"title": "气温图标标注", "title": "气温图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*aA66Q6LG-QAAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*nvwuQIi8_9oAAAAAAAAAAAAAARQnAQ"
}, },
{ {
"filename": "updown.js", "filename": "updown.js",
"title": "走势图标标注", "title": "走势图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*excySJRz2K8AAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*LJXlRraIokAAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

10
examples/polygon/fill/demo/meta.json
View File

@ -33,6 +33,16 @@
"filename": "china_linear_out.js", "filename": "china_linear_out.js",
"title": "中国地图-径向渐变", "title": "中国地图-径向渐变",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mVAyQ4mUG9sAAAAAAAAAAAAAARQnAQ" "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mVAyQ4mUG9sAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "water.js",
"title": "简单水面",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1kqvSYvWP3MAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "ocean.js",
"title": "拟真水面",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*BiawTbtX-CYAAAAAAAAAAAAAARQnAQ"
} }
] ]
} }

30
examples/polygon/fill/demo/ocean.js Normal file
View File

@ -0,0 +1,30 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
center: [ -44.40673828125, -18.375379094031825 ],
zoom: 13
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json'
)
.then(data => data.json())
.then(({ lakeData }) => {
const lakeLayer = new PolygonLayer({ autoFit: true })
.source(lakeData)
.shape('ocean')
.color('#1E90FF')
.style({
watercolor: '#6D99A8'
// watercolor: '#0f0',
})
.animate(true);
scene.addLayer(lakeLayer);
});
});

30
examples/polygon/fill/demo/water.js Normal file
View File

@ -0,0 +1,30 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
center: [ -44.40673828125, -18.375379094031825 ],
zoom: 13
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json'
)
.then(data => data.json())
.then(({ lakeData }) => {
const lakeLayer = new PolygonLayer({ autoFit: true })
.source(lakeData)
.shape('water')
.color('#1E90FF')
.style({
speed: 0.4
// waterTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
})
.animate(true);
scene.addLayer(lakeLayer);
});
});