diff --git a/docs/api/point_layer/radar.en.md b/docs/api/point_layer/radar.en.md new file mode 100644 index 0000000000..db10c70b35 --- /dev/null +++ b/docs/api/point_layer/radar.en.md @@ -0,0 +1,6 @@ +--- +title: Radar point +order: 3 +--- + +`markdown:docs/api/point_layer/radar.zh.md` diff --git a/docs/api/point_layer/radar.zh.md b/docs/api/point_layer/radar.zh.md new file mode 100644 index 0000000000..cd1ea49e05 --- /dev/null +++ b/docs/api/point_layer/radar.zh.md @@ -0,0 +1,38 @@ +--- +title: 雷达图 +order: 3 +--- + +`markdown:docs/common/style.md` + +点图层还支持一种特殊的图层类型：雷达图。 + +案例 + +## 使用 + +🌟 从 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` diff --git a/docs/api/polygon_layer/water.en.md b/docs/api/polygon_layer/water.en.md new file mode 100644 index 0000000000..bd623e7705 --- /dev/null +++ b/docs/api/polygon_layer/water.en.md @@ -0,0 +1,6 @@ +--- +title: Water Layer +order: 2 +--- + +`markdown:docs/api/polygon_layer/water.zh.md` diff --git a/docs/api/polygon_layer/water.zh.md b/docs/api/polygon_layer/water.zh.md new file mode 100644 index 0000000000..22730faaa2 --- /dev/null +++ b/docs/api/polygon_layer/water.zh.md @@ -0,0 +1,70 @@ +--- +title: 水面图层 +order: 2 +--- + +`markdown:docs/common/style.md` + +## 使用 + +水面图层是对 PolygonLayer 的扩展，因此在使用上和普通的 PolygonLayer 的图层类似。 + +🌟 从 v2.8.1 版本开始支持简单水面。 +🌟 从 v2.8.4 版本开始支持拟真水面。 + +## 拟真水面 + +拟真水面 + +### shape + +我们需要设置 shape 为 ocean + +### animate + +我们需要显示的设置 animate 为 true + +```javascript +layer.aniamte(true); +``` + +### style 配置 + +- watercolor 浅水区域的颜色 默认为 '#6D99A8' + +- watercolor2 深水区域的颜色 默认为 '#0F121C' + +[在线案例](../../../examples/polygon/fill#ocean) + +## 简单水面 + +简单水面 + +### 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` diff --git a/examples/gallery/animate/demo/meta.json b/examples/gallery/animate/demo/meta.json index fc371868a4..aa61e61e3f 100644 --- a/examples/gallery/animate/demo/meta.json +++ b/examples/gallery/animate/demo/meta.json @@ -7,42 +7,42 @@ { "filename": "grid.js", "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", "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", "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", "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", "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", "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", "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", "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" } ] } diff --git a/examples/gallery/basic/demo/meta.json b/examples/gallery/basic/demo/meta.json index 2510cc7524..168424acaf 100644 --- a/examples/gallery/basic/demo/meta.json +++ b/examples/gallery/basic/demo/meta.json @@ -7,33 +7,33 @@ { "filename": "column_dark.js", "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", "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", "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", "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", "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", "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" } ] } diff --git a/examples/point/bubble/demo/meta.json b/examples/point/bubble/demo/meta.json index a6ab7a414c..f967f6b4ab 100644 --- a/examples/point/bubble/demo/meta.json +++ b/examples/point/bubble/demo/meta.json @@ -7,23 +7,22 @@ { "filename": "point.js", "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", "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", "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", "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" } diff --git a/examples/point/chart/demo/meta.json b/examples/point/chart/demo/meta.json index fd496d354c..3dea8e1c6e 100644 --- a/examples/point/chart/demo/meta.json +++ b/examples/point/chart/demo/meta.json @@ -7,17 +7,17 @@ { "filename": "bar.js", "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", "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", "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" } ] } diff --git a/examples/point/cluster/demo/meta.json b/examples/point/cluster/demo/meta.json index de8727def5..bc8dc4a2fb 100644 --- a/examples/point/cluster/demo/meta.json +++ b/examples/point/cluster/demo/meta.json @@ -7,12 +7,12 @@ { "filename": "cluster.js", "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", "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" } ] diff --git a/examples/point/column/demo/meta.json b/examples/point/column/demo/meta.json index ff3436e13b..4a7152493e 100644 --- a/examples/point/column/demo/meta.json +++ b/examples/point/column/demo/meta.json @@ -7,27 +7,27 @@ { "filename": "column_light.js", "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", "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", "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", "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", "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" } ] } diff --git a/examples/point/dot/demo/meta.json b/examples/point/dot/demo/meta.json index 998543128d..fb91842ad9 100644 --- a/examples/point/dot/demo/meta.json +++ b/examples/point/dot/demo/meta.json @@ -7,12 +7,12 @@ { "filename": "normal2.js", "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", "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" } ] diff --git a/examples/point/image/demo/meta.json b/examples/point/image/demo/meta.json index 3262183d60..504fc460dd 100644 --- a/examples/point/image/demo/meta.json +++ b/examples/point/image/demo/meta.json @@ -7,27 +7,27 @@ { "filename": "image.js", "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", "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", "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", "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", "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" } ] } diff --git a/examples/point/marker/demo/meta.json b/examples/point/marker/demo/meta.json index 526b1930ef..fc983f9aa0 100644 --- a/examples/point/marker/demo/meta.json +++ b/examples/point/marker/demo/meta.json @@ -7,19 +7,19 @@ { "filename": "markerlayer.js", "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", "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", "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" } ] diff --git a/examples/point/scatter/demo/meta.json b/examples/point/scatter/demo/meta.json index 4c4afc9863..23a52737f3 100644 --- a/examples/point/scatter/demo/meta.json +++ b/examples/point/scatter/demo/meta.json @@ -7,7 +7,7 @@ { "filename": "scatter.js", "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", @@ -22,7 +22,12 @@ { "filename": "animatePoint.js", "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" } ] } diff --git a/examples/point/scatter/demo/radarPoint.js b/examples/point/scatter/demo/radarPoint.js new file mode 100644 index 0000000000..e3d0200cd9 --- /dev/null +++ b/examples/point/scatter/demo/radarPoint.js @@ -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); +}); diff --git a/examples/point/simple/demo/meta.json b/examples/point/simple/demo/meta.json index 2943a405ea..5987e622ea 100644 --- a/examples/point/simple/demo/meta.json +++ b/examples/point/simple/demo/meta.json @@ -7,7 +7,7 @@ { "filename": "simple.js", "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" } ] } diff --git a/examples/point/text/demo/meta.json b/examples/point/text/demo/meta.json index ebe9cf0d7c..389564ce6e 100644 --- a/examples/point/text/demo/meta.json +++ b/examples/point/text/demo/meta.json @@ -7,37 +7,37 @@ { "filename": "point_text.js", "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", "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", "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", "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", "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", "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", "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" } ] } diff --git a/examples/polygon/fill/demo/meta.json b/examples/polygon/fill/demo/meta.json index 5789ada19a..d58f3616f7 100644 --- a/examples/polygon/fill/demo/meta.json +++ b/examples/polygon/fill/demo/meta.json @@ -33,6 +33,16 @@ "filename": "china_linear_out.js", "title": "中国地图-径向渐变", "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" } ] } diff --git a/examples/polygon/fill/demo/ocean.js b/examples/polygon/fill/demo/ocean.js new file mode 100644 index 0000000000..a27ac3b31e --- /dev/null +++ b/examples/polygon/fill/demo/ocean.js @@ -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); + }); +}); diff --git a/examples/polygon/fill/demo/water.js b/examples/polygon/fill/demo/water.js new file mode 100644 index 0000000000..1b0c1fba88 --- /dev/null +++ b/examples/polygon/fill/demo/water.js @@ -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); + }); +});