docs: 文档升级

This commit is contained in:
thinkinggis 2020-11-16 15:19:41 +08:00
parent 58d46be212
commit df31e18479
170 changed files with 947 additions and 201 deletions

View File

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

View File

@ -2,7 +2,7 @@
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

@ -3,6 +3,8 @@ 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

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

View File

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

View File

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

View File

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

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,7 +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.
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location7 代表世界七大洲寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础,将抽象复杂的空间数据转化成 2D、3D 符号,通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

View File

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

View File

@ -2,7 +2,7 @@
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,7 @@
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,19 +8,6 @@ order: 6
```javascript
import { CityBuildingLayer } from '@antv/l7';
```
### source
同 [PolygonLayer](./polygon_layer/extrude)
### size
同 [PolygonLayer](./polygon_layer/extrude)
### color
[PolygonLayer](./polygon_layer/extrude)
### animate
开启动画效果
@ -71,3 +58,5 @@ pointLayer
});
scene.addLayer(pointLayer);
```
`markdown:docs/common/layer/base.md`

View File

@ -9,18 +9,6 @@ order: 6
import { CityBuildingLayer } from '@antv/l7';
```
### source
同 [PolygonLayer](./polygon_layer/extrude)
### size
同 [PolygonLayer](./polygon_layer/extrude)
### color
[PolygonLayer](./polygon_layer/extrude)
### animate
开启动画效果
@ -71,3 +59,4 @@ pointLayer
});
scene.addLayer(pointLayer);
```
`markdown:docs/common/layer/base.md`

View File

@ -147,3 +147,4 @@ const layer = new HeatmapLayer({})
scene.addLayer(layer);
```
`markdown:docs/common/layer/base.md`

View File

@ -145,3 +145,5 @@ const layer = new HeatmapLayer({})
scene.addLayer(layer);
```
`markdown:docs/common/layer/base.md`

View File

@ -129,3 +129,4 @@ const layer = new HeatmapLayer({
coverage: 0.8,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -129,3 +129,4 @@ const layer = new HeatmapLayer({
coverage: 0.8,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -65,3 +65,4 @@ heatmapLayer({
},
});
```
`markdown:docs/common/layer/base.md`

View File

@ -63,3 +63,4 @@ heatmapLayer()
},
});
```
`markdown:docs/common/layer/base.md`

View File

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

View File

@ -3,6 +3,8 @@ title: 图片图层
order: 5
---
`markdown:docs/common/style.md`
## 简介
将图片添加到地图上,需要指定图片的经纬度范围

View File

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

View File

@ -2,7 +2,7 @@
title: 图层基类
order: 0
---
`markdown:docs/common/style.md`
## 简介
L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
@ -20,6 +20,7 @@ scene.addLayer(layer);
## 配置项
### name
<description> _string_ **optional** _default:_ 自动数字编号</description>
设置图层名称,可根据 name 获取 layer;

View File

@ -81,3 +81,4 @@ const layer = new LineLayer({})
opacity: 0.8,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -85,3 +85,4 @@ const layer = new LineLayer({})
### demo 示例
[弧线 demo](../../../../examples/gallery/basic#arcCircle)
`markdown:docs/common/layer/base.md`

View File

@ -68,3 +68,4 @@ order: 2
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1, 2]); // 宽度为1高度2
```
`markdown:docs/common/layer/base.md`

View File

@ -80,3 +80,4 @@ layer.style({
dashArray: [5, 5],
});
```
`markdown:docs/common/layer/base.md`

View File

@ -55,3 +55,4 @@ L7 目前动画参数为相对单位,我们默认一条线段的长度为 1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成 5 段,如果 interval = 0.5 则为两段。
`markdown:docs/common/layer/base.md`

View File

@ -55,3 +55,4 @@ L7 目前动画参数为相对单位,我们默认一条线段的长度为 1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成 5 段,如果 interval = 0.5 则为两段。
`markdown:docs/common/layer/base.md`

View File

@ -5,7 +5,7 @@ order: 1
气泡图地理区域上方会显示不同大小的圆点,圆形面积与其在数据集中的数值会成正比。
## 使用
## 基础使用
气泡图通过 PointLayer 对象实例化,
@ -56,3 +56,6 @@ layer.animate(false);
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
style 方法如果没有设置 stroke, 默认于气泡的填充色相同
`markdown:docs/common/layer/base.md`

View File

@ -69,3 +69,4 @@ const pointLayer = new PointLayer({})
strokeWidth: 1,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -90,3 +90,5 @@ const pointLayer = new PointLayer({})
PointLayer 的聚合图采用 WebGL 绘制,不支持自定义具体聚合样式,如果有自定义的需求可以使用 MarkerLayer 的聚合功能,你可以通过 Dom 完全自定义样式。
[MarkerLayer 聚合](../../component/markerLayer)
`markdown:docs/common/layer/base.md`

View File

@ -57,3 +57,4 @@ const column = new PointLayer({})
opacity: 1.0,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -57,3 +57,4 @@ const column = new PointLayer({})
opacity: 1.0,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -45,3 +45,5 @@ scene.addLayer(pointLayer);
## 相关 demo
[城市亮度图](../../../../examples/point/dot)
`markdown:docs/common/layer/base.md`

View File

@ -45,3 +45,5 @@ scene.addLayer(pointLayer);
## 相关 demo
[城市亮度图](../../../../examples/point/dot)
`markdown:docs/common/layer/base.md`

View File

@ -84,3 +84,4 @@ const layer = new PointLayer({
.shape('local')
.color('#0D408C');
```
`markdown:docs/common/layer/base.md`

View File

@ -84,3 +84,4 @@ const layer = new PointLayer({
.shape('local')
.color('#0D408C');
```
`markdown:docs/common/layer/base.md`

View File

@ -42,3 +42,4 @@ const scatter = new PointLayer()
strokeWidth: 1,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -42,3 +42,4 @@ const scatter = new PointLayer()
strokeWidth: 1,
});
```
`markdown:docs/common/layer/base.md`

View File

@ -42,4 +42,4 @@ const scatter = new PointLayer()
});
```
## 相关 demo
`markdown:docs/common/layer/base.md`

View File

@ -42,4 +42,4 @@ const scatter = new PointLayer()
});
```
## 相关 demo
`markdown:docs/common/layer/base.md`

View File

@ -43,3 +43,5 @@ layer.shape('name', 'text');
## 相关 demo
[文本标注](../../../../examples/point/text)
`markdown:docs/common/layer/base.md`

View File

@ -18,14 +18,6 @@ order: 4
layer.shape('name', 'text');
```
### color
同 layer
### size
同 layer
### style
- opacity `number`
@ -44,3 +36,5 @@ layer.shape('name', 'text');
## 相关 demo
[文本标注](../../../../examples/point/text)
`markdown:docs/common/layer/base.md`

View File

@ -33,10 +33,4 @@ layer.size('floor', (floor) => {
});
```
### color
同 [layer#color](../layer/#color)
### style
同 [layer#style](../layer/#style)
`markdown:docs/common/layer/base.md`

View File

@ -22,10 +22,4 @@ layer.shape('fill');
填充图无 size 不需要设置 size
### color
同 [layer#color](../layer/#color)
### style
同 [layer#style](../layer/#style)
`markdown:docs/common/layer/base.md`

View File

@ -25,4 +25,4 @@ PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```
其他方法,事件,同基类 [Layer](/zh/docs/api/layer/layer)
`markdown:docs/common/layer/base.md`

View File

@ -25,4 +25,4 @@ PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude').size(10); // size 表示高度
```
其他方法,事件,同基类 [Layer](/zh/docs/api/layer/layer)
`markdown:docs/common/layer/base.md`

View File

@ -3,6 +3,8 @@ title: Raster
order: 5
---
`markdown:docs/common/style.md`
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
title: 场景 Scene
order: 2
---
`markdown:docs/common/style.md`
# 简介
```javascript
@ -41,6 +41,7 @@ L7 地理可视化侧重于地理数据的可视化表达,地图层需要依
### map
可以通过 scene map 属性获取 map 实例
```javascript
@ -72,10 +73,14 @@ const scene = new L7.Scene({
### id
需传入 dom 容器或者容器 id  {domObject || string} [必选]
<description> _string | HTMLElement_ **必选** </description>
需传入 dom 容器或者容器 id
### logoPosition
<description> _bottomleft_ **可选** </description>
L7 Logo 的显示位置 默认左下角
- bottomright
@ -83,33 +88,40 @@ L7 Logo 的显示位置 默认左下角
- bottomleft,
- topleft`
### logoVisible
### logoVisible logo是否可见
<description> _bottomleft_ **可选** _default: true_ </description>
是否显示 L7 的 Logo {boolean} true
### antialias
### antialias 是否开启抗锯齿
<description> _boolean_ **可选** _default: true_ </description>
是否开始前抗锯齿 `boolean` `true`
### preserveDrawingBuffer
<description> _boolean_ **可选** _default: false_ </description>
是否保留缓冲区数据 `boolean` `false`
## Map 配置项
### zoom
### zoom 初始化缩放等级
<description> _number_ </description>
地图初始显示级别 {number} Mapbox 0-24 高德 3-18
### center
### center 地图中心
地图初始中心经纬度 {Lnglat}
### pitch
### pitch 地图倾角
地图初始俯仰角度 {number}  default 0
### style
### style 地图图样式
简化地图样式设置L7 内置了三种主题默认样式 高德mapbox 都可以使用
@ -130,21 +142,21 @@ L7 Logo 的显示位置 默认左下角
}
```
### minZoom
### minZoom 最小缩放等级
地图最小缩放等级 {number}  default 0 Mapbox 0-24 高德 3-18
### maxZoom
### maxZoom 最大缩放等级
地图最大缩放等级 {number}  default 22 Mapbox0-24 高德 3-18
### rotateEnable
### rotateEnable 是否允许旋转
地图是否可旋转 {Boolean} default true
## 方法
### getZoom
### getZoom 获取缩放等级
获取当前缩放等级
@ -154,7 +166,7 @@ scene.getZoom();
return {float}   当前缩放等级
### getLayers()
### getLayers() 获取所有图层
获取所有的地图图层
@ -162,7 +174,7 @@ return {float}   当前缩放等级
scene.getLayers();
```
### getLayerByName(name)
### getLayerByName(name) 根据名称获取图层
根据图层名称获取图层
@ -178,7 +190,7 @@ scene.getLayerByName(name);
return Layer 图层对象
### getCenter()
### getCenter() 获取地图中心
获取地图中心点
@ -188,7 +200,7 @@ scene.getCenter();
return {Lnglat} :地图中心点
### getSize()
### getSize() 获取地图容器大小
获取地图容器大小
@ -198,7 +210,7 @@ scene.getSize();
return { Object } 地图容器的 width,height
### getPitch()
### getPitch() 获取地图倾角
获取地图俯仰角
@ -208,7 +220,7 @@ scene.getPitch();
return {number} pitch
### getContainer
### getContainer 获取地图容器
获取地图容器 return htmlElement
@ -216,7 +228,7 @@ return {number} pitch
scene.getContainer();
```
### setMapStyle
### setMapStyle 设置地图样式
参数:`style` {string} 地图样式 具体样式格式和各底图设置方法一致
@ -242,7 +254,7 @@ scene.setMapStyle(
);
```
### setCenter()
### setCenter() 设置地图中心点
设置地图中心点坐标
@ -252,7 +264,7 @@ scene.setCenter([lng, lat]);
参数:`center` {LngLat} 地图中心点
### setZoomAndCenter
### setZoomAndCenter 设置地图缩放等级和中心点
设置地图等级和中心
@ -265,7 +277,7 @@ scene.setZoomAndCenter(zoom, center);
- zoom {number}
- center {LngLat}
### setRotation
### setRotation 设置地图旋转
设置地图顺时针旋转角度,旋转原点为地图容器中心点,取值范围 [0-360]
@ -275,7 +287,7 @@ scene.setRotation(rotation);
参数: `rotation` {number}
### zoomIn
### zoomIn 地图放大一级
地图放大一级
@ -283,7 +295,7 @@ scene.setRotation(rotation);
scene.zoomIn();
```
### zoomOut
### zoomOut 地图缩小一级
地图缩小一级
@ -291,7 +303,7 @@ scene.zoomIn();
scene.ZoomOUt();
```
### panTo
### panTo 地图移动到
地图平移到指定的位置
@ -303,7 +315,7 @@ scene.panTo(LngLat);
- `center` LngLat 中心位置坐标
### panBy
### panBy 地图平移
以像素为单位沿 X 方向和 Y 方向移动地图
@ -317,7 +329,7 @@ scene.panBy(x, y);
- `y` {number} 垂直方向移动像素 向下为正方向
### setPitch
### setPitch 设置地图倾角
设置地图仰俯角度
@ -325,7 +337,7 @@ scene.panBy(x, y);
scene.setPitch(pitch);
```
### setMapStatus
### setMapStatus 设置地图状态
参数 :
@ -346,7 +358,7 @@ scene.setMapStatus({ dragEnable: false });
- `pitch` {number}
### fitBounds
### fitBounds 设置地图缩放范围
地图缩放到某个范围内
@ -361,7 +373,7 @@ scene.fitBounds([
]);
```
### removeLayer
### removeLayer 移除图层
移除 layer
@ -373,7 +385,7 @@ scene.removeLayer(layer);
- `layer` {Layer}
### exportMap
### exportMap 导出地图图片
导出地图,目前仅支持导出可视化层,不支持底图导出
@ -383,7 +395,7 @@ scene.removeLayer(layer);
scene.exportMap('png');
```
### destroy
### destroy 场景销毁
scene 销毁方法,离开页面,或者不需要使用地图可以调用

View File

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

View File

@ -2,7 +2,8 @@
title: CSV
order: 3
---
`markdown:docs/common/style.md`
`markdown:docs/common/style.md`
L7 支持 CSV 以逗号分隔的 CSV 数据加载。
CSV 是文本数据结构,很难表达复杂的地理数据结构,因此 CSV 仅支持两种数据结构

View File

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

View File

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

View File

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

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

@ -0,0 +1,14 @@
### bubbleOption 气泡配置项
- enable `boolean` 是否显示气泡 `true`
- shape: AttributeType; 气泡形状支持数据映射
- size: AttributeType; 气泡大小支持数据映射
- color: AttributeType; 气泡颜色支持数据映射
- scale: { // 数字度量
field: string; 度量字段
type: ScaleTypeName; 度量字段
};
- style: {
opacity: number; 透明度
stroke: string; 填充色
strokeWidth: number; 填充宽度
};

View File

@ -0,0 +1 @@
### 事件

View File

@ -0,0 +1,12 @@
### fill 填充图样式
- color 图层填充颜色,支持常量和数据映射
常量:统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值同color方法第二个参数数组回调函数
- filter 图层过滤方法,支持常量和数据映射 同layer.filter方法
数据映射
- field 填充映射字段
- values 回调函数 `false` 返回值将会被过滤掉
- style 同 polygonLayer的style方法
- activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮

View File

@ -0,0 +1,13 @@
### labelOption 标注配置项
文本标注配置项,目前只支持常量配置,不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- spacing: `number` 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
其他包括 text [style 的配置](../layer/point_layer/text#style)

View File

@ -0,0 +1,16 @@
#### layerOption 图片配置
下钻各个层级的配置项,可以独立配置,每一层级的样式,不设置和上一层就保持一致
- joinBy: [string, string];
- label: Partial<ILabelOption>;
- bubble: Partial<IBubbleOption>;
- fill: Partial<IFillOptions>;
⛔中国地图视角设置,省界,海岸线,宽度通过以下属性
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度
- nationalWidth 国界线
- nationalStroke 国界线
- provinceStroke 省界颜色
- provinceStrokeWidth 省界宽度

View File

@ -0,0 +1,5 @@
### popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html字符串支持回调函数 (properties: any) => string;

15
docs/common/layer/base.md Normal file
View File

@ -0,0 +1,15 @@
`markdown:docs/common/style.md`
`markdown:docs/common/layer/options.md`
`markdown:docs/common/layer/layer_encode.md`
`markdown:docs/common/layer/layer_update.md`
`markdown:docs/common/layer/layer_ctr.md`
`markdown:docs/common/layer/layer_interaction.md`
`markdown:docs/common/layer/mouse_event.md`
`markdown:docs/common/layer/layer_event.md`

View File

@ -0,0 +1,68 @@
## 图层控制方法
### 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);
```

View File

@ -0,0 +1,236 @@
## 数据映射
### source 数据
数据源为 layer 设置数据 source(data,config)
- data {geojson|json|csv}
源数据
- config   可选   数据源配置项
- parser 数据解析,默认是解析层 geojson
- transforms [transformtransform ]  数据处理转换 可设置多个
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',
});
```

View File

@ -0,0 +1,33 @@
## 图层事件
### inited 图层初始化
<description> _bool_ **可选** _default:_ null</description>
参数 option
- target 当前 layer
- type 事件类型
图层初始化完成后触发
```javascript
layer.on('inited', (option) => {});
```
### add 图层被添加
图层添加到 scene
参数 option
- target 当前 layer
- type 事件类型
### remove 图层被移除
图层移除时触发
参数 option
- target 当前 layer
- type 事件类型

Some files were not shown because too many files have changed in this diff Show More