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

docs(docs): 更新docs

This commit is contained in:
thinkinggis 2020-11-21 14:05:59 +08:00
parent 1595fae2ef
commit 4109c622a7
17 changed files with 210 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/api/district/baselayer.en.md
View File

@ -2,4 +2,5 @@
title: Base Map
order: 2
---
`markdown:docs/api/district/style.md`

218
docs/api/district/baselayer.zh.md
View File

@ -1,6 +1,7 @@
---
title: 基础地图
---
`markdown:docs/common/style.md`
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
@ -32,118 +33,154 @@ District 支持下面几种图
- CityLayer 市级地图
- CountyLayer 县级地图
## 配置项
### zIndex
图层绘制顺序
### zIndex
### data `Array`
属性数据用于可视化渲染
### visible
地图是否可见
### joinBy
数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
图层绘制顺序
### showBorder `boolean`
是否显示国界线，默认显示，不建议不显示
### data `Array`
### simplifyTolerance
数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
### depth
数据显示层级 0：国家级，1:省级，2: 市级，3：县级
属性数据用于可视化渲染
### stroke 填充描边颜色
`ProvinceLayer, CityLayer, CountyLayer`
### strokeWidth 填充描边宽度
`ProvinceLayer, CityLayer, CountyLayer`
### visible
### autoFit
地图是否可见
是否自动缩放到图层范围 `boolean`
### joinBy
### chinaNationalStroke
中国国界线颜色 `CountryLayer`
数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
### chinaNationalWidth
中国国界线宽度 `CountryLayer`
### coastlineStroke
海岸线颜色 `CountryLayer`
### coastlineWidth
海岸线宽度 `WorldLayer` `CountryLayer`
### nationalWidth
国界线 `WorldLayer` `CountryLayer`
### nationalStroke
国界线 `WorldLayer` `CountryLayer`
### provinceStroke
省界颜色 `CountryLayer depth= 0，1，2时生效`
### provinceStrokeWidth
省界宽度 `CountryLayer depth = 0，1，2时生效 `
### cityStroke 市级边界颜色
`CountryLayer depth =1，2时生效`
### cityStrokeWidth 市级边界宽度
`CountryLayer depth =1，2 时生效`
### countyStroke
县级边界颜色 `CountryLayer depth =2时生效`
### countyStrokeWidth
县级边界宽度 `CountryLayer depth =2时生效`
### showBorder `boolean`
是否显示国界线，默认显示，不建议不显示
### simplifyTolerance
数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
### depth
数据显示层级 0：国家级，1:省级，2: 市级，3：县级
### stroke 填充描边颜色
`ProvinceLayer, CityLayer, CountyLayer`
### strokeWidth 填充描边宽度
`ProvinceLayer, CityLayer, CountyLayer`
### autoFit
是否自动缩放到图层范围 `boolean`
### chinaNationalStroke
中国国界线颜色 `CountryLayer`
### chinaNationalWidth
中国国界线宽度 `CountryLayer`
### coastlineStroke
海岸线颜色 `CountryLayer`
### coastlineWidth
海岸线宽度 `WorldLayer` `CountryLayer`
### nationalWidth
国界线 `WorldLayer` `CountryLayer`
### nationalStroke
国界线 `WorldLayer` `CountryLayer`
### provinceStroke
省界颜色 `CountryLayer depth= 0，1，2时生效`
### provinceStrokeWidth
省界宽度 `CountryLayer depth = 0，1，2时生效`
### cityStroke 市级边界颜色
`CountryLayer depth =1，2时生效`
### cityStrokeWidth 市级边界宽度
`CountryLayer depth =1，2 时生效`
### countyStroke
县级边界颜色 `CountryLayer depth =2时生效`
### countyStrokeWidth
县级边界宽度 `CountryLayer depth =2时生效`
`markdown:docs/common/district/label.zh.md`
`markdown:docs/common/district/fill.zh.md`
`markdown:docs/common/district/popup.zh.md`
`markdown:docs/common/district/bubble.zh.md`
## 数据
District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
## 方法
### updateLayerAttribute
更新图层渲染样式
参数
- layerName
'fill' | 'line' | 'label' | 'bubble' = 'fill',
- type: 'color' | 'size' | 'shape' | 'filter',
- attr: AttributeType | undefined,
```js
const layer = new CountryLayer();
layer.updateLayerAttribute('fill', 'color', 'red')
```
更新图层渲染样式
参数
- layerName
'fill' | 'line' | 'label' | 'bubble' = 'fill',
- type: 'color' | 'size' | 'shape' | 'filter',
- attr: AttributeType | undefined,
```js
const layer = new CountryLayer();
layer.updateLayerAttribute('fill', 'color', 'red');
```
### updateDistrict
根据 adcode 更新 行政区块
参数
- adcode 行政区划编码
- data 数据
- joinByField 绑定字段
根据 adcode 更新 行政区块
参数
- adcode 行政区划编码
- data 数据
- joinByField 绑定字段
```javascript
citylayer.updateDistrict(['330100','340100']);
citylayer.updateDistrict(['330100', '340100']);
```
### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
@ -156,6 +193,7 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
显示图层
### hide
图层隐藏不显示
### destroy
@ -164,29 +202,29 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
## 事件
行政区划图事件监听默认添加在 fillLayer上，你点击填充的色块才能接收到事件响应。
 行政区划图事件监听默认添加在 fillLayer 上，你点击填充的色块才能接收到事件响应。
支持的事件类型同
支持的事件类型同
### on 添加事件
参数
- type
- handle
- layerType 可选 ```'fill' | 'line' | 'label' | 'bubble'``` 默认值 `fill`
参数
- type
- handle
- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill`
```javascript
const layer = new CountryLayer();
layer.on('click',(e)=>{
console.log(e);
})
const layer = new CountryLayer();
layer.on('click', (e) => {
console.log(e);
});
```
### off 移除事件
参数
- type
- handle
- layerType 可选 ```'fill' | 'line' | 'label' | 'bubble'``` 默认值 `fill`
参数
- type
- handle
- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill`

4
docs/api/district/drilldown.zh.md
View File

@ -127,8 +127,8 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
气泡图配置项
- enable
`boolean` 是否显示气泡 `true`
`boolean` 是否显示气泡 `true`
- shape: AttributeType; 气泡形状支持数据映射
- size: AttributeType; 气泡大小支持数据映射
- color: AttributeType; 气泡颜色支持数据映射

1
docs/api/district/start.en.md
View File

@ -61,7 +61,6 @@ new WorldLayer(scene, {
});
```
## 简介
District 支持下面几种图

1
docs/api/draw/start.en.md
View File

@ -2,4 +2,5 @@
title: QuickStart
order: 1
---
`markdown:docs/api/draw/start.zh.md`

1
docs/api/layer/cityBuilding.zh.md
View File

@ -2,6 +2,7 @@
title: 城市建筑
order: 6
---
`markdown:docs/common/style.md`
## 使用

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

@ -2,4 +2,5 @@
title: Base Layer
order: 0
---
`markdown:docs/api/layer/layer.zh.md`

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

@ -2,6 +2,7 @@
title: Layer 组件
order: 2
---
`markdown:docs/common/style.md`
## Layer 类型
@ -25,12 +26,14 @@ import { PointLayer } '@antv/l7-react';
## Layer Props
### options 图层 配置
<description> _layer options_ _ **可选** </description>
### options 图层 配置
<description> _layer options_ \_ **可选** </description>
`markdown:docs/common/layer/options.md`
### source 图层数据
### source 图层数据
<description> _sourceOption_ **必选** _default:_ `0`</description>
数据源配置项
@ -44,20 +47,19 @@ import { PointLayer } '@antv/l7-react';
source={{
data: [],
parser: {
type:'geojson'
type: 'geojson',
},
transforms:[
]
}
}
transforms: [],
}}
/>
```
### color 图层颜色
### color 图层颜色
<description> _attributeOption_ **必选** _default:_ `0`</description>
### shape 图形形状
<description> _attributeOption_ **必选** _default:_ `0`</description>
### size 图形大小
@ -65,20 +67,25 @@ import { PointLayer } '@antv/l7-react';
<description> _attributeOption_ **必选** </description>
### select 选中高亮
<description> _interaction option_ **可选** </description>
### active 滑过高亮
<description> _interaction option_ **可选** </description>
### animate 动画
<description> _animate Option_ **可选** </description>
### style 样式
<description> _styleOption_ **可选** </description>
`markdown:docs/common/layer/layer_style.md`
### scale 度量
### scale 度量
<description> _scale Option_ **可选** </description>
度量配置项
@ -101,12 +108,11 @@ const scales = {
```
### onLayerLoaded 图层回调
<description> _Function_ **可选** </description>
获取图层对象方法
### attribute Option
color, size, shape 等图形映射通道，通过下面参数配置
@ -114,11 +120,8 @@ color, size, shape 等图形映射通道，通过下面参数配置
- field 映射字段，如果是常量设置为 null
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
### scale Option
### interaction option
active，select 配置项
@ -130,11 +133,10 @@ active，select 配置项
```jsx
<PointLayer
active={{
option:{
color:'red'
}
}
}
option: {
color: 'red',
},
}}
/>
```

1
docs/api/source/csv.en.md
View File

@ -2,4 +2,5 @@
title: CSV
order: 3
---
`markdown: docs/api/source/csv.zh.md`

2
examples/line/animate/API.en.md
View File

@ -1 +1 @@
`markdown:docs/api/layer/line_layer/linelayer.en.md`
`markdown:docs/api/layer/line_layer/arc.en.md`

2
examples/line/animate/API.zh.md
View File

@ -1,2 +1,2 @@
`markdown:docs/api/layer/line_layer/linelayer.zh.md`
`markdown:docs/api/layer/line_layer/arc.zh.md`

3
examples/react/layer/demo/Point_image.tsx
View File

@ -10,6 +10,9 @@ const World = React.memo(function Map() {
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
);
const data = await response.json();
setData(data);
};
fetchData();

49
examples/react/layer/demo/control.tsx
View File

@ -1,49 +0,0 @@
import { AMapScene, Control } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const World = React.memo(function Map() {
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[111.9287109375, 28.22697003891834],
[115.6640625, 28.22697003891834],
[115.6640625, 31.015278981711266],
[111.9287109375, 31.015278981711266],
[111.9287109375, 28.22697003891834],
],
],
},
},
],
};
return (
<AMapScene
map={{
center: [0.19382669582967, 50.258134],
pitch: 0,
style: 'dark',
zoom: 6,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
<Control type="zoom" position="topleft" />
<Control type="scale" position="bottomleft" />
</AMapScene>
);
});
ReactDOM.render(<World />, document.getElementById('map'));

36
examples/react/layer/demo/marker.tsx
View File

@ -2,6 +2,7 @@ import { AMapScene, Marker, PointLayer } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
const MarkerPinImg = {
green:
'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*JhBbT4LvHpQAAAAAAAAAAAAAARQnAQ',
@ -12,15 +13,38 @@ const MarkerInfo = ({ title }) => {
return (
<div className="markerContent">
<div
className="info"
style={{
display: 'flex',
alignItems: 'center',
height: '32px',
padding: '0.05rem',
background: '#1677ff',
borderRadius: '44px',
}}
>
<div className="text">{title}</div>
<div
style={{
color: '#fff',
fontSize: '12px',
}}
>
{title}
</div>
</div>
<div className="marker-pin">
<img alt="marker" src={MarkerPinImg.blue} />
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
>
<img
style={{
width: '20px',
height: '30px',
}}
alt="marker"
src={MarkerPinImg.blue}
/>
</div>
</div>
);
@ -41,10 +65,10 @@ const World = React.memo(function Map() {
return (
<AMapScene
map={{
center: [0.19382669582967, 50.258134],
center: [121.4316962, 31.26082325],
pitch: 0,
style: 'light',
zoom: 6,
zoom: 15,
}}
style={{
position: 'absolute',

9
examples/react/layer/demo/meta.json
View File

@ -12,17 +12,12 @@
{
"filename": "marker.tsx",
"title": "点标注图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*9sibTJP-FIMAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "popup.tsx",
"title": "信息窗",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*RWngRL7rZKQAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "control.tsx",
"title": "组件",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
}
]
}

25
examples/react/layer/demo/popup.tsx
View File

@ -10,9 +10,10 @@ import * as React from 'react';
import ReactDOM from 'react-dom';
const World = React.memo(function Map() {
const [popInfo, setPopInfo] = React.useState();
const [popupInfo, setPopInfo] = React.useState();
const hoverHandle = (e) => {
setPopInfo(e)
console.log(e);
setPopInfo(e);
};
const hoverOutHandle = () => {
setPopInfo(undefined);
@ -41,7 +42,7 @@ const World = React.memo(function Map() {
return (
<AMapScene
map={{
center: [0.19382669582967, 50.258134],
center: [111.9287109375, 28.22697003891834],
pitch: 0,
style: 'dark',
zoom: 6,
@ -58,7 +59,7 @@ const World = React.memo(function Map() {
<PolygonLayer
key={'2'}
options={{
autoFit: true,
autoFit: false,
}}
source={{
data,
@ -92,13 +93,15 @@ const World = React.memo(function Map() {
}}
/>,
]}
<Popup
key="popup"
lnglat={popupInfo.lnglat}
option={{ closeButton: false, offsets: [0, 10] }}
>
<span>这是个信息框</span>
</Popup>
{popupInfo && (
<Popup
key="popup"
lnglat={popupInfo.lngLat}
option={{ closeButton: false, offsets: [0, 10] }}
>
<span>这是个信息框</span>
</Popup>
)}
</AMapScene>
);
});

2
gatsby-config.js
View File

@ -268,7 +268,7 @@ module.exports = {
}
],
playground: {
container: '<div style="min-height: 500px; height: 100%; position: relative" id="map"/>',
container: '<div style="min-height: 500px; justify-content: center; position: relative" id="map"/>',
dependencies: {
'@antv/l7': 'latest',
'@antv/l7-maps': 'latest'