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

Merge pull request #199 from antvis/markerLayer 

Marker layer
This commit is contained in:
@thinkinggis 2020-02-11 21:00:34 +08:00 committed by GitHub
parent 1adca4a5a4 36f7e765dd
commit 70d4479bb3
30 changed files with 239 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/component/markerLayer.en.md
View File

@ -1,5 +1,5 @@
---
title: Marker 图层
title: Marker Layer
order: 3
---

71
docs/api/layer/cityBuilding.en.md
View File

@ -1,4 +1,73 @@
---
title: CityBuilding
title: CityBuild
order: 6
---
## 使用
```javascript
import { CityBuildingLayer } from '@antv/l7';
```
### source
同 [PolygonLayer](./polygon_layer/extrude)
### size
同 [PolygonLayer](./polygon_layer/extrude)
### color
[PolygonLayer](./polygon_layer/extrude)
### animate
开启动画效果
```javascript
layer.animate(true);
```
### style
- baseColor 楼房颜色,
- windowColor: 窗户颜色,
- brightColor: 点亮窗户颜色
其他 style 配置项同
[layer#style](./layer#style)
## 自定义动画频率
自定义动画频率需要 关闭默认动画，通过 setLight 方法不断更新时间
```javascript
layer.animate(false);
```
### setLight(time)
参数
time : 时间 毫秒
#### 完整代码
```javascript
const pointLayer = new CityBuildingLayer();
pointLayer
.source(await response.json())
.size('floor', [0, 500])
.color('rgba(242,246,250,1.0)')
.animate({
enable: true,
})
.style({
opacity: 1.0,
baseColor: 'rgb(16,16,16)',
windowColor: 'rgb(30,60,89)',
brightColor: 'rgb(255,176,38)',
});
scene.addLayer(pointLayer);
```

13
docs/api/layer/cityBuilding.zh.md
View File

@ -39,6 +39,19 @@ layer.animate(true);
[layer#style](./layer#style)
## 自定义动画频率
自定义动画频率需要 关闭默认动画，通过 setLight 方法不断更新时间
```javascript
layer.animate(false);
```
### setLight(time)
参数
time : 时间 毫秒
#### 完整代码
```javascript

2
docs/api/scene.en.md
View File

@ -1,5 +1,5 @@
---
title: 场景 Scene
title: Scene
order: 2
---

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.0.17",
"version": "2.0.18",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

2
package.json
View File

@ -143,7 +143,7 @@
"release-cdn": "antv-bin upload -n @antv/l7",
"storybook": "start-storybook -p 6006",
"test": "cross-env BABEL_ENV=test jest",
"test-live": "cross-env BABEL_ENV=test DEBUG_MODE=1 jest --watch packages/scene/__tests__/index.spec.ts ",
"test-live": "cross-env BABEL_ENV=test DEBUG_MODE=1 jest --watch",
"coveralls": "jest --coverage && cat ./tests/coverage/lcov.info | coveralls",
"tsc": "tsc",
"watch": "yarn clean && lerna exec --parallel -- cross-env BABEL_ENV=cjs babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.0.17",
"version": "2.0.18",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,8 +24,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.17",
"@antv/l7-utils": "^2.0.17",
"@antv/l7-core": "^2.0.18",
"@antv/l7-utils": "^2.0.18",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

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

@ -1,5 +1,12 @@
import { IMapService, IMarker, TYPES } from '@antv/l7-core';
import { bindAll, DOM, Satistics } from '@antv/l7-utils';
import {
bindAll,
boundsContains,
DOM,
IBounds,
padBounds,
Satistics,
} from '@antv/l7-utils';
import { EventEmitter } from 'eventemitter3';
import { Container } from 'inversify';
import { merge } from 'lodash';
@ -39,6 +46,7 @@ export default class MarkerLayer extends EventEmitter {
private mapsService: IMapService<unknown>;
private scene: Container;
private zoom: number;
private bbox: IBounds;
constructor(option?: Partial<IMarkerLayerOption>) {
super();
@ -141,11 +149,7 @@ export default class MarkerLayer extends EventEmitter {
this.clusterIndex.load(this.points);
}
private getClusterMarker(zoom: number) {
// 之前的参数为 [-180, -85, 180, 85]，基本等于全地图的范围
// 优化后的逻辑为：
// 取当前视野范围 * 2，只渲染视野内 * 2 范围的点
const viewBounds = this.mapsService.getBounds();
private getClusterMarker(viewBounds: IBounds, zoom: number) {
const viewBBox = viewBounds[0].concat(viewBounds[1]) as GeoJSON.BBox;
const clusterPoint = this.clusterIndex.getClusters(viewBBox, zoom);
this.clusterMarkers.forEach((marker: IMarker) => {
@ -168,14 +172,10 @@ export default class MarkerLayer extends EventEmitter {
const column = Satistics.getColumn(columnData as any, field);
const stat = Satistics.getSatByColumn(method, column);
const fieldName = 'point_' + method;
feature.properties[fieldName] = stat;
feature.properties[fieldName] = stat.toFixed(2);
}
}
const marker = this.clusterMarker(feature);
// feature.properties && feature.properties.hasOwnProperty('point_count')
// ? this.clusterMarker(feature)
// : this.normalMarker(feature);
this.clusterMarkers.push(marker);
marker.addTo(this.scene);
});
@ -211,14 +211,15 @@ export default class MarkerLayer extends EventEmitter {
private update() {
const zoom = this.mapsService.getZoom();
// 在 zoom 变化的时候，通过控制触发的阈值 (0.4)，减少小层级的 zoom 变化引起的频繁重绘
if (zoom !== this.zoom && Math.abs(zoom - this.zoom) > 0.4) {
// 按照当前地图的放大层级向下取整，进行聚合点的绘制
const bbox = this.mapsService.getBounds();
if (
!this.bbox ||
Math.abs(zoom - this.zoom) >= 1 ||
!boundsContains(this.bbox, bbox)
) {
this.bbox = padBounds(bbox, 0.5);
this.zoom = Math.floor(zoom);
this.getClusterMarker(Math.floor(zoom));
} else if (zoom === this.zoom) {
// 如果 zoom 没有变化，只是平移，进行重新计算渲染加载s
this.getClusterMarker(Math.floor(zoom));
this.getClusterMarker(this.bbox, this.zoom);
}
}
@ -234,14 +235,6 @@ export default class MarkerLayer extends EventEmitter {
? feature.properties['point_' + method] || feature.properties[field]
: feature.properties.point_count;
span.textContent = text;
// 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;
}
}

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.0.17",
"version": "2.0.18",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -22,7 +22,7 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-utils": "^2.0.17",
"@antv/l7-utils": "^2.0.18",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

10
packages/core/src/services/config/__tests__/schema.spec.ts
View File

@ -23,11 +23,11 @@ describe('ConfigService', () => {
});
it("should validate scene's options according to JSON schema", () => {
const { valid, errorText } = configService.validateSceneConfig({
id: 0,
});
expect(valid).toBeFalsy();
expect(errorText).toMatch('id should be string');
// const { valid, errorText } = configService.validateSceneConfig({
// id: 0,
// });
// expect(valid).toBeFalsy();
// expect(errorText).toMatch('id should be string');
expect(
configService.validateSceneConfig({

3
packages/core/src/services/config/sceneConfigSchema.ts
View File

@ -4,8 +4,5 @@
export default {
properties: {
// 地图容器 ID
id: {
type: 'string',
},
},
};

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

@ -1,9 +1,9 @@
import { injectable } from 'inversify';
import Probe, { Log } from 'probe.gl';
import { ILogService } from './ILogService';
const Logger = new Log({ id: 'L7' }).enable(false);
const Logger = new Log({ id: 'L7' }).enable(true);
// // 只输出 debug 级别以上的日志信息
Logger.priority = 5;
Logger.priority = 2;
@injectable()
export default class LogService implements ILogService {
@ -12,7 +12,7 @@ export default class LogService implements ILogService {
}
public warn(message: string): void {
Logger.warn(message)();
Logger.info(1, message)();
}
public info(message: string): void {

12
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.0.17",
"version": "2.0.18",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,11 +24,11 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.0.17",
"@antv/l7-core": "^2.0.17",
"@antv/l7-layers": "^2.0.17",
"@antv/l7-maps": "^2.0.17",
"@antv/l7-scene": "^2.0.17",
"@antv/l7-component": "^2.0.18",
"@antv/l7-core": "^2.0.18",
"@antv/l7-layers": "^2.0.18",
"@antv/l7-maps": "^2.0.18",
"@antv/l7-scene": "^2.0.18",
"@babel/runtime": "^7.7.7"
},
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",

8
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.0.17",
"version": "2.0.18",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -22,9 +22,9 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.17",
"@antv/l7-source": "^2.0.17",
"@antv/l7-utils": "^2.0.17",
"@antv/l7-core": "^2.0.18",
"@antv/l7-source": "^2.0.18",
"@antv/l7-utils": "^2.0.18",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.1.0",
"@turf/meta": "^6.0.2",

6
packages/layers/src/citybuliding/building.ts
View File

@ -8,7 +8,11 @@ export default class CityBuildingLayer extends BaseLayer {
this.layerModel = new CityBuildModel(this);
this.models = this.layerModel.buildModels();
}
public setLight(t: number) {
this.updateLayerConfig({
time: t,
});
}
protected getConfigSchema() {
return {
properties: {

4
packages/layers/src/citybuliding/models/build.ts
View File

@ -9,6 +9,7 @@ interface ICityBuildLayerStyleOptions {
baseColor: string;
brightColor: string;
windowColor: string;
time: number;
}
export default class CityBuildModel extends BaseModel {
public getUninforms() {
@ -17,13 +18,14 @@ export default class CityBuildModel extends BaseModel {
baseColor = 'rgb(16,16,16)',
brightColor = 'rgb(255,176,38)',
windowColor = 'rgb(30,60,89)',
time = 0,
} = this.layer.getLayerConfig() as ICityBuildLayerStyleOptions;
return {
u_opacity: opacity,
u_baseColor: rgb2arr(baseColor),
u_brightColor: rgb2arr(brightColor),
u_windowColor: rgb2arr(windowColor),
u_time: this.layer.getLayerAnimateTime(),
u_time: this.layer.getLayerAnimateTime() || time,
};
}

6
packages/maps/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.0.17",
"version": "2.0.18",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,8 +23,8 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.17",
"@antv/l7-utils": "^2.0.17",
"@antv/l7-core": "^2.0.18",
"@antv/l7-utils": "^2.0.18",
"@babel/runtime": "^7.7.7",
"gl-matrix": "^3.1.0",
"inversify": "^5.0.1",

2
packages/maps/src/BaseMapWrapper.ts
View File

@ -21,7 +21,7 @@ export default class BaseMapWrapper<RawMap> implements IMapWrapper {
this.config = config;
}
public setContainer(sceneContainer: Container, id: string) {
public setContainer(sceneContainer: Container, id: string | HTMLDivElement) {
// // 首先使用全局配置服务校验地图参数
const { valid, errorText } = this.configService.validateMapConfig(
this.config,

2
packages/maps/src/mapbox/map.ts
View File

@ -233,7 +233,7 @@ export default class MapboxService
this.$mapContainer = this.creatAmapContainer(id);
// @ts-ignore
this.map = new mapboxgl.Map({
container: id,
container: this.$mapContainer,
style: this.getMapStyle(style),
attributionControl,
bearing: rotation,

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.0.17",
"version": "2.0.18",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,7 +25,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.0.17",
"@antv/l7-core": "^2.0.18",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"lodash": "^4.17.15",

12
packages/scene/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.0.17",
"version": "2.0.18",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -22,11 +22,11 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.0.17",
"@antv/l7-core": "^2.0.17",
"@antv/l7-maps": "^2.0.17",
"@antv/l7-renderer": "^2.0.17",
"@antv/l7-utils": "^2.0.17",
"@antv/l7-component": "^2.0.18",
"@antv/l7-core": "^2.0.18",
"@antv/l7-maps": "^2.0.18",
"@antv/l7-renderer": "^2.0.18",
"@antv/l7-utils": "^2.0.18",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

1
packages/scene/src/index.ts
View File

@ -58,7 +58,6 @@ class Scene
public constructor(config: ISceneConfig) {
const { id, map, logoPosition, logoVisible } = config;
// 创建场景容器
const sceneContainer = createSceneContainer();
this.container = sceneContainer;

6
packages/source/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.0.17",
"version": "2.0.18",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,8 +24,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.17",
"@antv/l7-utils": "^2.0.17",
"@antv/l7-core": "^2.0.18",
"@antv/l7-utils": "^2.0.18",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

43
packages/utils/__tests__/geo.spec.ts
View File

@ -1,8 +1,39 @@
import { aProjectFlat, lngLatToMeters, project } from '../src/geo';
describe('aProjectFlat', () => {
it('aProjectFlat', () => {
// console.log(aProjectFlat([112, 32]));
// console.log(lngLatToMeters([112, 32]));
// console.log(project([112, 32]));
import {
aProjectFlat,
boundsContains,
IBounds,
lngLatToMeters,
padBounds,
project,
} from '../src/geo';
describe('geo', () => {
it('padBounds', () => {
const bounds: IBounds = [
[112, 30],
[116, 34],
];
const bounds2 = padBounds(bounds, 0.5);
expect(bounds2).toEqual([
[110, 28],
[118, 36],
]);
});
it('boundContain', () => {
const bounds: IBounds = [
[112, 30],
[116, 34],
];
const b2: IBounds = [
[113, 30],
[115, 33],
];
const b3: IBounds = [
[110, 30],
[115, 33],
];
expect(boundsContains(bounds, b2)).toEqual(true);
expect(boundsContains(bounds, b3)).toEqual(false);
});
});

2
packages/utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.0.17",
"version": "2.0.18",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

32
packages/utils/src/geo.ts
View File

@ -7,6 +7,15 @@ import {
Units,
} from '@turf/helpers';
export type IBounds = [[number, number], [number, number]];
export interface ILngLat {
lng: number;
lat: number;
}
export interface IPoint {
x: number;
y: number;
}
const originShift = (2 * Math.PI * 6378137) / 2.0;
export type Point = number[];
/**
@ -207,3 +216,26 @@ export function project(lnglat: [number, number]) {
return [x, y];
}
export function padBounds(b: IBounds, bufferRatio: number): IBounds {
const heightBuffer = Math.abs(b[1][1] - b[0][1]) * bufferRatio;
const widthBuffer = Math.abs(b[1][0] - b[0][0]) * bufferRatio;
return [
[b[0][0] - widthBuffer, b[0][1] - heightBuffer],
[b[1][0] + widthBuffer, b[1][1] + heightBuffer],
];
}
/**
* b1 包含 b2 返回 true 否则false
* @param b1 bounds1
* @param b2 bounds2
*/
export function boundsContains(b1: IBounds, b2: IBounds): boolean {
return (
b1[0][0] <= b2[0][0] &&
b1[0][1] <= b2[0][1] &&
b1[1][0] >= b2[1][0] &&
b1[1][1] >= b2[1][1]
);
}

2
stories/Components/components/clusterMarker.tsx
View File

@ -41,7 +41,7 @@ export default class ClusterMarkerLayer extends React.Component {
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new GaodeMap({
style: 'dark',
center: [110.19382669582967, 30.258134],
pitch: 0,

2
stories/Layers/components/AnimatePoint.tsx
View File

@ -13,7 +13,7 @@ export default class AnimatePoint extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
id: document.getElementById('map') as HTMLDivElement,
map: new GaodeMap({
pitch: 0,
style: 'dark',

2
stories/Layers/components/Point.tsx
View File

@ -18,7 +18,7 @@ export default class Point3D extends React.Component {
const pointsData = await response.json();
const scene = new Scene({
id: 'map',
id: document.getElementById('map') as HTMLDivElement,
map: new Mapbox({
center: [120.19382669582967, 30.258134],
pitch: 0,

16
stories/Layers/components/citybuilding.tsx
View File

@ -1,7 +1,7 @@
import { CityBuildingLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import * as dat from 'dat.gui';
import * as React from 'react';
export default class CityBuildingLayerDemo extends React.Component {
// @ts-ignore
private scene: Scene;
@ -31,7 +31,7 @@ export default class CityBuildingLayerDemo extends React.Component {
.size('floor', [0, 500])
.color('rgba(242,246,250,1.0)')
.animate({
enable: true,
enable: false,
})
.style({
opacity: 1.0,
@ -40,8 +40,18 @@ export default class CityBuildingLayerDemo extends React.Component {
brightColor: 'rgb(255,176,38)',
});
scene.addLayer(pointLayer);
scene.render();
this.scene = scene;
const gui = new dat.GUI();
const styleOptions = {
time: 1,
};
const pointFolder = gui.addFolder('动画控制');
pointFolder.add(styleOptions, 'time', 0, 4000, 1).onChange((t: number) => {
pointLayer.setLight(t);
scene.render();
});
}
public render() {
return (