mirror of https://gitee.com/antv-l7/antv-l7
docs: add 中国地图省级,市级行政区划demo
This commit is contained in:
thinkinggis
parent
05e16bffd5
commit
0b83a3b8f0
|
|
@ -1,274 +0,0 @@
|
|||
---
|
||||
title: Draw Component
|
||||
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);
|
||||
```
|
||||
|
||||
#### 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,95 @@
|
|||
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',
|
||||
[
|
||||
'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/basement_prod/ba8fa803-a8c3-4c67-b806-fe1c444546bd.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,96 @@
|
|||
|
||||
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噢利用
|
||||
)
|
||||
.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/basement_prod/ba8fa803-a8c3-4c67-b806-fe1c444546bd.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/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);
|
||||
});
|
||||
});
|
||||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue