mirror of https://gitee.com/antv-l7/antv-l7
chore: merge master
This commit is contained in:
thinkinggis
commit
e72033eead
|
|
@ -33,6 +33,7 @@ script:
|
||||||
- yarn lint
|
- yarn lint
|
||||||
- yarn test
|
- yarn test
|
||||||
- yarn build
|
- yarn build
|
||||||
|
- yarn bundle
|
||||||
|
|
||||||
notifications:
|
notifications:
|
||||||
webhooks: $dingdingWebhooks
|
webhooks: ${dingdingWebhooks}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,2 @@
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export * from '@antv/l7';
|
export * from '@antv/l7';
|
||||||
// import * as L7 from '@antv/l7';
|
|
||||||
// export default L7;
|
|
||||||
|
|
||||||
// import { Scene } from '@antv/l7';
|
|
||||||
// // export { Scene };
|
|
||||||
// export default {
|
|
||||||
// Scene,
|
|
||||||
// };
|
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,14 @@ layer.animate({
|
||||||
|
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
##### 参数动画介绍
|
||||||
|
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||||
|
|
||||||
|
|
||||||
|
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||||
|
|
||||||
|
|
||||||
### 示例代码
|
### 示例代码
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,12 @@ layer.animate({
|
||||||
|
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
##### 参数动画介绍
|
||||||
|
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||||
|
|
||||||
|
|
||||||
|
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 示例代码
|
### 示例代码
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,12 @@ layer.animate({
|
||||||
|
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
##### 参数动画介绍
|
||||||
|
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||||
|
|
||||||
|
|
||||||
|
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -45,5 +45,13 @@ layer.animate({
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
##### 参数动画介绍
|
||||||
|
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||||
|
|
||||||
|
|
||||||
|
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
@ -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: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: L7 Draw
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: 绘制组件
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -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"
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Line Animate
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: 线动画
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -5,9 +5,14 @@
|
||||||
},
|
},
|
||||||
"demos": [
|
"demos": [
|
||||||
{
|
{
|
||||||
"filename": "polygon.js",
|
"filename": "province.js",
|
||||||
"title": "全国地图行政区划",
|
"title": "中国地图省级",
|
||||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
|
"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",
|
"filename": "usa.js",
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -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]}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -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]}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -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>;
|
||||||
|
```
|
||||||
|
|
@ -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>;
|
||||||
|
```
|
||||||
|
|
@ -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>;
|
||||||
|
```
|
||||||
|
|
@ -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>;
|
||||||
|
```
|
||||||
|
|
@ -6,5 +6,6 @@ window.g2 = require('@antv/g2');
|
||||||
window.l7 = require('@antv/l7');
|
window.l7 = require('@antv/l7');
|
||||||
window.l7Maps = require('@antv/l7-maps');
|
window.l7Maps = require('@antv/l7-maps');
|
||||||
window.l7React = require('@antv/l7-react');
|
window.l7React = require('@antv/l7-react');
|
||||||
|
window.l7Draw = require('@antv/l7-draw');
|
||||||
window.react = require('react');
|
window.react = require('react');
|
||||||
window.reactDom = require('react-dom');
|
window.reactDom = require('react-dom');
|
||||||
|
|
|
||||||
|
|
@ -191,6 +191,14 @@ module.exports = {
|
||||||
en: 'React Demo'
|
en: 'React Demo'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
slug: 'draw',
|
||||||
|
icon: 'map',
|
||||||
|
title: {
|
||||||
|
zh: '绘制 组件',
|
||||||
|
en: 'L7 Draw'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
slug: 'point',
|
slug: 'point',
|
||||||
icon: 'point',
|
icon: 'point',
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
|
||||||
'@antv/l7-scene': path.resolve(__dirname, 'packages/scene/src'),
|
'@antv/l7-scene': path.resolve(__dirname, 'packages/scene/src'),
|
||||||
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
|
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
|
||||||
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/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')
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -23,10 +23,11 @@
|
||||||
"@commitlint/cli": "^8.1.0",
|
"@commitlint/cli": "^8.1.0",
|
||||||
"@commitlint/config-conventional": "^8.1.0",
|
"@commitlint/config-conventional": "^8.1.0",
|
||||||
"@rollup/plugin-alias": "^2.2.0",
|
"@rollup/plugin-alias": "^2.2.0",
|
||||||
"@rollup/plugin-commonjs": "^11.0.0",
|
"@rollup/plugin-commonjs": "11.0.1",
|
||||||
"@rollup/plugin-json": "^4.0.0",
|
"@rollup/plugin-json": "^4.0.0",
|
||||||
"@rollup/plugin-node-resolve": "^6.0.0",
|
"@rollup/plugin-node-resolve": "^6.0.0",
|
||||||
"@storybook/react": "^5.1.9",
|
"@storybook/react": "^5.1.9",
|
||||||
|
"@turf/turf": "^5.1.6",
|
||||||
"@types/dat.gui": "^0.7.1",
|
"@types/dat.gui": "^0.7.1",
|
||||||
"@types/enzyme": "^3.1.14",
|
"@types/enzyme": "^3.1.14",
|
||||||
"@types/enzyme-adapter-react-16": "^1.0.3",
|
"@types/enzyme-adapter-react-16": "^1.0.3",
|
||||||
|
|
@ -115,7 +116,6 @@
|
||||||
"tslint-plugin-prettier": "^1.3.0",
|
"tslint-plugin-prettier": "^1.3.0",
|
||||||
"tslint-react": "^3.6.0",
|
"tslint-react": "^3.6.0",
|
||||||
"typescript": "^3.7.0-beta",
|
"typescript": "^3.7.0-beta",
|
||||||
"@turf/turf": "^5.1.6",
|
|
||||||
"webpack": "^4.17.1",
|
"webpack": "^4.17.1",
|
||||||
"webpack-cli": "^3.1.0",
|
"webpack-cli": "^3.1.0",
|
||||||
"webpack-dev-server": "^3.1.7",
|
"webpack-dev-server": "^3.1.7",
|
||||||
|
|
|
||||||
|
|
@ -33,13 +33,19 @@ export default class Scale extends Control {
|
||||||
this.addScales(className + '-line', container);
|
this.addScales(className + '-line', container);
|
||||||
const { updateWhenIdle } = this.controlOption;
|
const { updateWhenIdle } = this.controlOption;
|
||||||
// TODO: 高德地图和MapBox地图事件不一致问题
|
// TODO: 高德地图和MapBox地图事件不一致问题
|
||||||
|
// 高德zoomchange
|
||||||
this.mapsService.on(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
|
this.mapsService.on(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
|
||||||
|
this.mapsService.on(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
|
||||||
this.update();
|
this.update();
|
||||||
|
|
||||||
return container;
|
return container;
|
||||||
}
|
}
|
||||||
public onRemove() {
|
public onRemove() {
|
||||||
const { updateWhenIdle } = this.controlOption;
|
const { updateWhenIdle } = this.controlOption;
|
||||||
|
this.mapsService.off(
|
||||||
|
updateWhenIdle ? 'zoomend' : 'zoomchange',
|
||||||
|
this.update,
|
||||||
|
);
|
||||||
this.mapsService.off(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
|
this.mapsService.off(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
|
||||||
}
|
}
|
||||||
public update() {
|
public update() {
|
||||||
|
|
|
||||||
|
|
@ -220,8 +220,22 @@ export default class Marker extends EventEmitter {
|
||||||
}
|
}
|
||||||
const { element, offsets } = this.markerOption;
|
const { element, offsets } = this.markerOption;
|
||||||
const { lng, lat } = this.lngLat;
|
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]);
|
const pos = this.mapsService.lngLatToContainer([lng, lat]);
|
||||||
if (element) {
|
if (element) {
|
||||||
|
element.style.display = 'block';
|
||||||
element.style.left = pos.x + offsets[0] + 'px';
|
element.style.left = pos.x + offsets[0] + 'px';
|
||||||
element.style.top = pos.y - offsets[1] + 'px';
|
element.style.top = pos.y - offsets[1] + 'px';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -120,15 +120,6 @@ export default class Scene extends EventEmitter implements ISceneService {
|
||||||
// 设置场景配置项
|
// 设置场景配置项
|
||||||
this.configService.setSceneConfig(this.id, sceneConfig);
|
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
|
// 初始化 ShaderModule
|
||||||
this.shaderModuleService.registerBuiltinModules();
|
this.shaderModuleService.registerBuiltinModules();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ export function createRendererContainer(
|
||||||
const $container = document.createElement('div');
|
const $container = document.createElement('div');
|
||||||
$container.style.cssText += `
|
$container.style.cssText += `
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
|
||||||
z-index:2;
|
z-index:2;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,9 @@
|
||||||
"@turf/midpoint": "^5.1.5",
|
"@turf/midpoint": "^5.1.5",
|
||||||
"lodash": "^4.6.2"
|
"lodash": "^4.6.2"
|
||||||
},
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@antv/l7": "^2.1.15"
|
||||||
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/antvis/L7/issues"
|
"url": "https://github.com/antvis/L7/issues"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
/*
|
/*
|
||||||
* @Author: lzxue
|
* @Author: lzxue
|
||||||
* @Date: 2020-04-03 19:24:16
|
* @Date: 2020-04-03 19:24:16
|
||||||
* @Last Modified by: mikey.zhaopeng
|
* @Last Modified by: lzxue
|
||||||
* @Last Modified time: 2020-04-09 19:34:41
|
* @Last Modified time: 2020-04-20 20:40:33
|
||||||
*/
|
*/
|
||||||
import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
|
import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
|
||||||
import './css/draw.less';
|
import './css/draw.less';
|
||||||
|
|
@ -90,6 +90,7 @@ export class DrawControl extends Control {
|
||||||
draw.title,
|
draw.title,
|
||||||
'draw-' + type,
|
'draw-' + type,
|
||||||
container,
|
container,
|
||||||
|
'click',
|
||||||
this.onButtonClick.bind(null, type),
|
this.onButtonClick.bind(null, type),
|
||||||
);
|
);
|
||||||
} else if (type === 'delete' && controls[type] !== false) {
|
} else if (type === 'delete' && controls[type] !== false) {
|
||||||
|
|
@ -99,6 +100,7 @@ export class DrawControl extends Control {
|
||||||
draw.title,
|
draw.title,
|
||||||
'draw-' + type,
|
'draw-' + type,
|
||||||
container,
|
container,
|
||||||
|
'mousedown',
|
||||||
this.onDeleteMode.bind(null, type),
|
this.onDeleteMode.bind(null, type),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -109,11 +111,12 @@ export class DrawControl extends Control {
|
||||||
tile: string,
|
tile: string,
|
||||||
className: string,
|
className: string,
|
||||||
container: HTMLElement,
|
container: HTMLElement,
|
||||||
|
eventType: string,
|
||||||
fn: (...arg: any[]) => any,
|
fn: (...arg: any[]) => any,
|
||||||
) {
|
) {
|
||||||
const link = DOM.create('button', className, container);
|
const link = DOM.create('button', className, container);
|
||||||
link.title = tile;
|
link.title = tile;
|
||||||
link.addEventListener('mouseup', fn, false);
|
link.addEventListener(eventType, fn, false);
|
||||||
return link;
|
return link;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -217,6 +217,8 @@ export default abstract class DrawFeature extends DrawMode {
|
||||||
this.clear();
|
this.clear();
|
||||||
this.source.removeFeature(this.currentFeature as Feature);
|
this.source.removeFeature(this.currentFeature as Feature);
|
||||||
this.normalLayer.update(this.source.data);
|
this.normalLayer.update(this.source.data);
|
||||||
|
this.drawLayer.disableSelect();
|
||||||
|
this.currentFeature = null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -65,6 +65,7 @@
|
||||||
"#A1EDB8",
|
"#A1EDB8",
|
||||||
"#CEF8D6"
|
"#CEF8D6"
|
||||||
])
|
])
|
||||||
|
.active(true)
|
||||||
.style({
|
.style({
|
||||||
opacity: 1.0
|
opacity: 1.0
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -65,6 +65,7 @@
|
||||||
"#A1EDB8",
|
"#A1EDB8",
|
||||||
"#CEF8D6"
|
"#CEF8D6"
|
||||||
])
|
])
|
||||||
|
.active(true)
|
||||||
.style({
|
.style({
|
||||||
opacity: 1.0
|
opacity: 1.0
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@ void main() {
|
||||||
if(u_aimate.x == Animate) {
|
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);
|
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 = (alpha + u_aimate.w -1.0) / u_aimate.w;
|
||||||
|
alpha = smoothstep(0., 1., alpha);
|
||||||
gl_FragColor.a *= alpha;
|
gl_FragColor.a *= alpha;
|
||||||
}
|
}
|
||||||
// dash line
|
// dash line
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { Layers, PointLayer, PolygonLayer, Scale, Scene, Zoom } from '@antv/l7';
|
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';
|
import * as React from 'react';
|
||||||
|
|
||||||
export default class ScaleComponent extends React.Component {
|
export default class ScaleComponent extends React.Component {
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,17 @@ import AnimatePoint from './components/AnimatePoint';
|
||||||
import Arc2DLineDemo from './components/Arc2DLine';
|
import Arc2DLineDemo from './components/Arc2DLine';
|
||||||
import ArcLineDemo from './components/Arcline';
|
import ArcLineDemo from './components/Arcline';
|
||||||
import CityBuildingLayerDemo from './components/citybuilding';
|
import CityBuildingLayerDemo from './components/citybuilding';
|
||||||
|
import ClusterDemo from './components/cluster';
|
||||||
import Column from './components/column';
|
import Column from './components/column';
|
||||||
import DashLineDemo from './components/dash';
|
import DashLineDemo from './components/dash';
|
||||||
import DataUpdate from './components/data_update';
|
import DataUpdate from './components/data_update';
|
||||||
|
import GridTest from './components/gridtest';
|
||||||
import HeatMapDemo from './components/HeatMap';
|
import HeatMapDemo from './components/HeatMap';
|
||||||
import HeatMapDemo3D from './components/heatmap3d';
|
|
||||||
import HeatMap3D_2 from './components/heatmap2';
|
import HeatMap3D_2 from './components/heatmap2';
|
||||||
|
import HeatMapDemo3D from './components/heatmap3d';
|
||||||
import HexagonLayerDemo from './components/hexagon';
|
import HexagonLayerDemo from './components/hexagon';
|
||||||
import LightDemo from './components/light';
|
|
||||||
import LineLayer from './components/Line';
|
import LineLayer from './components/Line';
|
||||||
|
import LineAnimate from './components/lineAnimate';
|
||||||
import PointDemo from './components/Point';
|
import PointDemo from './components/Point';
|
||||||
import Point3D from './components/Point3D';
|
import Point3D from './components/Point3D';
|
||||||
import PointImage from './components/PointImage';
|
import PointImage from './components/PointImage';
|
||||||
|
|
@ -22,15 +24,12 @@ import WorldDemo from './components/polygon_line';
|
||||||
import ImageLayerDemo from './components/RasterImage';
|
import ImageLayerDemo from './components/RasterImage';
|
||||||
import RasterLayerDemo from './components/RasterLayer';
|
import RasterLayerDemo from './components/RasterLayer';
|
||||||
import TextLayerDemo from './components/Text';
|
import TextLayerDemo from './components/Text';
|
||||||
import GridTest from './components/gridtest';
|
|
||||||
import ClusterDemo from './components/cluster';
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
storiesOf('图层', module)
|
storiesOf('图层', module)
|
||||||
.add('点图层', () => <PointDemo />)
|
.add('点图层', () => <PointDemo />)
|
||||||
.add('聚合图', () => <ClusterDemo />)
|
.add('聚合图', () => <ClusterDemo />)
|
||||||
.add('数据更新', () => <DataUpdate />)
|
.add('数据更新', () => <DataUpdate />)
|
||||||
.add('亮度图', () => <LightDemo />)
|
|
||||||
.add('点动画', () => <AnimatePoint />)
|
.add('点动画', () => <AnimatePoint />)
|
||||||
.add('3D点', () => <Point3D />)
|
.add('3D点', () => <Point3D />)
|
||||||
.add('文字', () => <TextLayerDemo />)
|
.add('文字', () => <TextLayerDemo />)
|
||||||
|
|
@ -40,6 +39,7 @@ storiesOf('图层', module)
|
||||||
.add('面图层', () => <PolygonDemo />)
|
.add('面图层', () => <PolygonDemo />)
|
||||||
.add('点亮城市', () => <CityBuildingLayerDemo />)
|
.add('点亮城市', () => <CityBuildingLayerDemo />)
|
||||||
.add('线图层', () => <LineLayer />)
|
.add('线图层', () => <LineLayer />)
|
||||||
|
.add('线图层2', () => <LineAnimate />)
|
||||||
.add('虚线', () => <DashLineDemo />)
|
.add('虚线', () => <DashLineDemo />)
|
||||||
.add('3D弧线', () => <ArcLineDemo />)
|
.add('3D弧线', () => <ArcLineDemo />)
|
||||||
.add('2D弧线', () => <Arc2DLineDemo />)
|
.add('2D弧线', () => <Arc2DLineDemo />)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { LineLayer, Scene } from '@antv/l7';
|
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';
|
import * as React from 'react';
|
||||||
|
|
||||||
export default class Arc2DLineDemo extends React.Component {
|
export default class Arc2DLineDemo extends React.Component {
|
||||||
|
|
@ -26,17 +26,33 @@ export default class Arc2DLineDemo extends React.Component {
|
||||||
const lineLayer = new LineLayer({
|
const lineLayer = new LineLayer({
|
||||||
blend: 'normal',
|
blend: 'normal',
|
||||||
})
|
})
|
||||||
.source(await response.text(), {
|
.source(
|
||||||
parser: {
|
[
|
||||||
type: 'csv',
|
{
|
||||||
x1: 'lng1',
|
lng1: 84.375,
|
||||||
y1: 'lat1',
|
lat1: 47.517200697839414,
|
||||||
x: 'lng2',
|
lng2: 117.94921874999999,
|
||||||
y: 'lat2',
|
lat2: 22.268764039073968,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
{
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x1: 'lng1',
|
||||||
|
y1: 'lat1',
|
||||||
|
x: 'lng2',
|
||||||
|
y: 'lat2',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
)
|
||||||
.size(3)
|
.size(2)
|
||||||
.shape('arc')
|
.shape('arc')
|
||||||
|
.animate({
|
||||||
|
enable: true,
|
||||||
|
interval: 0.1,
|
||||||
|
trailLength: 0.5,
|
||||||
|
duration: 0.5,
|
||||||
|
})
|
||||||
.color('#8C1EB2')
|
.color('#8C1EB2')
|
||||||
.style({
|
.style({
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
14
yarn.lock
14
yarn.lock
|
|
@ -2866,15 +2866,13 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
slash "^3.0.0"
|
slash "^3.0.0"
|
||||||
|
|
||||||
"@rollup/plugin-commonjs@^11.0.0":
|
"@rollup/plugin-commonjs@11.0.1":
|
||||||
version "11.1.0"
|
version "11.0.1"
|
||||||
resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
|
resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.1.tgz#6056a6757286901cc6c1599123e6680a78cad6c2"
|
||||||
integrity sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==
|
integrity sha512-SaVUoaLDg3KnIXC5IBNIspr1APTYDzk05VaYcI6qz+0XX3ZlSCwAkfAhNSOxfd5GAdcm/63Noi4TowOY9MpcDg==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@rollup/pluginutils" "^3.0.8"
|
"@rollup/pluginutils" "^3.0.0"
|
||||||
commondir "^1.0.1"
|
estree-walker "^0.6.1"
|
||||||
estree-walker "^1.0.1"
|
|
||||||
glob "^7.1.2"
|
|
||||||
is-reference "^1.1.2"
|
is-reference "^1.1.2"
|
||||||
magic-string "^0.25.2"
|
magic-string "^0.25.2"
|
||||||
resolve "^1.11.0"
|
resolve "^1.11.0"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue