Merge pull request #149 from antvis/docs

docs: add text,cluster animate demos
This commit is contained in:
@thinkinggis 2020-01-09 09:52:05 +08:00 committed by GitHub
commit 4b6347f9aa
107 changed files with 7850 additions and 6370 deletions

110
demos/demo/bike.js Normal file
View File

@ -0,0 +1,110 @@
/* eslint-disable no-eval */
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 40,
style: 'dark',
center: [ 3.438, 40.16797 ],
zoom: 0.51329
})
});
Promise.all(
[ fetch('https://gw.alipayobjects.com/os/basement_prod/9acd4831-5655-41a5-b0a0-831603e0092d.json').then(function(d) {
return d.text();
}).then(JSON.parse), fetch('https://gw.alipayobjects.com/os/basement_prod/dbe4e40b-3fbf-4a20-b36b-7a8bd3b8aef2.csv').then(function(d) {
return d.text();
}), fetch('https://gw.alipayobjects.com/os/basement_prod/89d20ef7-77df-44ca-a238-6e3679ab3ae4.csv').then(function(d) {
return d.text();
}) ]).then(function onLoad([ coordinates, trips, stations ]) {
const stationArray = parseCSV(stations);
const stationObj = {};
stationArray.forEach(function(st) {
stationObj[st.station_id] = {
x: st.longitude * 1,
y: st.latitude * 1
};
});
const tripsArray = parseCSV(trips);
const triplines = [];
tripsArray.forEach(function(trip) {
if (stationObj[trip.start_station] && stationObj[trip.end_station]) {
const line = {
x: stationObj[trip.start_station].x,
y: stationObj[trip.start_station].y,
x1: stationObj[trip.end_station].x,
y1: stationObj[trip.end_station].y,
duration: trip.duration
};
triplines.push(line);
}
});
const roadlayer = new LineLayer().source(coordinates).shape('line')
.size(0.6)
.color('#eee')
.active(true)
.style({
opacity: 0.9
});
const stationLayer = new PointLayer().source(stations, {
parser: {
type: 'csv',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.active(true)
.size(40)
.color('#fec44f')
.animate(true)
.style({
opacity: 1.0
})
.render();
const arclayer = new LineLayer().source(triplines.slice(0, 1000), {
parser: {
type: 'json',
x: 'x',
y: 'y',
x1: 'x1',
y1: 'y1'
}
})
.color('#ff6b34')
.shape('arc3d')
.size(1)
.style({
opacity: 1.0
})
.animate({
interval: 0.5,
trailLength: 0.5,
duration: 1
});
arclayer.fitBounds();
scene.addLayer(roadlayer);
scene.addLayer(stationLayer);
scene.addLayer(arclayer);
});
function parseCSV(data) {
const lines = data.split('\n');
const header = lines[0];
const columns = header.split(',');
return lines.slice(1).filter(function(l) {
return l;
}).map(function(line) {
const obj = {};
line.split(',').forEach(function(value, i) {
const name = columns[i];
obj[name] = value;
});
return obj;
});
}

37
docs/api/changelog.en.md Normal file
View File

@ -0,0 +1,37 @@
---
title: ChangeLog
order: 10
---
## 2020.01.06 2.0 正式版
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
###✨ Features
• 新增弧线图,路径图动画功能
• 新增气泡图水波动画功能
• 新增聚合地图
• 新增文本标注,支持避让
• 新增城市建筑图层
• 新增栅格地图,支持卫星遥感数据可视化
• 新增图层交互事件
### 🍏 Improvements
• Marker 支持事件和自定义数据
• 弧线支持虚线样式
• 面图层支持,文本标注,气泡图效果
• 重构了文档结构
• source 支持 map,join,filter 数据处理支持
• source 支持数据更新
• 支持 blend 效果配置
• 支持通过地图实例初始化地图
• 官网新增所有图表概览页面
### 🐞 Bug Fixes
• 修复容器 resize 不能正常响应
• 修复 babel 打包问题
• 修复地图组件加载报错问题
• 修复样式配置 strokeColor- stroke
## 2019.11.22 2.0beta

56
docs/api/changelog.zh.md Normal file
View File

@ -0,0 +1,56 @@
---
title: 发布日志
order: 10
---
## 2020.01.06 2.0 正式版
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
###✨ Features
• 新增弧线图,路径图动画功能
• 新增气泡图水波动画功能
• 新增聚合地图
• 新增文本标注,支持避让
• 新增城市建筑图层
• 新增栅格地图,支持卫星遥感数据可视化
• 新增图层交互事件
### 🍏 Improvements
• Marker 支持事件和自定义数据
• 弧线支持虚线样式
• 面图层支持,文本标注,气泡图效果
• 重构了文档结构
• source 支持 map,join,filter 数据处理支持
• source 支持数据更新
• 支持 blend 效果配置
• 支持通过地图实例初始化地图
• 官网新增所有图表概览页面
### 🐞 Bug Fixes
• 修复容器 resize 不能正常响应
• 修复 babel 打包问题
• 修复地图组件加载报错问题
• 修复样式配置 strokeColor- stroke
## 2019.11.22 2.0beta

View File

@ -7,7 +7,9 @@ Marker 地图标注 目前只支持 2D dom 标注
## 构造函数
Marker<br />`const Marker = new L7.Marker(option)`
Marker
`const Marker = new L7.Marker(option)`
#### option

View File

@ -16,7 +16,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
2.0.beta 版本目前有些功能还未完善1 月 6 号我们正式版,将支持 1.x 版的所有功能,而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档,
✨ 2020.01.06 2.0 版本正式发布
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)

View File

@ -7,9 +7,7 @@ redirect_from:
# L7 地理空间数据可视分析引擎
2.0.beta 版本目前有些功能还未完善,
⚠️ 1 月 6 号 正式版发版,将支持 1.x 版的所有功能,而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档,
✨ 2020.01.06 2.0 版本正式发布
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)

View File

@ -1,6 +1,6 @@
---
title: 1.x stable
order: 1
title: 1.x history
order: 9
---
## L7 1.x 版本
@ -17,8 +17,6 @@ order: 1
### npm 安装使用
会默认安装 1.x 的最新版本2.0 正式版本发布后才会默认 2.0 版本
```
npm install @antv/l7
@ -29,7 +27,3 @@ npm install @antv/l7
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在 1 月 6 号发布 2.0 正式版,会包含 1.x 版的所有功能.
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在 1 月 6 号发布 2.0 正式版,会包含 1.x 版的所有功能.

View File

@ -1,6 +1,6 @@
---
title: 1.x 稳定版
order: 1
title: 1.x 历史版本
order: 9
---
## L7 1.x 版本
@ -12,7 +12,7 @@ order: 1
#### CDN 在线使用连接为
```html
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.14/build/L7-min.js"></script>
```
### npm 安装使用
@ -29,5 +29,3 @@ npm install @antv/l7
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在 1 月 6 号发布 2.0 正式版,会包含 1.x 版的所有功能.

View File

@ -0,0 +1,161 @@
```
---
title: GridHeatMapLayer
order: 1
---
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
## 使用
```javascript
import { HeatMapLayer] } from '@antv/l7';
```
## source
网格数据只支持点数据作为数据源数据格式支持csv、json、geojson.
#### 设置网格聚合参数
布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 grid
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法  count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
],
}
```
## shape
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
### 2d
- circle,
- triangle
- square
- hexagon
```javascript
layer.shape(circle);
```
### 3d
- cylinder
- triangleColumn
- hexagonColumn
- squareColumn,
```javascript
layer.shape(cylinder);
```
## size
### 2D shape
不需要设置size方法
### 3D 图形
size 表示高度, 支持常量和数据映射
```javascript
layer.size(10);// 常量
layer.size('value', [10,50]);// 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度
```
### color
同layer [color方法](../layer/#color)
### style
- coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0
```javascript
layer.style({
coverage: 0.9,
angle: 0,
opacity: 1.0
})
```
## 完整实例代码
```javascript
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 20000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#0B0030',
'#100243',
'#100243',
'#1B048B',
'#051FB7',
'#0350C1',
'#0350C1',
'#0072C4',
'#0796D3',
'#2BA9DF',
'#30C7C4',
'#6BD5A0',
'#A7ECB2',
'#D0F4CA'
].reverse()
);
scene.addLayer(layer);
```

View File

@ -2,3 +2,153 @@
title: 网格热力图
order: 1
---
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
## 使用
```javascript
import { HeatMapLayer] } from '@antv/l7';
```
## source
网格数据只支持点数据作为数据源数据格式支持csv、json、geojson.
#### 设置网格聚合参数
布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 grid
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法  count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
],
}
```
## shape
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
### 2d
- circle,
- triangle
- square
- heaxgon
```javascript
layer.shape(circle);
```
### 3d
- cylinder
- triangleColumn
- hexagonColumn
- squareColumn,
```javascript
layer.shape(cylinder);
```
## size
### 2D shape
不需要设置size方法
### 3D 图形
size 表示高度, 支持常量和数据映射
```javascript
layer.size(10);// 常量
layer.size('value', [10,50]);// 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度
```
## color
同layer color方法
## style
- coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0
```javascript
layer.style({
coverage: 0.9,
angle: 0,
opacity: 1.0
})
```
## 完整实例代码
```javascript
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'grid',
size: 20000,
field: 'v',
method: 'sum'
}
]
})
.shape('square')
.style({
coverage: 1,
angle: 0
})
.color(
'count',
[
'#0B0030',
'#100243',
'#100243',
'#1B048B',
'#051FB7',
'#0350C1',
'#0350C1',
'#0072C4',
'#0796D3',
'#2BA9DF',
'#30C7C4',
'#6BD5A0',
'#A7ECB2',
'#D0F4CA'
].reverse()
);
scene.addLayer(layer);
```

View File

@ -1,219 +0,0 @@
---
title: HeatmapLayer
order: 0
---
# heatmapLayer
### 简介
热力图图层,包含三种类型的,
- 方格热力图
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
- 六边形热力图
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
- 经典热力图
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理,使用之前需要在 source 方法设置数据聚合方法
### source
热力图只支持点数据作为数据源
布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 grid、hexagon
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法   count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
],
}
```
### shape
不同类型热力图 shape 支持
| | 2D | 3d |
| ------------ | ------------------------------ | ------------------------------------------------- |
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
| 普通热力图 | heatmap | heatmap |
热力图布局下只 shape 方法只支持常量的可视化。
```javascript
HeatmapLayer.shape('square');
HeatmapLayer.shape('hexagon');
// 默认类型可以不设置
```
### size
当前版本 shape 为 gridhexagon 不需要设置 size 映射
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
**size(field,values) **
- field: 热力图权重字段
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript
HeatmapLayer.size('field', [0, 1]);
```
### color
default heatMap 类型不需设置 color 映射
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
### style
grid hexagon 可以通过 style 设置透明度
default 热力图需要通过 style 配置参数热力图参数
- intensity    全局热力权重     推荐权重范围 1-5
- radius   热力半径,单位像素
- rampColors 色带参数
- colors  颜色数组
- positions 数据区间
```javascript
HeatmapLayer.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [
'rgba(33,102,172,0.0)',
'rgb(103,169,207)',
'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
### 完整代码示例
#### 普通热力图
```javascript
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
HeatmapLayer({
zIndex: 2,
})
.source(data)
.size('mag', [0, 1]) // weight映射通道
.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [
'rgba(33,102,172,0.0)',
'rgb(103,169,207)',
'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
#### 网格热力图
```javascript
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat',
},
transforms: [
{
type: 'grid',
size: 15000,
field: 'v',
method: 'sum',
},
],
})
.shape('grid')
.style({
coverage: 0.8,
})
.color('count', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
```
#### 六边形热力图
```javascript
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.souce(data, {
parser: {
type: 'csv',
x: lng,
y: lat,
},
transforms: [
{
type: 'hexgon',
size: 1500,
field: 'count',
operation: 'sum',
},
],
})
.shape('hexgon')
.size(1000)
.color('sum')
.style({
coverage: 0.8,
});
render();
```

View File

@ -1,219 +0,0 @@
---
title: HeatmapLayer
order: 0
---
# heatmapLayer
### 简介
热力图图层,包含三种类型的,
- 方格热力图
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
- 六边形热力图
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
- 经典热力图
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理,使用之前需要在 source 方法设置数据聚合方法
### source
热力图只支持点数据作为数据源
布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 grid、hexagon
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法   count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
],
}
```
### shape
不同类型热力图 shape 支持
| | 2D | 3d |
| ------------ | ------------------------------ | ------------------------------------------------- |
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
| 普通热力图 | heatmap | heatmap |
热力图布局下只 shape 方法只支持常量的可视化。
```javascript
HeatmapLayer.shape('square');
HeatmapLayer.shape('hexagon');
// 默认类型可以不设置
```
### size
当前版本 shape 为 gridhexagon 不需要设置 size 映射
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
**size(field,values) **
- field: 热力图权重字段
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript
HeatmapLayer.size('field', [0, 1]);
```
### color
default heatMap 类型不需设置 color 映射
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
### style
grid hexagon 可以通过 style 设置透明度
default 热力图需要通过 style 配置参数热力图参数
- intensity    全局热力权重     推荐权重范围 1-5
- radius   热力半径,单位像素
- rampColors 色带参数
- colors  颜色数组
- positions 数据区间
```javascript
HeatmapLayer.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [
'rgba(33,102,172,0.0)',
'rgb(103,169,207)',
'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
### 完整代码示例
#### 普通热力图
```javascript
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
HeatmapLayer({
zIndex: 2,
})
.source(data)
.size('mag', [0, 1]) // weight映射通道
.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [
'rgba(33,102,172,0.0)',
'rgb(103,169,207)',
'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
#### 网格热力图
```javascript
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat',
},
transforms: [
{
type: 'grid',
size: 15000,
field: 'v',
method: 'sum',
},
],
})
.shape('grid')
.style({
coverage: 0.8,
})
.color('count', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
```
#### 六边形热力图
```javascript
var layer = scene
.HeatmapLayer({
zIndex: 2,
})
.souce(data, {
parser: {
type: 'csv',
x: lng,
y: lat,
},
transforms: [
{
type: 'hexgon',
size: 1500,
field: 'count',
operation: 'sum',
},
],
})
.shape('hexgon')
.size(1000)
.color('sum')
.style({
coverage: 0.8,
});
render();
```

View File

@ -0,0 +1,135 @@
---
title: Hexagon HeatMap
order: 1
---
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
## 使用
```javascript
import { HeatMapLayer] } from '@antv/l7';
```
## source
网格数据只支持点数据作为数据源数据格式支持csv、json、geojson.
#### 设置网格聚合参数
布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 hexagon
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法  count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'hexagon',
size: 15000,
field:'v',
method:'sum'
}
],
}
```
## shape
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
### 2d
- circle,
- triangle
- square
- heaxgon
```javascript
layer.shape(circle);
```
### 3d
- cylinder
- triangleColumn
- hexagonColumn
- squareColumn,
```javascript
layer.shape(cylinder);
```
## size
### 2D shape
不需要设置size方法
### 3D 图形
size 表示高度, 支持常量和数据映射
```javascript
layer.size(10);// 常量
layer.size('value', [10,50]);// 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度
```
## color
同layer color方法
## style
- coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0
```javascript
layer.style({
coverage: 0.9,
angle: 0,
opacity: 1.0
})
```
### 完整代码
```javascript
const layer =
new HeatmapLayer({
zIndex: 2,
})
.souce(data, {
parser: {
type: 'csv',
x: lng,
y: lat,
},
transforms: [
{
type: 'hexagon',
size: 1500,
field: 'count',
operation: 'sum',
},
],
})
.shape('hexagon')
.color('sum')
.style({
coverage: 0.8,
});
```

View File

@ -2,3 +2,138 @@
title: 蜂窝热力图
order: 1
---
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
## 使用
```javascript
import { HeatMapLayer] } from '@antv/l7';
```
## source
网格数据只支持点数据作为数据源数据格式支持csv、json、geojson.
#### 设置网格聚合参数
布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 hexagon
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法  count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'hexagon',
size: 15000,
field:'v',
method:'sum'
}
],
}
```
## shape
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
### 2d
- circle,
- triangle
- square
- heaxgon
```javascript
layer.shape(circle);
```
### 3d
- cylinder
- triangleColumn
- hexagonColumn
- squareColumn,
```javascript
layer.shape(cylinder);
```
## size
### 2D shape
不需要设置size方法
### 3D 图形
size 表示高度, 支持常量和数据映射
```javascript
layer.size(10);// 常量
layer.size('value', [10,50]);// 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度
```
## color
同layer color方法
## style
- coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0
```javascript
layer.style({
coverage: 0.9,
angle: 0,
opacity: 1.0
})
```
### 完整代码
```javascript
const layer =
new HeatmapLayer({
zIndex: 2,
})
.souce(data, {
parser: {
type: 'csv',
x: lng,
y: lat,
},
transforms: [
{
type: 'hexagon',
size: 1500,
field: 'count',
operation: 'sum',
},
],
})
.shape('hexagon')
.color('sum')
.style({
coverage: 0.8,
});
```

View File

@ -0,0 +1,69 @@
---
title: 经典热力图
order: 1
---
## 使用
```javascript
import { HeatMapLayer] } from '@antv/l7';
```
## shape
常量 heatmap
```javascript
layer.shape('heatmap');
```
## size
- field: 热力图权重字段
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript
layer.size('weight', [0,1])
```
## color
heatmap 需要设置color 方法样式通过style 设置
## style
- intensity    全局热力权重     推荐权重范围 1-5
- radius   热力半径,单位像素
- rampColors 色带参数
- colors  颜色数组
- positions 数据区间
:warning: color, position 的长度要相同
## 完整代码
```javascript
heatmapLayer({
zIndex: 2,
})
.source(data)
.size('mag', [0, 1]) // weight映射通道
.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [
'rgba(33,102,172,0.0)',
'rgb(103,169,207)',
'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```

View File

@ -2,3 +2,68 @@
title: 经典热力图
order: 1
---
## 使用
```javascript
import { HeatMapLayer] } from '@antv/l7';
```
## shape
常量 heatmap
```javascript
layer.shape('heatmap');
```
## size
- field: 热力图权重字段
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript
layer.size('weight', [0,1])
```
## color
heatmap 需要设置color 方法样式通过style 设置
## style
- intensity    全局热力权重     推荐权重范围 1-5
- radius   热力半径,单位像素
- rampColors 色带参数
- colors  颜色数组
- positions 数据区间
:warning: color, position 的长度要相同
## 完整代码
```javascript
heatmapLayer({
zIndex: 2,
})
.source(data)
.size('mag', [0, 1]) // weight映射通道
.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [
'rgba(33,102,172,0.0)',
'rgb(103,169,207)',
'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43,1.0)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```

View File

@ -3,12 +3,16 @@ title: ImageLayer
order: 5
---
# ImageLayer
## 简介
将图片添加到地图上,需要指定图片的经纬度范围
## 使用
```javascript
import { ImageLayer } from '@antv/l7';
```
### 代码示例
```javascript

View File

@ -1,14 +1,18 @@
---
title: ImageLayer
title: 图片图层
order: 5
---
# ImageLayer
## 简介
将图片添加到地图上,需要指定图片的经纬度范围
## 使用
```javascript
import { ImageLayer } from '@antv/l7';
```
### 代码示例
```javascript

View File

@ -12,12 +12,14 @@ L7 Layer 接口设计遵循图形语法,在可视表达上
语法示例
```javascript
new Layer(option)
const layer = new Layer(option)
.source()
.color()
.size()
.shape()
.style();
scene.addLayer(layer);
```
## 构造函数

View File

@ -12,12 +12,14 @@ L7 Layer 接口设计遵循图形语法,在可视表达上
语法示例
```javascript
new Layer(option)
const layer = new Layer(option)
.source()
.color()
.size()
.shape()
.style();
scene.addLayer(layer);
```
## 构造函数

View File

@ -0,0 +1,76 @@
---
title: 弧线图
order: 1
---
将两个点的连线绘制成弧形,绘制的弧线可以是贝塞尔曲线,大圆航线,通常用来表示两种地理事物关系和联系,或者人口迁移,物流起点目的地等
## 使用
### 数据
绘制弧线只需提供起始点坐标即可
```javascript
source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
```
### shape
弧线支持两种弧线算法
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
- arc3d 3d 弧线地图 3D 视角
### 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
})
```
### 示例代码
```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,
});
```

View File

@ -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,
});
```

View File

@ -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
})
```

View File

@ -19,8 +19,31 @@ shape 设置成line即可绘制路线图
```javascript
layer.size([2,10]) // 绘制宽度为2高度为10的路径
layer.size('',[])
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
})
```

View File

@ -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, 默认于气泡的填充色相同

View File

@ -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,
});
```

View File

@ -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)

View File

@ -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)

View File

@ -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
})
```

View File

@ -2,12 +2,16 @@
title: PolygonLayer
order: 0
---
# 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
### shape
## 使用
```javascript
import { PolygonLayer } from '@antv/l7';
```
## shape
填充图支持 3 种 shape

View File

@ -2,12 +2,15 @@
title: PolygonLayer
order: 0
---
# 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
### shape
## 使用
```javascript
import { PolygonLayer } from '@antv/l7';
```
## shape
填充图支持 3 种 shape

View File

@ -0,0 +1,44 @@
---
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 的长度要相同

View File

@ -0,0 +1,44 @@
---
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 的长度要相同

View File

@ -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],
},
},
);
```

View File

@ -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],
},
},
);
```

View File

@ -30,7 +30,7 @@ source 地理数据处理模块主要包含数据解析parser),和数据
## API
### cluster 可选 可以只设置 cluster
### cluster ``boolean` 可选 可以只设置
### clusterOption 可选
@ -53,6 +53,17 @@ source 地理数据处理模块主要包含数据解析parser),和数据
layer.source(data);
```
### Source 更新
如果数据发生改变,可以需要更新数据
可以通过调用 layer 的 setData 方法实现数据的更新
具体见 [Layer](../layer/layer/#setdata)
```javascript
layer.setData(data);
```
#### JSON
[JSON 数据格式解析](./json)
@ -69,6 +80,23 @@ layer.source(data);
### transforms
tranforms 处理的是的标准化之后的数据
标准化之后的数据结构包括 coordinates 地理坐标字段,以及其他属性字段。
处理完之后返回的也是标准数据
```javascript
[{
coordinates: [[]] // 地理坐标字段
_id:'',// 标准化之后新增字段
name:''
value:''
// ....
}]
```
目前支持两种热力图使用的数据处理方法 gridhexagon transform 配置项
- type 数据处理类型

View File

@ -7,7 +7,7 @@ redirect_from:
# L7
Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7/beta)
Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7)
## 使用方法
@ -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;
@ -156,7 +156,21 @@ export default class AMapExample extends React.Component {
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
### Vue 欢迎补充
[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
### Html
[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)
## 不同项目使用模板
不同项目模板在CodeSandbox你可以预览也可以下载到本地
### React
[地址](https://codesandbox.io/s/l720react-jfwyz)
### Vue
[地址](https://codesandbox.io/s/l720vue-uef1x)
### Angular
[地址](https://codesandbox.io/s/angulartest-chpff)
### HTML CDN
[地址](https://codesandbox.io/s/l7cdndemo-gfg9m)

View File

@ -0,0 +1,35 @@
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ -74.006, 40.7128 ],
zoom: 14,
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json'
)
.then(res => res.json())
.then(data => {
const lineLayer = new LineLayer()
.source(data, {
parser: {
type: 'json',
coordinates: 'path'
}
})
.size(1.5)
.shape('line')
.color('color', v => {
return `rgb(${v[0]})`;
})
.animate({
interval: 0.6,
trailLength: 1.5,
duration: 6
});
scene.addLayer(lineLayer);
});

View File

@ -0,0 +1,30 @@
import { Scene, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 16,
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer()
.source(data)
.size(1.5)
.shape('line')
.color('#25d8b7')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间,延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});

View File

@ -0,0 +1,62 @@
import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'amap://styles/a49ef8d081db7b85adb2e90ba7941f1e?isPublic=true',
center: [ 120.173104, 30.244072 ],
pitch: 70.41138037735848,
zoom: 17.18,
rotation: 2.24, // 358.7459759480504
minZoom: 14
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
)
.then(res => res.json())
.then(data => {
const layer = new CityBuildingLayer(
{
zIndex: 0
}
);
layer
.source(data)
.size('floor', [ 100, 3000 ])
.color('rgba(242,246,250,0.5)')
.animate({
enable: true
})
.style({
opacity: 1.0,
baseColor: 'rgba(36,16,63,0.3)',
windowColor: '#0e0220',
brightColor: '#08faee'
});
scene.addLayer(layer);
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({
zIndex: 0
})
.source(data)
.size(1)
.shape('line')
.color('#ff893a')
.animate({
interval: 1, // 间隔
duration: 2, // 持续时间,延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});
});

View File

@ -0,0 +1,33 @@
{
"title": {
"zh": "图库",
"en": "Gallery"
},
"demos": [
{
"filename": "animate_path.js",
"title": "路径动画",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Sbx4S4w7nL8AAAAAAAAAAABkARQnAQ"
},
{
"filename": "world2.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
},
{
"filename": "build.js",
"title": "点亮城市",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7XkWTYQMfPMAAAAAAAAAAABkARQnAQ"
},
{
"filename": "animate_line.js",
"title": "轨迹动画",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jLo0RY0sDG4AAAAAAAAAAABkARQnAQ"
}
]
}

View File

@ -0,0 +1,93 @@
/* eslint-disable no-eval */
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 40,
style: {
version: 8,
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
glyphs:
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#2b2b3a'
}
}
]
},
center: [ 3.438, 40.16797 ],
zoom: 0.51329
})
});
Promise.all([
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
const flydata = eval(flyline).map(item => {
const latlng1 = item.from.split(',').map(e => { return e * 1; });
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
const worldLine = new LineLayer()
.source(world)
.color('#41fc9d')
.size(0.5)
.style({
opacity: 0.4
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#ffed11')
.animate(true)
.size(40)
.style({
opacity: 1.0
});
const flyLine = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.shape('arc3d')
.size(2)
.animate({
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);
});

View File

@ -0,0 +1,96 @@
/* eslint-disable no-eval */
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 40,
style: {
version: 8,
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
glyphs:
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#2b2b3a'
}
}
]
},
center: [ 3.438, 40.16797 ],
zoom: 0.51329
})
});
Promise.all([
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
const flydata = eval(flyline).map(item => {
const latlng1 = item.from.split(',').map(e => { return e * 1; });
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
const worldLine = new LineLayer()
.source(world)
.color('#495e96')
.size(0.6)
.style({
opacity: 0.2
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#abc7e9')
.animate({
speed: 0.8
}
)
.size(30)
.style({
opacity: 1.0
});
const flyLine = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#b97feb')
.shape('arc3d')
.size(2)
.animate({
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);
});

View File

@ -0,0 +1,4 @@
---
title: Animate
order: 0
---

View File

@ -0,0 +1,4 @@
---
title: 动画
order: 0
---

View File

@ -1,43 +0,0 @@
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 110.19382669582967, 40.258134 ],
pitch: 0,
zoom: 3,
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json'
)
.then(res => res.json())
.then(data => {
data.features = data.features.map(function(fe) {
if (fe.properties.saldo < 0) {
fe.geometry.coordinates = fe.geometry.coordinates.reverse();
}
return fe;
});
const layer = new LineLayer({
autoFit: true
})
.source(data)
.shape('line')
.size('saldo', [ 1, 2 ])
.color('saldo', function(v) {
return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
})
.animate({
enable: true,
interval: 0.1,
duration: 3,
trailLength: 1
})
.style({
opacity: 0.8
});
scene.addLayer(layer);
});

View File

@ -1,36 +0,0 @@
import { Scene, CityBuildingLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'dark',
center: [ 121.507674, 31.223043 ],
pitch: 65.59312320916906,
zoom: 15.4,
minZoom: 15,
maxZoom: 18
})
});
fetch(
'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json'
)
.then(res => res.json())
.then(data => {
const layer = new CityBuildingLayer();
layer
.source(data)
.size('floor', [ 0, 500 ])
.color('rgba(242,246,250,1.0)')
.animate({
enable: true
})
.style({
opacity: 1.0,
baseColor: 'rgb(16,16,16)',
windowColor: 'rgb(30,60,89)',
brightColor: 'rgb(255,176,38)'
});
scene.addLayer(layer);
});

View File

@ -4,16 +4,6 @@
"en": "Gallery"
},
"demos": [
{
"filename": "animate.js",
"title": "轨迹动画",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ"
},
{
"filename": "build.js",
"title": "点亮城市",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ"
},
{
"filename": "column_dark.js",
"title": "3D柱图深色",

View File

@ -1,4 +1,4 @@
---
title: Featured
order: 0
order: 1
---

View File

@ -1,4 +1,4 @@
---
title: 官方精品库
order: 0
title: 基础可视化
order: 1
---

View File

@ -32,9 +32,6 @@ fetch(
}
]
})
.size('count', value => {
return value * 0;
})
.shape('square')
.style({
coverage: 1,

View File

@ -32,9 +32,6 @@ fetch(
}
]
})
.size('count', value => {
return value * 0;
})
.shape('square')
.style({
coverage: 1,

View File

@ -32,9 +32,6 @@ fetch(
}
]
})
.size('count', value => {
return value * 0;
})
.shape('circle')
.style({
coverage: 0.9,

View File

@ -32,9 +32,6 @@ fetch(
}
]
})
.size('count', value => {
return value * 0;
})
.shape('square')
.style({
coverage: 1,

View File

@ -27,9 +27,6 @@ fetch(
}
]
})
.size('sum', value => {
return value * 50;
})
.shape('hexagon')
.style({
coverage: 0.9,

View File

@ -1,6 +1,6 @@
// Data Source https://busrouter.sg/visualization/
import { Scene, LineLayer } from '@antv/l7';
import { Scene, LineLayer, Popup } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
@ -30,6 +30,7 @@ fetch(
return [ 0.8, level * 1 ];
})
.shape('line')
.active(true)
.color(
'level',
[
@ -47,5 +48,14 @@ fetch(
.reverse()
.slice(0, 8)
);
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>车次: ${e.feature.number}</span>`);
scene.addPopup(popup);
});
scene.addLayer(layer);
});

View File

@ -36,6 +36,7 @@ fetch(
'vesica'
])
.size('unit_price', [ 10, 25 ])
.active(true)
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
.style({
opacity: 0.3,

View File

@ -25,6 +25,7 @@ fetch(
.color('mag', mag => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
})
.active(true)
.style({
opacity: 0.3,
strokeWidth: 1

View File

@ -27,8 +27,8 @@ fetch(
.shape('circle')
.active(true)
.animate(true)
.size(40)
.color('#ffa842')
.size(56)
.color('#4cfd47')
.style({
opacity: 1
});

View File

@ -31,6 +31,7 @@ fetch(
'#A1EDB8',
'#CEF8D6'
])
.active(true)
.style({
opacity: 0.5,
strokeWidth: 0

View File

@ -0,0 +1,34 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
style: 'dark',
zoom: 3
})
});
fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data, {
cluster: true
})
.shape('circle')
.scale('point_count', {
type: 'quantile'
})
.size('point_count', [ 5, 10, 15, 20, 25 ])
.active(true)
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1
});
scene.addLayer(pointLayer);
});

View File

@ -0,0 +1,14 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "cluster.js",
"title": "聚合图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
}
]
}

View File

@ -0,0 +1,4 @@
---
title: Cluster Map
order: 1
---

View File

@ -0,0 +1,4 @@
---
title: "聚合图"
order: 1
---

View File

@ -25,6 +25,7 @@ fetch(
y: 'latitude'
}
})
.active(true)
.shape('name', [
'cylinder',
'triangleColumn',

View File

@ -31,6 +31,7 @@ fetch(
'hexagonColumn',
'squareColumn'
])
.active(true)
.size('unit_price', h => {
return [ 6, 6, h / 500 ];
})

View File

@ -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',

View File

@ -1,4 +1,4 @@
import { Scene, PointLayer } from '@antv/l7';
import { Scene, PointLayer, Popup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
@ -27,9 +27,19 @@ 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
});
pointLayer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
scene.addPopup(popup);
});
scene.addLayer(pointLayer);
});

View File

@ -1,4 +1,4 @@
---
title: "亮度图"
title: 亮度图
order: 1
---

View File

@ -26,6 +26,7 @@ fetch(
})
.shape('circle')
.size(4)
.active(true)
.color('Magnitude', [
'#0A3663',
'#1558AC',

View File

@ -0,0 +1,19 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "point_text.js",
"title": "点数据标注",
"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*rCFqRp3iQosAAAAAAAAAAABkARQnAQ"
}
]
}

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({
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
style: 'light',
zoom: 3
})
});
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('m', 'text')
.size(12)
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
.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
});
scene.addLayer(pointLayer);
});

View File

@ -0,0 +1,34 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [ -96, 37.8 ],
zoom: 3
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
)
.then(res => res.json())
.then(data => {
const layer = new PolygonLayer({})
.source(data)
.color('blue')
.shape('name', 'text')
.size(18)
.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
});
scene.addLayer(layer);
});

View File

@ -0,0 +1,32 @@
---
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

View File

@ -0,0 +1,4 @@
---
title: 文本标注
order: 1
---

View File

@ -34,6 +34,7 @@ fetch(
].reverse()
)
.shape('fill')
.active(true)
.style({
opacity: 1
});
@ -42,7 +43,7 @@ fetch(
})
.source(data)
.color('#fff')
.size(0.3)
.size(0.8)
.style({
opacity: 1
});

View File

@ -9,6 +9,11 @@
"title": "全国地图行政区划",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
},
{
"filename": "usa.js",
"title": "地图交互",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HfZ7SKrS9fcAAAAAAAAAAABkARQnAQ"
},
{
"filename": "fill.js",
"title": "连续填充图",

View File

@ -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
});

View File

@ -47,6 +47,7 @@ Promise.all([
})
.color('female', colors)
.shape('fill')
.active(true)
.style({
opacity: 0.9
});
@ -56,11 +57,10 @@ Promise.all([
})
.source(world)
.color('#fff')
.size(0.3)
.size(0.8)
.style({
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
});

View File

@ -0,0 +1,63 @@
import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [ -96, 37.8 ],
zoom: 3
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
)
.then(res => res.json())
.then(data => {
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
const layer = new PolygonLayer({})
.source(data)
.color(
'density', d => {
return d > 1000 ? color[7] :
d > 500 ? color[6] :
d > 200 ? color[5] :
d > 100 ? color[4] :
d > 50 ? color[3] :
d > 20 ? color[2] :
d > 10 ? color[1] :
color[0];
}
)
.shape('fill')
.active(true)
.style({
opacity: 1.0
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.active(true)
.size(1)
.style({
lineType: 'dash',
dashArray: [ 2, 2 ],
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
scene.addPopup(popup);
});
});

View File

@ -14,7 +14,7 @@ const scene = new Scene({
addLayer();
async function getTiffData() {
const response = await fetch(
'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF141999.tiff'
'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
);
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@ -44,13 +44,13 @@ async function addLayer() {
})
.style({
opacity: 1.0,
clampLow: true,
clampHigh: true,
clampLow: false,
clampHigh: false,
domain: [ 0, 90 ],
nodataValue: 0,
rampColors: {
colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#fabd08', '#f1e93f', '#f1ff8f', '#fcfff7' ],
positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
}
});

View File

@ -4,11 +4,7 @@
"en": "Gallery"
},
"demos": [
{
"filename": "image.js",
"title": "图片",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
},
{
"filename": "radar.js",
"title": "雷达图",
@ -22,12 +18,17 @@
{
"filename": "light.js",
"title": "夜光图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bUYqRb5esH4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "ndvi.js",
"title": "NDVI",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6BQSTI51T_UAAAAAAAAAAABkARQnAQ"
},
{
"filename": "image.js",
"title": "图片",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
}
]
}

View File

@ -12,9 +12,19 @@ const scene = new Scene({
})
});
addLayer();
async function getTiffData() {
// async function getAllYearData() {
// const allData = [];
// for (let i = 1; i < 13; i++) {
// const month = i < 10 ? '0' + i : i;
// const res = await getTiffData(month);
// allData.push(res);
// }
// return allData;
// }
async function getTiffData(month) {
const response = await fetch(
'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff'
'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_2019' + month + '.tiff'
);
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@ -25,16 +35,13 @@ async function getTiffData() {
return {
data: values[0],
width,
height,
min: 0,
max: 8000
height
};
}
async function addLayer() {
const tiffdata = await getTiffData();
const layer = new RasterLayer({});
const layer = new RasterLayer();
const tiffdata = await getTiffData('06');
layer
.source(tiffdata.data, {
parser: {
@ -48,7 +55,7 @@ async function addLayer() {
opacity: 0.8,
clampLow: false,
clampHigh: false,
domain: [ -3000, 9000 ],
domain: [ -3000, 10000 ],
rampColors: {
colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]

View File

@ -1,46 +0,0 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
pitch: 0,
center: [ 120.19382669582967, 30.258134 ],
zoom: 5
})
});
const radius = 0.1;
function pointOnCircle(angle) {
return {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [ 120.19382669582967 + Math.cos(angle) * radius, 30.258134 + Math.sin(angle) * radius ]
}
}]
};
}
scene.on('loaded', () => {
// animateMarker(0);
});
const layer = new PointLayer()
.source(pointOnCircle(0))
.shape('circle')
.size(15) // default 1
.color('#2F54EB')
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 2,
opacity: 1
});
scene.addLayer(layer);
// function animateMarker(timestamp) {
// layer.setData(pointOnCircle(timestamp / 1000));
// requestAnimationFrame(animateMarker);
// }

View File

@ -1,11 +0,0 @@
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
pitch: 0,
center: [ 107.054293, 35.246265 ],
zoom: 4.056
})
});

View File

@ -1,16 +0,0 @@
{
"title": {
"zh": "图库",
"en": "Gallery"
},
"demos": [
{
"filename": "line.js",
"title": "json数据"
},
{
"filename": "data_update.js",
"title": "数据更新"
}
]
}

View File

@ -1,6 +0,0 @@
---
title: Data
order: 1
---
coming soon ……

View File

@ -1,5 +0,0 @@
---
title: 数据
order: 1
---
在路上 ……

View File

@ -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',

View File

@ -11,7 +11,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
### Installation
```
npm install @antv/l7@beta
npm install @antv/l7
```

View File

@ -42,32 +42,6 @@ export default class GridModel extends BaseModel {
];
}
protected registerBuiltinAttributes() {
// point layer size;
this.styleAttributeService.registerStyleAttribute({
name: 'size',
type: AttributeType.Attribute,
descriptor: {
name: 'a_Size',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 1,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},
});
// point layer size;
this.styleAttributeService.registerStyleAttribute({
name: 'pos', // 顶点经纬度位置
type: AttributeType.Attribute,

View File

@ -44,32 +44,6 @@ export default class HexagonModel extends BaseModel {
];
}
protected registerBuiltinAttributes() {
// point layer size;
// this.styleAttributeService.registerStyleAttribute({
// name: 'size',
// type: AttributeType.Attribute,
// descriptor: {
// name: 'a_Size',
// buffer: {
// // give the WebGL driver a hint that this buffer may change
// usage: gl.DYNAMIC_DRAW,
// data: [],
// type: gl.FLOAT,
// },
// size: 1,
// update: (
// feature: IEncodeFeature,
// featureIdx: number,
// vertex: number[],
// attributeIdx: number,
// ) => {
// const { size } = feature;
// return Array.isArray(size) ? [size[0]] : [size as number];
// },
// },
// });
// point layer size;
this.styleAttributeService.registerStyleAttribute({
name: 'pos', // 顶点经纬度位置
type: AttributeType.Attribute,

View File

@ -21,7 +21,6 @@ void main() {
gl_FragColor.a *= (blur * u_opacity);
if(u_line_type == LineTypeDash) {
gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
// gl_FragColor.a =
}
if(u_aimate.x == Animate) {
@ -29,7 +28,6 @@ void main() {
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
gl_FragColor.a *= alpha;
// gl_FragColor.a = fract(u_time);
}
gl_FragColor = filterColor(gl_FragColor);
}

View File

@ -30,10 +30,7 @@ void main() {
if(u_aimate.x == Animate) {
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
// float alpha2 = exp(-abs(v_side));
gl_FragColor.a *= alpha * blur;
// gl_FragColor.a = fract(u_time);
}
// dash line
if(u_line_type == LineTypeDash) {

View File

@ -88,7 +88,7 @@ export default class TextModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
fontWeight = 800,
fontFamily,
fontFamily = 'sans-serif',
stroke = '#fff',
strokeWidth = 0,
} = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;

View File

@ -69,8 +69,8 @@ void main() {
float N_RINGS = 3.0;
float FREQ = 1.0;
// gl_FragColor = v_color * color_t;
// gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
gl_FragColor = opacity_t * mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
if(u_aimate.x == Animate) {

View File

@ -38,7 +38,7 @@ export default class RasterModel extends BaseModel {
noDataValue = -9999999,
domain = [0, 1],
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
this.updateColorTexure();
return {
u_opacity: opacity || 1,
u_texture: this.texture,
@ -110,4 +110,18 @@ export default class RasterModel extends BaseModel {
},
});
}
private updateColorTexure() {
const { createTexture2D } = this.rendererService;
const {
rampColors,
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
const imageData = generateColorRamp(rampColors as IColorRamp);
this.colorTexture = createTexture2D({
data: imageData.data,
width: imageData.width,
height: imageData.height,
flipY: true,
});
}
}

View File

@ -15,5 +15,6 @@
"浅版精彩案例": "Light Theme",
"深版精彩案例": "Dark Theme",
"感谢信赖":"WE ARE TRUSTED BY",
"新版发布" : "New Version",
"一个个真实的地理数据可视化案例,将复杂的地理数据,通过简单易用的API接口,让用户达到开箱即用的效果。" : "We have summarized a series of story design templates from lots of real geospatial data visualization cases, so that users can use them directly."
}

View File

@ -78,7 +78,7 @@ const IndexPage = () => {
const bannerButtons = [
{
text: t('图表示例'),
link: `/${i18n.language}/examples/gallery/basic`,
link: `/${i18n.language}/examples/gallery`,
type: 'primary',
},
{
@ -89,10 +89,16 @@ const IndexPage = () => {
const notifications = [
{
type: t('测试'),
title: t('L7 2.0 beta'),
date: '2019.12.04',
link: '#',
type: t('新版发布'),
title: t('L7 2.0 正式版'),
date: '2020.01.06',
link: 'https://www.yuque.com/antv/blog/haygzb',
},
{
type: t('推荐'),
title: t('欢迎进入 2020 可视化智能研发时代'),
date: '2020.01.08',
link: 'https://www.yuque.com/antv/blog/ygdubv',
},
];
@ -137,7 +143,7 @@ const IndexPage = () => {
'蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。',
)}
buttons={bannerButtons}
// notifications={notifications}
notifications={notifications}
className="banner"
githubStarLink="https://github.com/antvis/L7/stargazers"
/>

View File

@ -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);
}

Some files were not shown because too many files have changed in this diff Show More