mirror of https://gitee.com/antv-l7/antv-l7
docs: 文档
This commit is contained in:
parent
df31e18479
commit
72782bd2c0
|
@ -2,7 +2,9 @@
|
|||
title: ChangeLog
|
||||
order: 10
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 2020.03.12 2.1 正式版
|
||||
|
||||
###✨ Features
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: 发布日志
|
||||
order: 10
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 2020.04.20 2.2 正式版本
|
||||
|
||||
###✨ Features
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Control
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Control 控件
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例、比例尺
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Marker
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Marker 地图标注 目前只支持 2D dom 标注
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Marker Layer
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
MarkerLayer 不同于 PointLayer 图层
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Marker 图层
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
MarkerLayer 是 Marker 的升级版,Marker 是独立的地图标注,MarkerLayer 则是统一管理大量的 Marker 数据。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Popup
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图标注信息窗口,用于展示地图要素的属性信息
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Popup 信息框
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图标注信息窗口,用于展示地图要素的属性信息
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 标准地图
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 五种地图类型
|
||||
|
|
|
@ -4,6 +4,7 @@ order: 2
|
|||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 五种地图类型
|
||||
|
||||
- WorldLayer 世界地图
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 钻取地图
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
钻取是改变展现数据维度的层次,变换分析的粒度。它包括向上钻取(drillup)和向下钻取(drilldown)。
|
||||
|
@ -93,7 +94,7 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件,实现上钻下
|
|||
strokeWidth: number; 填充宽度
|
||||
};
|
||||
|
||||
#### fill
|
||||
#### fillOption
|
||||
|
||||
填充图样式
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 钻取地图
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
钻取是改变展现数据维度的层次,变换分析的粒度。它包括向上钻取(drillup)和向下钻取(drilldown)。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 快速开始
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图行政区划组件,支持世界地图,中国地图省市县三级,支持中国地图省市县上钻下取。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Draw Component
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Draw 实例
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
### Draw Type
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Draw UI Component
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 绘制 UI 组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 快速使用
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。
|
||||
|
|
|
@ -4,6 +4,7 @@ order: 0
|
|||
redirect_from:
|
||||
- /en/docs/api
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
|
||||
|
||||
|
|
|
@ -4,7 +4,9 @@ order: 0
|
|||
redirect_from:
|
||||
- /zh/docs/api
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# L7 地理空间数据可视分析引擎
|
||||
|
||||
✨ 2020.01.06 2.0 版本正式发布
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: 1.x history
|
||||
order: 9
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: 1.x 历史版本
|
||||
order: 9
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
|
|
@ -8,6 +8,7 @@ order: 6
|
|||
```javascript
|
||||
import { CityBuildingLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
开启动画效果
|
||||
|
|
|
@ -59,4 +59,5 @@ pointLayer
|
|||
});
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: ImageLayer
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Base Layer
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
@ -11,7 +12,12 @@ L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
|
|||
语法示例
|
||||
|
||||
```javascript
|
||||
const layer = new Layer(option).source().color().size().shape().style();
|
||||
const layer = new Layer(option)
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style();
|
||||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
@ -79,7 +85,7 @@ layer.source(data, {
|
|||
transforms: [
|
||||
{
|
||||
type: 'map',
|
||||
callback: function (item) {
|
||||
callback: function(item) {
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat * 1;
|
||||
item.lng = item.lng * 1;
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: 图层基类
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
|
||||
|
@ -10,7 +12,12 @@ L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
|
|||
语法示例
|
||||
|
||||
```javascript
|
||||
const layer = new Layer(option).source().color().size().shape().style();
|
||||
const layer = new Layer(option)
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style();
|
||||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
@ -20,6 +27,7 @@ scene.addLayer(layer);
|
|||
## 配置项
|
||||
|
||||
### name
|
||||
|
||||
<description> _string_ **optional** _default:_ 自动数字编号</description>
|
||||
|
||||
设置图层名称,可根据 name 获取 layer;
|
||||
|
@ -83,7 +91,7 @@ layer.source(data, {
|
|||
transforms: [
|
||||
{
|
||||
type: 'map',
|
||||
callback: function (item) {
|
||||
callback: function(item) {
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat * 1;
|
||||
item.lng = item.lng * 1;
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 栅格图层
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: 地图 Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Layer Component
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Layer 类型
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Layer 组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Layer 类型
|
||||
|
||||
React 各个组件名称和 L7 名称保持一致
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Marker
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Marker Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Marker 组件
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Marker Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Popup Component
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Popup Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -4,6 +4,7 @@ order: 4
|
|||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## Popup Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Scene
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Scene 组件
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Get Started
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: 快速开始
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: Scene
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# 简介
|
||||
|
||||
## Scene
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: 场景 Scene
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# 简介
|
||||
|
||||
```javascript
|
||||
|
@ -41,7 +43,6 @@ L7 地理可视化侧重于地理数据的可视化表达,地图层需要依
|
|||
|
||||
### map
|
||||
|
||||
|
||||
可以通过 scene map 属性获取 map 实例
|
||||
|
||||
```javascript
|
||||
|
@ -88,7 +89,8 @@ L7 Logo 的显示位置 默认左下角
|
|||
- bottomleft,
|
||||
- topleft`
|
||||
|
||||
### logoVisible logo是否可见
|
||||
### logoVisible logo 是否可见
|
||||
|
||||
<description> _bottomleft_ **可选** _default: true_ </description>
|
||||
|
||||
是否显示 L7 的 Logo {boolean} true
|
||||
|
@ -109,7 +111,7 @@ L7 Logo 的显示位置 默认左下角
|
|||
|
||||
### zoom 初始化缩放等级
|
||||
|
||||
<description> _number_ </description>
|
||||
<description> _number_ </description>
|
||||
|
||||
地图初始显示级别 {number} Mapbox (0-24) 高德 (3-18)
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: CSV
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: CSV
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
`markdown:docs/common/style.md`
|
||||
L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: GeoJSON
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
title: GeoJSON
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Image
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
Image 数据主要用于在地图根据经纬度范围添加图图片,不如一幅纸制地图扫描版你要放在地图显示。
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Image
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Image 数据主要用于在地图根据经纬度范围添加图图片,比如一幅纸制地图扫描版你要放在地图显示。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: JSON
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
GeoJSON 虽然是通用的的地理数据格式,在具体使用场景中,数据服务人员可能并不熟悉 GeoJON,或者没有生成 GeoJON 的工具, 因此 L7 对数据定义了 Parser 的概念,你的数据可以是任何格式,使用指定数据对应的地理信息字段即可。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: JSON
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
GeoJSON 虽然是通用的的地理数据格式,在具体使用场景中,数据服务人员可能并不熟悉 GeoJON,或者没有生成 GeoJON 的工具, 因此 L7 对数据定义了 Parser 的概念,你的数据可以是任何格式,使用指定数据对应的地理信息字段即可。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Raster
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 栅格
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Source
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 概述
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Source
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 概述
|
||||
|
|
|
@ -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/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`
|
||||
|
||||
|
|
|
@ -13,26 +13,48 @@ 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` 县级图层配置,如果不设置等同全局配置
|
||||
## 构造函数
|
||||
|
||||
### scene L7 scene 对象
|
||||
|
||||
### option 行政区划配置项
|
||||
|
||||
## 配置项
|
||||
|
||||
### customTrigger
|
||||
是否自定义下钻交互,默认 `false`
|
||||
### drillDownTriggerEvent
|
||||
向下钻取的触发事件 ⛔customTrigger为 true 时不生效
|
||||
### drillUpTriggleEvent
|
||||
向上钻取的触发事件 ⛔customTrigger为 true 时不生效
|
||||
### provinceData
|
||||
省级数据
|
||||
### cityData
|
||||
市级数据 可以是全量的数据,下钻时可以不需要重新设置数据
|
||||
### countyData
|
||||
县级数据 可以是全量的数据,下钻时可以不需要重新设置数据
|
||||
### joinBy
|
||||
数据关联,属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
|
||||
对照表 `Array [string, string]` 第一个值为空间数据字段,第二个为传入数据字段名
|
||||
### label
|
||||
文本配置项 `labelOption`
|
||||
### bubble
|
||||
气泡配置项 `bubbleOption`
|
||||
### fill
|
||||
填充配置项 `fillOption`
|
||||
### province
|
||||
`layerOption` 省级图层配置,如果不设置等同全局配置
|
||||
### city
|
||||
`layerOption` 市级图层配置,如果不设置等同全局配置
|
||||
### county
|
||||
`layerOption` 县级图层配置,如果不设置等同全局配置
|
||||
### viewStart
|
||||
起始下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级,
|
||||
### viewEnd
|
||||
结束下钻视图 `Country' | 'Province' | 'City' | 'County`; 用于定义下钻层级,
|
||||
|
||||
#### layerOption
|
||||
|
||||
下钻各个层级的配置项,可以独立配置,每一层级的样式,不设置和上一层就保持一致
|
||||
- joinBy: [string, string];
|
||||
- label: Partial<ILabelOption>;
|
||||
|
|
|
@ -15,7 +15,8 @@ const scene = new Scene({
|
|||
scene.on('loaded', () => {
|
||||
new DrillDownLayer(scene, {
|
||||
data: [],
|
||||
depth: 1,
|
||||
viewStart: 'Country',
|
||||
viewEnd: 'County',
|
||||
fill: {
|
||||
color: {
|
||||
field: 'NAME_CHN',
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@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-react": "^2.2.37",
|
||||
"@antv/gatsby-theme-antv": "^1.0.0-beta.11",
|
||||
|
|
|
@ -30,9 +30,14 @@ export default class ZoomComponent extends React.Component {
|
|||
this.scene = scene;
|
||||
const layer = new PolygonLayer({});
|
||||
|
||||
layer.source(data).color('#fff').shape('name', 'text').size(16).style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
layer
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.shape('name', 'text')
|
||||
.size(16)
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
const zoomControl = new Zoom({
|
||||
position: 'bottomright',
|
||||
|
|
|
@ -52,9 +52,9 @@ export default class Country extends React.Component {
|
|||
enable: true,
|
||||
openTriggerEvent: 'click',
|
||||
Html: (props: any) => {
|
||||
return `<span><button onclick='alert(11111)'>点击</button>${
|
||||
props.NAME_CHN + ':' + props.value
|
||||
}</span>`;
|
||||
return `<span><button onclick='alert(11111)'>点击</button>${props.NAME_CHN +
|
||||
':' +
|
||||
props.value}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
10
yarn.lock
10
yarn.lock
|
@ -246,12 +246,12 @@
|
|||
resolved "https://registry.npmjs.org/@antv/gl-matrix/-/gl-matrix-2.7.1.tgz#acb8e37f7ab3df01345aba4372d7942be42eba14"
|
||||
integrity sha512-oOWcVNlpELIKi9x+Mm1Vwbz8pXfkbJKykoCIOJ/dNK79hSIANbpXJ5d3Rra9/wZqK6MC961B7sybFhPlLraT3Q==
|
||||
|
||||
"@antv/l7-district@^2.2.37":
|
||||
version "2.2.42"
|
||||
resolved "https://registry.npmjs.org/@antv/l7-district/-/l7-district-2.2.42.tgz#5bff1e096bc8fe0e75b09f2ea36618f2763b73da"
|
||||
integrity sha512-6PxYhCUVH45QgKTpirv7VT40cOVLZ3cbGB/gSFaTDbARxoemACGWPAwPprspBXXYnkBbfqIyegWNHjXh7BJ6qQ==
|
||||
"@antv/l7-district@^2.2.44":
|
||||
version "2.2.44"
|
||||
resolved "https://registry.npmjs.org/@antv/l7-district/-/l7-district-2.2.44.tgz#b502af24a9d2262b8d4950081fc52309f51f7978"
|
||||
integrity sha512-OQK1C1ZNYyofF5ZWbzZnWk3feh7oNAspS1MqDX/VK3/bMEXf8myRCjWV3gCKcj6jMlhNQGCBWKZF1s46usUZ9g==
|
||||
dependencies:
|
||||
"@antv/l7" "^2.2.37"
|
||||
"@antv/l7" "^2.2.41"
|
||||
"@antv/l7-maps" "^2.2.37"
|
||||
"@babel/runtime" "^7.7.7"
|
||||
"@turf/circle" "^6.0.1"
|
||||
|
|
Loading…
Reference in New Issue