mirror of https://gitee.com/antv-l7/antv-l7
122 lines
2.4 KiB
Markdown
122 lines
2.4 KiB
Markdown
---
|
||
title: Marker Layer
|
||
order: 3
|
||
---
|
||
|
||
MarkerLayer 不同于 PointLayer 图层
|
||
|
||
**技术差异**
|
||
|
||
- MarkerLayer 地图元素采用 Dom 元素绘制
|
||
- PointLayer 通过 WebGL 绘制元素。
|
||
|
||
**功能差异**
|
||
|
||
- MarkerLayer 元素的自定义性比较强，任何 HTML+ CSS 的组合都可可以绘制在地图上。
|
||
- PointLayer 自定义性比较弱，实现成本比较高，优势可以绘制大量的数据，性能比交互。
|
||
|
||
## 使用
|
||
|
||
```javascript
|
||
import { Marker, MarkerLayer } from '@antv/l7';
|
||
```
|
||
|
||
### 构造函数
|
||
|
||
```javascript
|
||
const markerLayer = new MarkerLayer(option);
|
||
|
||
// 调用 addMarker方法 将多个Marker添加到Layer
|
||
|
||
scene.addMarkerLayer(markerLayer);
|
||
```
|
||
|
||
#### option
|
||
|
||
- cluster 聚合 `boolean` 默认 `false`
|
||
|
||
- clusterOption 聚合配置
|
||
|
||
- field `string` 聚合统计字段
|
||
- method `sum| max| min| mean`
|
||
- element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
|
||
参数：feature
|
||
point_count 默认 聚合元素个数
|
||
clusterData `Array` 聚合节点的原始数据
|
||
point_sum 聚合求和 根据 field 和 method 计算
|
||
point_max 聚合最大值 根据 field 和 method 计算
|
||
point_min 聚合最小值 根据 field 和 method 计算
|
||
point_mean 聚合平均值 根据 field 和 method 计算
|
||
|
||
后续会增加更多配置项目
|
||
|
||
### 方法
|
||
|
||
#### addMarker
|
||
|
||
参数
|
||
|
||
- marker `IMarker` 需要添加的 Marker
|
||
|
||
添加 Marker
|
||
|
||
通过 Marker 对象实例化一个 Marker
|
||
|
||
```javascript
|
||
const marker = new Marker().setLnglat(); // 添加进Marker必须设置经纬度才能添加
|
||
markerLayer.addMarker(marker);
|
||
```
|
||
|
||
为 Marker 添加属性信息,
|
||
|
||
如果聚合参数设置统计配置项 `field| method`需要为 Marker 添加属性信息
|
||
|
||
通过 Marker 的 extData[配置项](./marker#option)设置 Marker 属性信息
|
||
|
||
```javascript
|
||
const marker = new Marker({
|
||
extData: nodes.features[i].properties,
|
||
}).setLnglat({
|
||
lng: coordinates[0],
|
||
lat: coordinates[1],
|
||
});
|
||
```
|
||
|
||
#### removeMarker
|
||
|
||
从 MarkerLayer 移除 Marker
|
||
|
||
#### getMarkers
|
||
|
||
获取 MarkerLayer 中的所有 Marker
|
||
|
||
#### clear
|
||
|
||
清除掉所有的 Marker
|
||
|
||
####
|
||
|
||
### Scene
|
||
|
||
#### addMarkerLayer
|
||
|
||
添加 MarkerLayer
|
||
|
||
```javascript
|
||
scene.addMarkerLayer(layer);
|
||
```
|
||
|
||
#### removeMarkerLayer
|
||
|
||
移除 MarkerLayer
|
||
|
||
```javascript
|
||
scene.removeMarkerLayer(layer);
|
||
```
|
||
|
||
### demo 地址
|
||
|
||
[markerLayer ](../../../examples/point/marker#markerlayer)
|
||
|
||
[markerLayer 聚合](../../../examples/point/marker#clustermarker)
|