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 test
|
||||
- yarn build
|
||||
- yarn bundle
|
||||
|
||||
notifications:
|
||||
webhooks: $dingdingWebhooks
|
||||
webhooks: ${dingdingWebhooks}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
// };
|
||||
|
|
|
|||
|
|
@ -54,6 +54,14 @@ layer.animate({
|
|||
|
||||
})
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||
|
||||
|
||||
### 示例代码
|
||||
|
||||
```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": [
|
||||
{
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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.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');
|
||||
|
|
|
|||
|
|
@ -191,6 +191,14 @@ module.exports = {
|
|||
en: 'React Demo'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'draw',
|
||||
icon: 'map',
|
||||
title: {
|
||||
zh: '绘制 组件',
|
||||
en: 'L7 Draw'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'point',
|
||||
icon: 'point',
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.1",
|
||||
"@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",
|
||||
|
|
@ -115,7 +116,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",
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -120,15 +120,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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@
|
|||
"@turf/midpoint": "^5.1.5",
|
||||
"lodash": "^4.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@antv/l7": "^2.1.15"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/L7/issues"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@
|
|||
"#A1EDB8",
|
||||
"#CEF8D6"
|
||||
])
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@
|
|||
"#A1EDB8",
|
||||
"#CEF8D6"
|
||||
])
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,15 +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';
|
||||
import ClusterDemo from './components/cluster';
|
||||
|
||||
// @ts-ignore
|
||||
storiesOf('图层', module)
|
||||
.add('点图层', () => <PointDemo />)
|
||||
.add('聚合图', () => <ClusterDemo />)
|
||||
.add('数据更新', () => <DataUpdate />)
|
||||
.add('亮度图', () => <LightDemo />)
|
||||
.add('点动画', () => <AnimatePoint />)
|
||||
.add('3D点', () => <Point3D />)
|
||||
.add('文字', () => <TextLayerDemo />)
|
||||
|
|
@ -40,6 +39,7 @@ storiesOf('图层', module)
|
|||
.add('面图层', () => <PolygonDemo />)
|
||||
.add('点亮城市', () => <CityBuildingLayerDemo />)
|
||||
.add('线图层', () => <LineLayer />)
|
||||
.add('线图层2', () => <LineAnimate />)
|
||||
.add('虚线', () => <DashLineDemo />)
|
||||
.add('3D弧线', () => <ArcLineDemo />)
|
||||
.add('2D弧线', () => <Arc2DLineDemo />)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
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.1":
|
||||
version "11.0.1"
|
||||
resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.1.tgz#6056a6757286901cc6c1599123e6680a78cad6c2"
|
||||
integrity sha512-SaVUoaLDg3KnIXC5IBNIspr1APTYDzk05VaYcI6qz+0XX3ZlSCwAkfAhNSOxfd5GAdcm/63Noi4TowOY9MpcDg==
|
||||
dependencies:
|
||||
"@rollup/pluginutils" "^3.0.8"
|
||||
commondir "^1.0.1"
|
||||
estree-walker "^1.0.1"
|
||||
glob "^7.1.2"
|
||||
"@rollup/pluginutils" "^3.0.0"
|
||||
estree-walker "^0.6.1"
|
||||
is-reference "^1.1.2"
|
||||
magic-string "^0.25.2"
|
||||
resolve "^1.11.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue