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

Fix 接口导出 (#1120) 

* fix: 添加core Layer inteface export & 增加 scale demo

* fix: 添加core Layer inteface export & 增加 scale demo
This commit is contained in:
@thinkinggis 2022-05-23 18:45:45 +08:00 committed by GitHub
parent 00005f1147
commit efab24185c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 319 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/layers/src/index.ts
View File

@ -151,3 +151,5 @@ export {
WindLayer,
MaskLayer,
};
export * from './core/interface';

4
stories/Scale/Scale.stories.tsx
View File

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

314
stories/Scale/components/Threshold.tsx Normal file
View File

@ -0,0 +1,314 @@
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: 'threshold',
domain: [5, 13, 24, 40],
},
})
.color('value', [
'#d7191c',
'#fdae61',
'#ffffbf',
'#abdda4',
'#2b83ba',
])
.shape('fill');
const textLayer = new PolygonLayer({
autoFit: false,
})
.source(data, {
transforms: [
{
type: 'join',
sourceField: 'province_adName',
targetField: 'name', // data 对应字段名 绑定到的地理数据
data: list,
},
],
})
.size(10)
.color('#f00')
.shape('value', 'text');
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);
scene.addLayer(textLayer);
});
this.scene = scene;
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}