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
order: 10
---
`markdown:docs/common/style.md`
## 2020.03.12 2.1 正式版
###✨ Features

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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.

View File

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

View File

@ -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)

View File

@ -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)

View File

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

View File

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

View File

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

View File

@ -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;

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,6 +2,7 @@
title: Source
order: 0
---
`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/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)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
### 构造函数
- 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>;

View File

@ -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',

View File

@ -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",

View File

@ -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',

View File

@ -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>`;
},
},
});

View File

@ -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"