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
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
|
||||||
|
|
||||||
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
|
`markdown:docs/api/district/start.zh.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
|
|
||||||
|
|
||||||
移除并销毁图层
|
|
||||||
|
|
@ -1,39 +1,10 @@
|
||||||
---
|
---
|
||||||
title: 快速开始
|
title: 文档链接
|
||||||
order: 0
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
[旧版地图行政区划组件](https://antv.vision/L7-boundary/)
|
||||||
|
|
||||||
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
|
[新版地图行政区划组件](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)
|
||||||
|
|
||||||
## 使用
|
🌟 旧版本行政区划组件库不再继续维护，推荐使用 L7Plot 的行政区划图表
|
||||||
|
|
||||||
**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)
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
title: Docs
|
||||||
order: 1
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
`markdown:docs/api/draw/start.zh.md`
|
`markdown:docs/api/draw/start.zh.md`
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,6 @@
|
||||||
---
|
---
|
||||||
title: 快速使用
|
title: 文档链接
|
||||||
order: 1
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
[新站点](https://antv.vision/L7-draw/)
|
||||||
|
|
||||||
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
|
|
||||||
|
|
||||||
# 使用
|
|
||||||
|
|
||||||
**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);
|
|
||||||
```
|
|
||||||
|
|
@ -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
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
[New WebSite](https://antv.vision/L7-react/)
|
||||||
|
|
||||||
### 安装
|
|
||||||
|
|
||||||
```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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
@ -1,71 +1,6 @@
|
||||||
---
|
---
|
||||||
title: 快速开始
|
title: 文档链接
|
||||||
order: 0
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
[新站点](https://antv.vision/L7-react/)
|
||||||
|
|
||||||
### 安装
|
|
||||||
|
|
||||||
```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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
Loading…
Reference in New Issue