From 129de2795354451fdcfc1156984d400783bedf19 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 17 Jan 2020 11:48:31 +0800 Subject: [PATCH] improvement: add markerlayer doc and fix some meathod --- docs/api/component/markerLayer.en.md | 100 +++++++++++++++++++ docs/api/component/markerLayer.zh.md | 100 +++++++++++++++++++ docs/api/layer/point_layer/marker.en.md | 2 + docs/api/layer/point_layer/marker.zh.md | 3 + examples/point/marker/demo/clustermarker.js | 36 +++++++ examples/point/marker/demo/markerlayer.js | 58 +++++++++++ examples/point/marker/demo/meta.json | 12 +++ packages/component/src/markerlayer.ts | 54 +++++----- packages/core/src/services/log/LogService.ts | 2 +- 9 files changed, 343 insertions(+), 24 deletions(-) create mode 100644 docs/api/component/markerLayer.en.md create mode 100644 docs/api/component/markerLayer.zh.md create mode 100644 examples/point/marker/demo/clustermarker.js create mode 100644 examples/point/marker/demo/markerlayer.js diff --git a/docs/api/component/markerLayer.en.md b/docs/api/component/markerLayer.en.md new file mode 100644 index 0000000000..1e661de863 --- /dev/null +++ b/docs/api/component/markerLayer.en.md @@ -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) + + diff --git a/docs/api/component/markerLayer.zh.md b/docs/api/component/markerLayer.zh.md new file mode 100644 index 0000000000..743bf52ddb --- /dev/null +++ b/docs/api/component/markerLayer.zh.md @@ -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) + + diff --git a/docs/api/layer/point_layer/marker.en.md b/docs/api/layer/point_layer/marker.en.md index fd22bcf63f..347fc72f95 100644 --- a/docs/api/layer/point_layer/marker.en.md +++ b/docs/api/layer/point_layer/marker.en.md @@ -7,3 +7,5 @@ order: 7 ## 使用 [Marker 文档](../../component) + +[MarkerLayer 文档](../../component/markerLayer) diff --git a/docs/api/layer/point_layer/marker.zh.md b/docs/api/layer/point_layer/marker.zh.md index 59af362de6..347fc72f95 100644 --- a/docs/api/layer/point_layer/marker.zh.md +++ b/docs/api/layer/point_layer/marker.zh.md @@ -5,4 +5,7 @@ order: 7 可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。 ## 使用 + [Marker 文档](../../component) + +[MarkerLayer 文档](../../component/markerLayer) diff --git a/examples/point/marker/demo/clustermarker.js b/examples/point/marker/demo/clustermarker.js new file mode 100644 index 0000000000..02657dc6c6 --- /dev/null +++ b/examples/point/marker/demo/clustermarker.js @@ -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); + }); +} diff --git a/examples/point/marker/demo/markerlayer.js b/examples/point/marker/demo/markerlayer.js new file mode 100644 index 0000000000..b409a4788d --- /dev/null +++ b/examples/point/marker/demo/markerlayer.js @@ -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]; +} diff --git a/examples/point/marker/demo/meta.json b/examples/point/marker/demo/meta.json index ad01f9cc1b..f2840aed05 100644 --- a/examples/point/marker/demo/meta.json +++ b/examples/point/marker/demo/meta.json @@ -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": "温度", diff --git a/packages/component/src/markerlayer.ts b/packages/component/src/markerlayer.ts index 05e510744a..6fdf700af4 100644 --- a/packages/component/src/markerlayer.ts +++ b/packages/component/src/markerlayer.ts @@ -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(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; + } } diff --git a/packages/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts index e648b11c28..0b21ed323b 100644 --- a/packages/core/src/services/log/LogService.ts +++ b/packages/core/src/services/log/LogService.ts @@ -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;