mirror of https://gitee.com/antv-l7/antv-l7
docs: 文档升级
This commit is contained in:
parent
58d46be212
commit
df31e18479
|
@ -2,7 +2,7 @@
|
|||
title: ChangeLog
|
||||
order: 10
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## 2020.03.12 2.1 正式版
|
||||
|
||||
###✨ Features
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
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 标注
|
||||
|
||||
|
|
|
@ -3,6 +3,8 @@ 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`
|
||||
|
||||
## 五种地图类型
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@ title: 标准地图
|
|||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## 五种地图类型
|
||||
|
||||
- WorldLayer 世界地图
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 钻取地图
|
||||
order: 2
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
钻取是改变展现数据维度的层次,变换分析的粒度。它包括向上钻取(drillup)和向下钻取(drilldown)。
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 钻取地图
|
||||
order: 2
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
钻取是改变展现数据维度的层次,变换分析的粒度。它包括向上钻取(drillup)和向下钻取(drilldown)。
|
||||
|
||||
|
|
|
@ -3,6 +3,8 @@ title: 快速开始
|
|||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地图行政区划组件,支持世界地图,中国地图省市县三级,支持中国地图省市县上钻下取。
|
||||
|
||||
## 使用
|
||||
|
|
|
@ -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,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 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础,将抽象复杂的空间数据转化成 2D、3D 符号,通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
|
|
@ -4,7 +4,7 @@ order: 0
|
|||
redirect_from:
|
||||
- /zh/docs/api
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
# L7 地理空间数据可视分析引擎
|
||||
|
||||
✨ 2020.01.06 2.0 版本正式发布
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -147,3 +147,4 @@ const layer = new HeatmapLayer({})
|
|||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -145,3 +145,5 @@ const layer = new HeatmapLayer({})
|
|||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -129,3 +129,4 @@ const layer = new HeatmapLayer({
|
|||
coverage: 0.8,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -129,3 +129,4 @@ const layer = new HeatmapLayer({
|
|||
coverage: 0.8,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -65,3 +65,4 @@ heatmapLayer({
|
|||
},
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -63,3 +63,4 @@ heatmapLayer()
|
|||
},
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: ImageLayer
|
||||
order: 5
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
|
|
|
@ -3,6 +3,8 @@ title: 图片图层
|
|||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
将图片添加到地图上,需要指定图片的经纬度范围
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: Base Layer
|
||||
order: 0
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -81,3 +81,4 @@ const layer = new LineLayer({})
|
|||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -85,3 +85,4 @@ const layer = new LineLayer({})
|
|||
### demo 示例
|
||||
|
||||
[弧线 demo](../../../../examples/gallery/basic#arcCircle)
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -68,3 +68,4 @@ order: 2
|
|||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1, 2]); // 宽度为1,高度2
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -80,3 +80,4 @@ layer.style({
|
|||
dashArray: [5, 5],
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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`
|
||||
|
||||
|
|
|
@ -69,3 +69,4 @@ const pointLayer = new PointLayer({})
|
|||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -90,3 +90,5 @@ const pointLayer = new PointLayer({})
|
|||
PointLayer 的聚合图采用 WebGL 绘制,不支持自定义具体聚合样式,如果有自定义的需求可以使用 MarkerLayer 的聚合功能,你可以通过 Dom 完全自定义样式。
|
||||
|
||||
[MarkerLayer 聚合](../../component/markerLayer)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -57,3 +57,4 @@ const column = new PointLayer({})
|
|||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -57,3 +57,4 @@ const column = new PointLayer({})
|
|||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -45,3 +45,5 @@ scene.addLayer(pointLayer);
|
|||
## 相关 demo
|
||||
|
||||
[城市亮度图](../../../../examples/point/dot)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -45,3 +45,5 @@ scene.addLayer(pointLayer);
|
|||
## 相关 demo
|
||||
|
||||
[城市亮度图](../../../../examples/point/dot)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -84,3 +84,4 @@ const layer = new PointLayer({
|
|||
.shape('local')
|
||||
.color('#0D408C');
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -84,3 +84,4 @@ const layer = new PointLayer({
|
|||
.shape('local')
|
||||
.color('#0D408C');
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -42,3 +42,4 @@ const scatter = new PointLayer()
|
|||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -42,3 +42,4 @@ const scatter = new PointLayer()
|
|||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -42,4 +42,4 @@ const scatter = new PointLayer()
|
|||
});
|
||||
```
|
||||
|
||||
## 相关 demo
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -42,4 +42,4 @@ const scatter = new PointLayer()
|
|||
});
|
||||
```
|
||||
|
||||
## 相关 demo
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -43,3 +43,5 @@ layer.shape('name', 'text');
|
|||
## 相关 demo
|
||||
|
||||
[文本标注](../../../../examples/point/text)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -33,10 +33,4 @@ layer.size('floor', (floor) => {
|
|||
});
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
同 [layer#color](../layer/#color)
|
||||
|
||||
### style
|
||||
|
||||
同 [layer#style](../layer/#style)
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -3,6 +3,8 @@ title: Raster
|
|||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
|
||||
|
||||
L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: 栅格图层
|
||||
order: 5
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
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,7 @@
|
|||
title: Layer 组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## Layer 类型
|
||||
|
||||
React 各个组件名称和 L7 名称保持一致
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Marker
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## Marker Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Marker 组件
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## Marker Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Popup Component
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## Popup Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -3,6 +3,7 @@ title: Popup 组件
|
|||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## Popup Props
|
||||
|
||||
| prop name | Type | Default | Description |
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Scene
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## 使用
|
||||
|
||||
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Scene 组件
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## 使用
|
||||
|
||||
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Get Started
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: 快速开始
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Scene
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
# 简介
|
||||
|
||||
## Scene
|
||||
|
|
|
@ -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 Mapbox(0-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 销毁方法,离开页面,或者不需要使用地图可以调用
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
title: CSV
|
||||
order: 3
|
||||
---
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
||||
|
||||
|
|
|
@ -2,7 +2,8 @@
|
|||
title: CSV
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
`markdown:docs/common/style.md`
|
||||
L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
||||
|
||||
CSV 是文本数据结构,很难表达复杂的地理数据结构,因此 CSV 仅支持两种数据结构
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: GeoJSON
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## 简介
|
||||
|
||||
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: GeoJSON
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
## 简介
|
||||
|
||||
GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Image
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
Image 数据主要用于在地图根据经纬度范围添加图图片,不如一幅纸制地图扫描版你要放在地图显示。
|
||||
|
||||
## parser
|
||||
|
|
|
@ -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`
|
||||
|
||||
## 概述
|
||||
|
||||
|
|
|
@ -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; 填充宽度
|
||||
};
|
|
@ -0,0 +1 @@
|
|||
### 事件
|
|
@ -0,0 +1,12 @@
|
|||
### fill 填充图样式
|
||||
- color 图层填充颜色,支持常量和数据映射
|
||||
常量:统一设置成一样的颜色
|
||||
数据映射
|
||||
- field 填充映射字段
|
||||
- values 映射值,同color方法第二个参数数组,回调函数
|
||||
- filter 图层过滤方法,支持常量和数据映射 同layer.filter方法
|
||||
数据映射
|
||||
- field 填充映射字段
|
||||
- values 回调函数 `false` 返回值将会被过滤掉
|
||||
- style 同 polygonLayer的style方法
|
||||
- activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮
|
|
@ -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)
|
|
@ -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 省界宽度
|
|
@ -0,0 +1,5 @@
|
|||
### popup 信息窗口
|
||||
|
||||
- enable 是否开启 `boolean`
|
||||
- triggerEvent 触发事件 例如 'mousemove' | 'click';
|
||||
- Html popup html字符串,支持回调函数 (properties: any) => string;
|
|
@ -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`
|
|
@ -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);
|
||||
```
|
|
@ -0,0 +1,236 @@
|
|||
## 数据映射
|
||||
|
||||
### 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',
|
||||
});
|
||||
```
|
|
@ -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
Loading…
Reference in New Issue