mirror of https://gitee.com/antv-l7/antv-l7
docs: 完善官网文档、更新 l7react l7draw l7boundary 等文档链接
This commit is contained in:
shihui
parent
6d129fde91
commit
869827a7f0
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Base Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/district/style.md`
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
---
|
||||
title: 基础地图
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
|
||||
|
||||
## 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { WorldLayer } from '@antv/l7-district';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-District -->
|
||||
<script src="https://unpkg.com/@antv/l7-district"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
## 简介
|
||||
|
||||
District 支持下面几种图
|
||||
|
||||
- WorldLayer 世界地图
|
||||
- CountryLayer 国家地图，目前只支持中国
|
||||
- ProvinceLayer 省级地图
|
||||
- CityLayer 市级地图
|
||||
- CountyLayer 县级地图
|
||||
|
||||
## 配置项
|
||||
|
||||
### zIndex
|
||||
|
||||
图层绘制顺序
|
||||
|
||||
### data `Array`
|
||||
|
||||
属性数据用于可视化渲染
|
||||
|
||||
### visible
|
||||
|
||||
地图是否可见
|
||||
|
||||
### joinBy
|
||||
|
||||
数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
|
||||
|
||||
### 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)
|
||||
|
||||
## 方法
|
||||
|
||||
### 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');
|
||||
```
|
||||
|
||||
### updateDistrict
|
||||
|
||||
根据 adcode 更新 行政区块
|
||||
|
||||
参数
|
||||
|
||||
- adcode 行政区划编码
|
||||
- data 数据
|
||||
- joinByField 绑定字段
|
||||
|
||||
```javascript
|
||||
citylayer.updateDistrict(['330100', '340100']);
|
||||
```
|
||||
|
||||
### updateData(data, joinBy)
|
||||
|
||||
更新显示数据，
|
||||
|
||||
参数：
|
||||
|
||||
- data 需要更新的数据
|
||||
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
|
||||
|
||||
### getFillData
|
||||
|
||||
获取填充数据，可用于绘制独立的边界线
|
||||
|
||||
### show
|
||||
|
||||
显示图层
|
||||
|
||||
### hide
|
||||
|
||||
图层隐藏不显示
|
||||
|
||||
### destroy
|
||||
|
||||
移除并销毁图层
|
||||
|
||||
## 事件
|
||||
|
||||
行政区划图事件监听默认添加在 fillLayer 上，你点击填充的色块才能接收到事件响应。
|
||||
|
||||
支持的事件类型同
|
||||
|
||||
### on 添加事件
|
||||
|
||||
参数
|
||||
|
||||
- type
|
||||
- handle
|
||||
- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill`
|
||||
|
||||
```javascript
|
||||
const layer = new CountryLayer();
|
||||
layer.on('click', (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
```
|
||||
|
||||
### off 移除事件
|
||||
|
||||
参数
|
||||
|
||||
- type
|
||||
- handle
|
||||
- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: 钻取地图
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/district/drilldown.zh.md`
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
---
|
||||
title: 钻取地图
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
|
||||
|
||||
钻取地图支持两种可视化类型
|
||||
|
||||
- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
|
||||
- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { DrillDownLayer } from '@antv/l7-district';
|
||||
```
|
||||
|
||||
DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
|
||||
|
||||
## 构造函数
|
||||
|
||||
### scene L7 scene 对象
|
||||
|
||||
### option 行政区划配置项
|
||||
|
||||
## 配置项
|
||||
|
||||
### customTrigger
|
||||
|
||||
是否自定义下钻交互，默认 `false`
|
||||
|
||||
### drillDownTriggerEvent
|
||||
|
||||
向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
|
||||
### drillDownEvent
|
||||
|
||||
根据 drillDownTriggerEvent 类型下钻触发的回调事件 属性
|
||||
|
||||
### drillUpEvent
|
||||
|
||||
根据 drillUpTriggleEvent 类型上钻触发的回调事件 属性
|
||||
|
||||
### drillUpTriggleEvent
|
||||
|
||||
向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
|
||||
### provinceData
|
||||
|
||||
省级数据
|
||||
|
||||
### cityData
|
||||
|
||||
市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
|
||||
|
||||
### countyData
|
||||
|
||||
县级数据 可以是全量的数据，下钻时可以不需要重新设置数据
|
||||
|
||||
### joinBy
|
||||
|
||||
数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名。
|
||||
|
||||
- 主要使用场景
|
||||
|
||||
```javascript
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: props => { // props 是我们拿到的数据 customValue 是我们的业务数据
|
||||
return `<span>${props.customValue}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
- 空间数据字段是 l7-district 内部自己定义的字段 NAME_CHN, adcode
|
||||
- joinBy 第二个值是我们传入的数据中的字段
|
||||
|
||||
```javascript
|
||||
const data = [
|
||||
{
|
||||
customValue: '34.5', // 自定义的值
|
||||
adcode: '330102', // 用于与空间数据字段对应
|
||||
},
|
||||
{
|
||||
customValue: '52.6',
|
||||
adcode: '330103',
|
||||
},
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
### label
|
||||
|
||||
文本配置项 `labelOption`
|
||||
|
||||
### bubble
|
||||
|
||||
气泡配置项 `bubbleOption`
|
||||
|
||||
### fill
|
||||
|
||||
填充配置项 `fillOption`
|
||||
|
||||
### province
|
||||
|
||||
`layerOption` 省级图层配置，如果不设置等同全局配置
|
||||
|
||||
### city
|
||||
|
||||
`layerOption` 市级图层配置，如果不设置等同全局配置
|
||||
|
||||
### county
|
||||
|
||||
`layerOption` 县级图层配置，如果不设置等同全局配置
|
||||
|
||||
### viewStart
|
||||
|
||||
起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级，
|
||||
如果 viewStart 设置为 Province 需要为city 设置 adcode 初值
|
||||
同理如果 viewStart 设置为 City 需要为 county 设置 adcode 初值
|
||||
|
||||
### viewEnd
|
||||
|
||||
结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级，
|
||||
|
||||
### layerOption
|
||||
|
||||
下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
|
||||
|
||||
- joinBy: [string, string];
|
||||
- label: Partial<ILabelOption>;
|
||||
- bubble: Partial<IBubbleOption>;
|
||||
- fill: Partial<IFillOptions>;
|
||||
⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
|
||||
- chinaNationalStroke 中国国界线颜色
|
||||
- chinaNationalWidth 中国国界线宽度
|
||||
- coastlineStroke 海岸线颜色
|
||||
- coastlineWidth 海岸线宽度
|
||||
- nationalWidth 国界线
|
||||
- nationalStroke 国界线
|
||||
- provinceStroke 省界颜色
|
||||
- provinceStrokeWidth 省界宽度
|
||||
|
||||
### labelOption
|
||||
|
||||
文本标注配置项，目前只支持常量配置，不支持数据映射
|
||||
|
||||
- enable `boolean` 是否开启标注 `true`
|
||||
- color `string` 标注颜色
|
||||
- field `string` 标注字段名 默认 `NAME_CHN`
|
||||
- size `number` 文本大小 默认 `8`
|
||||
- stroke `string` 描边颜色 `#fff`
|
||||
- strokeWidth `number` 描边宽度 `2`
|
||||
- textAllowOverlap: `boolean` 文字是否允许压盖 `true`
|
||||
- opacity `number` 透明度 `1`
|
||||
|
||||
### bubbleOption
|
||||
|
||||
气泡图配置项
|
||||
|
||||
- enable
|
||||
`boolean` 是否显示气泡 `true`
|
||||
|
||||
- shape: AttributeType; 气泡形状支持数据映射
|
||||
- size: AttributeType; 气泡大小支持数据映射
|
||||
- color: AttributeType; 气泡颜色支持数据映射
|
||||
- scale: { // 数字度量
|
||||
field: string; 度量字段
|
||||
type: ScaleTypeName; 度量字段
|
||||
};
|
||||
- style: {
|
||||
opacity: number; 透明度
|
||||
stroke: string; 填充色
|
||||
strokeWidth: number; 填充宽度
|
||||
};
|
||||
|
||||
### fill
|
||||
|
||||
填充图样式
|
||||
|
||||
- scale: ScaleTypeName | null; 填充颜色度量类型
|
||||
- color: AttributeType; 填充颜色支持数据映射
|
||||
- style: any; 填充图样式
|
||||
- activeColor: string; 填充图高亮颜色
|
||||
|
||||
## 属性
|
||||
|
||||
为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
|
||||
|
||||
### provinceLayer
|
||||
|
||||
全国地图 CountyLayer
|
||||
|
||||
### cityLayer
|
||||
|
||||
省级地图 ProvinceLayer
|
||||
|
||||
### countyLayer
|
||||
|
||||
市级地图 CityLayer
|
||||
|
||||
## 方法
|
||||
|
||||
### drillDown
|
||||
|
||||
向下钻取 自定义钻取交互行为时使用
|
||||
|
||||
** 参数 **
|
||||
|
||||
- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
|
||||
- data 下钻层级的数据，可选，如果不设置取全局配置
|
||||
- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
|
||||
|
||||
```javascirpt
|
||||
drillLayer.drillDown(['110100'])
|
||||
```
|
||||
|
||||
### drillUp
|
||||
|
||||
向上钻取
|
||||
|
||||
```javascirpt
|
||||
drillLayer.drillUp(['110100'])
|
||||
```
|
||||
|
||||
### updateData
|
||||
|
||||
参数
|
||||
|
||||
- layer 更新图层名称 `province|city|county`
|
||||
- data 数据
|
||||
- joinBy 可选
|
||||
|
||||
### show
|
||||
|
||||
显示图形
|
||||
|
||||
### hide
|
||||
|
||||
隐藏图层
|
||||
|
||||
### destroy
|
||||
|
||||
移除并销毁图层
|
||||
|
|
@ -1,171 +1,7 @@
|
|||
---
|
||||
title: 快速开始
|
||||
title: Docs
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
|
||||
|
||||
## 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { WorldLayer } from '@antv/l7-district';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
CDN 引用所有的方法都在 L7.District 命名空间下。
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-District -->
|
||||
<script src="https://unpkg.com/@antv/l7-district"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
```javascript
|
||||
import { WorldLayer } from '@antv/l7-district';
|
||||
/**
|
||||
* L7.District.WorldLayer()// CDN 引用
|
||||
* */
|
||||
new WorldLayer(scene, {
|
||||
data: [],
|
||||
fill: {
|
||||
color: {
|
||||
field: 'NAME_CHN',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603',
|
||||
],
|
||||
},
|
||||
},
|
||||
stroke: '#ccc',
|
||||
label: {
|
||||
enable: true,
|
||||
textAllowOverlap: false,
|
||||
field: 'Short_Name_ZH',
|
||||
},
|
||||
popup: {
|
||||
enable: false,
|
||||
Html: (props) => {
|
||||
return `<span>${props.Short_Name_ZH}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 简介
|
||||
|
||||
District 支持下面几种图
|
||||
|
||||
- WorldLayer 世界地图
|
||||
- CountryLayer 国家地图，目前只支持中国
|
||||
- ProvinceLayer 省级地图
|
||||
- CityLayer 市级地图
|
||||
- CountyLayer 县级地图
|
||||
- DrillDownLayer 上钻下取地图
|
||||
|
||||
## 构造函数
|
||||
|
||||
参数：
|
||||
|
||||
- scene L7 scene 对象
|
||||
- option 行政区划配置项
|
||||
|
||||
- zIndex 图层绘制顺序
|
||||
- data `Array` 属性数据用于可视化渲染
|
||||
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
|
||||
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
|
||||
- label 标注配置项 支持常量，不支持数据映射
|
||||
- enable `boolean` 是否显示标注
|
||||
- color 标注字体颜色 常量
|
||||
- field 标注字段 常量
|
||||
- size 标注大小 常量
|
||||
- stroke 文字描边颜色
|
||||
- strokeWidth 文字描边宽度
|
||||
- textAllowOverlap 是否允许文字压盖
|
||||
- opacity 标注透明度
|
||||
- fill 填充配置项 支持数据映射
|
||||
- color 图层填充颜色，支持常量和数据映射
|
||||
常量：统一设置成一样的颜色
|
||||
数据映射
|
||||
- field 填充映射字段
|
||||
- values 映射值，同 color 方法第二个参数数组，回调函数
|
||||
- style 同 polygonLayer 的 style 方法
|
||||
- activeColor 鼠标滑过高亮颜色
|
||||
- bubble 气泡图
|
||||
- enable `boolean` 是否显示气泡 default false
|
||||
- color 气泡颜色 支持常量、数据映射
|
||||
- size 气泡大小 支持常量、数据映射
|
||||
- shape 气泡形状 支持常量、数据映射
|
||||
- style 气泡图样式 同 PointLayer
|
||||
- stroke 填充描边颜色
|
||||
- strokeWidth 填充描边宽度
|
||||
- autoFit 是否自动缩放到图层范围 `boolean`
|
||||
- popup 信息窗口
|
||||
|
||||
- enable 是否开启 `boolean`
|
||||
- triggerEvent 触发事件 例如 'mousemove' | 'click';
|
||||
- Html popup html 字符串，支持回调函数 (properties: any) => string;
|
||||
|
||||
- chinaNationalStroke 中国国界线颜色
|
||||
- chinaNationalWidth 中国国界线宽度
|
||||
- coastlineStroke 海岸线颜色
|
||||
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
|
||||
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
|
||||
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
|
||||
- provinceStroke 省界颜色 `CountryLayer`
|
||||
- provinceStrokeWidth 省界宽度 `CountryLayer`
|
||||
- cityStroke 市级边界颜色 `CountryLayer`
|
||||
- cityStrokeWidth 市级边界宽度 `CountryLayer`
|
||||
- countyStroke 县级边界颜色 `CountryLayer`
|
||||
- countyStrokeWidth 县级边界宽度 `CountryLayer`
|
||||
|
||||
### 数据
|
||||
|
||||
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)
|
||||
|
||||
### 属性
|
||||
|
||||
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
|
||||
|
||||
#### fillLayer
|
||||
|
||||
### 方法
|
||||
|
||||
#### updateData(data, joinBy)
|
||||
|
||||
更新显示数据，
|
||||
|
||||
参数：
|
||||
|
||||
- data 需要更新的数据
|
||||
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
|
||||
|
||||
#### show
|
||||
|
||||
显示图层
|
||||
|
||||
#### hide
|
||||
|
||||
图层隐藏不显示
|
||||
|
||||
#### destroy
|
||||
|
||||
移除并销毁图层
|
||||
`markdown:docs/api/district/start.zh.md`
|
||||
|
|
@ -1,39 +1,10 @@
|
|||
---
|
||||
title: 快速开始
|
||||
title: 文档链接
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
[旧版地图行政区划组件](https://antv.vision/L7-boundary/)
|
||||
|
||||
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
|
||||
[新版地图行政区划组件](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)
|
||||
|
||||
## 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { WorldLayer } from '@antv/l7-district';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-District -->
|
||||
<script src="https://unpkg.com/@antv/l7-district"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
|
||||
|
||||
### 数据
|
||||
|
||||
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)
|
||||
🌟 旧版本行政区划组件库不再继续维护，推荐使用 L7Plot 的行政区划图表
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Draw Component
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/draw/api.zh.md`
|
||||
|
|
@ -1,212 +0,0 @@
|
|||
---
|
||||
title: 绘制 API
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 钻取地图
|
||||
|
||||
钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
|
||||
|
||||
钻取地图支持两种可视化类型
|
||||
|
||||
- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
|
||||
- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { DrillDownLayer } from '@antv/l7-district';
|
||||
```
|
||||
|
||||
DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
|
||||
|
||||
## 构造函数
|
||||
|
||||
### scene L7 scene 对象
|
||||
|
||||
### option 行政区划配置项
|
||||
|
||||
## 配置项
|
||||
|
||||
### customTrigger
|
||||
|
||||
是否自定义下钻交互，默认 `false`
|
||||
|
||||
### drillDownTriggerEvent
|
||||
|
||||
向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
|
||||
### drillUpTriggleEvent
|
||||
|
||||
向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
|
||||
### provinceData
|
||||
|
||||
省级数据
|
||||
|
||||
### cityData
|
||||
|
||||
市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
|
||||
|
||||
### countyData
|
||||
|
||||
县级数据 可以是全量的数据，下钻时可以不需要重新设置数据
|
||||
|
||||
### joinBy
|
||||
|
||||
数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
|
||||
|
||||
### label
|
||||
|
||||
文本配置项 `labelOption`
|
||||
|
||||
### bubble
|
||||
|
||||
气泡配置项 `bubbleOption`
|
||||
|
||||
### fill
|
||||
|
||||
填充配置项 `fillOption`
|
||||
|
||||
### province
|
||||
|
||||
`layerOption` 省级图层配置，如果不设置等同全局配置
|
||||
|
||||
### city
|
||||
|
||||
`layerOption` 市级图层配置，如果不设置等同全局配置
|
||||
|
||||
### county
|
||||
|
||||
`layerOption` 县级图层配置，如果不设置等同全局配置
|
||||
|
||||
### viewStart
|
||||
|
||||
起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级，
|
||||
如果 viewStart 设置为 Province 需要为city 设置 adcode 初值
|
||||
同理如果 viewStart 设置为 City 需要为 county 设置 adcode 初值
|
||||
|
||||
### viewEnd
|
||||
|
||||
结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级，
|
||||
|
||||
#### layerOption
|
||||
|
||||
下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
|
||||
|
||||
- joinBy: [string, string];
|
||||
- label: Partial<ILabelOption>;
|
||||
- bubble: Partial<IBubbleOption>;
|
||||
- fill: Partial<IFillOptions>;
|
||||
⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
|
||||
- chinaNationalStroke 中国国界线颜色
|
||||
- chinaNationalWidth 中国国界线宽度
|
||||
- coastlineStroke 海岸线颜色
|
||||
- coastlineWidth 海岸线宽度
|
||||
- nationalWidth 国界线
|
||||
- nationalStroke 国界线
|
||||
- provinceStroke 省界颜色
|
||||
- provinceStrokeWidth 省界宽度
|
||||
|
||||
#### labelOption
|
||||
|
||||
文本标注配置项，目前只支持常量配置，不支持数据映射
|
||||
|
||||
- enable `boolean` 是否开启标注 `true`
|
||||
- color `string` 标注颜色
|
||||
- field `string` 标注字段名 默认 `NAME_CHN`
|
||||
- size `number` 文本大小 默认 `8`
|
||||
- stroke `string` 描边颜色 `#fff`
|
||||
- strokeWidth `number` 描边宽度 `2`
|
||||
- textAllowOverlap: `boolean` 文字是否允许压盖 `true`
|
||||
- opacity `number` 透明度 `1`
|
||||
|
||||
#### bubbleOption
|
||||
|
||||
气泡图配置项
|
||||
|
||||
- enable `boolean` 是否显示气泡 `true`
|
||||
- shape: AttributeType; 气泡形状支持数据映射
|
||||
- size: AttributeType; 气泡大小支持数据映射
|
||||
- color: AttributeType; 气泡颜色支持数据映射
|
||||
- scale: { // 数字度量
|
||||
field: string; 度量字段
|
||||
type: ScaleTypeName; 度量字段
|
||||
};
|
||||
- style: {
|
||||
opacity: number; 透明度
|
||||
stroke: string; 填充色
|
||||
strokeWidth: number; 填充宽度
|
||||
};
|
||||
|
||||
#### fill
|
||||
|
||||
填充图样式
|
||||
|
||||
- scale: ScaleTypeName | null; 填充颜色度量类型
|
||||
- color: AttributeType; 填充颜色支持数据映射
|
||||
- style: any; 填充图样式
|
||||
- activeColor: string; 填充图高亮颜色
|
||||
|
||||
## 属性
|
||||
|
||||
为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
|
||||
|
||||
### provinceLayer
|
||||
|
||||
全国地图 CountyLayer
|
||||
|
||||
### cityLayer
|
||||
|
||||
省级地图 ProvinceLayer
|
||||
|
||||
### countyLayer
|
||||
|
||||
市级地图 CityLayer
|
||||
|
||||
## 方法
|
||||
|
||||
### drillDown
|
||||
|
||||
向下钻取 自定义钻取交互行为时使用
|
||||
|
||||
** 参数 **
|
||||
|
||||
- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
|
||||
- data 下钻层级的数据，可选，如果不设置取全局配置
|
||||
- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
|
||||
|
||||
```javascirpt
|
||||
drillLayer.drillDown(['110100'])
|
||||
```
|
||||
|
||||
### drillUp
|
||||
|
||||
向上钻取
|
||||
|
||||
```javascirpt
|
||||
drillLayer.drillUp(['110100'])
|
||||
```
|
||||
|
||||
### updateData
|
||||
|
||||
参数
|
||||
|
||||
- layer 更新图层名称 `province|city|county`
|
||||
- data 数据
|
||||
- joinBy 可选
|
||||
|
||||
### show
|
||||
|
||||
显示图形
|
||||
|
||||
### hide
|
||||
|
||||
隐藏图层
|
||||
|
||||
### destroy
|
||||
|
||||
移除并销毁图层
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Draw UI Component
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/draw/draw_control.zh.md`
|
||||
|
|
@ -1,257 +0,0 @@
|
|||
---
|
||||
title: 绘制 UI 组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||
|
||||
# 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { DrawControl } from '@antv/l7-draw';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-Draw -->
|
||||
<script src="https://unpkg.com/@antv/l7-draw"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### 参数
|
||||
|
||||
```javascript
|
||||
const control = new DrawControl(scene, option);
|
||||
```
|
||||
|
||||
```javascript
|
||||
// CDN 引用
|
||||
const control = new L7.Draw.DrawControl(scene, option);
|
||||
```
|
||||
|
||||
#### scene
|
||||
|
||||
scene 对象
|
||||
|
||||
#### options
|
||||
|
||||
control 配置项
|
||||
|
||||
| name | Type | Default | Description |
|
||||
| -------- | ------------------------------------------------------------------------------------------------- | ---------- | ------------------------------- |
|
||||
| position | `bottomright、topright、 bottomleft 、topleft、 topcenter、bottomcenter、leftcenter、rightcenter` | `topright` | 组件位置 |
|
||||
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
|
||||
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
|
||||
| style | | | 地图绘制样式 |
|
||||
|
||||
**controlOptions**
|
||||
UI 组件配置项
|
||||
|
||||
- point `boolean | drawOption` 绘制点工具配置
|
||||
- line `boolean | drawOption` 绘制线工具配置
|
||||
- polygon `boolean | drawOption` 绘制面工具配置
|
||||
- circle `boolean | drawOption` 绘制圆工具配置
|
||||
- rect `boolean | drawOption` 绘制矩形工具配置
|
||||
- delete `boolean | drawOption` 添加删除工具
|
||||
|
||||
默认配置
|
||||
|
||||
```
|
||||
{
|
||||
point: true,
|
||||
line: true,
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: true
|
||||
}
|
||||
```
|
||||
|
||||
示例
|
||||
|
||||
```
|
||||
{
|
||||
point: false,
|
||||
line: {
|
||||
editEnable: false,
|
||||
},
|
||||
polygon: true,
|
||||
rect: true,
|
||||
circle: true,
|
||||
delete: false
|
||||
```
|
||||
|
||||
### 添加到地图
|
||||
|
||||
```javascript
|
||||
scene.addControl(control);
|
||||
```
|
||||
|
||||
### 从地图中移除
|
||||
|
||||
```javascript
|
||||
scene.removeControl(control);
|
||||
```
|
||||
|
||||
## 方法
|
||||
|
||||
### getDraw(type)
|
||||
|
||||
获取 draw 实例
|
||||
|
||||
参数： type 绘制实例 `point|line|polygon|rect| circle`
|
||||
|
||||
```javascript
|
||||
const pointDraw = drawcontrol.get('point');
|
||||
```
|
||||
|
||||
### getAllData()
|
||||
|
||||
获取每个 Draw 实例绘制的结果数据
|
||||
|
||||
返回数据格式如下
|
||||
|
||||
```javascript
|
||||
{
|
||||
point: []; // geojson数据格式
|
||||
line: [];
|
||||
}
|
||||
```
|
||||
|
||||
### removeAllData()
|
||||
|
||||
移除绘制的的所有数据
|
||||
|
||||
```javascript
|
||||
drawcontrol.removeAllData();
|
||||
```
|
||||
|
||||
### 事件
|
||||
|
||||
drawControl 的事件类型和每个 Draw 的事件一致，如果在 drawControl 监听事件会为每个 draw 增加事件监听。
|
||||
|
||||
- drawType: Draw 类型
|
||||
- feature: 对应的数据
|
||||
|
||||
#### draw.create
|
||||
|
||||
绘制完成时触发该事件
|
||||
|
||||
#### draw.delete
|
||||
|
||||
图形删除时触发该事件
|
||||
|
||||
#### draw.update
|
||||
|
||||
图形更新时触发该事件，图形的平移，顶点的编辑
|
||||
|
||||
```javascript
|
||||
drawControl.on('draw.delete', (e) => {});
|
||||
```
|
||||
|
||||
### style
|
||||
|
||||
style 配置项可以按需配置，内部会和默认值进行 merge
|
||||
|
||||
- active 绘制过程中高亮颜色
|
||||
- normal 正常显示状态
|
||||
|
||||
```javascript
|
||||
// 默认配置参数
|
||||
const style = {
|
||||
active: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 5,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
color: '#fbb03b',
|
||||
size: 1,
|
||||
style: {
|
||||
opacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
polygon: {
|
||||
shape: 'fill',
|
||||
color: '#fbb03b',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#fbb03b',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'dash',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
normal: {
|
||||
polygon: {
|
||||
type: 'PolygonLayer',
|
||||
shape: 'fill',
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 0.1,
|
||||
stroke: '#3bb2d0',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
lineType: 'solid',
|
||||
dashArray: [2, 2],
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'LineLayer',
|
||||
shape: 'line',
|
||||
size: 1,
|
||||
color: '#3bb2d0',
|
||||
style: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
normal_point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#3bb2d0',
|
||||
size: 3,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
mid_point: {
|
||||
point: {
|
||||
type: 'PointLayer',
|
||||
shape: 'circle',
|
||||
color: '#fbb03b',
|
||||
size: 3,
|
||||
style: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: QuickStart
|
||||
order: 1
|
||||
title: Docs
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/api/draw/start.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,38 +1,6 @@
|
|||
---
|
||||
title: 快速使用
|
||||
order: 1
|
||||
title: 文档链接
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
||||
|
||||
# 使用
|
||||
|
||||
**using modules**
|
||||
|
||||
```javascript
|
||||
import { DrawControl } from '@antv/l7-draw';
|
||||
```
|
||||
|
||||
**CDN 版本引用**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-Draw -->
|
||||
<script src="https://unpkg.com/@antv/l7-draw"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
## 实例化
|
||||
|
||||
```javascript
|
||||
const control = new DrawControl(scene, option);
|
||||
scene.addControl(control);
|
||||
```
|
||||
|
||||
```javascript
|
||||
// CDN 引用
|
||||
const control = new L7.Draw.DrawControl(scene, option);
|
||||
scene.addControl(control);
|
||||
```
|
||||
[新站点](https://antv.vision/L7-draw/)
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Layer Component
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/react/layer.zh.md`
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
---
|
||||
title: Layer 组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Layer 类型
|
||||
|
||||
React 各个组件名称和 L7 名称保持一致
|
||||
|
||||
- PointLayer
|
||||
- PolygonLayer
|
||||
- LineLayer
|
||||
- HeatmapLayer
|
||||
- RasterLayer
|
||||
- ImageLayer
|
||||
- CityBuildingLayer
|
||||
|
||||
### 使用方式
|
||||
|
||||
```jsx
|
||||
import { PointLayer } '@antv/l7-react';
|
||||
|
||||
```
|
||||
|
||||
## Layer Props
|
||||
|
||||
### options 图层 配置
|
||||
|
||||
<description> _layer options_ \_ **可选** </description>
|
||||
|
||||
`markdown:docs/common/layer/options.md`
|
||||
|
||||
### source 图层数据
|
||||
|
||||
<description> _sourceOption_ **必选** _default:_ `0`</description>
|
||||
|
||||
数据源配置项
|
||||
|
||||
- data 支持 geojson、csv、json
|
||||
- parser 数据解析配置项
|
||||
- transforms 数据处理配置项
|
||||
|
||||
```jsx
|
||||
<PointLayer
|
||||
source={{
|
||||
data: [],
|
||||
parser: {
|
||||
type: 'geojson',
|
||||
},
|
||||
transforms: [],
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### color 图层颜色
|
||||
|
||||
<description> _attributeOption_ **必选** _default:_ `0`</description>
|
||||
|
||||
### shape 图形形状
|
||||
|
||||
<description> _attributeOption_ **必选** _default:_ `0`</description>
|
||||
|
||||
### size 图形大小
|
||||
|
||||
<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 度量
|
||||
|
||||
<description> _scale Option_ **可选** </description>
|
||||
|
||||
度量配置项
|
||||
|
||||
- values scaleCfg
|
||||
|
||||
**scaleCfg**
|
||||
|
||||
- key 为字段名 fieldname | attributeName
|
||||
- value scale 配置项
|
||||
|
||||
```javascript
|
||||
const scales = {
|
||||
values: {
|
||||
name: {
|
||||
type: 'cat',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### onLayerLoaded 图层回调
|
||||
|
||||
<description> _Function_ **可选** </description>
|
||||
|
||||
获取图层对象方法
|
||||
|
||||
### attribute Option
|
||||
|
||||
color, size, shape 等图形映射通道，通过下面参数配置
|
||||
|
||||
- field 映射字段，如果是常量设置为 null
|
||||
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
|
||||
|
||||
### scale Option
|
||||
|
||||
### interaction option
|
||||
|
||||
active，select 配置项
|
||||
|
||||
**option**
|
||||
|
||||
- color 设置交互的颜色，指滑过或者选中的
|
||||
|
||||
```jsx
|
||||
<PointLayer
|
||||
active={{
|
||||
option: {
|
||||
color: 'red',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## 获取 layer 对象
|
||||
|
||||
### onLayerLoaded
|
||||
|
||||
回调函数获取 layer, scene 对象
|
||||
|
||||
```javascript
|
||||
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>;
|
||||
```
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
---
|
||||
title: Marker
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 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]}}
|
||||
/>
|
||||
|
||||
```
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
---
|
||||
title: Marker 组件
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 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 属性数据 |
|
||||
|
||||
## Maker 事件
|
||||
|
||||
通过 onMarkerLoaded 方法获取 Marker 实例监听
|
||||
|
||||
## 实例
|
||||
|
||||
```jsx
|
||||
import { Marker } from '@antv/l7-react';
|
||||
<Marker lnglat={[120, 32]} />;
|
||||
```
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
title: Popup Component
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 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={[]} />;
|
||||
```
|
||||
|
||||
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
---
|
||||
title: Popup 组件
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 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={{
|
||||
closeOnClick: false;// 如果Popup内需要响应Dom事件需设置成false,否则事件不生效
|
||||
}} lnglat={[]} />;
|
||||
```
|
||||
|
||||
[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
---
|
||||
title: Scene
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||
|
||||
```javascript
|
||||
import { MapboxScene, AmapScene } from '@antv/l7-react';
|
||||
```
|
||||
|
||||
## Scene Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | -------------- | ---------- | ----------------------------------------- |
|
||||
| style | `Object` | `null` | scene css 样式 |
|
||||
| className | `string` | `null` | 样式名称 |
|
||||
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
|
||||
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
|
||||
| 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 | topcenter | bottomcenter | leftcenter | rightcenter` |
|
||||
| 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>;
|
||||
```
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
---
|
||||
title: Scene 组件
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||
|
||||
```javascript
|
||||
import { MapboxScene, AmapScene } from '@antv/l7-react';
|
||||
```
|
||||
|
||||
## Scene Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | -------------- | ---------- | ----------------------------------------- |
|
||||
| style | `Object` | `null` | scene css 样式 |
|
||||
| className | `string` | `null` | 样式名称 |
|
||||
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
|
||||
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
|
||||
| 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 | topcenter | bottomcenter | leftcenter | rightcenter` |
|
||||
| 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>;
|
||||
```
|
||||
|
|
@ -1,72 +1,6 @@
|
|||
---
|
||||
title: Get Started
|
||||
title: Docs
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
### 安装
|
||||
|
||||
```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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
```
|
||||
[New WebSite](https://antv.vision/L7-react/)
|
||||
|
|
@ -1,71 +1,6 @@
|
|||
---
|
||||
title: 快速开始
|
||||
title: 文档链接
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
### 安装
|
||||
|
||||
```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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
```
|
||||
[新站点](https://antv.vision/L7-react/)
|
||||
Loading…
Reference in New Issue