mirror of https://gitee.com/antv-l7/antv-l7
improvement: add markerlayer doc and fix some meathod
This commit is contained in:
parent
ad9b5f6c87
commit
129de27953
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -7,3 +7,5 @@ order: 7
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
[Marker 文档](../../component)
|
[Marker 文档](../../component)
|
||||||
|
|
||||||
|
[MarkerLayer 文档](../../component/markerLayer)
|
||||||
|
|
|
@ -5,4 +5,7 @@ order: 7
|
||||||
可自定义点符号,通过自定义dom实现地图标注,富文本、动态点状符号都可用于地图上信息的标记。
|
可自定义点符号,通过自定义dom实现地图标注,富文本、动态点状符号都可用于地图上信息的标记。
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
[Marker 文档](../../component)
|
[Marker 文档](../../component)
|
||||||
|
|
||||||
|
[MarkerLayer 文档](../../component/markerLayer)
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
}
|
|
@ -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];
|
||||||
|
}
|
|
@ -4,6 +4,18 @@
|
||||||
"en": "Category"
|
"en": "Category"
|
||||||
},
|
},
|
||||||
"demos": [
|
"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",
|
"filename": "marker.js",
|
||||||
"title": "温度",
|
"title": "温度",
|
||||||
|
|
|
@ -7,7 +7,7 @@ import Supercluster from 'supercluster';
|
||||||
import Marker from './marker';
|
import Marker from './marker';
|
||||||
type CallBack = (...args: any[]) => any;
|
type CallBack = (...args: any[]) => any;
|
||||||
interface IMarkerStyleOption {
|
interface IMarkerStyleOption {
|
||||||
el: HTMLDivElement | string;
|
element: CallBack;
|
||||||
style: { [key: string]: any } | CallBack;
|
style: { [key: string]: any } | CallBack;
|
||||||
className: string;
|
className: string;
|
||||||
radius: number;
|
radius: number;
|
||||||
|
@ -57,7 +57,7 @@ export default class MarkerLayer extends EventEmitter {
|
||||||
zoom: -99,
|
zoom: -99,
|
||||||
style: {},
|
style: {},
|
||||||
className: '',
|
className: '',
|
||||||
el: '',
|
element: this.generateElement,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -65,10 +65,12 @@ export default class MarkerLayer extends EventEmitter {
|
||||||
// this.remove();
|
// this.remove();
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
this.mapsService = scene.get<IMapService>(TYPES.IMapService);
|
this.mapsService = scene.get<IMapService>(TYPES.IMapService);
|
||||||
this.initCluster();
|
if (this.markerLayerOption.cluster) {
|
||||||
this.update();
|
this.initCluster();
|
||||||
this.mapsService.on('zoom', this.update);
|
this.update();
|
||||||
this.mapsService.on('zoomchange', this.update);
|
this.mapsService.on('zoom', this.update);
|
||||||
|
this.mapsService.on('zoomchange', this.update);
|
||||||
|
}
|
||||||
this.addMarkers();
|
this.addMarkers();
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -102,6 +104,7 @@ export default class MarkerLayer extends EventEmitter {
|
||||||
this.markers.forEach((marker: IMarker) => {
|
this.markers.forEach((marker: IMarker) => {
|
||||||
marker.remove();
|
marker.remove();
|
||||||
});
|
});
|
||||||
|
this.mapsService.off('zoom', this.update);
|
||||||
this.mapsService.off('zoomchange', this.update);
|
this.mapsService.off('zoomchange', this.update);
|
||||||
this.markers = [];
|
this.markers = [];
|
||||||
}
|
}
|
||||||
|
@ -157,27 +160,13 @@ export default class MarkerLayer extends EventEmitter {
|
||||||
marker.addTo(this.scene);
|
marker.addTo(this.scene);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private clusterMarker(feature: any) {
|
private clusterMarker(feature: any) {
|
||||||
const clusterOption = this.markerLayerOption.clusterOption;
|
const clusterOption = this.markerLayerOption.clusterOption;
|
||||||
|
|
||||||
const { className = '', style } = clusterOption as IMarkerStyleOption;
|
const { element } = 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 marker = new Marker({
|
const marker = new Marker({
|
||||||
element: el,
|
element: element(feature),
|
||||||
}).setLnglat({
|
}).setLnglat({
|
||||||
lng: feature.geometry.coordinates[0],
|
lng: feature.geometry.coordinates[0],
|
||||||
lat: feature.geometry.coordinates[1],
|
lat: feature.geometry.coordinates[1],
|
||||||
|
@ -198,4 +187,23 @@ export default class MarkerLayer extends EventEmitter {
|
||||||
this.zoom = Math.floor(zoom);
|
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,7 +2,7 @@ import { injectable } from 'inversify';
|
||||||
import { Log } from 'probe.gl';
|
import { Log } from 'probe.gl';
|
||||||
import { ILogService } from './ILogService';
|
import { ILogService } from './ILogService';
|
||||||
|
|
||||||
const Logger = new Log({ id: 'L7' }).enable(true);
|
const Logger = new Log({ id: 'L7' }).enable(false);
|
||||||
// // 只输出 debug 级别以上的日志信息
|
// // 只输出 debug 级别以上的日志信息
|
||||||
Logger.priority = 5;
|
Logger.priority = 5;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue