docs: 文档

This commit is contained in:
thinkinggis 2020-11-17 10:59:32 +08:00
parent df31e18479
commit 72782bd2c0
62 changed files with 197 additions and 46 deletions

View File

@ -2,7 +2,9 @@
title: ChangeLog title: ChangeLog
order: 10 order: 10
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 2020.03.12 2.1 正式版 ## 2020.03.12 2.1 正式版
###✨ Features ###✨ Features

View File

@ -2,7 +2,9 @@
title: 发布日志 title: 发布日志
order: 10 order: 10
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 2020.04.20 2.2 正式版本 ## 2020.04.20 2.2 正式版本
###✨ Features ###✨ Features

View File

@ -2,6 +2,7 @@
title: Control title: Control
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺 地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺

View File

@ -2,6 +2,7 @@
title: Control 控件 title: Control 控件
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例、比例尺 地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例、比例尺

View File

@ -2,6 +2,7 @@
title: Marker title: Marker
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
Marker 地图标注 目前只支持 2D dom 标注 Marker 地图标注 目前只支持 2D dom 标注

View File

@ -2,6 +2,7 @@
title: Marker Layer title: Marker Layer
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
MarkerLayer 不同于 PointLayer 图层 MarkerLayer 不同于 PointLayer 图层

View File

@ -2,6 +2,7 @@
title: Marker 图层 title: Marker 图层
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
MarkerLayer 是 Marker 的升级版Marker 是独立的地图标注MarkerLayer 则是统一管理大量的 Marker 数据。 MarkerLayer 是 Marker 的升级版Marker 是独立的地图标注MarkerLayer 则是统一管理大量的 Marker 数据。

View File

@ -2,6 +2,7 @@
title: Popup title: Popup
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图标注信息窗口,用于展示地图要素的属性信息 地图标注信息窗口,用于展示地图要素的属性信息

View File

@ -2,6 +2,7 @@
title: Popup 信息框 title: Popup 信息框
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图标注信息窗口,用于展示地图要素的属性信息 地图标注信息窗口,用于展示地图要素的属性信息

View File

@ -2,6 +2,7 @@
title: 标准地图 title: 标准地图
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 五种地图类型 ## 五种地图类型

View File

@ -4,6 +4,7 @@ order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 五种地图类型 ## 五种地图类型
- WorldLayer 世界地图 - WorldLayer 世界地图

View File

@ -2,6 +2,7 @@
title: 钻取地图 title: 钻取地图
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
钻取是改变展现数据维度的层次变换分析的粒度。它包括向上钻取drillup和向下钻取drilldown 钻取是改变展现数据维度的层次变换分析的粒度。它包括向上钻取drillup和向下钻取drilldown
@ -93,7 +94,7 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件,实现上钻下
strokeWidth: number; 填充宽度 strokeWidth: number; 填充宽度
}; };
#### fill #### fillOption
填充图样式 填充图样式

View File

@ -2,6 +2,7 @@
title: 钻取地图 title: 钻取地图
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
钻取是改变展现数据维度的层次变换分析的粒度。它包括向上钻取drillup和向下钻取drilldown 钻取是改变展现数据维度的层次变换分析的粒度。它包括向上钻取drillup和向下钻取drilldown

View File

@ -2,6 +2,7 @@
title: 快速开始 title: 快速开始
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图行政区划组件,支持世界地图,中国地图省市县三级,支持中国地图省市县上钻下取。 地图行政区划组件,支持世界地图,中国地图省市县三级,支持中国地图省市县上钻下取。

View File

@ -2,6 +2,7 @@
title: Draw Component title: Draw Component
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。 地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。

View File

@ -2,6 +2,7 @@
title: Draw 实例 title: Draw 实例
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
### Draw Type ### Draw Type

View File

@ -2,6 +2,7 @@
title: Draw UI Component title: Draw UI Component
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。 地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。

View File

@ -2,6 +2,7 @@
title: 绘制 UI 组件 title: 绘制 UI 组件
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。 地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。

View File

@ -2,6 +2,7 @@
title: 快速使用 title: 快速使用
order: 1 order: 1
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。 地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。

View File

@ -4,6 +4,7 @@ order: 0
redirect_from: redirect_from:
- /en/docs/api - /en/docs/api
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
An open source large-scale geospatial data visualization analysis development framework powered by WebGL. An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

View File

@ -4,7 +4,9 @@ order: 0
redirect_from: redirect_from:
- /zh/docs/api - /zh/docs/api
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
# L7 地理空间数据可视分析引擎 # L7 地理空间数据可视分析引擎
✨ 2020.01.06 2.0 版本正式发布 ✨ 2020.01.06 2.0 版本正式发布

View File

@ -2,7 +2,9 @@
title: 1.x history title: 1.x history
order: 9 order: 9
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## L7 1.x 版本 ## L7 1.x 版本
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)

View File

@ -2,7 +2,9 @@
title: 1.x 历史版本 title: 1.x 历史版本
order: 9 order: 9
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## L7 1.x 版本 ## L7 1.x 版本
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)

View File

@ -8,6 +8,7 @@ order: 6
```javascript ```javascript
import { CityBuildingLayer } from '@antv/l7'; import { CityBuildingLayer } from '@antv/l7';
``` ```
### animate ### animate
开启动画效果 开启动画效果

View File

@ -59,4 +59,5 @@ pointLayer
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
``` ```
`markdown:docs/common/layer/base.md` `markdown:docs/common/layer/base.md`

View File

@ -2,6 +2,7 @@
title: ImageLayer title: ImageLayer
order: 5 order: 5
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 简介 ## 简介

View File

@ -2,6 +2,7 @@
title: Base Layer title: Base Layer
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 简介 ## 简介
@ -11,7 +12,12 @@ L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
语法示例 语法示例
```javascript ```javascript
const layer = new Layer(option).source().color().size().shape().style(); const layer = new Layer(option)
.source()
.color()
.size()
.shape()
.style();
scene.addLayer(layer); scene.addLayer(layer);
``` ```
@ -79,7 +85,7 @@ layer.source(data, {
transforms: [ transforms: [
{ {
type: 'map', type: 'map',
callback: function (item) { callback: function(item) {
const [x, y] = item.coordinates; const [x, y] = item.coordinates;
item.lat = item.lat * 1; item.lat = item.lat * 1;
item.lng = item.lng * 1; item.lng = item.lng * 1;

View File

@ -2,7 +2,9 @@
title: 图层基类 title: 图层基类
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 简介 ## 简介
L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。 L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
@ -10,7 +12,12 @@ L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
语法示例 语法示例
```javascript ```javascript
const layer = new Layer(option).source().color().size().shape().style(); const layer = new Layer(option)
.source()
.color()
.size()
.shape()
.style();
scene.addLayer(layer); scene.addLayer(layer);
``` ```
@ -20,6 +27,7 @@ scene.addLayer(layer);
## 配置项 ## 配置项
### name ### name
<description> _string_ **optional** _default:_ 自动数字编号</description> <description> _string_ **optional** _default:_ 自动数字编号</description>
设置图层名称,可根据 name 获取 layer; 设置图层名称,可根据 name 获取 layer;
@ -83,7 +91,7 @@ layer.source(data, {
transforms: [ transforms: [
{ {
type: 'map', type: 'map',
callback: function (item) { callback: function(item) {
const [x, y] = item.coordinates; const [x, y] = item.coordinates;
item.lat = item.lat * 1; item.lat = item.lat * 1;
item.lng = item.lng * 1; item.lng = item.lng * 1;

View File

@ -2,6 +2,7 @@
title: 栅格图层 title: 栅格图层
order: 5 order: 5
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。 Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。

View File

@ -2,7 +2,9 @@
title: Map title: Map
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
# 简介 # 简介
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。 L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。

View File

@ -2,7 +2,9 @@
title: 地图 Map title: 地图 Map
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
# 简介 # 简介
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。 L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。

View File

@ -2,6 +2,7 @@
title: Layer Component title: Layer Component
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## Layer 类型 ## Layer 类型

View File

@ -2,7 +2,9 @@
title: Layer 组件 title: Layer 组件
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## Layer 类型 ## Layer 类型
React 各个组件名称和 L7 名称保持一致 React 各个组件名称和 L7 名称保持一致

View File

@ -2,7 +2,9 @@
title: Marker title: Marker
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## Marker Props ## Marker Props
| prop name | Type | Default | Description | | prop name | Type | Default | Description |

View File

@ -2,7 +2,9 @@
title: Marker 组件 title: Marker 组件
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## Marker Props ## Marker Props
| prop name | Type | Default | Description | | prop name | Type | Default | Description |

View File

@ -2,7 +2,9 @@
title: Popup Component title: Popup Component
order: 4 order: 4
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## Popup Props ## Popup Props
| prop name | Type | Default | Description | | prop name | Type | Default | Description |

View File

@ -4,6 +4,7 @@ order: 4
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## Popup Props ## Popup Props
| prop name | Type | Default | Description | | prop name | Type | Default | Description |

View File

@ -2,7 +2,9 @@
title: Scene title: Scene
order: 1 order: 1
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 使用 ## 使用
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。 在 React 版本中 Mapbox 和高德地图作为两个组件封装的。

View File

@ -2,7 +2,9 @@
title: Scene 组件 title: Scene 组件
order: 1 order: 1
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 使用 ## 使用
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。 在 React 版本中 Mapbox 和高德地图作为两个组件封装的。

View File

@ -2,7 +2,9 @@
title: Get Started title: Get Started
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
### 安装 ### 安装
```bash ```bash

View File

@ -2,7 +2,9 @@
title: 快速开始 title: 快速开始
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
### 安装 ### 安装
```bash ```bash

View File

@ -2,7 +2,9 @@
title: Scene title: Scene
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
# 简介 # 简介
## Scene ## Scene

View File

@ -2,7 +2,9 @@
title: 场景 Scene title: 场景 Scene
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
# 简介 # 简介
```javascript ```javascript
@ -41,7 +43,6 @@ L7 地理可视化侧重于地理数据的可视化表达,地图层需要依
### map ### map
可以通过 scene map 属性获取 map 实例 可以通过 scene map 属性获取 map 实例
```javascript ```javascript
@ -88,7 +89,8 @@ L7 Logo 的显示位置 默认左下角
- bottomleft, - bottomleft,
- topleft` - topleft`
### logoVisible logo是否可见 ### logoVisible logo 是否可见
<description> _bottomleft_ **可选** _default: true_ </description> <description> _bottomleft_ **可选** _default: true_ </description>
是否显示 L7 的 Logo {boolean} true 是否显示 L7 的 Logo {boolean} true
@ -109,7 +111,7 @@ L7 Logo 的显示位置 默认左下角
### zoom 初始化缩放等级 ### zoom 初始化缩放等级
<description> _number_ </description> <description> _number_ </description>
地图初始显示级别 {number} Mapbox 0-24 高德 3-18 地图初始显示级别 {number} Mapbox 0-24 高德 3-18

View File

@ -2,6 +2,7 @@
title: CSV title: CSV
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
L7 支持 CSV 以逗号分隔的 CSV 数据加载。 L7 支持 CSV 以逗号分隔的 CSV 数据加载。

View File

@ -2,6 +2,7 @@
title: CSV title: CSV
order: 3 order: 3
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
L7 支持 CSV 以逗号分隔的 CSV 数据加载。 L7 支持 CSV 以逗号分隔的 CSV 数据加载。

View File

@ -2,7 +2,9 @@
title: GeoJSON title: GeoJSON
order: 1 order: 1
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 简介 ## 简介
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。 GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。

View File

@ -2,7 +2,9 @@
title: GeoJSON title: GeoJSON
order: 1 order: 1
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 简介 ## 简介
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。 GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。

View File

@ -2,6 +2,7 @@
title: Image title: Image
order: 4 order: 4
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
Image 数据主要用于在地图根据经纬度范围添加图图片,不如一幅纸制地图扫描版你要放在地图显示。 Image 数据主要用于在地图根据经纬度范围添加图图片,不如一幅纸制地图扫描版你要放在地图显示。

View File

@ -2,6 +2,7 @@
title: Image title: Image
order: 4 order: 4
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
Image 数据主要用于在地图根据经纬度范围添加图图片,比如一幅纸制地图扫描版你要放在地图显示。 Image 数据主要用于在地图根据经纬度范围添加图图片,比如一幅纸制地图扫描版你要放在地图显示。

View File

@ -2,6 +2,7 @@
title: JSON title: JSON
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
GeoJSON 虽然是通用的的地理数据格式,在具体使用场景中,数据服务人员可能并不熟悉 GeoJON,或者没有生成 GeoJON 的工具, 因此 L7 对数据定义了 Parser 的概念,你的数据可以是任何格式,使用指定数据对应的地理信息字段即可。 GeoJSON 虽然是通用的的地理数据格式,在具体使用场景中,数据服务人员可能并不熟悉 GeoJON,或者没有生成 GeoJON 的工具, 因此 L7 对数据定义了 Parser 的概念,你的数据可以是任何格式,使用指定数据对应的地理信息字段即可。

View File

@ -2,6 +2,7 @@
title: JSON title: JSON
order: 2 order: 2
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
GeoJSON 虽然是通用的的地理数据格式,在具体使用场景中,数据服务人员可能并不熟悉 GeoJON,或者没有生成 GeoJON 的工具, 因此 L7 对数据定义了 Parser 的概念,你的数据可以是任何格式,使用指定数据对应的地理信息字段即可。 GeoJSON 虽然是通用的的地理数据格式,在具体使用场景中,数据服务人员可能并不熟悉 GeoJON,或者没有生成 GeoJON 的工具, 因此 L7 对数据定义了 Parser 的概念,你的数据可以是任何格式,使用指定数据对应的地理信息字段即可。

View File

@ -2,6 +2,7 @@
title: Raster title: Raster
order: 5 order: 5
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。 Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。

View File

@ -2,6 +2,7 @@
title: 栅格 title: 栅格
order: 5 order: 5
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。 Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。

View File

@ -2,6 +2,7 @@
title: Source title: Source
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 概述 ## 概述

View File

@ -2,6 +2,7 @@
title: Source title: Source
order: 0 order: 0
--- ---
`markdown:docs/common/style.md` `markdown:docs/common/style.md`
## 概述 ## 概述

View File

@ -108,16 +108,27 @@ District 提供polygon数据需要跟用户的属性数据通过关系字段
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.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) - [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
## 属性
行政区划组件每个图层有多个子图层组成,如标注层,国界线、省界线等等,
### fillLayer
图层事件可以通过该属性进行设置
## 方法 ## 方法
#### updateData(data, joinBy) ### updateLayerAttribute
更新图层渲染样式
### updateDistrict
根据 adcode 更新 行政区块
参数
- adcode 行政区划编码
- data 数据
- joinByField 绑定字段
```javascript
citylayer.updateDistrict(['330100','340100']);
```
### updateData(data, joinBy)
更新显示数据, 更新显示数据,
参数: 参数:
@ -141,3 +152,29 @@ District 提供polygon数据需要跟用户的属性数据通过关系字段
## 事件 ## 事件
行政区划图事件监听默认添加在 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`

View File

@ -13,26 +13,48 @@ import { DrillDownLayer } from '@antv/l7-district';
``` ```
DrillDownLayer 提供默认提供通过Layer的交互事件实现上钻下钻的交互默认点击当前图层(click)向下钻取,双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 DrillDownLayer 提供默认提供通过Layer的交互事件实现上钻下钻的交互默认点击当前图层(click)向下钻取,双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
### 构造函数 ## 构造函数
- scene L7 scene 对象
- option 行政区划配置项 ### scene L7 scene 对象
- drillDepth `number` 下钻深度 `0 | 1 | 2 ` 1 市级 2县级
- customTrigger 是否自定义下钻交互,默认 `false` ### option 行政区划配置项
- drillDownTriggerEvent 向下钻取的触发事件 ⛔customTrigger为 true 时不生效
- drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger为 true 时不生效 ## 配置项
- provinceData 省级数据
- cityData 市级数据 可以是全量的数据,下钻时可以不需要重新设置数据 ### customTrigger
- countyData 县级数据 可以是全量的数据,下钻时可以不需要重新设置数据 是否自定义下钻交互,默认 `false`
- joinBy 数据关联,属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 ### drillDownTriggerEvent
对照表 `Array [string, string]` 第一个值为空间数据字段,第二个为传入数据字段名 向下钻取的触发事件 ⛔customTrigger为 true 时不生效
- label 文本配置项 `labelOption` ### drillUpTriggleEvent
- bubble 气泡配置项 `bubbleOption` 向上钻取的触发事件 ⛔customTrigger为 true 时不生效
- fill 填充配置项 `fillOption` ### provinceData
- province `layerOption` 省级图层配置,如果不设置等同全局配置 省级数据
- city `layerOption` 市级图层配置,如果不设置等同全局配置 ### cityData
- county `layerOption` 县级图层配置,如果不设置等同全局配置 市级数据 可以是全量的数据,下钻时可以不需要重新设置数据
### countyData
县级数据 可以是全量的数据,下钻时可以不需要重新设置数据
### joinBy
数据关联,属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段,第二个为传入数据字段名
### label
文本配置项 `labelOption`
### bubble
气泡配置项 `bubbleOption`
### fill
填充配置项 `fillOption`
### province
`layerOption` 省级图层配置,如果不设置等同全局配置
### city
`layerOption` 市级图层配置,如果不设置等同全局配置
### county
`layerOption` 县级图层配置,如果不设置等同全局配置
### viewStart
起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级,
### viewEnd
结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级,
#### layerOption #### layerOption
下钻各个层级的配置项,可以独立配置,每一层级的样式,不设置和上一层就保持一致 下钻各个层级的配置项,可以独立配置,每一层级的样式,不设置和上一层就保持一致
- joinBy: [string, string]; - joinBy: [string, string];
- label: Partial<ILabelOption>; - label: Partial<ILabelOption>;

View File

@ -15,7 +15,8 @@ const scene = new Scene({
scene.on('loaded', () => { scene.on('loaded', () => {
new DrillDownLayer(scene, { new DrillDownLayer(scene, {
data: [], data: [],
depth: 1, viewStart: 'Country',
viewEnd: 'County',
fill: { fill: {
color: { color: {
field: 'NAME_CHN', field: 'NAME_CHN',

View File

@ -7,7 +7,7 @@
}, },
"devDependencies": { "devDependencies": {
"@antv/g2": "^3.5.9", "@antv/g2": "^3.5.9",
"@antv/l7-district": "^2.2.42", "@antv/l7-district": "^2.2.44",
"@antv/l7-draw": "^2.3.40", "@antv/l7-draw": "^2.3.40",
"@antv/l7-react": "^2.2.37", "@antv/l7-react": "^2.2.37",
"@antv/gatsby-theme-antv": "^1.0.0-beta.11", "@antv/gatsby-theme-antv": "^1.0.0-beta.11",

View File

@ -30,9 +30,14 @@ export default class ZoomComponent extends React.Component {
this.scene = scene; this.scene = scene;
const layer = new PolygonLayer({}); const layer = new PolygonLayer({});
layer.source(data).color('#fff').shape('name', 'text').size(16).style({ layer
opacity: 1.0, .source(data)
}); .color('#fff')
.shape('name', 'text')
.size(16)
.style({
opacity: 1.0,
});
scene.addLayer(layer); scene.addLayer(layer);
const zoomControl = new Zoom({ const zoomControl = new Zoom({
position: 'bottomright', position: 'bottomright',

View File

@ -52,9 +52,9 @@ export default class Country extends React.Component {
enable: true, enable: true,
openTriggerEvent: 'click', openTriggerEvent: 'click',
Html: (props: any) => { Html: (props: any) => {
return `<span><button onclick='alert(11111)'>点击</button>${ return `<span><button onclick='alert(11111)'>点击</button>${props.NAME_CHN +
props.NAME_CHN + ':' + props.value ':' +
}</span>`; props.value}</span>`;
}, },
}, },
}); });

View File

@ -246,12 +246,12 @@
resolved "https://registry.npmjs.org/@antv/gl-matrix/-/gl-matrix-2.7.1.tgz#acb8e37f7ab3df01345aba4372d7942be42eba14" resolved "https://registry.npmjs.org/@antv/gl-matrix/-/gl-matrix-2.7.1.tgz#acb8e37f7ab3df01345aba4372d7942be42eba14"
integrity sha512-oOWcVNlpELIKi9x+Mm1Vwbz8pXfkbJKykoCIOJ/dNK79hSIANbpXJ5d3Rra9/wZqK6MC961B7sybFhPlLraT3Q== integrity sha512-oOWcVNlpELIKi9x+Mm1Vwbz8pXfkbJKykoCIOJ/dNK79hSIANbpXJ5d3Rra9/wZqK6MC961B7sybFhPlLraT3Q==
"@antv/l7-district@^2.2.37": "@antv/l7-district@^2.2.44":
version "2.2.42" version "2.2.44"
resolved "https://registry.npmjs.org/@antv/l7-district/-/l7-district-2.2.42.tgz#5bff1e096bc8fe0e75b09f2ea36618f2763b73da" resolved "https://registry.npmjs.org/@antv/l7-district/-/l7-district-2.2.44.tgz#b502af24a9d2262b8d4950081fc52309f51f7978"
integrity sha512-6PxYhCUVH45QgKTpirv7VT40cOVLZ3cbGB/gSFaTDbARxoemACGWPAwPprspBXXYnkBbfqIyegWNHjXh7BJ6qQ== integrity sha512-OQK1C1ZNYyofF5ZWbzZnWk3feh7oNAspS1MqDX/VK3/bMEXf8myRCjWV3gCKcj6jMlhNQGCBWKZF1s46usUZ9g==
dependencies: dependencies:
"@antv/l7" "^2.2.37" "@antv/l7" "^2.2.41"
"@antv/l7-maps" "^2.2.37" "@antv/l7-maps" "^2.2.37"
"@babel/runtime" "^7.7.7" "@babel/runtime" "^7.7.7"
"@turf/circle" "^6.0.1" "@turf/circle" "^6.0.1"