p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: update l7-react peerdependencies

This commit is contained in:
thinkinggis 2020-03-09 20:46:17 +08:00
parent 89c00f41eb
commit af7e9db780
23 changed files with 267 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/api/layer/layer.zh.md
View File

@ -126,24 +126,22 @@ layer.source(data, {
- cat 枚举
```javascript
layer.scale('name',{
type: 'cat'
})
layer.scale('name', {
type: 'cat',
});
// 设置多个scale
字段名为 key, value 为scale配置项
// 字段名为 key, value 为scale配置项
layer.scale({
name:{
type: 'cat'
name: {
type: 'cat',
},
value: {
type: 'linear'
}
})
type: 'linear',
},
});
```
## 视觉编码方法

20
docs/api/react/layer.zh.md
View File

@ -7,7 +7,7 @@ order: 2
| prop name | Type | Default | Description |
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
| option | `layer option` | | layer 配置项 |
| options | `layer options` | | layer 配置项 |
| source | `sourceOption` | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
@ -19,15 +19,17 @@ order: 2
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
### layer option
### layer options
| prop name | Type | Default | Description |
| --------- | --------- | ----------------------- | ---------------------------------------- |
| name | `string` | | 图层名字，可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序， |
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
| prop name | Type | Default | Description |
| --------- | --------- | ----------------------- | ------------------------------------------------ |
| name | `string` | | 图层名字，可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序， |
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
### attribute Option

27
examples/react/control/demo/control.tsx Normal file
View File

@ -0,0 +1,27 @@
import { AMapScene, Control, LineLayer } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const MapScene = React.memo(function Map() {
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,
}}
>
<Control type="scale" />
<Control type="zoom" />
</AMapScene>
);
});
ReactDOM.render(<MapScene />, document.getElementById('map'));

4
examples/react/control/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Control Component
order: 0
---

4
examples/react/control/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Control 组件
order: 0
---

14
examples/react/layer/demo/meta.json Normal file
View File

@ -0,0 +1,14 @@
{
"title": {
"zh": "Layer 组件",
"en": "Layer Component"
},
"demos": [
{
"filename": "world.jsx",
"title": "世界地图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
}
]
}

83
examples/react/layer/demo/world.jsx Normal file
View File

@ -0,0 +1,83 @@
import { AMapScene, LineLayer, MapboxScene, PolygonLayer } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const World = 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/68dc6756-627b-4e9e-a5ba-e834f6ba48f8.json'
);
const data = await response.json();
setData(data);
};
fetchData();
}, []);
return (
<MapboxScene
map={{
center: [ 0.19382669582967, 50.258134 ],
pitch: 0,
style: 'blank',
zoom: 6
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}}
>
{data && [
<PolygonLayer
key={'2'}
options={{
autoFit: true
}}
source={{
data
}}
color={{
field: 'name',
values: [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49'
]
}}
shape={{
values: 'fill'
}}
style={{
opacity: 1
}}
select={{
option: { color: '#FFD591' }
}}
/>,
<LineLayer
key={'21'}
source={{
data
}}
color={{
values: '#fff'
}}
shape={{
values: 'line'
}}
style={{
opacity: 1
}}
/>
]}
</MapboxScene>
);
});
ReactDOM.render(<World/>, document.getElementById('map'));

4
examples/react/layer/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Layer Component
order: 0
---

4
examples/react/layer/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Layer 组件
order: 0
---

25
examples/react/scene/demo/amap.jsx Normal file
View File

@ -0,0 +1,25 @@
import { AMapScene, LineLayer } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const MapScene = React.memo(function Map() {
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
}}
/>
);
});
ReactDOM.render(<MapScene/>, document.getElementById('map'));

24
examples/react/scene/demo/mapbox.jsx Normal file
View File

@ -0,0 +1,24 @@
import { MapboxScene } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const MapScene = React.memo(function Map() {
return (
<MapboxScene
map={{
center: [ 110.19382669582967, 50.258134 ],
pitch: 0,
style: 'dark',
zoom: 1
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}}
/>
);
});
ReactDOM.render(<MapScene/>, document.getElementById('map'));

19
examples/react/scene/demo/meta.json Normal file
View File

@ -0,0 +1,19 @@
{
"title": {
"zh": "Scene 组件",
"en": "Scene Component"
},
"demos": [
{
"filename": "amap.jsx",
"title": "高德地图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
},
{
"filename": "Mapbox.jsx",
"title": "Mapbox 地图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
}
]
}

4
examples/react/scene/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Scene Component
order: 0
---

4
examples/react/scene/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Scene 组件
order: 0
---

3
gatsby-browser.js
View File

@ -5,3 +5,6 @@ window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
window.g2 = require('@antv/g2');
window.l7 = require('@antv/l7');
window.l7Maps = require('@antv/l7-maps');
window.l7React = require('@antv/l7-react');
window.react = require('react');
window.reactDom = require('react-dom');

8
gatsby-config.js
View File

@ -216,6 +216,14 @@ module.exports = {
en: 'Raster Layer'
}
},
{
slug: 'react',
icon: 'map',
title: {
zh: 'React 组件',
en: 'React Demo'
}
},
{
slug: 'tutorial',
icon: 'map',

2
packages/component/src/control/zoom.ts
View File

@ -93,7 +93,7 @@ export default class Zoom extends Control {
) {
const link = DOM.create('a', className, container) as HTMLLinkElement;
link.innerHTML = html;
link.href = '#';
link.href = 'javascript:void(0)';
link.addEventListener('click', fn);
return link;
}

4
packages/layers/src/plugins/LayerStylePlugin.ts
View File

@ -13,7 +13,9 @@ export default class LayerStylePlugin implements ILayerPlugin {
layer.updateLayerConfig({});
const { autoFit } = layer.getLayerConfig();
if (autoFit) {
layer.fitBounds();
setTimeout(() => {
layer.fitBounds();
}, 100);
}
});
}

4
packages/react/package.json
View File

@ -27,7 +27,9 @@
"@antv/l7": "^2.0.34",
"@antv/l7-maps": "^2.0.34",
"@babel/runtime": "^7.7.7",
"load-styles": "^2.0.0",
"load-styles": "^2.0.0"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.10.2"
},

2
packages/react/src/component/AMapScene.tsx
View File

@ -1,7 +1,7 @@
import { IMapConfig, ISceneConfig, Scene } from '@antv/l7';
// @ts-ignore
// tslint:disable-next-line:no-submodule-imports
import GaodeMap from '@antv/l7-maps/lib/amap';
import { GaodeMap } from '@antv/l7-maps';
import React, { createElement, createRef, useEffect, useState } from 'react';
import { SceneContext } from './SceneContext';
interface IMapSceneConig {

10
packages/react/src/component/Control.tsx
View File

@ -1,9 +1,9 @@
import { IControl, Logo, PositionType, Scale, Scene, Zoom } from '@antv/l7';
import { IControl, Logo, PositionName, Scale, Scene, Zoom } from '@antv/l7';
import React, { useEffect, useState } from 'react';
import { useSceneValue } from './SceneContext';
interface IControlProps {
type: 'scale' | 'zoom' | 'logo';
position: PositionType;
position: PositionName;
[key: string]: any;
}
export default React.memo(function MapControl(props: IControlProps) {
@ -15,17 +15,17 @@ export default React.memo(function MapControl(props: IControlProps) {
switch (type) {
case 'scale':
ctr = new Scale({
position,
position: position || 'bottomright',
});
break;
case 'zoom':
ctr = new Zoom({
position,
position: position || 'topright',
});
break;
case 'logo':
ctr = new Logo({
position,
position: position || 'bottomleft',
});
}
setControl(ctr);

6
packages/react/src/component/LayerAttribute/Layer.tsx
View File

@ -103,6 +103,12 @@ export default function BaseLayer(type: string, props: ILayerProps) {
}
}, [options?.blend]);
// useEffect(() => {
// if (layer && layer.inited && options && options.autoFit === true) {
// layer.fitBounds();
// }
// }, [options?.autoFit]);
return layer !== null && layer !== undefined ? (
<LayerContext.Provider value={layer}>
<Source layer={layer} source={source} />

2
packages/react/src/component/MapboxScene.tsx
View File

@ -1,7 +1,7 @@
import { IMapConfig, ISceneConfig, Scene, Zoom } from '@antv/l7';
// @ts-ignore
// tslint:disable-next-line:no-submodule-imports
import Mapbox from '@antv/l7-maps/lib/mapbox';
import { Mapbox } from '@antv/l7-maps';
import React, { createElement, createRef, useEffect, useState } from 'react';
import { SceneContext } from './SceneContext';
interface IMapSceneConig {