mirror of https://gitee.com/antv-l7/antv-l7
docs: 官网文档补充 (#1076)
* chore: update version 2.8.30 -> 2.8.31 * docs: 增加框选的 demo * docs: 补充 raisingHeight 的文档
This commit is contained in:
YiQianYao
GitHub
parent
9f075803fb
commit
7acb179ad3
|
|
@ -43,4 +43,8 @@ layer.shape('name', 'text');
|
|||
|
||||
[在线案例](../../../examples/point/text#point_text)
|
||||
|
||||
## 额外的 style 配置
|
||||
|
||||
- raisingHeight 设置 3D 填充图的抬升高度
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -38,4 +38,8 @@ order: 3
|
|||
|
||||
[在线案例](../../../examples/point/scatter#animatePoint)
|
||||
|
||||
## 额外的 style 配置
|
||||
|
||||
- raisingHeight 设置 3D 填充图的抬升高度
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -93,6 +93,12 @@ const provincelayer = new PolygonLayer({})
|
|||
});
|
||||
```
|
||||
|
||||
- topsurface: boolean
|
||||
控制顶面的显隐，默认为 true
|
||||
|
||||
- sidesurface: boolean
|
||||
控制侧面的显隐，默认为 true
|
||||
|
||||
[在线案例](/zh/examples/polygon/3d#texture3D)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -45,4 +45,6 @@ style({
|
|||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Ob62Q7JDpZ4AAAAAAAAAAAAAARQnAQ">
|
||||
|
||||
- raisingHeight 设置 3D 填充图的抬升高度
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -53,3 +53,5 @@ layer.boxSelect(box, cb);
|
|||
// (x1, y1), (x2, y2) 框选的方框左上角和右下角相对于地图左上角的像素坐标
|
||||
// cb 是传入的回调函数，回调函数返回的参数是选中的 feature 对象数组，对象的字段和用户传入的数据相关
|
||||
```
|
||||
|
||||
[在线案例](/zh/examples/gallery/animate#box_select)
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
import { Scene, LineLayer, PolygonLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const mapWrap = document.getElementById('map');
|
||||
const { left, top } = mapWrap.getBoundingClientRect();
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 110, 30 ],
|
||||
zoom: 2.5,
|
||||
style: 'dark',
|
||||
dragEnable: false
|
||||
})
|
||||
});
|
||||
const emptyFeatureCollextion = {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
};
|
||||
|
||||
function getSelectData(data) {
|
||||
return [
|
||||
Math.min(data[0], data[2]), // x1
|
||||
Math.min(data[1], data[3]), // y1
|
||||
Math.max(data[0], data[2]), // x2
|
||||
Math.max(data[1], data[3]) // y2
|
||||
];
|
||||
}
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch('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');
|
||||
|
||||
// 图层边界
|
||||
const chinaBorderLineLayer = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('rgb(93,112,146)')
|
||||
.size(0.6);
|
||||
|
||||
const selectLineLayer = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(emptyFeatureCollextion)
|
||||
.color('#fff')
|
||||
.size(2);
|
||||
|
||||
const boxLayer = new PolygonLayer({})
|
||||
.source(emptyFeatureCollextion)
|
||||
.color('#fff')
|
||||
.size(2)
|
||||
.style({
|
||||
opacity: 0.6,
|
||||
lineType: 'dash',
|
||||
dashArray: [ 5, 5 ]
|
||||
})
|
||||
.shape('line');
|
||||
|
||||
chinaPolygonLayer.on('unclick', () => {
|
||||
selectLineLayer.setData(emptyFeatureCollextion);
|
||||
});
|
||||
|
||||
scene.addLayer(chinaPolygonLayer);
|
||||
scene.addLayer(chinaBorderLineLayer);
|
||||
scene.addLayer(selectLineLayer);
|
||||
scene.addLayer(boxLayer);
|
||||
|
||||
let startLngLat = { lng: 0, lat: 0, x: 0, y: 0 };
|
||||
const selectNames = '';
|
||||
|
||||
scene.on('dragstart', e => {
|
||||
selectLineLayer.setData(emptyFeatureCollextion);
|
||||
startLngLat = {
|
||||
...e.lngLat,
|
||||
x: e.target.x,
|
||||
y: e.target.y
|
||||
};
|
||||
});
|
||||
|
||||
scene.on(
|
||||
'dragging',
|
||||
e => {
|
||||
const {
|
||||
lng: startLng,
|
||||
lat: startLat
|
||||
|
||||
} = startLngLat;
|
||||
const { lng: endLng, lat: endLat } = e.lngLat;
|
||||
|
||||
boxLayer.setData({
|
||||
type: 'FeatureCollection',
|
||||
features: [{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
[ startLng, endLat ],
|
||||
[ endLng, endLat ],
|
||||
[ endLng, startLat ],
|
||||
[ startLng, startLat ],
|
||||
[ startLng, endLat ]
|
||||
]
|
||||
]
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
scene.on('dragend', e => {
|
||||
const {
|
||||
x: startX,
|
||||
y: startY
|
||||
} = startLngLat;
|
||||
const { x: endX, y: endY } = e.target;
|
||||
boxLayer.setData(emptyFeatureCollextion);
|
||||
const selectData = [ startX - left, startY - top, endX - left, endY - top ];
|
||||
chinaPolygonLayer.boxSelect(getSelectData(selectData),
|
||||
features => {
|
||||
const currentSelectNames = features
|
||||
.map(item => item.properties.name)
|
||||
.join(',');
|
||||
if (currentSelectNames !== selectNames) {
|
||||
selectLineLayer.setData({
|
||||
type: 'FeatureCollection',
|
||||
features: [ ...features ]
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -43,6 +43,11 @@
|
|||
"filename": "route_line.js",
|
||||
"title": "航线图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*NEKUR6HzXFEAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "box_select.js",
|
||||
"title": "框选要素",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*G1lyQ6e5gKAAAAAAAAAAAAAAARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
---
|
||||
title: Animate
|
||||
title: Recommend
|
||||
order: 0
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
---
|
||||
title: 动画
|
||||
title: 推荐
|
||||
order: 0
|
||||
---
|
||||
|
|
|
|||
Loading…
Reference in New Issue