mirror of https://gitee.com/antv-l7/antv-l7
fix: fix scene loaded & add react docs
This commit is contained in:
thinkinggis
parent
b76498a868
commit
a6f004b65e
|
|
@ -69,7 +69,7 @@ scene.addLayer(layer);
|
|||
- parser 数据解析，默认是解析层 geojson
|
||||
- transforms [transform，transform ] 数据处理转换 可设置多个
|
||||
|
||||
parser 和 transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
|
||||
parser 和 transforms [见 source 文档](../source/source)
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Layer Component
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: Layer 组件
|
||||
order: 1
|
||||
---
|
||||
|
||||
## Scene Props
|
||||
| prop name | Type | Default | Description |
|
||||
| ---- | ---- | ---- | ---- |
|
||||
|option |`Object`||layer配置项|
|
||||
|source|||数据源配置项|
|
||||
|color |`attributeOption`||颜色通道|
|
||||
|shape |`attributeOption`||图层形状属性|
|
||||
|size |`attributeOption`||图层大小属性|
|
||||
|style |`Object`||图层样式|
|
||||
|scale |`Object`||图层度量|
|
||||
|filter |`Function`||图层数据过滤方法|
|
||||
|select |`boolean` `Object`||图层选中高亮|
|
||||
|active | `boolean` `Object`|`false`|图层hover高亮|
|
||||
|onLayerLoad|`Function`||图层添加完成后回调，用于获取layer对象|
|
||||
|
||||
### attributeOption
|
||||
color, size, shape 等图形映射通道配置项
|
||||
#### option
|
||||
- field 映射字段，如果是常量设置为 null
|
||||
- values 映射值 支持 常量，数组，回调函数，如果values为数组或回调需要设置field字段
|
||||
|
||||
### sourceOption
|
||||
|
||||
数据源配置项
|
||||
#### Option
|
||||
- data 支持 geojson、csv、json
|
||||
- parser 数据解析配置项
|
||||
- transforms 数据处理配置项
|
||||
|
||||
|
||||
```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,
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: 高德地图
|
||||
order: 1
|
||||
---
|
||||
| prop name | Type | Default | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| style | `Object` | `null` | scene css样式 |
|
||||
| className | `string` |`null` | 样式名称 |
|
||||
| map | `Object` |`Required` | 地图配置项 |
|
||||
| option | `Object` | `void` | scene 配置项 |
|
||||
| onSceneLoaded | `Function` |`void` | scene加载回调函数 |
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
---
|
||||
title: 高德地图
|
||||
order: 1
|
||||
---
|
||||
## Scene Props
|
||||
| prop name | Type | Default | Description |
|
||||
| ---- | ---- | ---- | ---- |
|
||||
| style | `Object` | `null` | scene css样式 |
|
||||
| className | `string` |`null` | 样式名称 |
|
||||
| map | `Object` |`Required` | map option [地图配置项]() |
|
||||
| option | `Object` | `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:'',
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### 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` | 是否保留缓冲区数据 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -89,6 +89,16 @@ L7 Logo 的显示位置 默认左下角
|
|||
|
||||
是否显示 L7 的 Logo {boolean} true
|
||||
|
||||
### antialias
|
||||
|
||||
是否开始前抗锯齿 `boolean` `true`
|
||||
|
||||
### preserveDrawingBuffer
|
||||
|
||||
是否保留缓冲区数据 `boolean` `false`
|
||||
|
||||
## Map 配置项
|
||||
|
||||
### zoom
|
||||
|
||||
地图初始显示级别 {number} （0-22）
|
||||
|
|
@ -114,6 +124,8 @@ L7 Logo 的显示位置 默认左下角
|
|||
|
||||
比如高德地图
|
||||
|
||||
⚠️ 高德地图样式 增加 `isPublic=true` 参数
|
||||
|
||||
```javascript
|
||||
{
|
||||
style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
import { AMapScene, LineLayer } from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
export default React.memo(function Map() {
|
||||
const [ data, setData ] = React.useState();
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json'
|
||||
);
|
||||
const raw = await response.json();
|
||||
setData(raw);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [ 110.19382669582967, 50.258134 ],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 1
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}}
|
||||
>
|
||||
<LineLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data
|
||||
}}
|
||||
size={{
|
||||
values: 1
|
||||
}}
|
||||
color={{
|
||||
values: '#fff'
|
||||
}}
|
||||
shape={{
|
||||
values: 'line'
|
||||
}}
|
||||
style={{
|
||||
opacity: 1
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AMapScene>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "Scene 组件",
|
||||
"en": "Scene Component"
|
||||
},
|
||||
"demos": [
|
||||
|
||||
{
|
||||
"filename": "amap.jsx",
|
||||
"title": "高德地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: React Map
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: React 地图
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -77,6 +77,14 @@ module.exports = {
|
|||
},
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
slug: 'api/react',
|
||||
title: {
|
||||
zh: 'react 组件',
|
||||
en: 'react component'
|
||||
},
|
||||
order: 10
|
||||
},
|
||||
{
|
||||
slug: 'api/layer',
|
||||
title: {
|
||||
|
|
@ -167,6 +175,14 @@ module.exports = {
|
|||
en: 'Featured'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'react',
|
||||
icon: 'raster',
|
||||
title: {
|
||||
zh: 'React 组件',
|
||||
en: 'React Component'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'point',
|
||||
icon: 'point',
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
}
|
||||
|
||||
public async render() {
|
||||
if (this.rendering && this.destroyed) {
|
||||
if (this.rendering || this.destroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -216,7 +216,6 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
if (this.destroyed) {
|
||||
this.destroy();
|
||||
}
|
||||
|
||||
// FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
|
||||
this.logger.info(' render inited');
|
||||
this.layerService.initLayers();
|
||||
|
|
|
|||
|
|
@ -51,14 +51,11 @@ export default class Point3D extends React.Component {
|
|||
strokeWidth: 1,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
const hander = () => {
|
||||
console.log('click');
|
||||
|
||||
// scene.on('loaded', () => {
|
||||
// const newData = {
|
||||
// type: 'FeatureCollection',
|
||||
// features: pointsData.features.slice(0, 100),
|
||||
// };
|
||||
// pointLayer.setData(newData);
|
||||
// });
|
||||
};
|
||||
scene.on('click', hander);
|
||||
this.scene = scene;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue