mirror of https://gitee.com/antv-l7/antv-l7
docs: 更新draw 绘制文档
This commit is contained in:
thinkinggis
parent
12fefa3a55
commit
e5860d717d
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 地图绘制组件
|
||||
title: Draw Component
|
||||
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
|
||||
source(data, {
|
||||
parser: {
|
||||
|
|
@ -74,3 +75,6 @@ const layer = new LineLayer({})
|
|||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
### demo 示例
|
||||
[弧线demo](../../../../examples/gallery/basic#arcCircle)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
require('./site/css/demo.css');
|
||||
require('./packages/component/src/css/l7.css');
|
||||
window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
|
||||
window.geotiff = require('geotiff');
|
||||
window.g2 = require('@antv/g2');
|
||||
window.l7 = require('@antv/l7');
|
||||
window.l7Maps = require('@antv/l7-maps');
|
||||
|
|
|
|||
|
|
@ -77,11 +77,19 @@ module.exports = {
|
|||
},
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
slug: 'api/draw',
|
||||
title: {
|
||||
zh: '绘制组件',
|
||||
en: 'Draw Component'
|
||||
},
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
slug: 'api/react',
|
||||
title: {
|
||||
zh: 'React 组件',
|
||||
en: 'react component'
|
||||
en: 'React Component'
|
||||
},
|
||||
order: 2
|
||||
},
|
||||
|
|
@ -91,7 +99,7 @@ module.exports = {
|
|||
zh: '图层 Layer',
|
||||
en: 'Layer'
|
||||
},
|
||||
order: 4
|
||||
order: 5
|
||||
},
|
||||
{
|
||||
slug: 'api/layer/point_layer',
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@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/core": "^7.6.4",
|
||||
"@babel/plugin-proposal-decorators": "^7.6.0",
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
"gatsby": "^2.19.15",
|
||||
"gatsby-plugin-google-analytics": "^2.1.27",
|
||||
"gatsby-remark-prettier": "^1.0.0",
|
||||
"geotiff": "^1.0.0-beta.6",
|
||||
"geotiff": "1.0.0-beta.10",
|
||||
"gh-pages": "^2.1.1",
|
||||
"gl": "^4.4.0",
|
||||
"glsl-minifier": "^0.0.13",
|
||||
|
|
@ -185,6 +185,7 @@
|
|||
},
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@turf/turf": "^5.1.6"
|
||||
"@turf/turf": "^5.1.6",
|
||||
"gatsby-cli": "2.11.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,6 @@
|
|||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7": "^2.1.15",
|
||||
"@antv/l7-component": "^2.1.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/circle": "^6.0.1",
|
||||
"@turf/distance": "^6.0.1",
|
||||
|
|
@ -44,6 +42,9 @@
|
|||
"@turf/midpoint": "^5.1.5",
|
||||
"lodash": "^4.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@antv/l7": "^2.1.15"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/L7/issues"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default {
|
|||
output: [
|
||||
{
|
||||
format: 'umd',
|
||||
name: 'L7-Draw',
|
||||
name: 'L7.Draw',
|
||||
file: pkg.unpkg,
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export default class ArcModel extends BaseModel {
|
|||
segmentNumber: 30,
|
||||
u_line_type: lineStyleObj[lineType || 'solid'],
|
||||
u_dash_array: dashArray,
|
||||
u_blur: 0.9,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,8 +17,9 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
|
|||
|
||||
void main() {
|
||||
gl_FragColor = v_color;
|
||||
float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
||||
gl_FragColor.a *= u_opacity * blur;
|
||||
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
||||
// float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
|
||||
gl_FragColor.a *= u_opacity;
|
||||
if(u_line_type == LineTypeDash) {
|
||||
gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ void main() {
|
|||
gl_FragColor = v_color;
|
||||
// gl_FragColor.a = v_distance_ratio;
|
||||
// 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 * (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() {
|
||||
gl_FragColor = v_color;
|
||||
// anti-alias
|
||||
float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
||||
gl_FragColor.a *= blur * u_opacity;
|
||||
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
||||
gl_FragColor.a *= u_opacity;
|
||||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -36,15 +36,15 @@ export default class ArcLineDemo extends React.Component {
|
|||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
// .size(1)
|
||||
.shape('arc')
|
||||
.size(2)
|
||||
.shape('arc3d')
|
||||
.select({
|
||||
color: 'red',
|
||||
})
|
||||
.active({
|
||||
color: 'red',
|
||||
})
|
||||
// .color('rgb(13,64,140)')
|
||||
.color('rgb(13,64,140)')
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue