mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of https://github.com/antvis/L7
This commit is contained in:
lzxue
commit
bb60978161
|
|
@ -83,21 +83,62 @@ layer.on('click', (e) => {
|
|||
});
|
||||
```
|
||||
|
||||
### 方法
|
||||
#### setData
|
||||
|
||||
#### getClustersLeaves(cluster_id)
|
||||
更新 source 数据
|
||||
|
||||
聚合图使用，获取聚合节点的原始数据
|
||||
##### 参数
|
||||
|
||||
参数：
|
||||
id 聚合节点的 cluster_id
|
||||
- data 数据同 source 初始化参数
|
||||
- option 配置项同 source 初始化参数
|
||||
|
||||
```javascript
|
||||
#### getFeatureById
|
||||
|
||||
根据 featurID 获取 feature 要素
|
||||
|
||||
##### 参数
|
||||
|
||||
- id featureId，L7 内部编码的唯一要素 ID
|
||||
|
||||
```tsx
|
||||
const source = layer.getSource();
|
||||
source.getFeatureById(1);
|
||||
```
|
||||
|
||||
#### updateFeaturePropertiesById
|
||||
|
||||
根据 ID 更新 source 的属性数据，会触发从新渲染
|
||||
|
||||
##### 参数
|
||||
|
||||
- id featureId，L7 内部编码的唯一要素 ID
|
||||
- Properties 需要更新属性数据，merge 操作
|
||||
|
||||
```tsx
|
||||
const source = layer.getSource();
|
||||
layer.on('click', (e) => {
|
||||
console.log(source.getClustersLeaves(e.feature.cluster_id));
|
||||
source.updateFeaturePropertiesById(e.featureId, {
|
||||
name: Math.random() * 10,
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
#### getFeatureId
|
||||
|
||||
根据属性的 key、value 获取要素 L7 编码 featureId，确保该属性的 value 是唯一值，如存在多个返回第一个。
|
||||
|
||||
##### 参数
|
||||
|
||||
- key: 属性字段
|
||||
- value: 对应的值
|
||||
|
||||
```tsx
|
||||
const source = layer.getSource();
|
||||
source.getFeatureId('name', '张三');
|
||||
```
|
||||
|
||||
### 数据类型
|
||||
|
||||
#### JSON
|
||||
|
||||
[JSON 数据格式解析](./json)
|
||||
|
|
|
|||
|
|
@ -133,6 +133,14 @@ module.exports = {
|
|||
},
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
slug: 'api/source',
|
||||
title: {
|
||||
zh: '数据 Source',
|
||||
en: 'Source',
|
||||
},
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
slug: 'api/point_layer',
|
||||
title: {
|
||||
|
|
@ -221,14 +229,6 @@ module.exports = {
|
|||
},
|
||||
order: 9,
|
||||
},
|
||||
{
|
||||
slug: 'api/source',
|
||||
title: {
|
||||
zh: '数据 Source',
|
||||
en: 'Source',
|
||||
},
|
||||
order: 10,
|
||||
},
|
||||
{
|
||||
slug: 'api/district',
|
||||
title: {
|
||||
|
|
|
|||
|
|
@ -366,7 +366,7 @@
|
|||
|
||||
.l7-control-container .l7-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(59, 58, 58, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.l7-control-attribution,
|
||||
|
|
|
|||
|
|
@ -67,6 +67,10 @@ export interface ISource {
|
|||
getFeatureId(field: string, value: any): number | undefined;
|
||||
getClusters(zoom: number): any;
|
||||
getClustersLeaves(id: number): any;
|
||||
updateFeaturePropertiesById(
|
||||
id: number,
|
||||
properties: Record<string, any>,
|
||||
): void;
|
||||
}
|
||||
export interface IRasterCfg {
|
||||
extent: [number, number, number, number];
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ export default class Source extends EventEmitter implements ISource {
|
|||
// 是否有效范围
|
||||
private invalidExtent: boolean = false;
|
||||
|
||||
private dataArrayChanged: boolean = false;
|
||||
|
||||
// 原始数据
|
||||
private originData: any;
|
||||
private rawData: any;
|
||||
|
|
@ -86,8 +88,8 @@ export default class Source extends EventEmitter implements ISource {
|
|||
}
|
||||
|
||||
public setData(data: any, options?: ISourceCFG) {
|
||||
this.rawData = data;
|
||||
this.originData = data;
|
||||
this.dataArrayChanged = false;
|
||||
this.initCfg(options);
|
||||
this.init();
|
||||
this.emit('update');
|
||||
|
|
@ -145,7 +147,9 @@ export default class Source extends EventEmitter implements ISource {
|
|||
? this.originData.features[id]
|
||||
: 'null';
|
||||
const newFeature = cloneDeep(feature);
|
||||
if (this.transforms.length !== 0) {
|
||||
|
||||
if (this.transforms.length !== 0 || this.dataArrayChanged) {
|
||||
// 如果数据进行了transforms 属性会发生改变 或者数据dataArray发生更新
|
||||
const item = this.data.dataArray.find((dataItem: IParseDataItem) => {
|
||||
return dataItem._id === id;
|
||||
});
|
||||
|
|
@ -157,9 +161,28 @@ export default class Source extends EventEmitter implements ISource {
|
|||
}
|
||||
}
|
||||
|
||||
public updateFeaturePropertiesById(
|
||||
id: number,
|
||||
properties: Record<string, any>,
|
||||
) {
|
||||
this.data.dataArray = this.data.dataArray.map(
|
||||
(dataItem: IParseDataItem) => {
|
||||
if (dataItem._id === id) {
|
||||
return {
|
||||
...dataItem,
|
||||
...properties,
|
||||
};
|
||||
}
|
||||
return dataItem;
|
||||
},
|
||||
);
|
||||
this.dataArrayChanged = true;
|
||||
this.emit('update');
|
||||
}
|
||||
|
||||
public getFeatureId(field: string, value: any): number | undefined {
|
||||
const feature = this.data.dataArray.find((dataItem: IParseDataItem) => {
|
||||
return dataItem[field] === name;
|
||||
return dataItem[field] === value;
|
||||
});
|
||||
return feature?._id;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import MultiLine from './components/multiLine';
|
|||
import MultiPolygon from './components/multiPolygon';
|
||||
import UpdatePolygon from './components/ReuseSource';
|
||||
import ReuseSource from './components/ReuseSource';
|
||||
import UpdateProperty from './components/updateproperty'
|
||||
// @ts-ignore
|
||||
import notes from './Map.md';
|
||||
// @ts-ignore
|
||||
|
|
@ -14,5 +15,6 @@ storiesOf('数据', module)
|
|||
.add('updatePolygon', () => <UpdatePolygon />, {})
|
||||
.add('MultiLine', () => <MultiLine />, {})
|
||||
.add('HolePolygon', () => <HolePolygon />, {})
|
||||
.add('更新属性', () => <UpdateProperty />, {})
|
||||
.add('折线', () => <Line />, {})
|
||||
.add('复用 Source', () => <ReuseSource />, {});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
import { PointLayer, PolygonLayer, Scene, Source } from '@antv/l7';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
function convertRGB2Hex(rgb: number[]) {
|
||||
return (
|
||||
'#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
|
||||
);
|
||||
}
|
||||
|
||||
export default class MultiPolygon extends React.Component {
|
||||
private gui: dat.GUI;
|
||||
private $stats: Node;
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [-44.40673828125, -18.375379094031825],
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: { name: 'test1' },
|
||||
geometry: {
|
||||
type: 'MultiPolygon',
|
||||
coordinates: [
|
||||
[
|
||||
[
|
||||
[110.5224609375, 32.731840896865684],
|
||||
[113.0712890625, 32.731840896865684],
|
||||
[113.0712890625, 34.56085936708384],
|
||||
[110.5224609375, 34.56085936708384],
|
||||
[110.5224609375, 32.731840896865684],
|
||||
],
|
||||
[
|
||||
[111.26953125, 33.52307880890422],
|
||||
[111.26953125, 34.03445260967645],
|
||||
[112.03857421875, 34.03445260967645],
|
||||
[112.03857421875, 33.52307880890422],
|
||||
[111.26953125, 33.52307880890422],
|
||||
],
|
||||
],
|
||||
[
|
||||
[
|
||||
[115.04882812499999, 34.379712580462204],
|
||||
[114.9609375, 33.46810795527896],
|
||||
[115.8837890625, 33.50475906922609],
|
||||
[115.86181640625001, 34.379712580462204],
|
||||
[115.04882812499999, 34.379712580462204],
|
||||
],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: { name: 'test2' },
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
[113.8623046875, 30.031055426540206],
|
||||
[116.3232421875, 30.031055426540206],
|
||||
[116.3232421875, 31.090574094954192],
|
||||
[113.8623046875, 31.090574094954192],
|
||||
[113.8623046875, 30.031055426540206],
|
||||
],
|
||||
[
|
||||
[117.26806640625, 32.13840869677249],
|
||||
[118.36669921875, 32.13840869677249],
|
||||
[118.36669921875, 32.47269502206151],
|
||||
[117.26806640625, 32.47269502206151],
|
||||
[117.26806640625, 32.13840869677249],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// console.log(data.features[5]);
|
||||
// data.features = data.features.slice(6);
|
||||
const source = new Source(data);
|
||||
const layer = new PolygonLayer({
|
||||
autoFit: true,
|
||||
})
|
||||
.source(source)
|
||||
.shape('fill')
|
||||
.color('name', ['#fc8d59', '#ffffbf', '#99d594'])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
const layerText = new PointLayer({
|
||||
autoFit: false,
|
||||
})
|
||||
.source(source)
|
||||
.shape('name', 'text')
|
||||
.size(10)
|
||||
.color('#fff')
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layerText);
|
||||
|
||||
layer.on('click', (e) => {
|
||||
console.log(e.feature.properties);
|
||||
const source = layer.getSource();
|
||||
|
||||
source.updateFeaturePropertiesById(e.featureId, {
|
||||
name: Math.random() * 10,
|
||||
});
|
||||
console.log(source.data.dataArray);
|
||||
});
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue