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

Merge pull request #248 from antvis/docs 

Docs
This commit is contained in:
@thinkinggis 2020-03-10 11:38:21 +08:00 committed by GitHub
parent 5ee889f42f 412ca0f488
commit 95eabcc312
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 983 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/api/component/marker.en.md
View File

@ -69,8 +69,7 @@ el.textContent = data[i].v;
el.style.background = getColor(data[i].v);
new L7.Marker({
element: el,
})
.setLnglat([data[i].x * 1, data[i].y]
}).setLnglat([data[i].x * 1, data[i].y]);
```
#### 设置 popup

2
docs/api/layer/layer.en.md
View File

@ -126,7 +126,7 @@ scale('field', scaleConfig)
将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
```
```javascript
pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值

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

@ -102,20 +102,46 @@ layer.source(data, {
### scale
scale('field', scaleConfig)
(field: string, scaleConfig: object)
为指定的数据字段进行列定义，返回 layer 实例。
设置数据字段映射方法
- `field` 字段名。
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
#### scale 类型
**连续型**
- linear 线性
- log
- pow 指数型
**连续分类型**
- quantile 等分位
- quantize 等间距
**枚举型**
- cat 枚举
```javascript
{
type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
}
layer.scale('name', {
type: 'cat',
});
// 设置多个scale
// 字段名为 key, value 为scale配置项
layer.scale({
name: {
type: 'cat',
},
value: {
type: 'linear',
},
});
```
## 视觉编码方法
@ -126,7 +152,7 @@ scale('field', scaleConfig)
将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
```
```javascript
pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值

139
docs/api/react/layer.en.md
View File

@ -2,3 +2,142 @@
title: Layer Component
order: 2
---
## Layer Props
| prop name | Type | Default | Description |
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
| option | `layer option` | | layer 配置项 |
| source | `sourceOption` | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
| size | `attributeOption` | | 图层大小属性 |
| style | `Object` | | 图层样式 |
| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 |
| filter | `Function` | | 图层数据过滤方法 |
| select | `boolean` `interaction option` | | 图层选中高亮 |
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
### layer option
| prop name | Type | Default | Description |
| --------- | --------- | ----------------------- | ---------------------------------------- |
| name | `string` | | 图层名字，可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序， |
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
### attribute Option
color, size, shape 等图形映射通道，通过下面参数配置
- field 映射字段，如果是常量设置为 null
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
详细[配置项](../layer/layer/#size)
### source Option
数据源配置项
- data 支持 geojson、csv、json
- parser 数据解析配置项
- transforms 数据处理配置项
详细[配置项](../source/source/#parser-1)
### scale Option
度量配置项
- values scaleCfg
**scaleCfg**
- key 为字段名 fieldname | attributeName
- value scale 配置项
```javascript
const scales = {
values: {
name: {
type: 'cat',
},
},
};
```
### interaction option
**option**
- color 设置交互的颜色，指滑过或者选中的
### 获取 layer 对象
#### onLayerLoaded
回调函数获取 layer, scene 对象
onLayerLoaded=(layer, scene) =>{
}
#### Context API
```jsx
import { LayerContext } from '@antv/l7-react';
<LayerContext.Consumer>
{(layer, scene) => {
// use `scene` here
}}
</LayerContext.Consumer>;
```
### Layer 示例
```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,
}}
active={{
option: {
color: 'red',
},
}}
/>;
```
## 子组件
### 事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) |
| handler | `Function` | `null` | layer 回调函数 |
### 示例
```jsx
import { LayerEvent, PolygonLayer } from 'l7-react';
<PolygonLayer>
<LayerEvent type="click" handler={() => {}} />
<LayerEvent type="mousemove" handler={() => {}} />
</PolygonLayer>;
```

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

@ -3,30 +3,44 @@ title: Layer 组件
order: 2
---
## Scene Props
## Layer 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 对象 |
| prop name | Type | Default | Description |
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
| options | `layer options` | | layer 配置项 |
| source | `sourceOption` | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
| size | `attributeOption` | | 图层大小属性 |
| style | `Object` | | 图层样式 |
| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 |
| filter | `Function` | | 图层数据过滤方法 |
| select | `boolean` `interaction option` | | 图层选中高亮 |
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
### attributeOption
### layer options
| 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
color, size, shape 等图形映射通道，通过下面参数配置
- field 映射字段，如果是常量设置为 null
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
### sourceOption
详细[配置项](../layer/layer/#size)
### source Option
数据源配置项
@ -34,7 +48,57 @@ color, size, shape 等图形映射通道，通过下面参数配置
- parser 数据解析配置项
- transforms 数据处理配置项
具体配置项
详细[配置项](../source/source/#parser-1)
### scale Option
度量配置项
- values scaleCfg
**scaleCfg**
- key 为字段名 fieldname | attributeName
- value scale 配置项
```javascript
const scales = {
values: {
name: {
type: 'cat',
},
},
};
```
### interaction option
**option**
- color 设置交互的颜色，指滑过或者选中的
### 获取 layer 对象
#### onLayerLoaded
回调函数获取 layer, scene 对象
onLayerLoaded=(layer, scene) =>{
}
#### Context API
```jsx
import { LayerContext } from '@antv/l7-react';
<LayerContext.Consumer>
{(layer, scene) => {
// use `scene` here
}}
</LayerContext.Consumer>;
```
### Layer 示例
```jsx
import { PolygonLayer } from '@antv/l7-react';
@ -53,5 +117,29 @@ import { PolygonLayer } from '@antv/l7-react';
style={{
opacity: 1,
}}
active={{
option: {
color: 'red',
},
}}
/>;
```
## 子组件
### 事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../layer/layer/#鼠标事件) |
| handler | `Function` | `null` | layer 回调函数 |
### 示例
```jsx
import { LayerEvent, PolygonLayer } from 'l7-react';
<PolygonLayer>
<LayerEvent type="click" handler={() => {}} />
<LayerEvent type="mousemove" handler={() => {}} />
</PolygonLayer>;
```

35
docs/api/react/marker.en.md Normal file
View File

@ -0,0 +1,35 @@
---
title: Marker
order: 3
---
## Marker Props
| prop name | Type | Default | Description |
| -------------- | ----------------- | ------- | ----------------- |
| option | `string` | `null` | marker 配置项 |
| lnglat | `Array | Object` | `null` | marker 经纬度位置 |
| onMarkerLoaded | `Function` | `null` | layer 回调函数 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
| color | `string` | `blue` | marker 配置项 |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | marker 位置偏移 |
| extData | `object` | `null` | marker 属性数据 |
## 实例
```jsx
import { Marker} from '@antv/l7-react'
<Marker
option = {{
color:'red'
}}
lnglat ={{[120,32]}}
/>
```

35
docs/api/react/marker.zh.md Normal file
View File

@ -0,0 +1,35 @@
---
title: Marker 组件
order: 3
---
## Marker Props
| prop name | Type | Default | Description |
| -------------- | ----------------- | ------- | ----------------- |
| option | `string` | `null` | marker 配置项 |
| lnglat | `Array | Object` | `null` | marker 经纬度位置 |
| onMarkerLoaded | `Function` | `null` | layer 回调函数 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
| color | `string` | `blue` | marker 配置项 |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | marker 位置偏移 |
| extData | `object` | `null` | marker 属性数据 |
## 实例
```jsx
import { Marker} from '@antv/l7-react'
<Marker
option = {{
color:'red'
}}
lnglat ={{[120,32]}}
/>
```

28
docs/api/react/popup.en.md Normal file
View File

@ -0,0 +1,28 @@
---
title: Popup 组件
order: 4
---
## Popup Props
| prop name | Type | Default | Description |
| --------- | ----------------- | ------- | ---------------- |
| option | `string` | `null` | popup 配置项 |
| lnglat | `Array | Object` | `null` | popup 经纬度位置 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
| closeButton | `string` | `true` | 是否显示关闭按钮 |
| closeOnClick | `string` | `blue` | 点击是否关闭 popup |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | popup 位置偏移 |
| className | `string` | `null` | 样式名称 |
```jsx
import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />;
```

28
docs/api/react/popup.zh.md Normal file
View File

@ -0,0 +1,28 @@
---
title: Popup 组件
order: 4
---
## Popup Props
| prop name | Type | Default | Description |
| --------- | ----------------- | ------- | ---------------- |
| option | `string` | `null` | popup 配置项 |
| lnglat | `Array | Object` | `null` | popup 经纬度位置 |
| children | `React.ReactNode` | `null` | 子组件 |
### option
| prop name | Type | Default | Description |
| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
| closeButton | `string` | `true` | 是否显示关闭按钮 |
| closeOnClick | `string` | `blue` | 点击是否关闭 popup |
| anchor | `string` | `null` | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
| offsets | `Array[x,y]` | `null` | popup 位置偏移 |
| className | `string` | `null` | 样式名称 |
```jsx
import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />;
```

128
docs/api/react/scene.en.md
View File

@ -1,12 +1,124 @@
---
title: 高德地图
title: Scene
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 加载回调函数 |
## 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: '',
}}
/>;
```
### Mapbox 地图场景
```jsx
import { MapboxScene } from '@antv/l7-react';
<MapboxScene
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` | 是否保留缓冲区数据 |
### 获取 scene 对象
#### onSceneLoaded
onSceneLoaded 回调函数能够取到 scene 对象
#### Context API
```jsx
import { SceneContext } from '@antv/l7-react';
<SceneContext.Consumer>
{(scene) => {
// use `scene` here
}}
</SceneContext.Consumer>;
```
## 子组件
### LoadImage
| prop name | Type | Default | Description |
| --------- | -------- | ------- | ----------- |
| name | `string` | `null` | 图标名称 |
| url | `string` | `null` | 图标 url |
```jsx
import LoadImage from '@antv/l7-react';
<LoadImage name="marker" url="xxx.png" />;
```
### Layer 组件
每个图层作为 scene 子组件添加
###  事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../scene/#地图事件) |
| handler | `Function` | `null` | scene 回调函数 |
```javascript
import { SceneEvent, MapboxScene } from '@antv/l7-react';
<MapboxScene>
<SceneEvent type="click" handler={() => {}} />
</MapboxScene>;
```

68
docs/api/react/scene.zh.md
View File

@ -1,5 +1,5 @@
---
title: 高德地图
title: Scene 组件
order: 1
---
@ -13,6 +13,8 @@ order: 1
| option | `Object` | `void` | scene option 配置项 [详情](#map-props) |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
### 高德地图场景
```jsx
import { AMapScene } from '@antv/l7-react';
<AMapScene
@ -25,6 +27,20 @@ import { AMapScene } from '@antv/l7-react';
/>;
```
### Mapbox 地图场景
```jsx
import { MapboxScene } from '@antv/l7-react';
<MapboxScene
option={{}}
map={{
style: 'light',
center: [112, 20],
token: '',
}}
/>;
```
### map option
地图配置项
@ -56,3 +72,53 @@ Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/
| logoVisible | `boolean` | `true` | 是否显示 logo |
| antialias | `boolean` | `true` | 是否开启抗锯齿 |
| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 |
### 获取 scene 对象
#### onSceneLoaded
onSceneLoaded 回调函数能够取到 scene 对象
#### Context API
```jsx
import { SceneContext } from '@antv/l7-react';
<SceneContext.Consumer>
{(scene) => {
// use `scene` here
}}
</SceneContext.Consumer>;
```
## 子组件
### LoadImage
| prop name | Type | Default | Description |
| --------- | -------- | ------- | ----------- |
| name | `string` | `null` | 图标名称 |
| url | `string` | `null` | 图标 url |
```jsx
import LoadImage from '@antv/l7-react';
<LoadImage name="marker" url="xxx.png" />;
```
### Layer 组件
每个图层作为 scene 子组件添加
###  事件组件
| prop name | Type | Default | Description |
| --------- | ---------- | ------- | ----------------------------------- |
| type | `string` | `null` | 事件类型 [详情](../scene/#地图事件) |
| handler | `Function` | `null` | scene 回调函数 |
```javascript
import { SceneEvent, MapboxScene } from '@antv/l7-react';
<MapboxScene>
<SceneEvent type="click" handler={() => {}} />
</MapboxScene>;
```

65
docs/api/react/start.en.md
View File

@ -2,3 +2,68 @@
title: Get Started
order: 0
---
### 安装
```bash
npm i @antv/l7-react
```
### 示例
```javascript
import { LineLayer, AMapScene } from '@antv/l7-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,
}}
>
{data && (
<LineLayer
key={'2'}
source={{
data,
}}
size={{
values: 1,
}}
color={{
values: '#fff',
}}
shape={{
values: 'line',
}}
style={{
opacity: 1,
}}
/>
)}
</AMapScene>
</>
);
});
```

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);
}
});
}

2
packages/layers/src/point/shaders/image_frag.glsl
View File

@ -23,7 +23,7 @@ float r = 1.0 - smoothstep(radius-(radius*0.01),
if(v_color == vec4(0.)){
gl_FragColor= vec4(textureColor.xyz, textureColor.w * r);
}else {
gl_FragColor= step(0.01, textureColor.x) * v_color;
gl_FragColor= step(0.01, textureColor.z) * v_color;
}
gl_FragColor = filterColor(gl_FragColor);
}

4
packages/react/package.json
View File

@ -27,7 +27,9 @@
"@antv/l7": "^2.0.35",
"@antv/l7-maps": "^2.0.35",
"@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);

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

@ -16,6 +16,7 @@ import {
Filter,
ILayerProps,
Scale,
Select,
Shape,
Size,
Source,
@ -33,9 +34,10 @@ export default function BaseLayer(type: string, props: ILayerProps) {
size,
scale,
active,
select,
filter,
options,
onLayerLoad,
onLayerLoaded,
} = props;
const mapScene = (useSceneValue() as unknown) as Scene;
const [layer, setLayer] = useState<ILayer>();
@ -61,8 +63,8 @@ export default function BaseLayer(type: string, props: ILayerProps) {
l = new PolygonLayer(options);
}
l.on('inited', () => {
if (onLayerLoad) {
onLayerLoad(l, mapScene);
if (onLayerLoaded) {
onLayerLoaded(l, mapScene);
}
});
setLayer(l);
@ -101,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} />
@ -110,6 +118,7 @@ export default function BaseLayer(type: string, props: ILayerProps) {
<Shape layer={layer} shape={shape} />
{style && <Style layer={layer} style={style} />}
{active && <Active layer={layer} active={active} />}
{select && <Select layer={layer} select={select} />}
{filter && <Filter layer={layer} filter={filter} />}
{/* LayerContext主要传入LayerEvent组件 */}
{props.children}

17
packages/react/src/component/LayerAttribute/Select.tsx Normal file
View File

@ -0,0 +1,17 @@
import { IActiveOption, ILayer } from '@antv/l7';
import * as React from 'react';
const { useEffect } = React;
interface ILayerProps {
layer: ILayer;
select: {
option: IActiveOption | boolean;
};
}
export default React.memo(function Chart(props: ILayerProps) {
const { layer, select } = props;
useEffect(() => {
layer.select(select.option);
}, [JSON.stringify(select)]);
return null;
});

6
packages/react/src/component/LayerAttribute/index.ts
View File

@ -12,6 +12,7 @@ import Active from './Active';
import Color from './Color';
import Filter from './Filter';
import Scale from './Scale';
import Select from './Select';
import Shape from './Shape';
import Size from './Size';
import Source from './Source';
@ -71,9 +72,10 @@ export interface ILayerProps {
size?: Partial<IAttributeOptions>;
style?: Partial<IStyleOptions>;
active?: IActiveOptions;
select?: IActiveOptions;
filter?: Partial<IAttributeOptions>;
onLayerLoad?: (layer: ILayer, scene: Scene) => void;
onLayerLoaded?: (layer: ILayer, scene: Scene) => void;
children?: React.ReactNode;
}
export { Active, Color, Filter, Source, Size, Shape, Style, Scale };
export { Active, Color, Filter, Source, Size, Shape, Style, Scale, Select };

3
packages/react/src/component/LayerEvent.tsx
View File

@ -12,10 +12,11 @@ export const LayerEvent = React.memo((props: ILayerProps) => {
const layer = (useLayerValue() as unknown) as ILayer;
useEffect(() => {
layer.off(type, handler);
layer.on(type, handler);
return () => {
layer.off(type, handler);
};
}, [type]);
}, [type, handler]);
return null;
});

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 {

8
packages/react/src/component/Marker.tsx
View File

@ -16,7 +16,7 @@ import { SceneContext } from './SceneContext';
interface IMarkerProps {
option?: IMarkerOption;
lnglat: ILngLat | number[];
onMarkerLoad?: (marker: IMarker) => void;
onMarkerLoaded?: (marker: IMarker) => void;
children?: React.ReactNode;
}
export default class MarkerComponet extends React.PureComponent<IMarkerProps> {
@ -28,7 +28,7 @@ export default class MarkerComponet extends React.PureComponent<IMarkerProps> {
this.el = document.createElement('div');
}
public componentDidMount() {
const { lnglat, children, option, onMarkerLoad } = this.props;
const { lnglat, children, option, onMarkerLoaded } = this.props;
const marker = new Marker(option);
if (lnglat) {
marker.setLnglat(lnglat as ILngLat | IPoint);
@ -37,8 +37,8 @@ export default class MarkerComponet extends React.PureComponent<IMarkerProps> {
marker.setElement(this.el);
}
this.marker = marker;
if (onMarkerLoad) {
onMarkerLoad(marker);
if (onMarkerLoaded) {
onMarkerLoaded(marker);
}
this.scene.addMarker(marker);
}

4
packages/react/src/component/SceneEvent.tsx
View File

@ -7,7 +7,7 @@ interface ILayerProps {
type: string;
handler: (...args: any[]) => void;
}
export const SceneEvent = React.memo((props: ILayerProps) => {
const SceneEvent = React.memo((props: ILayerProps) => {
const { type, handler } = props;
const mapScene = (useSceneValue() as unknown) as Scene;
@ -19,3 +19,5 @@ export const SceneEvent = React.memo((props: ILayerProps) => {
}, [type]);
return null;
});
export default SceneEvent;

2
packages/react/src/index.ts
View File

@ -12,3 +12,5 @@ export { useLayerValue, LayerContext } from './component/LayerContext';
export { ColorComponent } from './component/Legend/color';
export { default as Popup } from './component/Popup';
export { default as Marker } from './component/Marker';
export { default as SceneEvent } from './component/SceneEvent';
export { default as LoadImage } from './component/LoadImage';

6
stories/Layers/components/PointImage.tsx
View File

@ -33,11 +33,11 @@ export default class PointImage extends React.Component {
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
);
let i = 0;
const data = await response.json();
while (i < 50) {
while (i < 1) {
const imageLayer = new PointLayer()
.source(data, {
parser: {
@ -48,7 +48,7 @@ export default class PointImage extends React.Component {
})
.shape('name', ['00', '01', '02'])
// .shape('triangle')
// .color('red')
.color('red')
.active(true)
.size(20);
// imageLayer.on('click', (e) => {

12
stories/Layers/components/Text.tsx
View File

@ -39,13 +39,13 @@ export default class TextLayerDemo extends React.Component {
y: 'w',
},
})
.shape('w', 'text')
.shape('s', 'text')
// .shape('circle')
.size(12)
.size(24)
.filter('t', (t) => {
return t > 14;
return t > 18;
})
.color('red')
.color('#fff')
.style({
textAllowOverlap: true,
// fontWeight: 200,
@ -53,8 +53,8 @@ export default class TextLayerDemo extends React.Component {
// textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
// spacing: 2, // 字符间距
// padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
// stroke: 'red', // 描边颜色
// strokeWidth: 2, // 描边宽度
stroke: '#fff', // 描边颜色
strokeWidth: 0, // 描边宽度
// strokeOpacity: 1.0,
});
scene.addLayer(pointLayer);

32
stories/React/components/Scene.tsx
View File

@ -1,4 +1,12 @@
import { AMapScene, LineLayer, Marker, Popup } from '@antv/l7-react';
import {
AMapScene,
LayerContext,
LineLayer,
Marker,
Popup,
SceneContext,
SceneEvent,
} from '@antv/l7-react';
import * as React from 'react';
export default React.memo(function Map() {
@ -30,6 +38,18 @@ export default React.memo(function Map() {
bottom: 0,
}}
>
<SceneContext.Consumer>
{(scene) => {
console.log(scene);
return null;
}}
</SceneContext.Consumer>
<SceneEvent
type="click"
handler={() => {
console.log('click');
}}
/>
<Popup lnglat={[110.1938, 50.25] as number[]}>
<p>122222</p>
</Popup>
@ -53,8 +73,14 @@ export default React.memo(function Map() {
style={{
opacity: 1,
}}
/>
)}
>
<LayerContext.Consumer>
{(layer) => {
console.log(layer);
return null;
}}
</LayerContext.Consumer>
</LineLayer>
</AMapScene>
</>
);