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

chore: merge master

This commit is contained in:
thinkinggis 2020-04-22 19:33:10 +08:00
parent f081a9e1c0 1bde10bd33
commit 42bfc33d77
68 changed files with 2295 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.github/workflows/gitleaks.yml vendored Normal file
View File

@ -0,0 +1,17 @@
name: gitleaks
on: [push,pull_request]
jobs:
gitleaks:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
fetch-depth: '1'
- name: wget
uses: wei/wget@v1
with:
args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
- name: gitleaks-action
uses: zricethezav/gitleaks-action@master

28
.github/workflows/mirror.yml vendored Normal file
View File

@ -0,0 +1,28 @@
name: 🤖 Sync to Gitee Mirror
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: 🔁 Sync to Gitee
uses: wearerequired/git-mirror-action@master
env:
# 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
with:
# 注意替换为你的 GitHub 源仓库地址
source-repo: 'git@github.com:antvis/L7.git'
# 注意替换为你的 Gitee 目标仓库地址
destination-repo: 'git@gitee.com:antv-l7/antv-l7.git'
- name: ✅ Build Gitee Pages
uses: yanglbme/gitee-pages-action@master
with:
# 注意替换为你的 Gitee 用户名
gitee-username: afc163
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
gitee-password: ${{ secrets.GITEE_PASSWORD }}
# 注意替换为你的 Gitee 仓库
gitee-repo: antv-l7/antv-l7

124
.gitleaks.toml Normal file
View File

@ -0,0 +1,124 @@
title = "gitleaks config"
[[rules]]
description = "AWS Manager ID"
regex = '''(A3T[A-Z0-9]|AKIA|AGPA|AIDA|AROA|AIPA|ANPA|ANVA|ASIA)[A-Z0-9]{16}'''
tags = ["key", "AWS"]
[[rules]]
description = "AWS Secret Key"
regex = '''(?i)aws(.{0,20})?(?-i)['\"][0-9a-zA-Z\/+]{40}['\"]'''
tags = ["key", "AWS"]
[[rules]]
description = "AWS MWS key"
regex = '''amzn\.mws\.[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'''
tags = ["key", "AWS", "MWS"]
[[rules]]
description = "Facebook Secret Key"
regex = '''(?i)(facebook|fb)(.{0,20})?(?-i)['\"][0-9a-f]{32}['\"]'''
tags = ["key", "Facebook"]
[[rules]]
description = "Facebook Client ID"
regex = '''(?i)(facebook|fb)(.{0,20})?['\"][0-9]{13,17}['\"]'''
tags = ["key", "Facebook"]
[[rules]]
description = "Twitter Secret Key"
regex = '''(?i)twitter(.{0,20})?['\"][0-9a-z]{35,44}['\"]'''
tags = ["key", "Twitter"]
[[rules]]
description = "Twitter Client ID"
regex = '''(?i)twitter(.{0,20})?['\"][0-9a-z]{18,25}['\"]'''
tags = ["client", "Twitter"]
[[rules]]
description = "Github"
regex = '''(?i)github(.{0,20})?(?-i)['\"][0-9a-zA-Z]{35,40}['\"]'''
tags = ["key", "Github"]
[[rules]]
description = "Github Token"
regex = '''[0-9a-zA-Z]{35,40}'''
tags = ["key", "Github Token"]
[[rules]]
description = "Alibaba"
regex = '''(alibaba|antfin)-inc'''
tags = ["key", "Alibaba"]
[[rules]]
description = "antfin"
regex = '''(?i)antfin(.{0,20})?(?-i)['\"][0-9a-zA-Z]{35,40}['\"]'''
tags = ["key", "Antfin"]
[[rules]]
description = "LinkedIn Client ID"
regex = '''(?i)linkedin(.{0,20})?(?-i)['\"][0-9a-z]{12}['\"]'''
tags = ["client", "LinkedIn"]
[[rules]]
description = "LinkedIn Secret Key"
regex = '''(?i)linkedin(.{0,20})?['\"][0-9a-z]{16}['\"]'''
tags = ["secret", "LinkedIn"]
[[rules]]
description = "Slack"
regex = '''xox[baprs]-([0-9a-zA-Z]{10,48})?'''
tags = ["key", "Slack"]
[[rules]]
description = "Asymmetric Private Key"
regex = '''-----BEGIN ((EC|PGP|DSA|RSA|OPENSSH) )?PRIVATE KEY( BLOCK)?-----'''
tags = ["key", "AsymmetricPrivateKey"]
[[rules]]
description = "Public Key"
regex = '''ssh-rsa'''
tags = ["keys", "public key"]
[[rules]]
description = "Gitlab Key"
regex = '''privateToken|private-token'''
tags = ["keys", "Gitlab"]
[[rules]]
description = "Generic Credential"
regex = '''(?i)(api_key|apikey|secret)(.{0,20})?['|"][0-9a-zA-Z]{16,45}['|"]'''
tags = ["key", "API", "generic"]
[[rules]]
description = "Google API key"
regex = '''AIza[0-9A-Za-z\\-_]{35}'''
tags = ["key", "Google"]
[[rules]]
description = "Heroku API key"
regex = '''(?i)heroku(.{0,20})?['"][0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}['"]'''
tags = ["key", "Heroku"]
[[rules]]
description = "MailChimp API key"
regex = '''(?i)(mailchimp|mc)(.{0,20})?['"][0-9a-f]{32}-us[0-9]{1,2}['"]'''
tags = ["key", "Mailchimp"]
[[rules]]
description = "Mailgun API key"
regex = '''(?i)(mailgun|mg)(.{0,20})?['"][0-9a-z]{32}['"]'''
tags = ["key", "Mailgun"]
[[rules]]
description = "PayPal Braintree access token"
regex = '''access_token\$production\$[0-9a-z]{16}\$[0-9a-f]{32}'''
tags = ["key", "Paypal"]
[[rules]]
description = "Picatic API key"
regex = '''sk_live_[0-9a-z]{32}'''
tags = ["key", "Picatic"]
[[rules]]
description = "SendGrid API Key"
regex = '''SG\.[\w_]{16,32}\.[\w_]{16,64}'''
tags = ["key", "SendGrid"]
[[rules]]
description = "Slack Webhook"
regex = '''https://hooks.slack.com/services/T[a-zA-Z0-9_]{8}/B[a-zA-Z0-9_]{8}/[a-zA-Z0-9_]{24}'''
tags = ["key", "slack"]
[[rules]]
description = "Stripe API key"
regex = '''(?i)stripe(.{0,20})?['\"][sk|rk]_live_[0-9a-zA-Z]{24}'''
tags = ["key", "Stripe"]
[[rules]]
description = "Square access token"
regex = '''sq0atp-[0-9A-Za-z\-_]{22}'''
tags = ["key", "square"]
[[rules]]
description = "Square OAuth secret"
regex = '''sq0csp-[0-9A-Za-z\\-_]{43}'''
tags = ["key", "square"]
[[rules]]
description = "Twilio API key"
regex = '''(?i)twilio(.{0,20})?['\"][0-9a-f]{32}['\"]'''
tags = ["key", "twilio"]
[whitelist]
description = "Whitelisted files"
file = '''(^\.?gitleaks.toml$|(.*?)(jpg|gif|doc|pdf|bin)|package-lock\.json$)'''

3
.travis.yml
View File

@ -33,6 +33,7 @@ script:
- yarn lint
- yarn test
- yarn build
- yarn bundle
notifications:
webhooks: https://oapi.dingtalk.com/robot/send?access_token=2dacc76d8b1ea8bcdc792b50f103d13efdba9ef53ec0caeb70631bc3add56118
webhooks: ${dingdingWebhooks}

8
build/bundle.ts
View File

@ -1,10 +1,2 @@
// @ts-ignore
export * from '@antv/l7';
// import * as L7 from '@antv/l7';
// export default L7;
// import { Scene } from '@antv/l7';
// // export { Scene };
// export default {
// Scene,
// };

24
docs/api/changelog.zh.md
View File

@ -2,6 +2,30 @@
title: 发布日志
order: 10
---
## 2020.04.20 2.2 正式版本
###✨ Features
#### [L7-Draw 地图绘制组件发布](../draw/start)
支持基础图形绘制、平移、修改、删除
- 绘制UI组件支持
- 绘制圆形
- 绘制矩形
- 绘制点
- 绘制线
- 绘制面
### 🍏 Improvements
- 要素拾取支持添加buffer
- 图层拾取支持冒泡机制，默认拾取最上层
### 🐞 Bug Fixes
- pointLayer 聚合支持多种数据格式化
- 修复热力图移动端不能正常渲染
- 修复3D热力图高德地图正使用
- L7 版本锁定
- 修复点图层描边模糊问题
## 2020.03.12 2.1 正式版

8
docs/api/layer/line_layer/arc.en.md
View File

@ -54,6 +54,14 @@ layer.animate({
})
```
##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
### 示例代码
```javascript

6
docs/api/layer/line_layer/arc.zh.md
View File

@ -53,6 +53,12 @@ layer.animate({
})
```
##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
### 示例代码

6
docs/api/layer/line_layer/path.en.md
View File

@ -44,6 +44,12 @@ layer.animate({
})
```
##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。

8
docs/api/layer/line_layer/path.zh.md
View File

@ -45,5 +45,13 @@ layer.animate({
})
```
##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。

67
docs/tutorial/interactive/hightlight.en.md
View File

@ -0,0 +1,67 @@
---
title: HightLight
order: 0
---
地理可视化除了数据展示，还需要用户交互，用户交互一般分为两种
- 图层交互
- 数据交互
### 图层交互
鼠标在可视化图层上进行相关操作，然后图层会有相应的响应。L7 Layer图层目前原生支持两种地图
- active 鼠标滑过高亮
- select 鼠标选中高亮
#### active
[layer active](../../api/layer/layer/#图层交互方法)
```javascript
// 开启 Active 使用默认高亮颜色
layer.active(true)
// 开启 Active 自定义高亮颜色
layer.active({
color: 'red'
})
// 关闭高亮效果
layer.active(false)
```
#### select
[layer active](../../api/layer/layer/#图层交互方法)
```javascript
// 开启 Active 使用默认高亮颜色
layer.select(true)
// 开启 Active 自定义高亮颜色
layer.select({
color: 'red'
})
// 关闭高亮效果
layer.select(false)
```
### 数据交互
有些时候我们可能需要直接指定某个数据高亮，比如鼠标点击数据面板的数据，我们需要高亮地图对应的元素
#### setActive
```javascript
layer.setActive(id);
```
#### setSelect
```javascript
layer.setSelect(id);
```

272
examples/draw/UI/API.en.md Normal file
View File

@ -0,0 +1,272 @@
---
title: API
---
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
# 使用
**using modules**
```javascript
import { DrawControl } from '@antv/l7-draw';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-Draw -->
<script src="https://unpkg.com/@antv/l7-draw"></script>
</head>
```
### 参数
```javascript
const control = new DrawControl(scene, option);
```
#### scene
scene 对象
#### options
control 配置项
| name | Type | Default | Description |
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
| style | | | 地图绘制样式 |
**controlOptions**
UI 组件配置项
- point `boolean | drawOption` 绘制点工具配置
- line `boolean | drawOption` 绘制线工具配置
- polygon `boolean | drawOption` 绘制面工具配置
- circle `boolean | drawOption` 绘制圆工具配置
- rect `boolean | drawOption` 绘制矩形工具配置
- delete `boolean | drawOption` 添加删除工具
默认配置
```
{
point: true,
line: true,
polygon: true,
rect: true,
circle: true,
delete: true
}
```
示例
```
{
point: false,
line: {
editEnable: false,
},
polygon: true,
rect: true,
circle: true,
delete: false
```
### 添加到地图
```javascript
scene.addControl(control);
```
### 从地图中移除
```javascript
scene.removeControl(control);
```
### Draw Type
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
#### DrawCircle
绘制圆形
```javascript
import { DrawCircle } from '@antv/l7-draw';
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
```
#### DrawRect
绘制四边形
```javascript
import { DrawRect } from '@antv/l7-draw';
const drawRect = new DrawRect(scene);
drawRect.enable();
```
#### DrawLine
绘制路径
```javascript
import { DrawLine } from '@antv/l7-draw';
const drawLine = new DrawLine(scene);
drawLine.enable();
```
#### DrawPoint
绘制点
```javascript
import { DrawPoint } from '@antv/l7-draw';
const drawPoint = new DrawPoint(scene);
drawPoint.enable();
```
#### DrawPolygon
绘制多边形
```javascript
import { DrawPolygon } from '@antv/l7-draw';
const drawPoint = new DrawPolygon(scene);
drawPoint.enable();
```
### 配置项 DrawOption
- editEnable boolean 是否允许编辑
- selectEnable boolean 是否允许选中
### 方法
#### enable
开始编辑，绘制完成之后会自动结束。
#### disable
结束编辑
### 事件
#### draw.create
绘制完成时触发该事件
#### draw.delete
图形删除时触发该事件
#### draw.update
图形更新时触发该事件，图形的平移，顶点的编辑
### style
- active 绘制过程中高亮颜色
- normal 正常显示状态
```javascript
const style = {
active: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 5,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
line: {
type: 'LineLayer',
shape: 'line',
color: '#fbb03b',
size: 1,
style: {
opacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
polygon: {
shape: 'fill',
color: '#fbb03b',
style: {
opacity: 0.1,
stroke: '#fbb03b',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
},
normal: {
polygon: {
type: 'PolygonLayer',
shape: 'fill',
color: '#3bb2d0',
style: {
opacity: 0.1,
stroke: '#3bb2d0',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'solid',
dashArray: [2, 2],
},
},
line: {
type: 'LineLayer',
shape: 'line',
size: 1,
color: '#3bb2d0',
style: {
opacity: 1,
},
},
point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
},
normal_point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
mid_point: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 3,
style: {},
},
},
};
```

272
examples/draw/UI/API.zh.md Normal file
View File

@ -0,0 +1,272 @@
---
title: API
---
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
# 使用
**using modules**
```javascript
import { DrawControl } from '@antv/l7-draw';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-Draw -->
<script src="https://unpkg.com/@antv/l7-draw"></script>
</head>
```
### 参数
```javascript
const control = new DrawControl(scene, option);
```
#### scene
scene 对象
#### options
control 配置项
| name | Type | Default | Description |
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
| style | | | 地图绘制样式 |
**controlOptions**
UI 组件配置项
- point `boolean | drawOption` 绘制点工具配置
- line `boolean | drawOption` 绘制线工具配置
- polygon `boolean | drawOption` 绘制面工具配置
- circle `boolean | drawOption` 绘制圆工具配置
- rect `boolean | drawOption` 绘制矩形工具配置
- delete `boolean | drawOption` 添加删除工具
默认配置
```
{
point: true,
line: true,
polygon: true,
rect: true,
circle: true,
delete: true
}
```
示例
```
{
point: false,
line: {
editEnable: false,
},
polygon: true,
rect: true,
circle: true,
delete: false
```
### 添加到地图
```javascript
scene.addControl(control);
```
### 从地图中移除
```javascript
scene.removeControl(control);
```
### Draw Type
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
#### DrawCircle
绘制圆形
```javascript
import { DrawCircle } from '@antv/l7-draw';
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
```
#### DrawRect
绘制四边形
```javascript
import { DrawRect } from '@antv/l7-draw';
const drawRect = new DrawRect(scene);
drawRect.enable();
```
#### DrawLine
绘制路径
```javascript
import { DrawLine } from '@antv/l7-draw';
const drawLine = new DrawLine(scene);
drawLine.enable();
```
#### DrawPoint
绘制点
```javascript
import { DrawPoint } from '@antv/l7-draw';
const drawPoint = new DrawPoint(scene);
drawPoint.enable();
```
#### DrawPolygon
绘制多边形
```javascript
import { DrawPolygon } from '@antv/l7-draw';
const drawPoint = new DrawPolygon(scene);
drawPoint.enable();
```
### 配置项 DrawOption
- editEnable boolean 是否允许编辑
- selectEnable boolean 是否允许选中
### 方法
#### enable
开始编辑，绘制完成之后会自动结束。
#### disable
结束编辑
### 事件
#### draw.create
绘制完成时触发该事件
#### draw.delete
图形删除时触发该事件
#### draw.update
图形更新时触发该事件，图形的平移，顶点的编辑
### style
- active 绘制过程中高亮颜色
- normal 正常显示状态
```javascript
const style = {
active: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 5,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
line: {
type: 'LineLayer',
shape: 'line',
color: '#fbb03b',
size: 1,
style: {
opacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
polygon: {
shape: 'fill',
color: '#fbb03b',
style: {
opacity: 0.1,
stroke: '#fbb03b',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
},
normal: {
polygon: {
type: 'PolygonLayer',
shape: 'fill',
color: '#3bb2d0',
style: {
opacity: 0.1,
stroke: '#3bb2d0',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'solid',
dashArray: [2, 2],
},
},
line: {
type: 'LineLayer',
shape: 'line',
size: 1,
color: '#3bb2d0',
style: {
opacity: 1,
},
},
point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
},
normal_point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
mid_point: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 3,
style: {},
},
},
};
```

34
examples/draw/UI/demo/amap.js Normal file
View File

@ -0,0 +1,34 @@
// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { DrawControl } from '@antv/l7-draw';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'light',
layers: [],
center: [ 116.1608, 40.1119 ],
zoom: 15
})
});
scene.on('loaded', () => {
const layer1 = new AMap.TileLayer.Satellite();
scene.map.setLayers([]);
layer1.setMap(scene.map);
const drawControl = new DrawControl(scene, {
position: 'topright',
layout: 'horizontal', // horizontal vertical
controls: {
point: true,
polygon: true,
line: true,
circle: true,
rect: true,
delete: true
}
});
scene.addControl(drawControl);
});

29
examples/draw/UI/demo/mapbox.js Normal file
View File

@ -0,0 +1,29 @@
// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { DrawControl } from '@antv/l7-draw';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'mapbox://styles/mapbox/satellite-v9',
center: [ 115.5268, 34.3628 ],
zoom: 15
})
});
scene.on('loaded', () => {
const drawControl = new DrawControl(scene, {
position: 'topright',
layout: 'horizontal', // horizontal vertical
controls: {
point: true,
polygon: true,
line: true,
circle: true,
rect: true,
delete: true
}
});
scene.addControl(drawControl);
});

19
examples/draw/UI/demo/meta.json Normal file
View File

@ -0,0 +1,19 @@
{
"title": {
"zh": "栅格图层",
"en": "Gallery"
},
"demos": [
{
"filename": "amap.js",
"title": "高德地图绘制",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
},
{
"filename": "mapbox.js",
"title": "Mapbox 地图绘制",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*oX9uTpfcIJ4AAAAAAAAAAABkARQnAQ"
}
]
}

4
examples/draw/UI/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: L7 Draw
order: 3
---

4
examples/draw/UI/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 绘制组件
order: 3
---

43
examples/line/animate/demo/arcCircle.js Normal file
View File

@ -0,0 +1,43 @@
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'dark',
center: [ 107.77791556935472, 35.443286920228644 ],
zoom: 2.9142882493605033
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({
blend: 'normal'
})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('greatcircle')
.animate({
enable: true,
interval: 0.1,
trailLength: 0.5,
duration: 2
})
.color('#8C1EB2')
.style({
opacity: 0.8
});
scene.addLayer(layer);
});
});

25
examples/line/animate/demo/meta.json Normal file
View File

@ -0,0 +1,25 @@
{
"title": {
"zh": "弧线",
"en": "line"
},
"demos": [
{
"filename": "arcCircle.js",
"title": "大圆弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"
},
{
"filename": "trip_arc_dark.js",
"title": "3D 弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"
},
{
"filename": "trip_arc.js",
"title": "3D 弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ"
}
]
}

45
examples/line/animate/demo/trip_arc.js Normal file
View File

@ -0,0 +1,45 @@
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 60,
type: 'mapbox',
style: 'light',
center: [ -74.06967, 40.720399 ],
zoom: 12.45977
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
)
.then(res => res.text())
.then(data => {
const layer = new LineLayer({
blend: 'normal'
})
.source(data, {
parser: {
type: 'csv',
x: 'start station longitude',
y: 'start station latitude',
x1: 'end station longitude',
y1: 'end station latitude'
}
})
.size(2)
.shape('arc3d')
.color('#0C47BF')
.animate({
interval: 0.5,
trailLength: 0.5,
duration: 5
})
.style({
opacity: 1
});
scene.addLayer(layer);
});
});

44
examples/line/animate/demo/trip_arc_dark.js Normal file
View File

@ -0,0 +1,44 @@
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 60,
style: 'dark',
center: [ 104.34278, 41.12554 ],
zoom: 2.94888,
rotation: 42.3999
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
const layer = new LineLayer({
blend: 'normal'
})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2'
}
})
.size(1)
.shape('arc3d')
.color('#FF7C6A')
.animate({
enable: true,
interval: 0.1,
trailLength: 0.5,
duration: 2
})
.style({
opacity: 0.8
});
scene.addLayer(layer);
});
});

4
examples/line/animate/index.en.md Normal file
View File

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

4
examples/line/animate/index.zh.md Normal file
View File

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

89
examples/polygon/fill/demo/city.js Normal file
View File

@ -0,0 +1,89 @@
import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'blank',
center: [ 116.368652, 39.93866 ],
zoom: 10.07
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/707cd4be-8ffe-4778-b863-3335eefd5fd5.json' // 获取行政区划P噢利用
)
.then(res => res.json())
.then(data => {
const chinaPolygonLayer = new PolygonLayer({
autoFit: true
})
.source(data)
.color(
'name',
[ '#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15' ]
)
.shape('fill')
.style({
opacity: 1
});
// 图层边界
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.size(0.5)
.style({
opacity: 1
});
scene.addLayer(chinaPolygonLayer);
scene.addLayer(layer2);
});
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/ab42a860-f874-4452-a8b6-4168a36c1f2c.json' // 国界线
).then(res => res.json())
.then(data => {
const boundaries = new LineLayer({
zIndex: 2
})
.source(data)
.color('rgb(93,112,146)')
.size(0.6)
.style({
opacity: 1
});
scene.addLayer(boundaries);
});
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/d09a3567-8c0e-4711-b8b8-cd82e8870e4b.json' // 标注数据
).then(res => res.json())
.then(data => {
const labelLayer = new PointLayer({
zIndex: 5
})
.source(data, {
parser: {
type: 'json',
coordinates: 'center'
}
})
.color('#fff')
.shape('name', 'text')
.size(12)
.style({
opacity: 1,
stroke: '#fff',
strokeWidth: 0,
padding: [ 5, 5 ],
textAllowOverlap: false
});
scene.addLayer(labelLayer);
});
});

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

@ -5,9 +5,14 @@
},
"demos": [
{
"filename": "polygon.js",
"title": "全国地图行政区划",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
"filename": "province.js",
"title": "中国地图省级",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*kZuyQ5LlfrAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "city.js",
"title": "中国地图市级",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*GfGdRqWvJfAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "usa.js",

49
examples/polygon/fill/demo/polygon.js
View File

@ -1,49 +0,0 @@
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'light',
center: [ 107.042225, 37.66565 ],
zoom: 3.87
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
.then(res => res.json())
.then(data => {
const colors = [
'#D7F9F0',
'#A6E1E0',
'#72BED6',
'#5B8FF9',
'#3474DB',
'#005CBE',
'#00419F',
'#00287E'
];
const layer = new PolygonLayer({})
.source(data)
.color('name', colors)
.shape('fill')
.active(true)
.style({
opacity: 0.9
});
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.size(0.3)
.style({
opacity: 1
});
scene.addLayer(layer);
scene.addLayer(layer2);
});
});

79
examples/polygon/fill/demo/province.js Normal file
View File

@ -0,0 +1,79 @@
import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'blank',
center: [ 116.368652, 39.93866 ],
zoom: 10.07
})
});
scene.on('loaded', () => {
fetch(
// 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' // 获取行政区划P噢利用
'https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json'
)
.then(res => res.json())
.then(data => {
const chinaPolygonLayer = new PolygonLayer({
autoFit: true
})
.source(data)
.color(
'name',
[
'rgb(239,243,255)',
'rgb(189,215,231)',
'rgb(107,174,214)',
'rgb(49,130,189)',
'rgb(8,81,156)'
]
)
.shape('fill')
.style({
opacity: 1
});
// 图层边界
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('rgb(93,112,146)')
.size(0.6)
.style({
opacity: 1
});
scene.addLayer(chinaPolygonLayer);
scene.addLayer(layer2);
});
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/c4a6aa9d-8923-4193-a695-455fd8f6638c.json' // 标注数据
).then(res => res.json())
.then(data => {
const labelLayer = new PointLayer({
zIndex: 5
})
.source(data, {
parser: {
type: 'json',
coordinates: 'center'
}
})
.color('#fff')
.shape('name', 'text')
.size(12)
.style({
opacity: 1,
stroke: '#fff',
strokeWidth: 0,
padding: [ 5, 5 ],
textAllowOverlap: false
});
scene.addLayer(labelLayer);
});
});

64
examples/react/control/API.en.md Normal file
View File

@ -0,0 +1,64 @@
---
title: API
---
## Popup Props
| prop name | Type | Default | Description |
| --------- | ----------------- | ------- | ---------------- |
| option | `string` | `null` | popup 配置项 |
| lnglat | `Array | Object` | `null` | popup 经纬度位置 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
| closeButton | `string` | `true` | 是否显示关闭按钮 |
| closeOnClick | `string` | `blue` | 点击是否关闭 popup |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | popup 位置偏移 |
| className | `string` | `null` | 样式名称 |
```jsx
import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />;
```
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
## Marker Props
| prop name | Type | Default | Description |
| -------------- | ----------------- | ------- | ----------------- |
| option | `string` | `null` | marker 配置项 |
| lnglat | `Array | Object` | `null` | marker 经纬度位置 |
| onMarkerLoaded | `Function` | `null` | layer 回调函数 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
| color | `string` | `blue` | marker 配置项 |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | marker 位置偏移 |
| extData | `object` | `null` | marker 属性数据 |
## Maker 事件
通过 onMarkerLoaded 方法获取 Marker 实例监听
## 实例
```jsx
import { Marker} from '@antv/l7-react'
<Marker
option = {{
color:'red'
}}
lnglat ={{[120,32]}}
/>
```

64
examples/react/control/API.zh.md Normal file
View File

@ -0,0 +1,64 @@
---
title: API
---
## Popup Props
| prop name | Type | Default | Description |
| --------- | ----------------- | ------- | ---------------- |
| option | `string` | `null` | popup 配置项 |
| lnglat | `Array | Object` | `null` | popup 经纬度位置 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
| closeButton | `string` | `true` | 是否显示关闭按钮 |
| closeOnClick | `string` | `blue` | 点击是否关闭 popup |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | popup 位置偏移 |
| className | `string` | `null` | 样式名称 |
```jsx
import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />;
```
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
## Marker Props
| prop name | Type | Default | Description |
| -------------- | ----------------- | ------- | ----------------- |
| option | `string` | `null` | marker 配置项 |
| lnglat | `Array | Object` | `null` | marker 经纬度位置 |
| onMarkerLoaded | `Function` | `null` | layer 回调函数 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
| color | `string` | `blue` | marker 配置项 |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | marker 位置偏移 |
| extData | `object` | `null` | marker 属性数据 |
## Maker 事件
通过 onMarkerLoaded 方法获取 Marker 实例监听
## 实例
```jsx
import { Marker} from '@antv/l7-react'
<Marker
option = {{
color:'red'
}}
lnglat ={{[120,32]}}
/>
```

169
examples/react/layer/API.en.md Normal file
View File

@ -0,0 +1,169 @@
---
title: API
---
## Layer 类型
React 各个组件名称和 L7 名称保持一致
- PointLayer
- PolygonLayer
- LineLayer
- HeatmapLayer
- RasterLayer
- ImageLayer
- CityBuildingLayer
### 使用方式
```jsx
import { PointLayer } '@antv/l7-react';
```
## Layer Props
| prop name | Type | Default | Description |
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
| options | `layer options` | | layer 配置项 |
| source | `sourceOption` | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
| size | `attributeOption` | | 图层大小属性 |
| style | `Object` | | 图层样式 |
| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 |
| filter | `Function` | | 图层数据过滤方法 |
| select | `boolean` `interaction option` | | 图层选中高亮 |
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
| animate | `animate Option` | `null` | 图层动画配置 |
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
### layer options
| prop name | Type | Default | Description |
| --------- | --------- | ----------------------- | ------------------------------------------------ |
| name | `string` | | 图层名字，可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序， |
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
### attribute Option
color, size, shape 等图形映射通道，通过下面参数配置
- field 映射字段，如果是常量设置为 null
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
详细[配置项](../layer/layer/#size)
### source Option
数据源配置项
- data 支持 geojson、csv、json
- parser 数据解析配置项
- transforms 数据处理配置项
详细[配置项](../source/source/#parser-1)
### scale Option
度量配置项
- values scaleCfg
**scaleCfg**
- key 为字段名 fieldname | attributeName
- value scale 配置项
```javascript
const scales = {
values: {
name: {
type: 'cat',
},
},
};
```
### interaction option
active，select 配置项
**option**
- color 设置交互的颜色，指滑过或者选中的
```jsx
<>
```
### 获取 layer 对象
#### onLayerLoaded
回调函数获取 layer, scene 对象
```javascript
onLayerLoaded = (layer, scene) => {};
```
#### Context API
```jsx
import { LayerContext } from '@antv/l7-react';
<LayerContext.Consumer>
{(layer, scene) => {
// use `scene` here
}}
</LayerContext.Consumer>;
```
### Layer 示例
```jsx
import { PolygonLayer } from '@antv/l7-react';
<PolygonLayer
key={'2'}
source={{
data,
}}
color={{
field: 'name',
values: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
}}
shape={{
values: 'fill',
}}
style={{
opacity: 1,
}}
active={{
option: {
color: 'red',
},
}}
/>;
```
## 子组件
### 事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) |
| handler | `Function` | `null` | layer 回调函数 |
### 示例
```jsx
import { LayerEvent, PolygonLayer } from 'l7-react';
<PolygonLayer>
<LayerEvent type="click" handler={() => {}} />
<LayerEvent type="mousemove" handler={() => {}} />
</PolygonLayer>;
```

169
examples/react/layer/API.zh.md Normal file
View File

@ -0,0 +1,169 @@
---
title: API
---
## Layer 类型
React 各个组件名称和 L7 名称保持一致
- PointLayer
- PolygonLayer
- LineLayer
- HeatmapLayer
- RasterLayer
- ImageLayer
- CityBuildingLayer
### 使用方式
```jsx
import { PointLayer } '@antv/l7-react';
```
## Layer Props
| prop name | Type | Default | Description |
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
| options | `layer options` | | layer 配置项 |
| source | `sourceOption` | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
| size | `attributeOption` | | 图层大小属性 |
| style | `Object` | | 图层样式 |
| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 |
| filter | `Function` | | 图层数据过滤方法 |
| select | `boolean` `interaction option` | | 图层选中高亮 |
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
| animate | `animate Option` | `null` | 图层动画配置 |
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
### layer options
| prop name | Type | Default | Description |
| --------- | --------- | ----------------------- | ------------------------------------------------ |
| name | `string` | | 图层名字，可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序， |
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
### attribute Option
color, size, shape 等图形映射通道，通过下面参数配置
- field 映射字段，如果是常量设置为 null
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
详细[配置项](../layer/layer/#size)
### source Option
数据源配置项
- data 支持 geojson、csv、json
- parser 数据解析配置项
- transforms 数据处理配置项
详细[配置项](../source/source/#parser-1)
### scale Option
度量配置项
- values scaleCfg
**scaleCfg**
- key 为字段名 fieldname | attributeName
- value scale 配置项
```javascript
const scales = {
values: {
name: {
type: 'cat',
},
},
};
```
### interaction option
active，select 配置项
**option**
- color 设置交互的颜色，指滑过或者选中的
```jsx
<>
```
### 获取 layer 对象
#### onLayerLoaded
回调函数获取 layer, scene 对象
```javascript
onLayerLoaded = (layer, scene) => {};
```
#### Context API
```jsx
import { LayerContext } from '@antv/l7-react';
<LayerContext.Consumer>
{(layer, scene) => {
// use `scene` here
}}
</LayerContext.Consumer>;
```
### Layer 示例
```jsx
import { PolygonLayer } from '@antv/l7-react';
<PolygonLayer
key={'2'}
source={{
data,
}}
color={{
field: 'name',
values: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
}}
shape={{
values: 'fill',
}}
style={{
opacity: 1,
}}
active={{
option: {
color: 'red',
},
}}
/>;
```
## 子组件
### 事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) |
| handler | `Function` | `null` | layer 回调函数 |
### 示例
```jsx
import { LayerEvent, PolygonLayer } from 'l7-react';
<PolygonLayer>
<LayerEvent type="click" handler={() => {}} />
<LayerEvent type="mousemove" handler={() => {}} />
</PolygonLayer>;
```

131
examples/react/scene/API.en.md Normal file
View File

@ -0,0 +1,131 @@
---
title: API
---
## 使用
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
```javascript
import { MapboxScene, AmapScene } from '@antv/l7-react';
```
## Scene Props
| prop name | Type | Default | Description |
| ------------- | -------------- | ---------- | -------------------------------------- |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| map | `map option` | `Required` | map option [地图配置项]() |
| option | `scene option` | `void` | scene option 配置项 [详情](#map-props) |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
### 高德地图场景
```jsx
import { AMapScene } from '@antv/l7-react';
<AMapScene
option={{}}
map={{
style: 'light',
center: [112, 20],
token: '',
}}
/>;
```
### Mapbox 地图场景
```jsx
import { MapboxScene } from '@antv/l7-react';
<MapboxScene
option={{}}
map={{
style: 'light',
center: [112, 20],
token: '',
}}
/>;
```
### map option
地图配置项
| option | Type | Default | Description |
| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
| style | `string` | `light` | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式 |
| token | `string` | `Required` | 地图密钥，需要平台申请 |
| plugin | `string[]` | `null` | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` |
| center | `number` | null | 地图中心点 |
| pitch | `number` | 0 | 地图倾角 |
| rotation | `number` | 0 | 地图旋转角 |
| zoom | `number` | null | 地图缩放等级 |
| maxZoom | `number` | 0 | 最大缩放等级 |
| minZoom | `number` | AMap 18 ,Mapbox 20 | 最小缩放等级 |
其他配置项见地图文档
高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map)
Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map)
其他配置项和底图一致
### scene option
| option | Type | Default | Description |
| --------------------- | --------- | ------------ | --------------------------------------------------- |
| logoPosition | string | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` |
| logoVisible | `boolean` | `true` | 是否显示 logo |
| antialias | `boolean` | `true` | 是否开启抗锯齿 |
| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 |
### 获取 scene 对象
#### onSceneLoaded
onSceneLoaded 回调函数能够取到 scene 对象
#### Context API
```jsx
import { SceneContext } from '@antv/l7-react';
<SceneContext.Consumer>
{(scene) => {
// use `scene` here
}}
</SceneContext.Consumer>;
```
## 子组件
### LoadImage
| prop name | Type | Default | Description |
| --------- | -------- | ------- | ----------- |
| name | `string` | `null` | 图标名称 |
| url | `string` | `null` | 图标 url |
```jsx
import LoadImage from '@antv/l7-react';
<LoadImage name="marker" url="xxx.png" />;
```
### Layer 组件
每个图层作为 scene 子组件添加
###  事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../scene/#地图事件) |
| handler | `Function` | `null` | scene 回调函数 |
```javascript
import { SceneEvent, MapboxScene } from '@antv/l7-react';
<MapboxScene>
<SceneEvent type="click" handler={() => {}} />
</MapboxScene>;
```

131
examples/react/scene/API.zh.md Normal file
View File

@ -0,0 +1,131 @@
---
title: API
---
## 使用
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
```javascript
import { MapboxScene, AmapScene } from '@antv/l7-react';
```
## Scene Props
| prop name | Type | Default | Description |
| ------------- | -------------- | ---------- | -------------------------------------- |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| map | `map option` | `Required` | map option [地图配置项]() |
| option | `scene option` | `void` | scene option 配置项 [详情](#map-props) |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
### 高德地图场景
```jsx
import { AMapScene } from '@antv/l7-react';
<AMapScene
option={{}}
map={{
style: 'light',
center: [112, 20],
token: '',
}}
/>;
```
### Mapbox 地图场景
```jsx
import { MapboxScene } from '@antv/l7-react';
<MapboxScene
option={{}}
map={{
style: 'light',
center: [112, 20],
token: '',
}}
/>;
```
### map option
地图配置项
| option | Type | Default | Description |
| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
| style | `string` | `light` | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式 |
| token | `string` | `Required` | 地图密钥，需要平台申请 |
| plugin | `string[]` | `null` | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` |
| center | `number` | null | 地图中心点 |
| pitch | `number` | 0 | 地图倾角 |
| rotation | `number` | 0 | 地图旋转角 |
| zoom | `number` | null | 地图缩放等级 |
| maxZoom | `number` | 0 | 最大缩放等级 |
| minZoom | `number` | AMap 18 ,Mapbox 20 | 最小缩放等级 |
其他配置项见地图文档
高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map)
Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map)
其他配置项和底图一致
### scene option
| option | Type | Default | Description |
| --------------------- | --------- | ------------ | --------------------------------------------------- |
| logoPosition | string | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` |
| logoVisible | `boolean` | `true` | 是否显示 logo |
| antialias | `boolean` | `true` | 是否开启抗锯齿 |
| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 |
### 获取 scene 对象
#### onSceneLoaded
onSceneLoaded 回调函数能够取到 scene 对象
#### Context API
```jsx
import { SceneContext } from '@antv/l7-react';
<SceneContext.Consumer>
{(scene) => {
// use `scene` here
}}
</SceneContext.Consumer>;
```
## 子组件
### LoadImage
| prop name | Type | Default | Description |
| --------- | -------- | ------- | ----------- |
| name | `string` | `null` | 图标名称 |
| url | `string` | `null` | 图标 url |
```jsx
import LoadImage from '@antv/l7-react';
<LoadImage name="marker" url="xxx.png" />;
```
### Layer 组件
每个图层作为 scene 子组件添加
###  事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../scene/#地图事件) |
| handler | `Function` | `null` | scene 回调函数 |
```javascript
import { SceneEvent, MapboxScene } from '@antv/l7-react';
<MapboxScene>
<SceneEvent type="click" handler={() => {}} />
</MapboxScene>;
```

1
gatsby-browser.js
View File

@ -6,5 +6,6 @@ window.g2 = require('@antv/g2');
window.l7 = require('@antv/l7');
window.l7Maps = require('@antv/l7-maps');
window.l7React = require('@antv/l7-react');
window.l7Draw = require('@antv/l7-draw');
window.react = require('react');
window.reactDom = require('react-dom');

8
gatsby-config.js
View File

@ -191,6 +191,14 @@ module.exports = {
en: 'React Demo'
}
},
{
slug: 'draw',
icon: 'map',
title: {
zh: '绘制 组件',
en: 'L7 Draw'
}
},
{
slug: 'point',
icon: 'point',

3
gatsby-node.js
View File

@ -19,6 +19,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
'@antv/l7-scene': path.resolve(__dirname, 'packages/scene/src'),
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src')
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
'@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src')
};
};

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.1.15",
"version": "2.2.0",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

4
package.json
View File

@ -23,10 +23,11 @@
"@commitlint/cli": "^8.1.0",
"@commitlint/config-conventional": "^8.1.0",
"@rollup/plugin-alias": "^2.2.0",
"@rollup/plugin-commonjs": "^11.0.0",
"@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-json": "^4.0.0",
"@rollup/plugin-node-resolve": "^6.0.0",
"@storybook/react": "^5.1.9",
"@turf/turf": "^5.1.6",
"@types/dat.gui": "^0.7.1",
"@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3",
@ -116,7 +117,6 @@
"tslint-plugin-prettier": "^1.3.0",
"tslint-react": "^3.6.0",
"typescript": "^3.7.0-beta",
"@turf/turf": "^5.1.6",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7",

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,8 +24,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.1.15",
"@antv/l7-utils": "^2.1.15",
"@antv/l7-core": "^2.2.0",
"@antv/l7-utils": "^2.2.0",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

6
packages/component/src/control/scale.ts
View File

@ -33,13 +33,19 @@ export default class Scale extends Control {
this.addScales(className + '-line', container);
const { updateWhenIdle } = this.controlOption;
// TODO: 高德地图和MapBox地图事件不一致问题
// 高德zoomchange
this.mapsService.on(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
this.mapsService.on(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
this.update();
return container;
}
public onRemove() {
const { updateWhenIdle } = this.controlOption;
this.mapsService.off(
updateWhenIdle ? 'zoomend' : 'zoomchange',
this.update,
);
this.mapsService.off(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
}
public update() {

14
packages/component/src/marker.ts
View File

@ -220,8 +220,22 @@ export default class Marker extends EventEmitter {
}
const { element, offsets } = this.markerOption;
const { lng, lat } = this.lngLat;
const bounds = this.mapsService.getBounds();
// if (
// lng < bounds[0][0] ||
// lng > bounds[1][0] ||
// lat < bounds[0][1] ||
// lat > bounds[1][1]
// ) {
// if (element) {
// element.style.display = 'none';
// }
// return;
// }
const pos = this.mapsService.lngLatToContainer([lng, lat]);
if (element) {
element.style.display = 'block';
element.style.left = pos.x + offsets[0] + 'px';
element.style.top = pos.y - offsets[1] + 'px';
}

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,7 +23,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "^2.1.15",
"@antv/l7-utils": "^2.2.0",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

9
packages/core/src/services/scene/SceneService.ts
View File

@ -122,15 +122,6 @@ export default class Scene extends EventEmitter implements ISceneService {
// 设置场景配置项
this.configService.setSceneConfig(this.id, sceneConfig);
// 校验场景配置项，失败则终止初始化过程
// const { valid, errorText } = this.configService.validateSceneConfig(
// this.configService.getSceneConfig(this.id),
// );
// if (!valid) {
// this.logger.error(errorText || '');
// return;
// }
// 初始化 ShaderModule
this.shaderModuleService.registerBuiltinModules();

1
packages/core/src/utils/dom.ts
View File

@ -12,7 +12,6 @@ export function createRendererContainer(
const $container = document.createElement('div');
$container.style.cssText += `
position: absolute;
top: 0;
z-index:2;
height: 100%;
width: 100%;

7
packages/draw/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-draw",
"version": "2.1.15",
"version": "2.2.0",
"description": "L7 Draw moudules",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -35,15 +35,18 @@
"test": "jest"
},
"dependencies": {
"@antv/l7": "^2.2.0",
"@babel/runtime": "^7.7.7",
"@turf/turf": "^5.1.6",
"@antv/l7": "^2.1.15",
"@turf/circle": "^6.0.1",
"@turf/distance": "^6.0.1",
"@turf/helpers": "^6.1.4",
"@turf/midpoint": "^5.1.5",
"lodash": "^4.6.2"
},
"peerDependencies": {
"@antv/l7": "^2.1.15"
},
"bugs": {
"url": "https://github.com/antvis/L7/issues"
},

9
packages/draw/src/draw_control.ts
View File

@ -1,8 +1,8 @@
/*
* @Author: lzxue
* @Date: 2020-04-03 19:24:16
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-04-09 19:34:41
* @Last Modified by: lzxue
* @Last Modified time: 2020-04-20 20:40:33
*/
import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
import './css/draw.less';
@ -90,6 +90,7 @@ export class DrawControl extends Control {
draw.title,
'draw-' + type,
container,
'click',
this.onButtonClick.bind(null, type),
);
} else if (type === 'delete' && controls[type] !== false) {
@ -99,6 +100,7 @@ export class DrawControl extends Control {
draw.title,
'draw-' + type,
container,
'mousedown',
this.onDeleteMode.bind(null, type),
);
}
@ -109,11 +111,12 @@ export class DrawControl extends Control {
tile: string,
className: string,
container: HTMLElement,
eventType: string,
fn: (...arg: any[]) => any,
) {
const link = DOM.create('button', className, container);
link.title = tile;
link.addEventListener('mouseup', fn, false);
link.addEventListener(eventType, fn, false);
return link;
}

2
packages/draw/src/modes/draw_feature.ts
View File

@ -217,6 +217,8 @@ export default abstract class DrawFeature extends DrawMode {
this.clear();
this.source.removeFeature(this.currentFeature as Feature);
this.normalLayer.update(this.source.data);
this.drawLayer.disableSelect();
this.currentFeature = null;
}
};

1
packages/l7/demo/circle.html
View File

@ -65,6 +65,7 @@
"#A1EDB8",
"#CEF8D6"
])
.active(true)
.style({
opacity: 1.0
});

1
packages/l7/demo/text.html
View File

@ -65,6 +65,7 @@
"#A1EDB8",
"#CEF8D6"
])
.active(true)
.style({
opacity: 1.0
});

14
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.1.15",
"version": "2.2.0",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,12 +24,12 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.1.15",
"@antv/l7-core": "^2.1.15",
"@antv/l7-layers": "^2.1.15",
"@antv/l7-maps": "^2.1.15",
"@antv/l7-scene": "^2.1.15",
"@antv/l7-utils": "^2.1.15",
"@antv/l7-component": "^2.2.0",
"@antv/l7-core": "^2.2.0",
"@antv/l7-layers": "^2.2.0",
"@antv/l7-maps": "^2.2.0",
"@antv/l7-scene": "^2.2.0",
"@antv/l7-utils": "^2.2.0",
"@babel/runtime": "^7.7.7"
},
"gitHead": "a5d354b66873f700730248d015c5e539c54b34b7",

8
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.1.15",
"version": "2.2.0",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,9 +23,9 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.1.15",
"@antv/l7-source": "^2.1.15",
"@antv/l7-utils": "^2.1.15",
"@antv/l7-core": "^2.2.0",
"@antv/l7-source": "^2.2.0",
"@antv/l7-utils": "^2.2.0",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.1.0",
"@turf/meta": "^6.0.2",

1
packages/layers/src/line/shaders/line_frag.glsl
View File

@ -30,6 +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);
gl_FragColor.a *= alpha;
}
// dash line

6
packages/maps/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.1.15",
"@antv/l7-utils": "^2.1.15",
"@antv/l7-core": "^2.2.0",
"@antv/l7-utils": "^2.2.0",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"gl-matrix": "^3.1.0",

6
packages/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-react",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,8 +24,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7": "^2.1.15",
"@antv/l7-maps": "^2.1.15",
"@antv/l7": "^2.2.0",
"@antv/l7-maps": "^2.2.0",
"@babel/runtime": "^7.7.7",
"load-styles": "^2.0.0"
},

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,7 +25,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.1.15",
"@antv/l7-core": "^2.2.0",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"lodash": "^4.17.15",

12
packages/scene/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -22,11 +22,11 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.1.15",
"@antv/l7-core": "^2.1.15",
"@antv/l7-maps": "^2.1.15",
"@antv/l7-renderer": "^2.1.15",
"@antv/l7-utils": "^2.1.15",
"@antv/l7-component": "^2.2.0",
"@antv/l7-core": "^2.2.0",
"@antv/l7-maps": "^2.2.0",
"@antv/l7-renderer": "^2.2.0",
"@antv/l7-utils": "^2.2.0",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

6
packages/source/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.1.15",
"@antv/l7-utils": "^2.1.15",
"@antv/l7-core": "^2.2.0",
"@antv/l7-utils": "^2.2.0",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

19
packages/source/src/source.ts
View File

@ -25,6 +25,7 @@ import { cloneDeep, isFunction, isString } from 'lodash';
// tslint:disable-next-line:no-submodule-imports
import Supercluster from 'supercluster/dist/supercluster';
import { getParser, getTransform } from './';
import { cluster } from './transform/cluster';
import { statMap } from './utils/statistics';
import { getColumn } from './utils/util';
export default class Source extends EventEmitter {
@ -100,7 +101,7 @@ export default class Source extends EventEmitter {
}
public updateClusterData(zoom: number): void {
const { method = 'sum', field } = this.clusterOptions;
let data = this.clusterIndex.getClusters(this.extent, zoom);
let data = this.clusterIndex.getClusters(this.extent, Math.floor(zoom));
this.clusterOptions.zoom = zoom;
data.forEach((p: any) => {
if (!p.id) {
@ -177,13 +178,15 @@ export default class Source extends EventEmitter {
if (!this.cluster) {
return;
}
const { radius, minZoom = 0, maxZoom } = this.clusterOptions;
this.clusterIndex = new Supercluster({
radius,
minZoom,
maxZoom,
});
this.clusterIndex.load(this.rawData.features);
const clusterOptions = this.clusterOptions || {};
this.clusterIndex = cluster(this.data, clusterOptions);
// this.clusterIndex = new Supercluster({
// radius,
// minZoom,
// maxZoom,
// });
// this.clusterIndex.load(this.rawData.features);
}
private init() {

34
packages/source/src/transform/cluster.ts
View File

@ -1,9 +1,17 @@
import { IParserCfg, IParserData, ISourceCFG, ITransform } from '@antv/l7-core';
import {
IClusterOptions,
IParserData,
ISourceCFG,
ITransform,
} from '@antv/l7-core';
// @ts-ignore
// tslint:disable-next-line:no-submodule-imports
import Supercluster from 'supercluster/dist/supercluster';
export function cluster(data: IParserData, option: ITransform): IParserData {
const { radius = 80, maxZoom = 18, minZoom = 0, field, zoom = 2 } = option;
export function cluster(
data: IParserData,
option: Partial<IClusterOptions>,
): IParserData {
const { radius = 40, maxZoom = 18, minZoom = 0, zoom = 2 } = option;
if (data.pointIndex) {
const clusterData = data.pointIndex.getClusters(
data.extent,
@ -16,10 +24,6 @@ export function cluster(data: IParserData, option: ITransform): IParserData {
radius,
minZoom,
maxZoom,
map: (props: any) => ({ sum: props[field] }), // 根据指定字段求和
reduce: (accumulated: any, props: any) => {
accumulated.sum += props.sum;
},
});
const geojson: {
type: string;
@ -31,27 +35,15 @@ export function cluster(data: IParserData, option: ITransform): IParserData {
geojson.features = data.dataArray.map((item) => {
return {
type: 'Feature',
properties: {
[field]: item[field],
},
geometry: {
type: 'Point',
coordinates: item.coordinates,
},
properties: {},
};
});
pointIndex.load(geojson.features);
const clusterPoint = pointIndex.getClusters(data.extent, zoom);
const resultData = clusterPoint.map((point: any, index: number) => {
return {
coordinates: point.geometry.coordinates,
_id: index + 1,
...point.properties,
};
});
data.dataArray = resultData;
data.pointIndex = pointIndex;
return data;
return pointIndex;
}
export function formatData(clusterPoint: any[]) {
return clusterPoint.map((point, index) => {

2
packages/utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.1.15",
"version": "2.2.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

2
stories/Components/components/Scale.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { Layers, PointLayer, PolygonLayer, Scale, Scene, Zoom } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class ScaleComponent extends React.Component {

10
stories/Layers/Layers.stories.tsx
View File

@ -4,15 +4,17 @@ import AnimatePoint from './components/AnimatePoint';
import Arc2DLineDemo from './components/Arc2DLine';
import ArcLineDemo from './components/Arcline';
import CityBuildingLayerDemo from './components/citybuilding';
import ClusterDemo from './components/cluster';
import Column from './components/column';
import DashLineDemo from './components/dash';
import DataUpdate from './components/data_update';
import GridTest from './components/gridtest';
import HeatMapDemo from './components/HeatMap';
import HeatMapDemo3D from './components/heatmap3d';
import HeatMap3D_2 from './components/heatmap2';
import HeatMapDemo3D from './components/heatmap3d';
import HexagonLayerDemo from './components/hexagon';
import LightDemo from './components/light';
import LineLayer from './components/Line';
import LineAnimate from './components/lineAnimate';
import PointDemo from './components/Point';
import Point3D from './components/Point3D';
import PointImage from './components/PointImage';
@ -22,13 +24,12 @@ import WorldDemo from './components/polygon_line';
import ImageLayerDemo from './components/RasterImage';
import RasterLayerDemo from './components/RasterLayer';
import TextLayerDemo from './components/Text';
import GridTest from './components/gridtest';
// @ts-ignore
storiesOf('图层', module)
.add('点图层', () => <PointDemo />)
.add('聚合图', () => <ClusterDemo />)
.add('数据更新', () => <DataUpdate />)
.add('亮度图', () => <LightDemo />)
.add('点动画', () => <AnimatePoint />)
.add('3D点', () => <Point3D />)
.add('文字', () => <TextLayerDemo />)
@ -38,6 +39,7 @@ storiesOf('图层', module)
.add('面图层', () => <PolygonDemo />)
.add('点亮城市', () => <CityBuildingLayerDemo />)
.add('线图层', () => <LineLayer />)
.add('线图层2', () => <LineAnimate />)
.add('虚线', () => <DashLineDemo />)
.add('3D弧线', () => <ArcLineDemo />)
.add('2D弧线', () => <Arc2DLineDemo />)

36
stories/Layers/components/Arc2DLine.tsx
View File

@ -1,5 +1,5 @@
import { LineLayer, Scene } from '@antv/l7';
import { Mapbox, GaodeMap } from '@antv/l7-maps';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Arc2DLineDemo extends React.Component {
@ -26,17 +26,33 @@ export default class Arc2DLineDemo extends React.Component {
const lineLayer = new LineLayer({
blend: 'normal',
})
.source(await response.text(), {
parser: {
type: 'csv',
x1: 'lng1',
y1: 'lat1',
x: 'lng2',
y: 'lat2',
.source(
[
{
lng1: 84.375,
lat1: 47.517200697839414,
lng2: 117.94921874999999,
lat2: 22.268764039073968,
},
],
{
parser: {
type: 'json',
x1: 'lng1',
y1: 'lat1',
x: 'lng2',
y: 'lat2',
},
},
})
.size(3)
)
.size(2)
.shape('arc')
.animate({
enable: true,
interval: 0.1,
trailLength: 0.5,
duration: 0.5,
})
.color('#8C1EB2')
.style({
opacity: 1,

83
stories/Layers/components/cluster.tsx Normal file
View File

@ -0,0 +1,83 @@
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
// @ts-ignore
import data from '../data/data.json';
export default class Point3D extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
pickBufferScale: 3.0,
map: new GaodeMap({
style: 'light',
center: [-121.24357, 37.58264],
pitch: 0,
zoom: 10.45,
}),
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
)
.then((res) => res.text())
.then((data) => {
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
y: 'Latitude',
},
cluster: true,
})
.shape('circle')
.size(8)
.active({
color: 'red',
})
.color('point_count', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0',
])
.style({
opacity: 1,
strokeWidth: 0,
stroke: '#fff',
});
scene.addLayer(pointLayer);
this.scene = scene;
});
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

90
stories/Layers/components/light.tsx
View File

@ -1,90 +0,0 @@
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as dat from 'dat.gui';
import * as React from 'react';
// @ts-ignore
export default class Light extends React.Component {
// @ts-ignore
private scene: Scene;
private gui: dat.GUI;
public componentWillUnmount() {
this.scene.destroy();
if (this.gui) {
this.gui.destroy();
}
}
public async componentDidMount() {
const response = await fetch(
'https://gw-office.alipayobjects.com/bmw-prod/6698fc37-4fc1-488b-972c-e29c77617a26.csv',
);
const pointsData = await response.text();
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark',
center: [114.298569, 30.584354],
zoom: 11,
}),
});
this.scene = scene;
const layerConfig = {
type: 'bus',
};
const gui = new dat.GUI();
this.gui = gui;
const typeControl = this.gui.add(layerConfig, 'type', [
'bus',
'elm',
'bikeriding',
'metro',
'parking',
]);
scene.on('loaded', async () => {
const pointLayer = new PointLayer()
.source(pointsData, {
parser: {
type: 'csv',
y: 'latitude',
x: 'longitude',
},
})
.size(0.5)
.filter('type', (v: string) => {
return v === 'bus';
})
.color('#FF2B1F')
.style({
opacity: 1,
});
scene.addLayer(pointLayer);
typeControl.onChange((type) => {
pointLayer.filter('type', (v) => {
return v === type;
});
scene.render();
});
this.scene = scene;
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

73
stories/Layers/components/lineAnimate.tsx Normal file
View File

@ -0,0 +1,73 @@
import { LineLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class LineDemo extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json',
);
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [110.19382669582967, 40.258134],
pitch: 0,
zoom: 3,
style: 'dark',
}),
});
const data = await response.json();
data.features = data.features.map((fe: any) => {
if (fe.properties.saldo < 0) {
fe.geometry.coordinates = fe.geometry.coordinates.reverse();
}
return fe;
});
const lineLayer = new LineLayer({
blend: 'normal',
});
lineLayer
.source(data)
.shape('line')
.size('saldo', [0.4, 0.8])
.color('saldo', (v) => {
return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
})
// .color('red')
.animate({
enable: true,
interval: 0.1,
duration: 3,
trailLength: 0.2,
})
.style({
opacity: 1,
})
.render();
lineLayer.fitBounds();
scene.addLayer(lineLayer);
this.scene = scene;
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

12
yarn.lock
View File

@ -2866,15 +2866,13 @@
dependencies:
slash "^3.0.0"
"@rollup/plugin-commonjs@^11.0.0":
version "11.1.0"
resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
integrity sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==
"@rollup/plugin-commonjs@11.0.2":
version "11.0.2"
resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.2.tgz#837cc6950752327cb90177b608f0928a4e60b582"
integrity sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
dependencies:
"@rollup/pluginutils" "^3.0.8"
commondir "^1.0.1"
"@rollup/pluginutils" "^3.0.0"
estree-walker "^1.0.1"
glob "^7.1.2"
is-reference "^1.1.2"
magic-string "^0.25.2"
resolve "^1.11.0"