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

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
shihui 2022-01-18 16:13:05 +08:00
parent 459e181ce6 2bafd85df9
commit 985caab0d4
9 changed files with 249 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
examples/point/cluster/demo/cluster2.js Normal file
View File

@ -0,0 +1,62 @@
import { Scene, PointLayer, Source } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
style: 'dark',
zoom: 3
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/87e40417-a5da-4fdb-8313-c796ea15f982.csv')
.then(res => res.text())
.then(data => {
const dataSource = new Source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
cluster: true
});
const pointLayer = new PointLayer({
autoFit: true
})
.source(dataSource)
.shape('circle')
.scale('point_count', {
type: 'quantile'
})
.size('point_count', [ 5, 10, 15, 20, 25 ])
.active(true)
.color('rgb(73,167,86)')
.style({
opacity: 1,
strokeWidth: 1,
stroke: '#fff'
});
// 聚合图标注
const pointLayerText = new PointLayer({
autoFit: false
})
.source(dataSource)
.shape('point_count', 'text')
.size(15)
.active(true)
.color('#fff')
.style({
opacity: 1,
strokeWidth: 0,
stroke: '#fff'
});
scene.addLayer(pointLayer);
scene.addLayer(pointLayerText);
});
});

7
examples/point/cluster/demo/meta.json
View File

@ -7,7 +7,12 @@
{
"filename": "cluster.js",
"title": "聚合图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MowATbzWK_QAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "cluster2.js",
"title": "充电桩分布聚合图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*dy0NSJHoRSYAAAAAAAAAAAAAARQnAQ"
}
]

1
packages/core/src/services/layer/ILayerService.ts
View File

@ -98,6 +98,7 @@ export interface ILayer {
name: string; //
inited: boolean; // 是否初始化完成
zIndex: number;
clusterZoom: number;
plugins: ILayerPlugin[];
layerModelNeedUpdate: boolean;
styleNeedUpdate: boolean;

5
packages/layers/src/core/BaseLayer.ts
View File

@ -73,6 +73,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public selectedFeatureID: number | null = null;
public styleNeedUpdate: boolean = false;
public rendering: boolean;
public clusterZoom: number = 0; // 聚合等级标记
public dataState: IDataState = {
dataSourceNeedUpdate: false,
@ -491,6 +492,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
data,
options,
};
this.clusterZoom = 0;
return this;
}
public setData(data: any, options?: ISourceCFG) {
@ -862,6 +864,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
this.layerSource = source;
this.clusterZoom = 0;
// 已 inited 且启用聚合进行更新聚合数据
if (this.inited && this.layerSource.cluster) {
@ -1093,7 +1096,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
if (autoFit) {
this.fitBounds(fitBoundsOptions);
}
// 对外暴露事件
this.emit('dataUpdate');
this.reRender();
};

10
packages/layers/src/plugins/DataSourcePlugin.ts
View File

@ -46,10 +46,14 @@ export default class DataSourcePlugin implements ILayerPlugin {
// 如果 dataSource 有更新，跳过 zoom 的判断，直接更新一次
if (
cluster &&
(dataSourceNeedUpdate || Math.abs(zoom - newZoom) > 1) &&
maxZoom > zoom
(dataSourceNeedUpdate || Math.abs(layer.clusterZoom - newZoom) >= 1) &&
maxZoom > layer.clusterZoom
) {
source.updateClusterData(Math.floor(newZoom));
// TODO 判断数据是否更新
if (zoom !== Math.floor(newZoom)) {
source.updateClusterData(Math.round(newZoom));
}
layer.clusterZoom = newZoom;
return true;
}
return false;

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

@ -5,6 +5,7 @@ import Arc2DLineDemo from './components/Arc2DLine';
import ArcLineDemo from './components/Arcline';
import CityBuildingLayerDemo from './components/citybuilding';
import ClusterDemo from './components/cluster';
import ClusterDemo2 from './components/cluster2';
import Column from './components/column';
import DashLineDemo from './components/dash';
import DataUpdate from './components/data_update';
@ -31,6 +32,7 @@ import TextLayerDemo from './components/Text';
storiesOf('图层', module)
.add('点图层', () => <PointDemo />)
.add('聚合图', () => <ClusterDemo />)
.add('聚合图标注', () => <ClusterDemo2 />)
.add('数据更新', () => <DataUpdate />)
.add('点动画', () => <AnimatePoint />)
.add('3D点', () => <Point3D />)

95
stories/Layers/components/cluster2.tsx Normal file
View File

@ -0,0 +1,95 @@
import { PointLayer, Scene, Source } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
// @ts-ignore
import data from '../data/data.json';
export default class Point3D extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
pickBufferScale: 3.0,
map: new GaodeMap({
style: 'light',
center: [-121.24357, 37.58264],
pitch: 0,
zoom: 10.45,
}),
});
scene.on('loaded', () => {
const fontFamily = 'iconfont';
const fontPath =
'//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
scene.addFontFace(fontFamily, fontPath);
scene.addIconFont('icon1', '&#xe6d4;');
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/87e40417-a5da-4fdb-8313-c796ea15f982.csv',
)
.then((res) => res.text())
.then((data) => {
const dataSource = new Source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat',
},
cluster: true,
});
const pointLayer = new PointLayer({
autoFit: true,
})
.source(dataSource)
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.size('point_count', [5, 10, 15, 20, 25])
.active(true)
.color('rgb(73,167,86)')
.style({
opacity: 1,
strokeWidth: 1,
stroke: '#333',
});
const pointLayerText = new PointLayer({
autoFit: true,
})
.source(dataSource)
.shape('point_count', 'text')
.size(15)
.active(true)
.color('#fff')
.style({
opacity: 1,
strokeWidth: 0,
stroke: '#fff',
});
scene.addLayer(pointLayer);
scene.addLayer(pointLayerText);
});
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

70
stories/Map/components/cluster.tsx Normal file
View File

@ -0,0 +1,70 @@
import { PointLayer, Marker, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Cluster extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
// this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [110.19382669582967, 30.258134],
pitch: 0,
zoom: 3,
}),
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
)
.then((res) => res.json())
.then((data) => {
const pointLayer = new PointLayer({})
.source(data, {
cluster: true,
})
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.size('point_count', [5, 10, 15, 20, 25])
.active(true)
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1,
});
scene.addLayer(pointLayer);
scene.on('zoomchange', () => {
const d = pointLayer.getSource();
// console.log('ddd', d.data.dataArray)
});
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

2
stories/Map/map.stories.tsx
View File

@ -74,6 +74,7 @@ import SimplePoint from './components/simplePoint';
import LineWall from './components/linewall'
import GridTile from './components/gridTile'
import GridTile2 from './components/gridTile2'
import Cluster from './components/cluster'
// @ts-ignore
storiesOf('地图方法', module)
@ -152,3 +153,4 @@ storiesOf('地图方法', module)
.add('BusLine', () => <BusLine/>)
.add('GridTile', () => <GridTile/>)
.add('GridTile2', () => <GridTile2/>)
.add('Cluster', () => <Cluster/>)