mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' into draw_doc
This commit is contained in:
thinkinggis
commit
998ca7c261
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: 地图绘制组件
|
title: Draw Component
|
||||||
order: 2
|
order: 2
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -0,0 +1,279 @@
|
||||||
|
---
|
||||||
|
title: 地图绘制组件
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||||
|
|
||||||
|
# 使用
|
||||||
|
|
||||||
|
**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);
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// CDN 引用
|
||||||
|
const control = new L7.Draw.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,4 @@
|
||||||
|
---
|
||||||
|
title: QuickStart
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
---
|
||||||
|
title: 快速使用
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||||
|
|
||||||
|
# 使用
|
||||||
|
|
||||||
|
**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.addControl(control);
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// CDN 引用
|
||||||
|
const control = new L7.Draw.DrawControl(scene, option);
|
||||||
|
scene.addControl(control);
|
||||||
|
```
|
||||||
|
|
@ -9,6 +9,7 @@ order: 1
|
||||||
### 数据
|
### 数据
|
||||||
绘制弧线只需提供起止点坐标即可
|
绘制弧线只需提供起止点坐标即可
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
source(data, {
|
source(data, {
|
||||||
parser: {
|
parser: {
|
||||||
|
|
@ -80,3 +81,6 @@ const layer = new LineLayer({})
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### demo 示例
|
||||||
|
[弧线demo](../../../../examples/gallery/basic#arcCircle)
|
||||||
|
|
|
||||||
|
|
@ -77,11 +77,19 @@ module.exports = {
|
||||||
},
|
},
|
||||||
order: 1
|
order: 1
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
slug: 'api/draw',
|
||||||
|
title: {
|
||||||
|
zh: '绘制组件',
|
||||||
|
en: 'Draw Component'
|
||||||
|
},
|
||||||
|
order: 2
|
||||||
|
},
|
||||||
{
|
{
|
||||||
slug: 'api/react',
|
slug: 'api/react',
|
||||||
title: {
|
title: {
|
||||||
zh: 'React 组件',
|
zh: 'React 组件',
|
||||||
en: 'react component'
|
en: 'React Component'
|
||||||
},
|
},
|
||||||
order: 2
|
order: 2
|
||||||
},
|
},
|
||||||
|
|
@ -91,7 +99,7 @@ module.exports = {
|
||||||
zh: '图层 Layer',
|
zh: '图层 Layer',
|
||||||
en: 'Layer'
|
en: 'Layer'
|
||||||
},
|
},
|
||||||
order: 4
|
order: 5
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: 'api/layer/point_layer',
|
slug: 'api/layer/point_layer',
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antv/g2": "^3.5.9",
|
"@antv/g2": "^3.5.9",
|
||||||
"@antv/gatsby-theme-antv": "^0.10.43",
|
"@antv/gatsby-theme-antv": "0.10.43",
|
||||||
"@babel/cli": "^7.6.4",
|
"@babel/cli": "^7.6.4",
|
||||||
"@babel/core": "^7.6.4",
|
"@babel/core": "^7.6.4",
|
||||||
"@babel/plugin-proposal-decorators": "^7.6.0",
|
"@babel/plugin-proposal-decorators": "^7.6.0",
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
"gatsby": "^2.19.15",
|
"gatsby": "^2.19.15",
|
||||||
"gatsby-plugin-google-analytics": "^2.1.27",
|
"gatsby-plugin-google-analytics": "^2.1.27",
|
||||||
"gatsby-remark-prettier": "^1.0.0",
|
"gatsby-remark-prettier": "^1.0.0",
|
||||||
"geotiff": "^1.0.0-beta.6",
|
"geotiff": "1.0.0-beta.10",
|
||||||
"gh-pages": "^2.1.1",
|
"gh-pages": "^2.1.1",
|
||||||
"gl": "^4.4.0",
|
"gl": "^4.4.0",
|
||||||
"glsl-minifier": "^0.0.13",
|
"glsl-minifier": "^0.0.13",
|
||||||
|
|
@ -185,6 +185,7 @@
|
||||||
},
|
},
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@turf/turf": "^5.1.6"
|
"@turf/turf": "^5.1.6",
|
||||||
|
"gatsby-cli": "2.11.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -35,8 +35,6 @@
|
||||||
"test": "jest"
|
"test": "jest"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7": "^2.1.15",
|
|
||||||
"@antv/l7-component": "^2.1.15",
|
|
||||||
"@babel/runtime": "^7.7.7",
|
"@babel/runtime": "^7.7.7",
|
||||||
"@turf/circle": "^6.0.1",
|
"@turf/circle": "^6.0.1",
|
||||||
"@turf/distance": "^6.0.1",
|
"@turf/distance": "^6.0.1",
|
||||||
|
|
@ -44,6 +42,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"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ export default {
|
||||||
output: [
|
output: [
|
||||||
{
|
{
|
||||||
format: 'umd',
|
format: 'umd',
|
||||||
name: 'L7-Draw',
|
name: 'L7.Draw',
|
||||||
file: pkg.unpkg,
|
file: pkg.unpkg,
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
globals: {
|
globals: {
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@ export default class ArcModel extends BaseModel {
|
||||||
segmentNumber: 30,
|
segmentNumber: 30,
|
||||||
u_line_type: lineStyleObj[lineType || 'solid'],
|
u_line_type: lineStyleObj[lineType || 'solid'],
|
||||||
u_dash_array: dashArray,
|
u_dash_array: dashArray,
|
||||||
|
u_blur: 0.9,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,8 +17,9 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
gl_FragColor = v_color;
|
gl_FragColor = v_color;
|
||||||
float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
||||||
gl_FragColor.a *= u_opacity * blur;
|
// float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
|
||||||
|
gl_FragColor.a *= u_opacity;
|
||||||
if(u_line_type == LineTypeDash) {
|
if(u_line_type == LineTypeDash) {
|
||||||
gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
|
gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,9 @@ void main() {
|
||||||
gl_FragColor = v_color;
|
gl_FragColor = v_color;
|
||||||
// gl_FragColor.a = v_distance_ratio;
|
// gl_FragColor.a = v_distance_ratio;
|
||||||
// anti-alias
|
// anti-alias
|
||||||
float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity;
|
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity;
|
||||||
// gl_FragColor.a *= blur * ceil(mod(v_distance_ratio, v_dash_array.x) - v_dash_array.y);
|
// gl_FragColor.a *= blur * ceil(mod(v_distance_ratio, v_dash_array.x) - v_dash_array.y);
|
||||||
gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
|
gl_FragColor.a *= u_opacity * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,8 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
|
||||||
void main() {
|
void main() {
|
||||||
gl_FragColor = v_color;
|
gl_FragColor = v_color;
|
||||||
// anti-alias
|
// anti-alias
|
||||||
float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
||||||
gl_FragColor.a *= blur * u_opacity;
|
gl_FragColor.a *= u_opacity;
|
||||||
|
|
||||||
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);
|
||||||
|
|
|
||||||
|
|
@ -36,15 +36,15 @@ export default class ArcLineDemo extends React.Component {
|
||||||
y1: 'lat2',
|
y1: 'lat2',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
// .size(1)
|
.size(2)
|
||||||
.shape('arc')
|
.shape('arc3d')
|
||||||
.select({
|
.select({
|
||||||
color: 'red',
|
color: 'red',
|
||||||
})
|
})
|
||||||
.active({
|
.active({
|
||||||
color: 'red',
|
color: 'red',
|
||||||
})
|
})
|
||||||
// .color('rgb(13,64,140)')
|
.color('rgb(13,64,140)')
|
||||||
.style({
|
.style({
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue