mirror of https://gitee.com/antv-l7/antv-l7
docs(api): 更新api
This commit is contained in:
thinkinggis
parent
e18a8644b3
commit
1595fae2ef
|
|
@ -1,126 +1,5 @@
|
|||
---
|
||||
title: 标准地图
|
||||
title: Base Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 五种地图类型
|
||||
|
||||
- WorldLayer 世界地图
|
||||
- CountryLayer 国家地图，目前只支持中国
|
||||
- ProvinceLayer 省级地图
|
||||
- CityLayer 市级地图
|
||||
- CountyLayer 县级地图
|
||||
|
||||
## 构造函数
|
||||
|
||||
参数：
|
||||
|
||||
- scene L7 scene 对象
|
||||
- option 行政区划配置项
|
||||
|
||||
- zIndex 图层绘制顺序
|
||||
- data `Array` 属性数据用于可视化渲染
|
||||
- visible 地图是否可见
|
||||
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
|
||||
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
|
||||
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
|
||||
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
|
||||
- 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 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
|
||||
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
|
||||
- autoFit 是否自动缩放到图层范围 `boolean`
|
||||
- popup 信息窗口
|
||||
- openTriggerEvent 触发事件 例如 'mousemove' | 'click';
|
||||
- closeTriggerEvent 触发事件 例如 'mousemove' | 'click';
|
||||
- enable 是否开启 `boolean`
|
||||
- triggerEvent 触发事件 例如 'mousemove' | 'click';
|
||||
- Html popup html 字符串，支持回调函数 (properties: any) => string;
|
||||
|
||||
- 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时生效`
|
||||
|
||||
⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。
|
||||
|
||||
### 数据
|
||||
|
||||
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 关联字段 可选，如果不设置保持和初始化一致。
|
||||
|
||||
### getFillData
|
||||
|
||||
获取填充数据，可用于绘制独立的边界线
|
||||
|
||||
#### show
|
||||
|
||||
显示图层
|
||||
|
||||
#### hide
|
||||
|
||||
图层隐藏不显示
|
||||
|
||||
#### destroy
|
||||
|
||||
移除并销毁图层
|
||||
`markdown:docs/api/district/style.md`
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
---
|
||||
title: 标准地图
|
||||
order: 2
|
||||
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 国家地图，目前只支持中国
|
||||
|
|
@ -13,104 +32,118 @@ order: 2
|
|||
- CityLayer 市级地图
|
||||
- CountyLayer 县级地图
|
||||
|
||||
## 构造函数
|
||||
|
||||
参数：
|
||||
## 配置项
|
||||
|
||||
- scene L7 scene 对象
|
||||
- option 行政区划配置项
|
||||
### zIndex
|
||||
|
||||
- zIndex 图层绘制顺序
|
||||
- data `Array` 属性数据用于可视化渲染
|
||||
- visible 地图是否可见
|
||||
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
|
||||
图层绘制顺序
|
||||
|
||||
### data `Array`
|
||||
|
||||
属性数据用于可视化渲染
|
||||
### visible
|
||||
地图是否可见
|
||||
### joinBy
|
||||
数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
|
||||
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
|
||||
- label 标注配置项 支持常量，不支持数据映射
|
||||
|
||||
- enable `boolean` 是否显示标注
|
||||
- color 标注字体颜色 常量
|
||||
- field 标注字段 常量
|
||||
- size 标注大小 常量
|
||||
- stroke 文字描边颜色
|
||||
- strokeWidth 文字描边宽度
|
||||
- textAllowOverlap 是否允许文字压盖
|
||||
- opacity 标注透明度
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
其他包括 text [style 的配置](../layer/point_layer/text#style)
|
||||
### showBorder `boolean`
|
||||
是否显示国界线，默认显示，不建议不显示
|
||||
|
||||
- fill 填充配置项 支持数据映射
|
||||
- color 图层填充颜色，支持常量和数据映射
|
||||
常量：统一设置成一样的颜色
|
||||
数据映射
|
||||
- field 填充映射字段
|
||||
- values 映射值，同 color 方法第二个参数数组，回调函数
|
||||
- filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法
|
||||
数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉
|
||||
- style 同 polygonLayer 的 style 方法
|
||||
- activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮
|
||||
- bubble 气泡图
|
||||
- enable `boolean` 是否显示气泡 default false
|
||||
- color 气泡颜色 支持常量、数据映射
|
||||
- size 气泡大小 支持常量、数据映射
|
||||
- shape 气泡形状 支持常量、数据映射
|
||||
- style 气泡图样式 同 PointLayer
|
||||
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
|
||||
- stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
|
||||
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
|
||||
- autoFit 是否自动缩放到图层范围 `boolean`
|
||||
- popup 信息窗口
|
||||
### simplifyTolerance
|
||||
数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
|
||||
### depth
|
||||
数据显示层级 0：国家级，1:省级，2: 市级，3：县级
|
||||
|
||||
- enable 是否开启 `boolean`
|
||||
- openTriggerEvent 触发事件 例如 'mousemove' | 'click';
|
||||
- closeTriggerEvent 触发事件 例如 'mousemove' | 'click';
|
||||
- Html popup html 字符串，支持回调函数 (properties: any) => string;
|
||||
### stroke 填充描边颜色
|
||||
`ProvinceLayer, CityLayer, CountyLayer`
|
||||
### strokeWidth 填充描边宽度
|
||||
`ProvinceLayer, CityLayer, CountyLayer`
|
||||
|
||||
- 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时生效`
|
||||
### autoFit
|
||||
|
||||
⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。
|
||||
是否自动缩放到图层范围 `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)
|
||||
- [省级行政名称_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,
|
||||
|
||||
#### fillLayer
|
||||
```js
|
||||
const layer = new CountryLayer();
|
||||
layer.updateLayerAttribute('fill', 'color', 'red')
|
||||
```
|
||||
|
||||
图层事件可以通过该属性进行设置
|
||||
### updateDistrict
|
||||
根据 adcode 更新 行政区块
|
||||
|
||||
### 方法
|
||||
参数
|
||||
- adcode 行政区划编码
|
||||
- data 数据
|
||||
- joinByField 绑定字段
|
||||
|
||||
#### updateData(data, joinBy)
|
||||
|
||||
```javascript
|
||||
citylayer.updateDistrict(['330100','340100']);
|
||||
|
||||
```
|
||||
|
||||
### updateData(data, joinBy)
|
||||
更新显示数据，
|
||||
|
||||
参数：
|
||||
|
||||
- data 需要更新的数据
|
||||
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
|
||||
|
||||
|
|
@ -118,14 +151,42 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字
|
|||
|
||||
获取填充数据，可用于绘制独立的边界线
|
||||
|
||||
#### show
|
||||
### show
|
||||
|
||||
显示图层
|
||||
|
||||
#### hide
|
||||
|
||||
### hide
|
||||
图层隐藏不显示
|
||||
|
||||
#### destroy
|
||||
### 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`
|
||||
|
||||
|
|
|
|||
|
|
@ -3,162 +3,4 @@ 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 行政区划配置项
|
||||
- drillDepth `number` 下钻深度 `0 | 1 | 2` 1 市级 2，县级
|
||||
- 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` 县级图层配置，如果不设置等同全局配置
|
||||
|
||||
#### 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`
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
其他包括 text [style 的配置](../layer/point_layer/text#style)
|
||||
|
||||
#### bubbleOption
|
||||
|
||||
气泡图配置项
|
||||
|
||||
- enable `boolean` 是否显示气泡 `true`
|
||||
- shape: AttributeType; 气泡形状支持数据映射
|
||||
- size: AttributeType; 气泡大小支持数据映射
|
||||
- color: AttributeType; 气泡颜色支持数据映射
|
||||
- scale: { // 数字度量
|
||||
field: string; 度量字段
|
||||
type: ScaleTypeName; 度量字段
|
||||
};
|
||||
- style: {
|
||||
opacity: number; 透明度
|
||||
stroke: string; 填充色
|
||||
strokeWidth: number; 填充宽度
|
||||
};
|
||||
|
||||
#### fillOption
|
||||
|
||||
填充图样式
|
||||
|
||||
- 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
|
||||
|
||||
移除并销毁图层
|
||||
`markdown:docs/api/district/drilldown.zh.md`
|
||||
|
|
|
|||
|
|
@ -20,37 +20,86 @@ import { DrillDownLayer } from '@antv/l7-district';
|
|||
|
||||
DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
|
||||
|
||||
### 构造函数
|
||||
## 构造函数
|
||||
|
||||
- scene L7 scene 对象
|
||||
- option 行政区划配置项
|
||||
- drillDepth `number` 下钻深度 `0 | 1 | 2` 1 市级 2，县级
|
||||
- customTrigger 是否自定义下钻交互，默认 `false`
|
||||
- drillDownTriggerEvent 向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
- drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
|
||||
- provinceData 省级数据
|
||||
- cityData 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
|
||||
- countyData 县级数据 可以是全量的数据，下钻时可以不需要重新设置数据
|
||||
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
### 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` 县级图层配置，如果不设置等同全局配置
|
||||
|
||||
#### layerOption
|
||||
### 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>`;
|
||||
|
||||
- label: Partial<ILabelOption>;
|
||||
- bubble: Partial<IBubbleOption>;
|
||||
- fill: Partial<IFillOptions>;
|
||||
⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
|
||||
|
||||
- chinaNationalStroke 中国国界线颜色
|
||||
- chinaNationalWidth 中国国界线宽度
|
||||
- coastlineStroke 海岸线颜色
|
||||
|
|
@ -60,7 +109,7 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
|
|||
- provinceStroke 省界颜色
|
||||
- provinceStrokeWidth 省界宽度
|
||||
|
||||
#### labelOption
|
||||
### labelOption
|
||||
|
||||
文本标注配置项，目前只支持常量配置，不支持数据映射
|
||||
|
||||
|
|
@ -73,11 +122,13 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
|
|||
- textAllowOverlap: `boolean` 文字是否允许压盖 `true`
|
||||
- opacity `number` 透明度 `1`
|
||||
|
||||
#### bubbleOption
|
||||
### bubbleOption
|
||||
|
||||
气泡图配置项
|
||||
|
||||
- enable `boolean` 是否显示气泡 `true`
|
||||
- enable
|
||||
`boolean` 是否显示气泡 `true`
|
||||
|
||||
- shape: AttributeType; 气泡形状支持数据映射
|
||||
- size: AttributeType; 气泡大小支持数据映射
|
||||
- color: AttributeType; 气泡颜色支持数据映射
|
||||
|
|
@ -91,7 +142,7 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
|
|||
strokeWidth: number; 填充宽度
|
||||
};
|
||||
|
||||
#### fill
|
||||
### fill
|
||||
|
||||
填充图样式
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,6 @@ new WorldLayer(scene, {
|
|||
});
|
||||
```
|
||||
|
||||
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
|
||||
|
||||
## 简介
|
||||
|
||||
|
|
|
|||
|
|
@ -3,282 +3,4 @@ title: Draw Component
|
|||
order: 3
|
||||
---
|
||||
|
||||
`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
|
||||
|
||||
scene 对象
|
||||
|
||||
#### options
|
||||
|
||||
control 配置项
|
||||
|
||||
| name | Type | Default | Description |
|
||||
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
||||
| position | `bottomright、topright、 bottomleft’ topleft` | `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);
|
||||
```
|
||||
|
||||
### Draw Type
|
||||
|
||||
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
|
||||
|
||||
#### DrawCircle
|
||||
|
||||
绘制圆形
|
||||
|
||||
```javascript
|
||||
import { DrawCircle } from '@antv/l7-draw';
|
||||
const drawCircle = new DrawCircle(scene);
|
||||
drawCircle.enable();
|
||||
```
|
||||
|
||||
#### DrawRect
|
||||
|
||||
绘制四边形
|
||||
|
||||
```javascript
|
||||
import { DrawRect } from '@antv/l7-draw';
|
||||
const drawRect = new DrawRect(scene);
|
||||
drawRect.enable();
|
||||
```
|
||||
|
||||
#### DrawLine
|
||||
|
||||
绘制路径
|
||||
|
||||
```javascript
|
||||
import { DrawLine } from '@antv/l7-draw';
|
||||
const drawLine = new DrawLine(scene);
|
||||
drawLine.enable();
|
||||
```
|
||||
|
||||
#### DrawPoint
|
||||
|
||||
绘制点
|
||||
|
||||
```javascript
|
||||
import { DrawPoint } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPoint(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
#### DrawPolygon
|
||||
|
||||
绘制多边形
|
||||
|
||||
```javascript
|
||||
import { DrawPolygon } from '@antv/l7-draw';
|
||||
const drawPoint = new DrawPolygon(scene);
|
||||
drawPoint.enable();
|
||||
```
|
||||
|
||||
### 配置项 DrawOption
|
||||
|
||||
- editEnable boolean 是否允许编辑
|
||||
- selectEnable boolean 是否允许选中
|
||||
|
||||
### 方法
|
||||
|
||||
#### enable
|
||||
|
||||
开始编辑，绘制完成之后会自动结束。
|
||||
|
||||
```javascript
|
||||
draw.enable();
|
||||
```
|
||||
|
||||
#### disable
|
||||
|
||||
结束编辑
|
||||
|
||||
```javascript
|
||||
draw.enable();
|
||||
```
|
||||
|
||||
### 事件
|
||||
|
||||
#### draw.create
|
||||
|
||||
绘制完成时触发该事件
|
||||
|
||||
#### draw.delete
|
||||
|
||||
图形删除时触发该事件
|
||||
|
||||
#### draw.update
|
||||
|
||||
图形更新时触发该事件，图形的平移，顶点的编辑
|
||||
|
||||
### style
|
||||
|
||||
- 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: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
`markdown:docs/api/draw/api.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
---
|
||||
title: 绘制 API
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 钻取地图
|
||||
|
||||
钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
|
||||
|
|
|
|||
|
|
@ -3,245 +3,4 @@ title: Draw UI Component
|
|||
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 对象, 绘制控件需要传入 scene 实例
|
||||
|
||||
#### options
|
||||
|
||||
control 配置项
|
||||
|
||||
| name | Type | Default | Description |
|
||||
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
||||
| position | `bottomright、topright、 bottomleft’ topleft` | `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 绘制实例 `point|line|polygon|rect| circle`
|
||||
|
||||
```javascript
|
||||
const pointDraw = drawcontrol.get('point');
|
||||
```
|
||||
|
||||
### getAllData()
|
||||
|
||||
获取每个 Draw 实例绘制的结果数据
|
||||
|
||||
返回数据格式如下
|
||||
|
||||
```javascript
|
||||
{
|
||||
point: [];
|
||||
line: [];
|
||||
}
|
||||
```
|
||||
|
||||
### 事件
|
||||
|
||||
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: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
`markdown:docs/api/draw/draw_control.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: QuickStart
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/api/draw/start.zh.md`
|
||||
|
|
|
|||
|
|
@ -3,61 +3,4 @@ title: CityBuild
|
|||
order: 6
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { CityBuildingLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
开启动画效果
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
```
|
||||
|
||||
### style
|
||||
|
||||
- baseColor 楼房颜色,
|
||||
- windowColor: 窗户颜色,
|
||||
- brightColor: 点亮窗户颜色
|
||||
|
||||
其他 style 配置项同
|
||||
|
||||
[layer#style](./layer#style)
|
||||
|
||||
## 自定义动画频率
|
||||
|
||||
自定义动画频率需要 关闭默认动画，通过 setLight 方法不断更新时间
|
||||
|
||||
```javascript
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
### setLight(time)
|
||||
|
||||
参数
|
||||
time : 时间 毫秒
|
||||
|
||||
#### 完整代码
|
||||
|
||||
```javascript
|
||||
const pointLayer = new CityBuildingLayer();
|
||||
pointLayer
|
||||
.source(await response.json())
|
||||
.size('floor', [0, 500])
|
||||
.color('rgba(242,246,250,1.0)')
|
||||
.animate({
|
||||
enable: true,
|
||||
})
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
baseColor: 'rgb(16,16,16)',
|
||||
windowColor: 'rgb(30,60,89)',
|
||||
brightColor: 'rgb(255,176,38)',
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/cityBuilding.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 城市建筑
|
||||
order: 6
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
````
|
||||
---
|
||||
title: GridHeatMapLayer
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 网格热力图
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Hexagon HeatMap
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 蜂窝热力图
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
|
|
@ -11,7 +12,7 @@ order: 1
|
|||
import { HeatMapLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
## source
|
||||
### source
|
||||
|
||||
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||
|
||||
|
|
@ -42,11 +43,11 @@ layer.source(data, {
|
|||
});
|
||||
```
|
||||
|
||||
## shape
|
||||
### shape
|
||||
|
||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||
|
||||
### 2d
|
||||
#### 2d
|
||||
|
||||
- circle,
|
||||
- triangle
|
||||
|
|
@ -57,7 +58,7 @@ layer.source(data, {
|
|||
layer.shape('circle');
|
||||
```
|
||||
|
||||
### 3d
|
||||
#### 3d
|
||||
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
|
|
@ -68,7 +69,7 @@ layer.shape('circle');
|
|||
layer.shape('cylinder');
|
||||
```
|
||||
|
||||
## size
|
||||
### size
|
||||
|
||||
### 2D shape
|
||||
|
||||
|
|
@ -84,11 +85,11 @@ layer.size('value', [10, 50]); // 根据value 字段映射大小
|
|||
layer.size('value', (value) => {}); // 回调函数设置高度
|
||||
```
|
||||
|
||||
## color
|
||||
### color
|
||||
|
||||
同 layer color 方法
|
||||
|
||||
## style
|
||||
### style
|
||||
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
|
|
|
|||
|
|
@ -1,68 +1,7 @@
|
|||
---
|
||||
title: 经典热力图
|
||||
title: normal
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 使用
|
||||
`markdown:docs/api/layer/heatmap_layer/normal.zh.md`
|
||||
|
||||
```javascript
|
||||
import { HeatMapLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
## shape
|
||||
|
||||
常量 heatmap
|
||||
|
||||
```javascript
|
||||
layer.shape('heatmap');
|
||||
```
|
||||
|
||||
## size
|
||||
|
||||
- field: 热力图权重字段
|
||||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||
|
||||
```javascript
|
||||
layer.size('weight', [0, 1]);
|
||||
```
|
||||
|
||||
## color
|
||||
|
||||
heatmap 需要设置 color 方法，样式通过 style 设置
|
||||
|
||||
## style
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
⚠️ color, position 的长度要相同
|
||||
|
||||
## 完整代码
|
||||
|
||||
```javascript
|
||||
heatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data)
|
||||
.size('mag', [0, 1]) // weight映射通道
|
||||
.style({
|
||||
intensity: 3,
|
||||
radius: 20,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'rgba(33,102,172,0.0)',
|
||||
'rgb(103,169,207)',
|
||||
'rgb(209,229,240)',
|
||||
'rgb(253,219,199)',
|
||||
'rgb(239,138,98)',
|
||||
'rgb(178,24,43,1.0)',
|
||||
],
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 经典热力图
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
@ -9,7 +10,7 @@ order: 1
|
|||
import { HeatMapLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
## shape
|
||||
### shape
|
||||
|
||||
常量 heatmap
|
||||
|
||||
|
|
@ -17,7 +18,7 @@ import { HeatMapLayer } from '@antv/l7';
|
|||
layer.shape('heatmap');
|
||||
```
|
||||
|
||||
## size
|
||||
### size
|
||||
|
||||
- field: 热力图权重字段
|
||||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||
|
|
@ -26,11 +27,11 @@ layer.shape('heatmap');
|
|||
layer.size('weight', [0, 1]);
|
||||
```
|
||||
|
||||
## color
|
||||
### color
|
||||
|
||||
heatmap 需要设置 color 方法，样式通过 style 设置
|
||||
|
||||
## style
|
||||
### style
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
|
|
|
|||
|
|
@ -3,29 +3,4 @@ title: ImageLayer
|
|||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
将图片添加到地图上，需要指定图片的经纬度范围
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { ImageLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
### 代码示例
|
||||
|
||||
```javascript
|
||||
const layer = new ImageLayer({});
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [121.168, 30.2828, 121.384, 30.4219],
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
`markdown:docs/api/layer/imagelayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,584 +2,4 @@
|
|||
title: Base Layer
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。
|
||||
|
||||
语法示例
|
||||
|
||||
```javascript
|
||||
const layer = new Layer(option)
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style();
|
||||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
||||
## 构造函数
|
||||
|
||||
## 配置项
|
||||
|
||||
### name
|
||||
|
||||
设置图层名称,可根据 name 获取 layer;
|
||||
|
||||
### visible
|
||||
|
||||
图层是否可见 {bool } default true
|
||||
|
||||
### zIndex
|
||||
|
||||
图层绘制顺序，数值大绘制在上层，可以控制图层绘制的上下层级 {int} default 0
|
||||
|
||||
### minZoom
|
||||
|
||||
图层显示最小缩放等级，（0-18） {number} Mapbox （0-24） 高德 （3-18）
|
||||
|
||||
### maxZoom
|
||||
|
||||
图层显示最大缩放等级 （0-18） {number} Mapbox （0-24） 高德 （3-18）
|
||||
|
||||
### autoFit
|
||||
|
||||
layer 初始化完成之后，是否自动缩放到图层范围 {bool } default false
|
||||
|
||||
### blend
|
||||
|
||||
图层元素混合效果
|
||||
|
||||
- normal 正常效果 默认
|
||||
- additive 叠加模式
|
||||
- subtractive 相减模式
|
||||
- max 最大值
|
||||
|
||||
# 方法
|
||||
|
||||
### source
|
||||
|
||||
数据源为 layer 设置数据 source(data,config)
|
||||
|
||||
- data {geojson|json|csv}
|
||||
|
||||
源数据
|
||||
|
||||
- config 可选 数据源配置项
|
||||
- parser 数据解析，默认是解析层 geojson
|
||||
- transforms [transform，transform ] 数据处理转换 可设置多个
|
||||
|
||||
parser 和 transforms [见 source 文档](../source/source)
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'map',
|
||||
callback: function(item) {
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat * 1;
|
||||
item.lng = item.lng * 1;
|
||||
item.v = item.v * 1;
|
||||
item.coordinates = [x * 1, y * 1];
|
||||
return item;
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### scale
|
||||
|
||||
设置数据字段映射方法
|
||||
|
||||
- `field` 字段名。
|
||||
|
||||
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
|
||||
|
||||
#### scale 类型
|
||||
|
||||
**连续型**
|
||||
|
||||
- linear 线性
|
||||
- log
|
||||
- pow 指数型
|
||||
|
||||
**连续分类型**
|
||||
|
||||
- quantile 等分位
|
||||
- quantize 等间距
|
||||
|
||||
**枚举型**
|
||||
|
||||
- cat 枚举
|
||||
|
||||
```javascript
|
||||
layer.scale('name', {
|
||||
type: 'cat',
|
||||
});
|
||||
|
||||
// 设置多个scale
|
||||
|
||||
// 字段名为 key, value 为scale配置项
|
||||
|
||||
layer.scale({
|
||||
name: {
|
||||
type: 'cat',
|
||||
},
|
||||
value: {
|
||||
type: 'linear',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 视觉编码方法
|
||||
|
||||
可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。
|
||||
|
||||
### size
|
||||
|
||||
将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
|
||||
|
||||
```javascript
|
||||
pointLayer.size(10); // 常量
|
||||
pointLayer.size('type'); // 使用字段映射到大小
|
||||
pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
pointLayer.size('type', (type) => {
|
||||
// 回调函数
|
||||
if (type === 'a') {
|
||||
return 10;
|
||||
}
|
||||
return 5;
|
||||
});
|
||||
```
|
||||
|
||||
#### size(value）
|
||||
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
|
||||
#### size(field)
|
||||
|
||||
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
|
||||
|
||||
#### size(field, callback)
|
||||
|
||||
使用回调函数控制图形大小。
|
||||
|
||||
- `callback`: function 回调函数。
|
||||
|
||||
```javascript
|
||||
pointLayer.size('age', (value) => {
|
||||
if (value === 1) {
|
||||
return 5;
|
||||
}
|
||||
return 10;
|
||||
});
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
将数据值映射到图形的颜色上的方法。
|
||||
|
||||
```javascript
|
||||
layer.color('red'); // 常量颜色
|
||||
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
|
||||
layer.color('type', ['red', 'blue']); // 指定颜色
|
||||
layer.color('type', (type) => {
|
||||
// 通过回调函数
|
||||
if (type === 'a') {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('type*value', (type, value) => {
|
||||
//多个参数，通过回调函数
|
||||
if (type === 'a' && value > 100) {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
#### color(value)
|
||||
|
||||
参数：`value` ：string
|
||||
只支持接收一个参数，value 可以是：
|
||||
|
||||
- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
|
||||
|
||||
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
|
||||
|
||||
示例
|
||||
|
||||
```javascript
|
||||
layer.color('name'); // 映射数据字段
|
||||
layer.color('white'); // 指定颜色
|
||||
```
|
||||
|
||||
#### color(field, colors)
|
||||
|
||||
参数：
|
||||
|
||||
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
|
||||
|
||||
- `colors`: string | array | function
|
||||
|
||||
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定.
|
||||
|
||||
```javascript
|
||||
layer.color('name'); // 使用默认的颜色
|
||||
layer.color('name', ['red', 'blue']); // 使用传入的指定颜色
|
||||
```
|
||||
|
||||
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
|
||||
|
||||
```javascript
|
||||
layer.color('gender', (value) => {
|
||||
if (value === 1) {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('gender*age', (gender, age) => {
|
||||
if (age === 20 && gender == ' 男') {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
将数据值映射到图形的形状上的方法。
|
||||
|
||||
**shape(shape)**
|
||||
|
||||
参数`shape` string
|
||||
|
||||
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
|
||||
|
||||
| layer 类型 | shape 类型 | 备注 |
|
||||
| ---------- | -------------------------------------------------------------------------------------- | ---- |
|
||||
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
|
||||
| line | line,arc, arc3d, greatcircle | |
|
||||
| polygon | fill,line, extrude | |
|
||||
|
||||
**shape(field, shapes)**
|
||||
|
||||
**shape(field, callback)**
|
||||
|
||||
### style
|
||||
|
||||
全局设置图形显示属性
|
||||
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色 仅点图层支持
|
||||
|
||||
- strokeWidth 线的宽度 仅点图层支持
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
opacity: 0.8,
|
||||
stroke: 'white',
|
||||
});
|
||||
```
|
||||
|
||||
## 图层更新方法
|
||||
|
||||
如果已经添加了图层，需要修改图层显示样式可以再次调用图形映射方法，然后调用 `scene.render()`更新渲染即可
|
||||
|
||||
### 样式更新
|
||||
|
||||
```javascript
|
||||
layer.color('blue');
|
||||
layer.size(10);
|
||||
layer.style({});
|
||||
scene.render();
|
||||
```
|
||||
|
||||
### setData
|
||||
|
||||
更新 Source 数据
|
||||
|
||||
参数:
|
||||
|
||||
- data 数据
|
||||
- option 默认和初始配置项一致，如果数据格式相同可不设置
|
||||
|
||||
调用 setData 方法会自动更新图层渲染
|
||||
|
||||
```javascript
|
||||
layer.setData(data);
|
||||
```
|
||||
|
||||
### setBlend(type)
|
||||
|
||||
设置图层叠加方法
|
||||
参数：
|
||||
|
||||
- type blend 类型
|
||||
|
||||
## 图层控制方法
|
||||
|
||||
### show
|
||||
|
||||
图层显示
|
||||
|
||||
```javascript
|
||||
layer.show();
|
||||
```
|
||||
|
||||
### hide
|
||||
|
||||
图层隐藏
|
||||
|
||||
```javascript
|
||||
layer.hide();
|
||||
```
|
||||
|
||||
### isVisible
|
||||
|
||||
图层是否可见
|
||||
|
||||
return `true | false`
|
||||
|
||||
### setIndex
|
||||
|
||||
设置图层绘制顺序
|
||||
|
||||
### fitBounds
|
||||
|
||||
缩放到图层范围
|
||||
|
||||
```javascript
|
||||
layer.fitBounds();
|
||||
```
|
||||
|
||||
### setMinZoom
|
||||
|
||||
设置图层最小缩放等级
|
||||
|
||||
参数
|
||||
|
||||
- zoom {number}
|
||||
|
||||
```javascript
|
||||
layer.setMinZoom(zoom);
|
||||
```
|
||||
|
||||
### setMaxZoom
|
||||
|
||||
设置图层最大缩放等级
|
||||
|
||||
参数
|
||||
|
||||
- zoom {number}
|
||||
|
||||
```javascript
|
||||
layer.setMinZoom(zoom);
|
||||
```
|
||||
|
||||
设置图层最大缩放等级
|
||||
|
||||
参数
|
||||
|
||||
- zoom {number}
|
||||
|
||||
```javascript
|
||||
layer.setMinZoom(zoom);
|
||||
```
|
||||
|
||||
## 图层交互方法
|
||||
|
||||
### active
|
||||
|
||||
开启或者关闭 mousehover 元素高亮效果
|
||||
|
||||
参数： activeOption | boolean
|
||||
|
||||
activeOption
|
||||
-color 填充颜色
|
||||
|
||||
```javascript
|
||||
// 开启 Active 使用默认高亮颜色
|
||||
layer.active(true);
|
||||
|
||||
// 开启 Active 自定义高亮颜色
|
||||
|
||||
layer.active({
|
||||
color: 'red',
|
||||
});
|
||||
|
||||
// 关闭高亮效果
|
||||
layer.active(false);
|
||||
```
|
||||
|
||||
### setActive
|
||||
|
||||
根据元素 ID 设置指定元素 hover 高亮
|
||||
|
||||
```javascript
|
||||
layer.setActive(id);
|
||||
```
|
||||
|
||||
### select
|
||||
|
||||
开启或者关闭 mouseclick 元素选中高亮效果
|
||||
|
||||
参数： selectOption | boolean
|
||||
|
||||
selectOption
|
||||
-color 填充颜色
|
||||
|
||||
```javascript
|
||||
// 开启 Active 使用默认高亮颜色
|
||||
layer.select(true);
|
||||
|
||||
// 开启 Active 自定义高亮颜色
|
||||
|
||||
layer.select({
|
||||
color: 'red',
|
||||
});
|
||||
|
||||
// 关闭高亮效果
|
||||
layer.select(false);
|
||||
```
|
||||
|
||||
### setSelect
|
||||
|
||||
根据元素 ID 设置指定元素 click 选中 高亮
|
||||
|
||||
```javascript
|
||||
layer.setSelect(id);
|
||||
```
|
||||
|
||||
## 鼠标事件
|
||||
|
||||
鼠标事件回调参数 target
|
||||
|
||||
```typescript
|
||||
```
|
||||
|
||||
- x: number 鼠标 在地图位置 x 坐标
|
||||
- y: number 鼠标 在地图位置 y 坐标
|
||||
- type: string 鼠标事件类型
|
||||
- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度
|
||||
- feature: any; 数据选中的地理要素信息
|
||||
- featureId: number | null; 数据选中的地理要素的 ID
|
||||
|
||||
### click
|
||||
|
||||
点击事件
|
||||
|
||||
### mousemove
|
||||
|
||||
鼠标移动事件
|
||||
|
||||
### mouseout
|
||||
|
||||
鼠标移除
|
||||
|
||||
### mouseup
|
||||
|
||||
鼠标按下
|
||||
|
||||
### mousedown
|
||||
|
||||
鼠标向下
|
||||
|
||||
### contextmenu
|
||||
|
||||
鼠标右键
|
||||
|
||||
### unclick
|
||||
|
||||
点击未拾取到元素
|
||||
|
||||
### unmousemove
|
||||
|
||||
鼠标移动未拾取到元素
|
||||
|
||||
### unmouseup
|
||||
|
||||
鼠标抬起未拾取到元素
|
||||
|
||||
### unmousedown
|
||||
|
||||
鼠标按下未拾取到元素
|
||||
|
||||
### uncontextmenu
|
||||
|
||||
鼠标右键位拾取到元素
|
||||
|
||||
### unpick
|
||||
|
||||
所有鼠标事件未拾取到
|
||||
|
||||
使用示例
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
||||
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单
|
||||
|
||||
// 鼠标在图层外的事件
|
||||
layer.on('unclick', (ev) => {}); // 图层外点击
|
||||
layer.on('unmousemove', (ev) => {}); // 图层外移动
|
||||
layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起
|
||||
layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
|
||||
layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
|
||||
layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
|
||||
```
|
||||
|
||||
## 图层事件
|
||||
|
||||
### inited
|
||||
|
||||
参数 option
|
||||
|
||||
- target 当前 layer
|
||||
- type 事件类型
|
||||
|
||||
图层初始化完成后触发
|
||||
|
||||
```javascript
|
||||
layer.on('inited', (option) => {});
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
图层添加到 scene
|
||||
|
||||
参数 option
|
||||
|
||||
- target 当前 layer
|
||||
- type 事件类型
|
||||
|
||||
### remove
|
||||
|
||||
图层移除时触发
|
||||
|
||||
参数 option
|
||||
|
||||
- target 当前 layer
|
||||
- type 事件类型
|
||||
`markdown:docs/api/layer/layer.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,83 +2,4 @@
|
|||
title: ArcLayer
|
||||
order: 1
|
||||
---
|
||||
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
弧线支持三种弧线算法
|
||||
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
||||
- duration 动画时间 单位(s)秒
|
||||
- interval 轨迹间隔, 取值区间 0 - 1
|
||||
- trailLength 轨迹长度 取值区间 0 - 1
|
||||
|
||||
```javascript
|
||||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
||||
### 示例代码
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/line_layer/arc.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: 弧线图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: LineLayer
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## 线图层
|
||||
|
||||
### shape
|
||||
|
|
|
|||
|
|
@ -2,82 +2,4 @@
|
|||
title: LineLayer
|
||||
order: 0
|
||||
---
|
||||
|
||||
## 线图层
|
||||
|
||||
### shape
|
||||
|
||||
线图层支持 4 种 shape
|
||||
|
||||
- line 绘制路径图，
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
⚠️ 弧线只需要设置起止点坐标即可
|
||||
|
||||
```
|
||||
new LineLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
|
||||
```
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[
|
||||
106.5234375,
|
||||
57.51582286553883
|
||||
],
|
||||
[
|
||||
136.40625,
|
||||
61.77312286453146
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
线图层 可以设置高度
|
||||
|
||||
- size 类型为 number 则表示 line 的宽度
|
||||
- size 类型为 [number , number] 分别表示宽度和高度
|
||||
|
||||
```javascript
|
||||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1, 2]); // 宽度为1，高度2
|
||||
```
|
||||
|
||||
### style
|
||||
|
||||
- lineType dash | solid 线类型实线和虚线
|
||||
- dashArray 虚线配置项 `[ 5, 5]`
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
lineType: 'dash',
|
||||
dashArray: [5, 5],
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/line_layer/linelayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,57 +2,4 @@
|
|||
title: Path
|
||||
order: 1
|
||||
---
|
||||
|
||||
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 line 即可绘制路线图
|
||||
|
||||
- line
|
||||
|
||||
### size
|
||||
|
||||
路径图线的 size 支持两个维度
|
||||
|
||||
- width 宽度
|
||||
- height 高度
|
||||
|
||||
```javascript
|
||||
layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
|
||||
|
||||
layer.size('height', []);
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
||||
- duration 动画时间 单位(s)秒
|
||||
- interval 轨迹间隔, 取值区间 0 - 1
|
||||
- trailLength 轨迹长度 取值区间 0 - 1
|
||||
|
||||
```javascript
|
||||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/line_layer/path.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: 路径图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
||||
## 使用
|
||||
|
|
|
|||
|
|
@ -2,57 +2,4 @@
|
|||
title: Bubble Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
气泡图通过 PointLayer 对象实例化，
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
通常气泡图 shape 设置为 **circle**
|
||||
|
||||
### size
|
||||
|
||||
气泡图大小，需要指定数据映射字段
|
||||
|
||||
```javascript
|
||||
const bubble = new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size('mag', [0, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
气泡图支持水波动画效果
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 水波配置项
|
||||
|
||||
- speed 水波速度
|
||||
- rings 水波环数
|
||||
|
||||
## tips
|
||||
|
||||
目前 style 的配置项只支持全局设置，不支持数据映射。
|
||||
|
||||
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
||||
|
||||
style 方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||
`markdown:docs/api/layer/point_layer/bubble.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: 气泡图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
||||
## 基础使用
|
||||
|
|
|
|||
|
|
@ -3,8 +3,4 @@ title: Chart Map
|
|||
order: 6
|
||||
---
|
||||
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
||||
通过自定义 Marker 实现自定义图表
|
||||
|
||||
[demo 示例](../../../../examples/point/chart)
|
||||
`markdown:docs/api/layer/point_layer/chart.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Cluster Map
|
||||
order: 5
|
||||
---
|
||||
`markdown:docs/api/layer/point_layer/cluster.zh.md`
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 聚合图
|
||||
order: 5
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -3,58 +3,4 @@ title: 3D Column
|
|||
order: 5
|
||||
---
|
||||
|
||||
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
3D 柱图通过 PointLayer 对象实例化，将 shape 设置成不同的 3Dshape
|
||||
|
||||
### shape
|
||||
|
||||
3D Shape 支持
|
||||
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
- hexagonColumn
|
||||
- squareColumn
|
||||
|
||||
### size
|
||||
|
||||
3D 柱图 size 需要设置三个维度 [w, l, z]
|
||||
|
||||
- w 宽
|
||||
- l 长
|
||||
- z 高度
|
||||
|
||||
size 设置成常量
|
||||
|
||||
```
|
||||
layer.size([2,2,3])
|
||||
```
|
||||
|
||||
size 回调函数设置
|
||||
|
||||
```
|
||||
layer.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
const column = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn',
|
||||
])
|
||||
.size('unit_price', (h) => {
|
||||
return [6, 6, h / 500];
|
||||
})
|
||||
.color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/point_layer/column.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 3D 柱图
|
||||
order: 5
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
|
|
|
|||
|
|
@ -3,47 +3,4 @@ title: Dot Density
|
|||
order: 3
|
||||
---
|
||||
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
|
||||
- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape
|
||||
|
||||
### color
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## 相关 demo
|
||||
|
||||
[城市亮度图](../../../../examples/point/dot)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/point_layer/dot.zh.md`
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ title: 亮度图
|
|||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
|
|
|||
|
|
@ -3,10 +3,4 @@ title: Custom Marker
|
|||
order: 7
|
||||
---
|
||||
|
||||
可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
||||
[Marker 文档](../../component)
|
||||
|
||||
[MarkerLayer 文档](../../component/markerLayer)
|
||||
`markdown:docs/api/layer/point_layer/marker.zh.md`
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ title: 自定义 Marker
|
|||
order: 7
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
|
|
|||
|
|
@ -3,85 +3,4 @@ title: PointLayer
|
|||
order: 0
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
||||
shape 支持
|
||||
|
||||
**3D 类型 柱图**
|
||||
|
||||
```
|
||||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||||
|
||||
```
|
||||
|
||||
**2D 符号图**
|
||||
|
||||
```
|
||||
'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
|
||||
|
||||
```
|
||||
|
||||
## source
|
||||
|
||||
点数据类型，根据经纬点绘制图形,目前支持三种数据结构
|
||||
|
||||
- [GeoJSON]('../../../../source/geojson/#point')
|
||||
- [CSV](../../../../source/csv/#parser)
|
||||
- [JSON](../../../../source/json/#点数据)
|
||||
|
||||
**图片标注**
|
||||
|
||||
通过 `Scene.addImage()` 可以添加图片资源，
|
||||
|
||||
### 代码示例
|
||||
|
||||
#### 基本图形显示示例
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
|
||||
const layer = PointLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.source(data.list, {
|
||||
type: 'array',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', (level) => {
|
||||
return [4, 4, level + 40];
|
||||
})
|
||||
.color('t', [
|
||||
'#002466',
|
||||
'#105CB3',
|
||||
'#2894E0',
|
||||
'#CFF6FF',
|
||||
'#FFF5B8',
|
||||
'#FFAB5C',
|
||||
'#F27049',
|
||||
'#730D1C',
|
||||
]);
|
||||
```
|
||||
|
||||
#### 符号图
|
||||
|
||||
使用图片添加地图标注
|
||||
|
||||
```javascript
|
||||
scene.addImage(
|
||||
'local',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
|
||||
);
|
||||
|
||||
const layer = new PointLayer({
|
||||
zIndex: 4,
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C');
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/point_layer/pointlayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: PointLayer
|
||||
order: 0
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
|
|
|
|||
|
|
@ -3,43 +3,4 @@ title: Scatter Map
|
|||
order: 2
|
||||
---
|
||||
|
||||
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
|
||||
|
||||
## 使用
|
||||
|
||||
散点图通过 PointLayer 对象实例化
|
||||
|
||||
### shape
|
||||
|
||||
- circle
|
||||
- square
|
||||
- hexagon
|
||||
- triangle
|
||||
- pentagon
|
||||
- octogon
|
||||
- hexagram
|
||||
- rhombus
|
||||
- vesica
|
||||
|
||||
散点图 shape 一般设置成常量
|
||||
|
||||
### color
|
||||
|
||||
color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
|
||||
|
||||
### size
|
||||
|
||||
散点图一般等大小的图形,size 一般设置成常量
|
||||
|
||||
```javascript
|
||||
const scatter = new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/point_layer/scatter.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 散点图
|
||||
order: 2
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
|
||||
|
||||
|
|
|
|||
|
|
@ -3,43 +3,4 @@ title: Symbol Map
|
|||
order: 4
|
||||
---
|
||||
|
||||
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
符号图 通过 PointLayer 对象实例化，将 shape 设置成图片符号
|
||||
|
||||
### shape
|
||||
|
||||
通过 scene addImage 方法
|
||||
|
||||
addImage()
|
||||
参数：
|
||||
|
||||
- id 图片的 id,
|
||||
- url 图片的 url
|
||||
|
||||
```javascript
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
```
|
||||
|
||||
⚠️ 符号图的 ID 不能与点图层已有 shape 名称相同，比如不能设置 circle
|
||||
|
||||
符号图需要把 shape 设置成图片的 id，同样符号图 shape 也支持数据映射
|
||||
|
||||
```javascript
|
||||
const scatter = new PointLayer()
|
||||
.source(data)
|
||||
.shape('00')
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/point_layer/symbol.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 符号图
|
||||
order: 4
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
|
||||
|
||||
|
|
|
|||
|
|
@ -3,45 +3,4 @@ title: Label
|
|||
order: 4
|
||||
---
|
||||
|
||||
为图层添加文本标注
|
||||
|
||||
## 使用
|
||||
|
||||
地图标注需要添加一个新的图层的实现
|
||||
|
||||
### shape
|
||||
|
||||
- field 标注的字段名称
|
||||
- shapeType 'text'
|
||||
|
||||
```javascript
|
||||
layer.shape('name', 'text');
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
同 layer
|
||||
|
||||
### size
|
||||
|
||||
同 layer
|
||||
|
||||
### style
|
||||
|
||||
- opacity `number`
|
||||
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
- stroke: `string`; 描边颜色
|
||||
- strokeWidth `number` 描边宽度
|
||||
- strokeOpacity `number` 描边透明度
|
||||
- fontWeight `string` 字体粗细
|
||||
- fontFamily `string` 字号
|
||||
- textOffset `[number, number]` 文本偏移量
|
||||
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||
|
||||
## 相关 demo
|
||||
|
||||
[文本标注](../../../../examples/point/text)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/point_layer/text.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 文本标注
|
||||
order: 4
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
为图层添加文本标注
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: fill 3D
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/api/layer/polygon_layer/extrude.zh.md`
|
||||
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
title: 3D填充图
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: fill
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/api/layer/polygon_layer/fill.zh.md`
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
title: 填充图
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -3,26 +3,4 @@ title: PolygonLayer
|
|||
order: 0
|
||||
---
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { PolygonLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
## shape
|
||||
|
||||
填充图支持 3 种 shape
|
||||
|
||||
- fill 绘制填充面 不支持数据映射
|
||||
- line 绘制填充图描边 不支持数据映射
|
||||
- extrude 对填充图 3D 拉伸 不支持数据映射
|
||||
|
||||
```javascript
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude'); // size 表示高度
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
`markdown:docs/api/layer/polygon_layer/polygonlayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: PolygonLayer
|
||||
order: 0
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
|
|
|
|||
|
|
@ -3,44 +3,4 @@ title: Raster
|
|||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
|
||||
|
||||
L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { RasterLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
## source
|
||||
|
||||
见 [raster source](../source/raster)
|
||||
|
||||
## shape
|
||||
|
||||
`raster`
|
||||
|
||||
## size
|
||||
|
||||
无
|
||||
|
||||
## color
|
||||
|
||||
无
|
||||
|
||||
## style
|
||||
|
||||
- clampLow Boolean 默认 false, 设置为 true，低于 domain 的数据将不显示
|
||||
- clampHigh Boolean 默认 false, 设置为 true，高于 domain 的数据将不显示
|
||||
- opacity: 0.8 Number 透明度
|
||||
- domain: [ 0, 8000 ] 数据映射区间
|
||||
- noDataValue Number noDataValue 不会显示
|
||||
- rampColors: {
|
||||
colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
} // 色带
|
||||
|
||||
⚠️ color, position 的长度要相同
|
||||
`markdown:docs/api/layer/raster_layer.zh.md`
|
||||
|
|
|
|||
|
|
@ -3,172 +3,4 @@ title: Layer Component
|
|||
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
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
||||
| options | `layer options` | | layer 配置项 |
|
||||
| source | `sourceOption` | | 数据源配置项 |
|
||||
| color | `attributeOption` | | 颜色通道 |
|
||||
| shape | `attributeOption` | | 图层形状属性 |
|
||||
| size | `attributeOption` | | 图层大小属性 |
|
||||
| style | `Object` | | 图层样式 |
|
||||
| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 |
|
||||
| filter | `Function` | | 图层数据过滤方法 |
|
||||
| select | `boolean` `interaction option` | | 图层选中高亮 |
|
||||
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
|
||||
| animate | `animate Option` | `null` | 图层动画配置 |
|
||||
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
||||
|
||||
### layer options
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | --------- | ----------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| name | `string` | | 图层名字，可根据名称获取 layer |
|
||||
| visible | `boolean` | `true` | 图层是否可见 |
|
||||
| zIndex | `number` | 0 | 图层绘制顺序， |
|
||||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
||||
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
|
||||
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
||||
|
||||
### attribute Option
|
||||
|
||||
color, size, shape 等图形映射通道，通过下面参数配置
|
||||
|
||||
- field 映射字段，如果是常量设置为 null
|
||||
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
|
||||
|
||||
详细[配置项](../layer/layer/#size)
|
||||
|
||||
### source Option
|
||||
|
||||
数据源配置项
|
||||
|
||||
- data 支持 geojson、csv、json
|
||||
- parser 数据解析配置项
|
||||
- transforms 数据处理配置项
|
||||
|
||||
详细[配置项](../source/source/#parser-1)
|
||||
|
||||
### scale Option
|
||||
|
||||
度量配置项
|
||||
|
||||
- values scaleCfg
|
||||
|
||||
**scaleCfg**
|
||||
|
||||
- key 为字段名 fieldname | attributeName
|
||||
- value scale 配置项
|
||||
|
||||
```javascript
|
||||
const scales = {
|
||||
values: {
|
||||
name: {
|
||||
type: 'cat',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### interaction option
|
||||
|
||||
active，select 配置项
|
||||
|
||||
**option**
|
||||
|
||||
- color 设置交互的颜色，指滑过或者选中的
|
||||
|
||||
```jsx
|
||||
<>
|
||||
```
|
||||
|
||||
### 获取 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>;
|
||||
```
|
||||
`markdown:docs/api/react/layer.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
title: Layer 组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Layer 类型
|
||||
|
|
@ -26,44 +25,13 @@ import { PointLayer } '@antv/l7-react';
|
|||
|
||||
## Layer Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
||||
| options | `layer options` | | layer 配置项 |
|
||||
| source | `sourceOption` | | 数据源配置项 |
|
||||
| color | `attributeOption` | | 颜色通道 |
|
||||
| shape | `attributeOption` | | 图层形状属性 |
|
||||
| size | `attributeOption` | | 图层大小属性 |
|
||||
| style | `Object` | | 图层样式 |
|
||||
| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 |
|
||||
| filter | `Function` | | 图层数据过滤方法 |
|
||||
| select | `boolean` `interaction option` | | 图层选中高亮 |
|
||||
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
|
||||
| animate | `animate Option` | `null` | 图层动画配置 |
|
||||
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
||||
### options 图层 配置
|
||||
<description> _layer options_ _ **可选** </description>
|
||||
|
||||
### layer options
|
||||
`markdown:docs/common/layer/options.md`
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | --------- | ----------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| name | `string` | | 图层名字，可根据名称获取 layer |
|
||||
| visible | `boolean` | `true` | 图层是否可见 |
|
||||
| zIndex | `number` | 0 | 图层绘制顺序， |
|
||||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
||||
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
|
||||
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
||||
|
||||
### attribute Option
|
||||
|
||||
color, size, shape 等图形映射通道，通过下面参数配置
|
||||
|
||||
- field 映射字段，如果是常量设置为 null
|
||||
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
|
||||
|
||||
详细[配置项](../layer/layer/#size)
|
||||
|
||||
### source Option
|
||||
### source 图层数据
|
||||
<description> _sourceOption_ **必选** _default:_ `0`</description>
|
||||
|
||||
数据源配置项
|
||||
|
||||
|
|
@ -71,9 +39,47 @@ color, size, shape 等图形映射通道，通过下面参数配置
|
|||
- parser 数据解析配置项
|
||||
- transforms 数据处理配置项
|
||||
|
||||
详细[配置项](../source/source/#parser-1)
|
||||
```jsx
|
||||
<PointLayer
|
||||
source={{
|
||||
data: [],
|
||||
parser: {
|
||||
type:'geojson'
|
||||
},
|
||||
transforms:[
|
||||
|
||||
### scale Option
|
||||
]
|
||||
}
|
||||
}
|
||||
/>
|
||||
```
|
||||
|
||||
### 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>
|
||||
|
||||
度量配置项
|
||||
|
||||
|
|
@ -94,6 +100,25 @@ const scales = {
|
|||
};
|
||||
```
|
||||
|
||||
### onLayerLoaded 图层回调
|
||||
<description> _Function_ **可选** </description>
|
||||
|
||||
获取图层对象方法
|
||||
|
||||
|
||||
|
||||
### attribute Option
|
||||
|
||||
color, size, shape 等图形映射通道，通过下面参数配置
|
||||
|
||||
- field 映射字段，如果是常量设置为 null
|
||||
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
|
||||
|
||||
|
||||
### scale Option
|
||||
|
||||
|
||||
|
||||
### interaction option
|
||||
|
||||
active，select 配置项
|
||||
|
|
@ -103,12 +128,19 @@ active，select 配置项
|
|||
- color 设置交互的颜色，指滑过或者选中的
|
||||
|
||||
```jsx
|
||||
<>
|
||||
<PointLayer
|
||||
active={{
|
||||
option:{
|
||||
color:'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
```
|
||||
|
||||
### 获取 layer 对象
|
||||
## 获取 layer 对象
|
||||
|
||||
#### onLayerLoaded
|
||||
### onLayerLoaded
|
||||
|
||||
回调函数获取 layer, scene 对象
|
||||
|
||||
|
|
@ -116,7 +148,7 @@ active，select 配置项
|
|||
onLayerLoaded = (layer, scene) => {};
|
||||
```
|
||||
|
||||
#### Context API
|
||||
### Context API
|
||||
|
||||
```jsx
|
||||
import { LayerContext } from '@antv/l7-react';
|
||||
|
|
@ -127,7 +159,7 @@ import { LayerContext } from '@antv/l7-react';
|
|||
</LayerContext.Consumer>;
|
||||
```
|
||||
|
||||
### Layer 示例
|
||||
## Layer 示例
|
||||
|
||||
```jsx
|
||||
import { PolygonLayer } from '@antv/l7-react';
|
||||
|
|
|
|||
|
|
@ -2,50 +2,4 @@
|
|||
title: CSV
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
||||
|
||||
CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构
|
||||
|
||||
- 点数据 需要指定经度，纬度坐标
|
||||
- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标
|
||||
|
||||
## parser
|
||||
|
||||
- type string 必选 json
|
||||
- x string 点数据表示 经度
|
||||
- y string 点数据表示 纬度
|
||||
- x1 string 经度
|
||||
- x2 string 纬度
|
||||
|
||||
### 点数据通过 CSV 加载
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[CSV 数据 demo 示例](../../../examples/point/bubble#scatter)
|
||||
|
||||
### 线段弧线数据通过 CSV 加载
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng1',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[CSV 线段数据 demo 示例](../../../examples/gallery/basic#arcCircle)
|
||||
`markdown: docs/api/source/csv.zh.md`
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ order: 3
|
|||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
||||
|
||||
CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
`markdown:docs/common/style.md`
|
||||
|
||||
## 配置项
|
||||
|
||||
`markdown:docs/common/layer/options.md`
|
||||
|
||||
`markdown:docs/common/layer/layer_encode.md`
|
||||
|
||||
`markdown:docs/common/layer/layer_style.md`
|
||||
|
||||
`markdown:docs/common/layer/layer_update.md`
|
||||
|
||||
`markdown:docs/common/layer/layer_ctr.md`
|
||||
|
|
|
|||
|
|
@ -218,21 +218,3 @@ layer.color('gender*age', (gender, age) => {
|
|||
|
||||
**shape(field, callback)**
|
||||
|
||||
### style 样式
|
||||
|
||||
全局设置图形显示属性
|
||||
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色 仅点图层支持
|
||||
|
||||
- offsets 偏移量 [number, number] x 和 y 方向偏移 仅支持 pointLayer
|
||||
|
||||
- strokeWidth 线的宽度 仅点图层支持
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
opacity: 0.8,
|
||||
stroke: 'white',
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
### style 样式
|
||||
|
||||
全局设置图形显示属性
|
||||
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色 仅点图层支持
|
||||
|
||||
- offsets 偏移量 [number, number] x 和 y 方向偏移 仅支持 pointLayer
|
||||
|
||||
- strokeWidth 线的宽度 仅点图层支持
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
opacity: 0.8,
|
||||
stroke: 'white',
|
||||
});
|
||||
```
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
## 配置项
|
||||
|
||||
### name
|
||||
<description> _string_ **可选** _default:_ 自动数字编号</description>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,75 +2,4 @@
|
|||
title: 数据
|
||||
order: 2
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
## 数据
|
||||
|
||||
目前L7支持的数据格式有GeoJson,CSV,JSon Image
|
||||
|
||||
- GeoJSON 支持点、线、面等所有的标准空间数据格式。
|
||||
- CSV 支持点、线段、弧线等数据类型。
|
||||
- JSON 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。
|
||||
|
||||
|
||||
## GeoJSON
|
||||
|
||||
> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
110.478515625,
|
||||
32.76880048488168
|
||||
],
|
||||
[
|
||||
117.68554687499999,
|
||||
32.76880048488168
|
||||
],
|
||||
[
|
||||
117.68554687499999,
|
||||
37.64903402157866
|
||||
],
|
||||
[
|
||||
110.478515625,
|
||||
37.64903402157866
|
||||
],
|
||||
[
|
||||
110.478515625,
|
||||
32.76880048488168
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 地理统计分析工具
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
|
||||
|
||||
## 在线工具
|
||||
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
|
||||
## 数据资源
|
||||
|
||||
#### 全国行政区划GeoJON 支持省市县维度
|
||||
[geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
|
||||
|
||||
#### HighCharts 全球行政区划数据集
|
||||
|
||||
[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/)
|
||||
`markdown:docs/tutorial/data.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Local demo
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
`markdown:docs/tutorial/demo.zh.md`
|
||||
|
||||
### 一、打开L7demo页面
|
||||
|
||||
|
|
|
|||
|
|
@ -2,66 +2,4 @@
|
|||
title: HightLight
|
||||
order: 0
|
||||
---
|
||||
地理可视化除了数据展示，还需要用户交互，用户交互一般分为两种
|
||||
- 图层交互
|
||||
- 数据交互
|
||||
|
||||
### 图层交互
|
||||
|
||||
鼠标在可视化图层上进行相关操作，然后图层会有相应的响应。L7 Layer图层目前原生支持两种地图
|
||||
- active 鼠标滑过高亮
|
||||
- select 鼠标选中高亮
|
||||
|
||||
#### active
|
||||
|
||||
[layer active](../../api/layer/layer/#图层交互方法)
|
||||
```javascript
|
||||
// 开启 Active 使用默认高亮颜色
|
||||
layer.active(true)
|
||||
|
||||
// 开启 Active 自定义高亮颜色
|
||||
|
||||
layer.active({
|
||||
color: 'red'
|
||||
})
|
||||
|
||||
// 关闭高亮效果
|
||||
layer.active(false)
|
||||
|
||||
```
|
||||
|
||||
#### select
|
||||
[layer active](../../api/layer/layer/#图层交互方法)
|
||||
|
||||
```javascript
|
||||
// 开启 Active 使用默认高亮颜色
|
||||
layer.select(true)
|
||||
|
||||
// 开启 Active 自定义高亮颜色
|
||||
|
||||
layer.select({
|
||||
color: 'red'
|
||||
})
|
||||
|
||||
// 关闭高亮效果
|
||||
layer.select(false)
|
||||
|
||||
```
|
||||
|
||||
### 数据交互
|
||||
|
||||
有些时候我们可能需要直接指定某个数据高亮，比如鼠标点击数据面板的数据，我们需要高亮地图对应的元素
|
||||
|
||||
#### setActive
|
||||
|
||||
```javascript
|
||||
layer.setActive(id);
|
||||
```
|
||||
|
||||
#### setSelect
|
||||
|
||||
```javascript
|
||||
layer.setSelect(id);
|
||||
```
|
||||
|
||||
|
||||
`markdown:docs/tutorial/interactive/hightlight.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
title: 图层高亮
|
||||
order: 0
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地理可视化除了数据展示，还需要用户交互，用户交互一般分为两种
|
||||
- 图层交互
|
||||
- 数据交互
|
||||
|
|
|
|||
|
|
@ -2,166 +2,5 @@
|
|||
title: GaodeMap
|
||||
order: 0
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
## 使用高德地图
|
||||
|
||||
### 注册账号并申请Key
|
||||
|
||||
1. 首先，[注册开发者账号](https://lbs.amap.com/dev/id/choose)，成为高德开放平台开发者
|
||||
|
||||
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
|
||||
|
||||
3. 为应用[添加 Key](https://lbs.amap.com/dev/key/app)，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
|
||||
|
||||
### 引入 L7
|
||||
|
||||
2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
|
||||
|
||||
|
||||
```html
|
||||
<head>
|
||||
<! --引入最新版的L7-->
|
||||
<script src = 'https://unpkg.com/@antv/l7'></script>
|
||||
|
||||
<! --指定版本号引入L7-->
|
||||
<script src = 'https://unpkg.com/@antv/l7@2.0.11'></script>
|
||||
|
||||
</head>
|
||||
```
|
||||
|
||||
### 添加div 标签指定地图容器
|
||||
|
||||
同时需要为Div设置 高度和宽度
|
||||
|
||||
``` html
|
||||
<div id="map"></div>
|
||||
````
|
||||
|
||||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
```javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: '高德地图token',
|
||||
}),
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
这样我们就完成了通过L7 实例化高德地图
|
||||
|
||||
|
||||
### 添加可视化图层
|
||||
|
||||
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
|
||||
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
|
||||
|
||||
```javascript
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new L7.PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### 完整demo代码
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>创建地图场景</title>
|
||||
<style>
|
||||
html,body{overflow:hidden;margin:0;}
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
<script>
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: '高德地图token',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new L7.PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
`markdown:docs/tutorial/map/amap.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,27 +2,4 @@
|
|||
title: Blank BaseMap With Mapbox
|
||||
order: 2
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
很多情况下我们只是做些简单的地理可视化，不需要加载地图.
|
||||
本教程就是告诉大家如果在L7中使用无底图模式。
|
||||
|
||||
L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
|
||||
|
||||
😃不需要使用mapbox token，也不需要注册mapbox账户
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'blank',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
})
|
||||
});
|
||||
```
|
||||
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
|
||||
|
||||
|
||||
离线，无token使用
|
||||
`markdown:docs/tutorial/map/blankmap.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,173 +2,4 @@
|
|||
title: MapBox BaseMap
|
||||
order: 0
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
## 使用Mapbox 地图
|
||||
|
||||
1、注册MapBox token
|
||||
|
||||
注册地址 [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
|
||||
|
||||
2、引入mapbox.gl JS 和 css
|
||||
|
||||
使用mapbox 需要单独引入 mapbox
|
||||
|
||||
```html
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
```
|
||||
|
||||
|
||||
### 引入 L7
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
```
|
||||
|
||||
|
||||
#### 添加div 标签指定地图容器
|
||||
|
||||
同时需要为Div设置 高度和宽度
|
||||
|
||||
``` html
|
||||
<div id="map"></div>
|
||||
````
|
||||
|
||||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.Mapbox({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: 'mapbox token',
|
||||
}),
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
这样我们就完成了通过L7 实例化mapbox地图
|
||||
|
||||
|
||||
### 添加可视化图层
|
||||
|
||||
|
||||
- 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
|
||||
- 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
|
||||
|
||||
```javascript
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new L7.PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 完整demo 代码
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>创建地图场景</title>
|
||||
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
<script>
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.Mapbox({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: 'mapbox token',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new L7.PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
`markdown:docs/tutorial/map/mapbox.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,135 +2,4 @@
|
|||
title: 离线使用
|
||||
order: 0
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
目前L7 支持高德和Mapbox两种底图，高德地图由于使用在线API不能做的离线部署，如果你有离线部署的需求可以采用MapBox做底图。L7 在接口层统一了不同底图直接的差异，一套可视化代码可以运行在L7 支持的任意底图上。本文主要介绍如何离线使用，国内加速使用MapBox，同时也提供了在线的字体服务，你也可也下载到本地使用。
|
||||
|
||||
### L7 如何引入Mapbox
|
||||
|
||||
```javascript
|
||||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
token:'xxxx'
|
||||
})
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 为什么离线化
|
||||
|
||||
- 离线部署
|
||||
- 国内加速
|
||||
- 不使用mapbox token
|
||||
|
||||
### 如何离线化使用MapBox
|
||||
你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。
|
||||
|
||||
mapbox本身数据资源在国外如果在国内单独部署使用，加载速度体验还是很好的
|
||||
|
||||
我们先了解一下MapBox样式包含哪些配置项。
|
||||
|
||||
#### Mapbox样式参数
|
||||
|
||||
- version：JS SDK对应版本必须为8，
|
||||
- name：样式的命名，
|
||||
- sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。
|
||||
- glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。
|
||||
- sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式
|
||||
- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。
|
||||
|
||||
具体参数及其api可以参考mapbox官网
|
||||
|
||||
如果做到本地化只需要 sprite，glyphs 本地化就可以了，地图服务可以加载其他服务。
|
||||
|
||||
如果你不需要使用MapBox数据服务，可视化层完成用L7渲染那就更简单了
|
||||
|
||||
你只需要将MapBox的地图样式设置 `blank`
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'blank',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
blank 样式以为无底图样式，这种样式下就不需要使用mapbox服务，也不需要使用mapbox的token了
|
||||
|
||||
#### 本地化雪碧图
|
||||
如果你需要使用mapbox字段的图片标注，你需要本地化雪碧图资源<br />只需要下载两个文件即可<br />sprite.json 主要记录每个图表在大图上位置<br />sprite.png 每个小图标组成的大图
|
||||
|
||||
在线雪碧图服务地址:<br />[https://lzxue.github.io/font-glyphs/sprite/sprite](https://lzxue.github.io/font-glyphs/sprite/sprite)
|
||||
|
||||
|
||||
#### 本地化字体
|
||||
如果需要使用mapbox文章标注功能需要本地化，如果你的渲染能力都是用L7实现的，这个过程也是不需要的。
|
||||
|
||||
L7 提供了在线字体服务<br /> 目前支持4种字
|
||||
|
||||
- 阿里巴巴普惠体
|
||||
- noto
|
||||
- opensan
|
||||
- roboto
|
||||
|
||||
_如果你有新的字体需求可提PR，帮你自动生成在线可用的字体服务，你可以在线使用，也可以下载到本地使用。_
|
||||
|
||||
字体服务下载：[gh-pages分支](https://github.com/lzxue/font-glyphs/tree/gh-pages) 你可以clone下来直接使用。
|
||||
|
||||
**你也可以使用在线服务**<br />**<br />github服务<br />[https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf](https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf)<br />蚂蚁CDN：<br />[https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf](https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf)
|
||||
|
||||
#### 地图服务本地化
|
||||
1.加载[第三方底图](https://github.com/htoooth/Leaflet.ChineseTmsProviders)，栅格瓦片图层做底图，如天地图，高德，google的栅格瓦片都可以<br />2.下载[opensteetmap ](https://openmaptiles.com/downloads/planet/)矢量瓦片地图做底图<br />3.自己业务数据发布底图服务，或者矢量瓦片服务。
|
||||
|
||||
**这里还有个更完备的解决方案**<br /> [https://jingsam.github.io/foxgis-server-lite/#/](https://jingsam.github.io/foxgis-server-lite/#/)
|
||||
|
||||
####
|
||||
所有的服务资源已经准备好了，这样我们就可以独立使用mapbox服务，不需要再申请mapbox的token了
|
||||
|
||||
```javascript
|
||||
|
||||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: {
|
||||
"version": 8,
|
||||
"name": "blank",
|
||||
"sprite": "https://lzxue.github.io/font-glyphs/sprite/sprite",
|
||||
"glyphs": "https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf",
|
||||
"sources": {},
|
||||
"layers": [
|
||||
{
|
||||
id: 'background',
|
||||
type: 'background',
|
||||
paint: {
|
||||
'background-color': 'white',
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
token:'xxxx'
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)
|
||||
`markdown:docs/tutorial/map/offline.zh.md`
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ order: 0
|
|||
redirect_from:
|
||||
- /en/docs/tutorial
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
`markdown:docs/tutorial/quickstart.zh.md`
|
||||
## L7
|
||||
|
||||
Current version: 
|
||||
|
|
|
|||
|
|
@ -1,136 +1,4 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
|
||||
|
||||
## 使用
|
||||
|
||||
**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 支持下面几种图
|
||||
|
||||
- WorldLayer 世界地图
|
||||
- CountryLayer 国家地图，目前只支持中国
|
||||
- ProvinceLayer 省级地图
|
||||
- CityLayer 市级地图
|
||||
- CountyLayer 县级地图
|
||||
- DrillDownLayer 上钻下取地图
|
||||
|
||||
|
||||
## 构造函数
|
||||
参数：
|
||||
- scene L7 scene 对象
|
||||
- option 行政区划配置项
|
||||
- zIndex 图层绘制顺序
|
||||
- data `Array` 属性数据用于可视化渲染
|
||||
- visible 地图是否可见
|
||||
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
|
||||
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
|
||||
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
|
||||
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
|
||||
- label 标注配置项 支持常量，不支持数据映射
|
||||
- enable `boolean` 是否显示标注
|
||||
- color 标注字体颜色 常量
|
||||
- field 标注字段 常量
|
||||
- size 标注大小 常量
|
||||
- stroke 文字描边颜色
|
||||
- strokeWidth 文字描边宽度
|
||||
- textAllowOverlap 是否允许文字压盖
|
||||
- opacity 标注透明度
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
其他包括 text [style 的配置](../layer/point_layer/text#style)
|
||||
- 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 关联字段 可选，如果不设置保持和初始化一致。
|
||||
|
||||
### getFillData
|
||||
|
||||
获取填充数据，可用于绘制独立的边界线
|
||||
|
||||
#### show
|
||||
|
||||
显示图层
|
||||
|
||||
#### hide
|
||||
图层隐藏不显示
|
||||
|
||||
#### destroy
|
||||
|
||||
移除并销毁图层
|
||||
|
||||
`markdown:docs/api/district/baselayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,182 +1,5 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`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
|
||||
更新图层渲染样式
|
||||
|
||||
### 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`
|
||||
`markdown:docs/api/district/baselayer.zh.md`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,118 +1,4 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`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 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
|
||||
|
||||
## 简介
|
||||
|
||||
District 支持下面几种图
|
||||
|
||||
- WorldLayer 世界地图
|
||||
- CountryLayer 国家地图，目前只支持中国
|
||||
- ProvinceLayer 省级地图
|
||||
- CityLayer 市级地图
|
||||
- CountyLayer 县级地图
|
||||
- DrillDownLayer 上钻下取地图
|
||||
|
||||
|
||||
## 构造函数
|
||||
参数：
|
||||
- scene L7 scene 对象
|
||||
- option 行政区划配置项
|
||||
- zIndex 图层绘制顺序
|
||||
- data `Array` 属性数据用于可视化渲染
|
||||
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表
|
||||
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
|
||||
- label 标注配置项 支持常量，不支持数据映射
|
||||
- enable `boolean` 是否显示标注
|
||||
- color 标注字体颜色 常量
|
||||
- field 标注字段 常量
|
||||
- size 标注大小 常量
|
||||
- stroke 文字描边颜色
|
||||
- strokeWidth 文字描边宽度
|
||||
- textAllowOverlap 是否允许文字压盖
|
||||
- opacity 标注透明度
|
||||
- fill 填充配置项 支持数据映射
|
||||
- color 图层填充颜色，支持常量和数据映射
|
||||
常量：统一设置成一样的颜色
|
||||
数据映射
|
||||
- field 填充映射字段
|
||||
- values 映射值，同color方法第二个参数数组，回调函数
|
||||
- style 同 polygonLayer的style方法
|
||||
- activeColor 鼠标滑过高亮颜色
|
||||
- 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/baselayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,118 +1,4 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`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 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
|
||||
|
||||
## 简介
|
||||
|
||||
District 支持下面几种图
|
||||
|
||||
- WorldLayer 世界地图
|
||||
- CountryLayer 国家地图，目前只支持中国
|
||||
- ProvinceLayer 省级地图
|
||||
- CityLayer 市级地图
|
||||
- CountyLayer 县级地图
|
||||
- DrillDownLayer 上钻下取地图
|
||||
|
||||
|
||||
## 构造函数
|
||||
参数：
|
||||
- scene L7 scene 对象
|
||||
- option 行政区划配置项
|
||||
- zIndex 图层绘制顺序
|
||||
- data `Array` 属性数据用于可视化渲染
|
||||
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表
|
||||
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
|
||||
- label 标注配置项 支持常量，不支持数据映射
|
||||
- enable `boolean` 是否显示标注
|
||||
- color 标注字体颜色 常量
|
||||
- field 标注字段 常量
|
||||
- size 标注大小 常量
|
||||
- stroke 文字描边颜色
|
||||
- strokeWidth 文字描边宽度
|
||||
- textAllowOverlap 是否允许文字压盖
|
||||
- opacity 标注透明度
|
||||
- fill 填充配置项 支持数据映射
|
||||
- color 图层填充颜色，支持常量和数据映射
|
||||
常量：统一设置成一样的颜色
|
||||
数据映射
|
||||
- field 填充映射字段
|
||||
- values 映射值，同color方法第二个参数数组，回调函数
|
||||
- style 同 polygonLayer的style方法
|
||||
- activeColor 鼠标滑过高亮颜色
|
||||
- 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/baselayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
`markdown:docs/api/district/drilldown.en.md`
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/api/draw/api.zh.md`
|
||||
`markdown:docs/api/district/drilldown.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
---
|
||||
title: introduction
|
||||
---
|
||||
|
||||
`markdown:examples/draw/basic/design.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,170 +1,4 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
## Layer 类型
|
||||
|
||||
React 各个组件名称和 L7 名称保持一致
|
||||
|
||||
- PointLayer
|
||||
- PolygonLayer
|
||||
- LineLayer
|
||||
- HeatmapLayer
|
||||
- RasterLayer
|
||||
- ImageLayer
|
||||
- CityBuildingLayer
|
||||
|
||||
### 使用方式
|
||||
|
||||
```jsx
|
||||
import { PointLayer } '@antv/l7-react';
|
||||
|
||||
```
|
||||
|
||||
## Layer Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
||||
| options | `layer options` | | layer 配置项 |
|
||||
| source | `sourceOption` | | 数据源配置项 |
|
||||
| color | `attributeOption` | | 颜色通道 |
|
||||
| shape | `attributeOption` | | 图层形状属性 |
|
||||
| size | `attributeOption` | | 图层大小属性 |
|
||||
| style | `Object` | | 图层样式 |
|
||||
| scale | `scale Option` | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量 |
|
||||
| filter | `Function` | | 图层数据过滤方法 |
|
||||
| select | `boolean` `interaction option` | | 图层选中高亮 |
|
||||
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
|
||||
| animate | `animate Option` | `null` | 图层动画配置 |
|
||||
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
||||
|
||||
### layer options
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
| --------- | --------- | ----------------------- | ------------------------------------------------ |
|
||||
| name | `string` | | 图层名字，可根据名称获取 layer |
|
||||
| visible | `boolean` | `true` | 图层是否可见 |
|
||||
| zIndex | `number` | 0 | 图层绘制顺序， |
|
||||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
||||
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
|
||||
|
||||
### attribute Option
|
||||
|
||||
color, size, shape 等图形映射通道，通过下面参数配置
|
||||
|
||||
- field 映射字段，如果是常量设置为 null
|
||||
- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
|
||||
|
||||
详细[配置项](../layer/layer/#size)
|
||||
|
||||
### source Option
|
||||
|
||||
数据源配置项
|
||||
|
||||
- data 支持 geojson、csv、json
|
||||
- parser 数据解析配置项
|
||||
- transforms 数据处理配置项
|
||||
|
||||
详细[配置项](../source/source/#parser-1)
|
||||
|
||||
### scale Option
|
||||
|
||||
度量配置项
|
||||
|
||||
- values scaleCfg
|
||||
|
||||
**scaleCfg**
|
||||
|
||||
- key 为字段名 fieldname | attributeName
|
||||
- value scale 配置项
|
||||
|
||||
```javascript
|
||||
const scales = {
|
||||
values: {
|
||||
name: {
|
||||
type: 'cat',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### interaction option
|
||||
|
||||
active，select 配置项
|
||||
|
||||
**option**
|
||||
|
||||
- color 设置交互的颜色，指滑过或者选中的
|
||||
|
||||
```jsx
|
||||
<>
|
||||
```
|
||||
|
||||
### 获取 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>;
|
||||
```
|
||||
`markdown:docs/api/react/layer.zh.md`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import { AMapScene, Control } from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
const World = React.memo(function Map() {
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
[111.9287109375, 28.22697003891834],
|
||||
[115.6640625, 28.22697003891834],
|
||||
[115.6640625, 31.015278981711266],
|
||||
[111.9287109375, 31.015278981711266],
|
||||
[111.9287109375, 28.22697003891834],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return (
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [0.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 6,
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<Control type="zoom" position="topleft" />
|
||||
<Control type="scale" position="bottomleft" />
|
||||
</AMapScene>
|
||||
);
|
||||
});
|
||||
|
||||
ReactDOM.render(<World />, document.getElementById('map'));
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.markerContent {
|
||||
z-index: 2;
|
||||
font-size: 10px;
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0.05rem;
|
||||
background: #1677ff;
|
||||
border-radius: 44px;
|
||||
img {
|
||||
width: 16px;
|
||||
margin: 4px 10px 4px 4px;
|
||||
background: #d8d8d8;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Regular;
|
||||
}
|
||||
}
|
||||
.marker-pin {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { AMapScene, Marker, PointLayer } from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.less';
|
||||
const MarkerPinImg = {
|
||||
green:
|
||||
'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*JhBbT4LvHpQAAAAAAAAAAAAAARQnAQ',
|
||||
blue:
|
||||
'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*n6cXTb8R7iUAAAAAAAAAAAAAARQnAQ',
|
||||
};
|
||||
const MarkerInfo = ({ title }) => {
|
||||
return (
|
||||
<div className="markerContent">
|
||||
<div
|
||||
className="info"
|
||||
style={{
|
||||
background: '#1677ff',
|
||||
}}
|
||||
>
|
||||
<div className="text">{title}</div>
|
||||
</div>
|
||||
<div className="marker-pin">
|
||||
<img alt="marker" src={MarkerPinImg.blue} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const World = React.memo(function Map() {
|
||||
const [data, setData] = React.useState();
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
|
||||
);
|
||||
const data = await response.json();
|
||||
setData(data);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
return (
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [0.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
zoom: 6,
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
{data &&
|
||||
data.map((item: any) => {
|
||||
return (
|
||||
<Marker key={item.id} lnglat={[item.longitude, item.latitude]}>
|
||||
<MarkerInfo title={item.name} />
|
||||
</Marker>
|
||||
);
|
||||
})}
|
||||
</AMapScene>
|
||||
);
|
||||
});
|
||||
|
||||
ReactDOM.render(<World />, document.getElementById('map'));
|
||||
|
|
@ -4,16 +4,25 @@
|
|||
"en": "Layer Component"
|
||||
},
|
||||
"demos": [
|
||||
|
||||
{
|
||||
"filename": "world.jsx",
|
||||
"title": "世界地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*SPnxSLCgZ7IAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "Point_image.tsx",
|
||||
"title": "点标注图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "marker.tsx",
|
||||
"title": "点标注图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "popup.tsx",
|
||||
"title": "信息窗",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "control.tsx",
|
||||
"title": "组件",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
import {
|
||||
AMapScene,
|
||||
LayerEvent,
|
||||
LineLayer,
|
||||
MapboxScene,
|
||||
PolygonLayer,
|
||||
Popup,
|
||||
} from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
const World = React.memo(function Map() {
|
||||
const [popInfo, setPopInfo] = React.useState();
|
||||
const hoverHandle = (e) => {
|
||||
setPopInfo(e)
|
||||
};
|
||||
const hoverOutHandle = () => {
|
||||
setPopInfo(undefined);
|
||||
};
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
[111.9287109375, 28.22697003891834],
|
||||
[115.6640625, 28.22697003891834],
|
||||
[115.6640625, 31.015278981711266],
|
||||
[111.9287109375, 31.015278981711266],
|
||||
[111.9287109375, 28.22697003891834],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return (
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [0.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 6,
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
{data && [
|
||||
<PolygonLayer
|
||||
key={'2'}
|
||||
options={{
|
||||
autoFit: true,
|
||||
}}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
color={{
|
||||
values: '#2E8AE6',
|
||||
}}
|
||||
shape={{
|
||||
values: 'fill',
|
||||
}}
|
||||
style={{
|
||||
opacity: 0.5,
|
||||
}}
|
||||
>
|
||||
<LayerEvent type="mousemove" handler={hoverHandle} />
|
||||
<LayerEvent type="mouseout" handler={hoverOutHandle} />
|
||||
</PolygonLayer>,
|
||||
<LineLayer
|
||||
key={'21'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
color={{
|
||||
values: '#2E8AE6',
|
||||
}}
|
||||
shape={{
|
||||
values: 'line',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
]}
|
||||
<Popup
|
||||
key="popup"
|
||||
lnglat={popupInfo.lnglat}
|
||||
option={{ closeButton: false, offsets: [0, 10] }}
|
||||
>
|
||||
<span>这是个信息框</span>
|
||||
</Popup>
|
||||
</AMapScene>
|
||||
);
|
||||
});
|
||||
|
||||
ReactDOM.render(<World />, document.getElementById('map'));
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import { AMapScene, LineLayer, MapboxScene, PolygonLayer } from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
const World = React.memo(function Map() {
|
||||
const [ data, setData ] = React.useState();
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'
|
||||
);
|
||||
const data = await response.json();
|
||||
setData(data);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
return (
|
||||
<MapboxScene
|
||||
map={{
|
||||
center: [ 0.19382669582967, 50.258134 ],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 6
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}}
|
||||
>
|
||||
{data && [
|
||||
<PolygonLayer
|
||||
key={'2'}
|
||||
options={{
|
||||
autoFit: true
|
||||
}}
|
||||
source={{
|
||||
data
|
||||
}}
|
||||
color={{
|
||||
field: 'name',
|
||||
values: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49'
|
||||
]
|
||||
}}
|
||||
shape={{
|
||||
values: 'fill'
|
||||
}}
|
||||
style={{
|
||||
opacity: 1
|
||||
}}
|
||||
select={{
|
||||
option: { color: '#FFD591' }
|
||||
}}
|
||||
/>,
|
||||
<LineLayer
|
||||
key={'21'}
|
||||
source={{
|
||||
data
|
||||
}}
|
||||
color={{
|
||||
values: '#fff'
|
||||
}}
|
||||
shape={{
|
||||
values: 'line'
|
||||
}}
|
||||
style={{
|
||||
opacity: 1
|
||||
}}
|
||||
/>
|
||||
]}
|
||||
</MapboxScene>
|
||||
);
|
||||
});
|
||||
|
||||
ReactDOM.render(<World/>, document.getElementById('map'));
|
||||
|
|
@ -268,7 +268,7 @@ module.exports = {
|
|||
}
|
||||
],
|
||||
playground: {
|
||||
container: '<div style="min-height: 500px; height: 100%; justify-content: center;position: relative" id="map"/>',
|
||||
container: '<div style="min-height: 500px; height: 100%; position: relative" id="map"/>',
|
||||
dependencies: {
|
||||
'@antv/l7': 'latest',
|
||||
'@antv/l7-maps': 'latest'
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"@antv/l7-district": "^2.2.46",
|
||||
"@antv/l7-draw": "^2.3.40",
|
||||
"@antv/l7-react": "^2.2.37",
|
||||
"@antv/gatsby-theme-antv": "^1.0.0-beta.15",
|
||||
"@antv/gatsby-theme-antv": "^1.0.0-beta.18",
|
||||
"@babel/cli": "^7.6.4",
|
||||
"@babel/core": "^7.6.4",
|
||||
"@babel/plugin-proposal-decorators": "^7.6.0",
|
||||
|
|
|
|||
Loading…
Reference in New Issue