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

fix: legend type (#976) 

* chore: scale quantize demo

* fix(layer): color legend

scale order

* chore: note for type

* fix: ignore undefined cat

* fix: continuous tick type
This commit is contained in:
lvisei 2022-02-23 19:47:14 +08:00 committed by GitHub
parent e38483289a
commit ca20d8e12f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 355 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,6 +92,19 @@ export interface IActiveOption {
type ILngLat = [number, number];
// 分段图例
export interface ILegendSegmentItem {
value: [number, number];
[key: string]: any;
}
// 分类图例
export interface ILegendClassificaItem {
value: number | string;
[key: string]: any;
}
// 图层图例
export type LegendItems = ILegendSegmentItem[] | ILegendClassificaItem[];
export interface ILayer {
id: string; // 一个场景中同一类型 Layer 可能存在多个
type: string; // 代表 Layer 的类型
@ -188,7 +201,7 @@ export interface ILayer {
style(options: unknown): ILayer;
hide(): ILayer;
show(): ILayer;
getLegendItems(name: string): any;
getLegendItems(name: string): LegendItems;
setIndex(index: number): ILayer;
isVisible(): boolean;
setMaxZoom(min: number): ILayer;

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

@ -19,6 +19,8 @@ import {
ILayerModelInitializationOptions,
ILayerPlugin,
ILayerService,
ILegendClassificaItem,
ILegendSegmentItem,
IMapService,
IModel,
IModelInitializationOptions,
@ -36,6 +38,7 @@ import {
IStyleAttributeService,
IStyleAttributeUpdateOptions,
lazyInject,
LegendItems,
ScaleAttributeType,
ScaleTypeName,
ScaleTypes,
@ -47,7 +50,7 @@ import Source from '@antv/l7-source';
import { encodePickingColor } from '@antv/l7-utils';
import { EventEmitter } from 'eventemitter3';
import { Container } from 'inversify';
import { isFunction, isObject } from 'lodash';
import { isFunction, isObject, isUndefined } from 'lodash';
import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
import { BlendTypes } from '../utils/blend';
import { handleStyleDataMapping } from '../utils/dataMappingStyle';
@ -895,41 +898,52 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
return this.styleAttributeService.getLayerAttributeScale(name);
}
public getLegendItems(name: string): any {
public getLegendItems(name: string): LegendItems {
const scale = this.styleAttributeService.getLayerAttributeScale(name);
if (scale) {
if (scale.ticks) {
// 连续分段类型
const items = scale.ticks().map((item: any) => {
// 函数自定义映射，没有 scale 返回为空数组
if (!scale) {
return [];
}
if (scale.invertExtent) {
// 分段类型 Quantize、Quantile、Threshold
const items: ILegendSegmentItem[] = scale.range().map((item: number) => {
return {
value: scale.invertExtent(item),
[name]: item,
};
});
return items;
} else if (scale.ticks) {
// 连续类型 Continuous (Linear, Power, Log, Identity, Time)
const items: ILegendClassificaItem[] = scale
.ticks()
.map((item: string) => {
return {
value: item,
[name]: scale(item),
};
});
return items;
} else if (scale.invertExtent) {
// 连续类型
const items = scale.range().map((item: any) => {
return items;
} else if (scale?.domain) {
// 枚举类型 Cat
const items: ILegendClassificaItem[] = scale
.domain()
.filter((item: string | number | undefined) => !isUndefined(item))
.map((item: string | number) => {
return {
value: scale.invertExtent(item),
[name]: item,
value: item,
[name]: scale(item) as string,
};
});
return items;
} else if (scale?.domain) {
// 枚举类型
const items = scale.domain().map((item: string | number) => {
return {
// @ts-ignore
value: item || '无',
color: scale(item),
};
});
return items;
}
} else {
return [];
return items;
}
return [];
}
public pick({ x, y }: { x: number; y: number }) {

1
packages/layers/src/plugins/FeatureScalePlugin.ts
View File

@ -126,6 +126,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
) {
const tick = scale.scale.ticks(attributeScale.values.length);
if (type === 'color') {
// TODO: 这里改变了值域，获取图例的时候有问题
scale.scale.domain(tick);
}
}

5
stories/Scale/Scale.stories.tsx
View File

@ -1,5 +1,8 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import Quantize from './components/Quantize';
import PointScale from './components/Point';
storiesOf('数据映射', module)
.add('枚举类型', () => <PointScale />)
.add('枚举类型', () => <PointScale />)
.add('颜色范围等分', () => <Quantize />);

296
stories/Scale/components/Quantize.tsx Normal file
View File

@ -0,0 +1,296 @@
import { PolygonLayer, Scene, Popup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
const list = [
{
value: 1.0,
province_adcode: '110000',
province_adName: '北京市',
province: '北京市',
},
{
value: 2.0,
province_adcode: '120000',
province_adName: '天津市',
province: '天津市',
},
{
value: 3.0,
province_adcode: '130000',
province_adName: '河北省',
province: '河北省',
},
{
value: 4.0,
province_adcode: '140000',
province_adName: '山西省',
province: '山西省',
},
{
value: 5.0,
province_adcode: '150000',
province_adName: '内蒙古自治区',
province: '内蒙古自治区',
},
{
value: 6.0,
province_adcode: '210000',
province_adName: '辽宁省',
province: '辽宁省',
},
{
value: 7.0,
province_adcode: '220000',
province_adName: '吉林省',
province: '吉林省',
},
{
value: 8.0,
province_adcode: '230000',
province_adName: '黑龙江省',
province: '黑龙江省',
},
{
value: 9.0,
province_adcode: '310000',
province_adName: '上海市',
province: '上海市',
},
{
value: 10.0,
province_adcode: '320000',
province_adName: '江苏省',
province: '江苏省',
},
{
value: 11.0,
province_adcode: '330000',
province_adName: '浙江省',
province: '浙江省',
},
{
value: 12.0,
province_adcode: '340000',
province_adName: '安徽省',
province: '安徽省',
},
{
value: 13.0,
province_adcode: '350000',
province_adName: '福建省',
province: '福建省',
},
{
value: 14.0,
province_adcode: '360000',
province_adName: '江西省',
province: '江西省',
},
{
value: 15.0,
province_adcode: '370000',
province_adName: '山东省',
province: '山东省',
},
{
value: 16.0,
province_adcode: '410000',
province_adName: '河南省',
province: '河南省',
},
{
value: 17.0,
province_adcode: '420000',
province_adName: '湖北省',
province: '湖北省',
},
{
value: 18.0,
province_adcode: '430000',
province_adName: '湖南省',
province: '湖南省',
},
{
value: 19.0,
province_adcode: '440000',
province_adName: '广东省',
province: '广东省',
},
{
value: 20.0,
province_adcode: '450000',
province_adName: '广西壮族自治区',
province: '广西壮族自治区',
},
{
value: 21.0,
province_adcode: '460000',
province_adName: '海南省',
province: '海南省',
},
{
value: 22.0,
province_adcode: '500000',
province_adName: '重庆市',
province: '重庆市',
},
{
value: 23.0,
province_adcode: '510000',
province_adName: '四川省',
province: '四川省',
},
{
value: 24.0,
province_adcode: '520000',
province_adName: '贵州省',
province: '贵州省',
},
{
value: 25.0,
province_adcode: '530000',
province_adName: '云南省',
province: '云南省',
},
{
value: 26.0,
province_adcode: '540000',
province_adName: '西藏自治区',
province: '西藏自治区',
},
{
value: 27.0,
province_adcode: '610000',
province_adName: '陕西省',
province: '陕西省',
},
{
value: 28.0,
province_adcode: '630000',
province_adName: '青海省',
province: '青海省',
},
{
value: 29.0,
province_adcode: '640000',
province_adName: '宁夏回族自治区',
province: '宁夏回族自治区',
},
{
value: 30.0,
province_adcode: '650000',
province_adName: '新疆维吾尔自治区',
province: '新疆维吾尔自治区',
},
{
value: 31.0,
province_adcode: '710000',
province_adName: '台湾省',
province: '台湾省',
},
{
value: 32.0,
province_adcode: '810000',
province_adName: '香港特别行政区',
province: '香港特别行政区',
},
{
value: 33.0,
province_adcode: '820000',
province_adName: '澳门特别行政区',
province: '澳门特别行政区',
},
];
export default class Quantize extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
pickBufferScale: 1.0,
map: new GaodeMap({
style: 'light',
center: [-121.24357, 37.58264],
pitch: 0,
zoom: 6.45,
}),
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/choropleth-data/country/100000_country_province.json',
)
.then((res) => res.json())
.then((data) => {
const chinaPolygonLayer = new PolygonLayer({
autoFit: true,
})
.source(data, {
transforms: [
{
type: 'join',
sourceField: 'province_adName',
targetField: 'name', // data 对应字段名 绑定到的地理数据
data: list,
},
],
})
.scale({
value: {
type: 'quantize',
// nice: false,
},
})
.color('value', [
'#35E0CC',
'#31C4DC',
'#44A2E4',
'#3976E2',
'#204CCF',
])
.shape('fill');
chinaPolygonLayer.on('add', (type) => {
console.log(
'getLegendItems: ',
chinaPolygonLayer.getLegendItems('color'),
);
});
chinaPolygonLayer.on('mousemove', (e) => {
const popup = new Popup({
offsets: [0, 0],
closeButton: false,
})
.setLnglat(e.lngLat)
.setHTML(e.feature.properties.name + e.feature.properties.value);
scene.addPopup(popup);
});
scene.addLayer(chinaPolygonLayer);
});
this.scene = scene;
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}