p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

improvement: add markerlayer doc and fix some meathod

This commit is contained in:
thinkinggis 2020-01-17 11:48:31 +08:00
parent 41624f12fe
commit aed5911d4c
9 changed files with 343 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
docs/api/component/markerLayer.en.md Normal file
View File

@ -0,0 +1,100 @@
---
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 聚合配置
- cluster 是部分聚合
- element ```function```
后续会增加更多配置项目
### 方法
#### addMarker
参数
- marker ```Marker``` 需要添加的Marker
添加Marker
通过Marker对象实例化一个Marker
```javascript
const marker = new Marker().setLnglat(); // 添加进Marker必须设置经纬度才能添加
markerLayer.addMarker(marker);
```
#### 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)

100
docs/api/component/markerLayer.zh.md Normal file
View File

@ -0,0 +1,100 @@
---
title: Marker 图层
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 聚合配置
- cluster 是部分聚合
- element ```function```
后续会增加更多配置项目
### 方法
#### addMarker
参数
- marker ```Marker``` 需要添加的Marker
添加Marker
通过Marker对象实例化一个Marker
```javascript
const marker = new Marker().setLnglat(); // 添加进Marker必须设置经纬度才能添加
markerLayer.addMarker(marker);
```
#### 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)

2
docs/api/layer/point_layer/marker.en.md
View File

@ -7,3 +7,5 @@ order: 7
## 使用
[Marker 文档](../../component)
[MarkerLayer 文档](../../component/markerLayer)

3
docs/api/layer/point_layer/marker.zh.md
View File

@ -5,4 +5,7 @@ order: 7
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
## 使用
[Marker 文档](../../component)
[MarkerLayer 文档](../../component/markerLayer)

36
examples/point/marker/demo/clustermarker.js Normal file
View File

@ -0,0 +1,36 @@
import { Scene, Marker, MarkerLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
center: [ 105.790327, 36.495636 ],
pitch: 0,
zoom: 4
})
});
addMarkers();
scene.render();
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
)
.then(res => res.json())
.then(nodes => {
const markerLayer = new MarkerLayer({
cluster: true
});
for (let i = 0; i < nodes.features.length; i++) {
const { coordinates } = nodes.features[i].geometry;
const marker = new Marker().setLnglat({
lng: coordinates[0],
lat: coordinates[1]
});
markerLayer.addMarker(marker);
}
scene.addMarkerLayer(markerLayer);
scene.addMarkerLayer(markerLayer);
});
}

58
examples/point/marker/demo/markerlayer.js Normal file
View File

@ -0,0 +1,58 @@
import { Scene, Marker, MarkerLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
center: [ 105.790327, 36.495636 ],
pitch: 0,
zoom: 4
})
});
addMarkers();
scene.render();
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
)
.then(res => res.json())
.then(nodes => {
const markerLayer = new MarkerLayer();
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].g !== '1' || nodes[i].v === '') {
continue;
}
const el = document.createElement('label');
el.className = 'labelclass';
el.textContent = nodes[i].v + '℃';
el.style.background = getColor(nodes[i].v);
el.style.borderColor = getColor(nodes[i].v);
const marker = new Marker({
element: el
}).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
markerLayer.addMarker(marker);
}
scene.addMarkerLayer(markerLayer);
});
}
function getColor(v) {
const colors = [ '#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#005a32' ];
return v > 50
? colors[7]
: v > 40
? colors[6]
: v > 30
? colors[5]
: v > 20
? colors[4]
: v > 10
? colors[3]
: v > 5
? colors[2]
: v > 0
? colors[1]
: colors[0];
}

12
examples/point/marker/demo/meta.json
View File

@ -4,6 +4,18 @@
"en": "Category"
},
"demos": [
{
"filename": "markerlayer.js",
"title": "MarkerLayer 统一管理Marker",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*ng-FSqu67kYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "clustermarker.js",
"title": "MarkerLayer 聚合Marker",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*2vBbRYT2bgIAAAAAAAAAAABkARQnAQ"
},
{
"filename": "marker.js",
"title": "温度",

54
packages/component/src/markerlayer.ts
View File

@ -7,7 +7,7 @@ import Supercluster from 'supercluster';
import Marker from './marker';
type CallBack = (...args: any[]) => any;
interface IMarkerStyleOption {
el: HTMLDivElement | string;
element: CallBack;
style: { [key: string]: any } | CallBack;
className: string;
radius: number;
@ -57,7 +57,7 @@ export default class MarkerLayer extends EventEmitter {
zoom: -99,
style: {},
className: '',
el: '',
element: this.generateElement,
},
};
}
@ -65,10 +65,12 @@ export default class MarkerLayer extends EventEmitter {
// this.remove();
this.scene = scene;
this.mapsService = scene.get<IMapService>(TYPES.IMapService);
this.initCluster();
this.update();
this.mapsService.on('zoom', this.update);
this.mapsService.on('zoomchange', this.update);
if (this.markerLayerOption.cluster) {
this.initCluster();
this.update();
this.mapsService.on('zoom', this.update);
this.mapsService.on('zoomchange', this.update);
}
this.addMarkers();
return this;
}
@ -102,6 +104,7 @@ export default class MarkerLayer extends EventEmitter {
this.markers.forEach((marker: IMarker) => {
marker.remove();
});
this.mapsService.off('zoom', this.update);
this.mapsService.off('zoomchange', this.update);
this.markers = [];
}
@ -157,27 +160,13 @@ export default class MarkerLayer extends EventEmitter {
marker.addTo(this.scene);
});
}
private clusterMarker(feature: any) {
const clusterOption = this.markerLayerOption.clusterOption;
const { className = '', style } = clusterOption as IMarkerStyleOption;
const el = DOM.create('div', 'l7-marker-cluster');
const label = DOM.create('div', '', el);
const span = DOM.create('span', '', label);
if (className !== '') {
DOM.addClass(el, className);
}
span.textContent = feature.properties.point_count;
const elStyle = isFunction(style)
? style(feature.properties.point_count)
: style;
Object.keys(elStyle).forEach((key: string) => {
// @ts-ignore
el.style[key] = elStyle[key];
});
const { element } = clusterOption as IMarkerStyleOption;
const marker = new Marker({
element: el,
element: element(feature),
}).setLnglat({
lng: feature.geometry.coordinates[0],
lat: feature.geometry.coordinates[1],
@ -198,4 +187,23 @@ export default class MarkerLayer extends EventEmitter {
this.zoom = Math.floor(zoom);
}
}
private generateElement(feature: any) {
const el = DOM.create('div', 'l7-marker-cluster');
const label = DOM.create('div', '', el);
const span = DOM.create('span', '', label);
span.textContent = feature.properties.point_count;
// if (className !== '') {
// DOM.addClass(el, className);
// }
// span.textContent = feature.properties.point_count;
// const elStyle = isFunction(style)
// ? style(feature.properties.point_count)
// : style;
// Object.keys(elStyle).forEach((key: string) => {
// // @ts-ignore
// el.style[key] = elStyle[key];
// });
return el;
}
}

2
packages/core/src/services/log/LogService.ts
View File

@ -2,7 +2,7 @@ import { injectable } from 'inversify';
import { Log } from 'probe.gl';
import { ILogService } from './ILogService';
const Logger = new Log({ id: 'L7' }).enable(true);
const Logger = new Log({ id: 'L7' }).enable(false);
// // 只输出 debug 级别以上的日志信息
Logger.priority = 5;