158 lines
4.3 KiB
TypeScript
158 lines
4.3 KiB
TypeScript
import { Layout, Row, Col, Select } from 'antd';
|
||
import React, { useEffect, useState } from 'react';
|
||
import styles from './Guide.less';
|
||
import { getDashboardData } from '../../api';
|
||
|
||
import { GaodeMap ,Scene } from '@antv/l7';
|
||
import { Choropleth } from '@antv/l7plot';
|
||
import areaList from '../../assets/localData/area-list.json'
|
||
|
||
|
||
interface Props {
|
||
name: string;
|
||
}
|
||
|
||
// 脚手架示例组件
|
||
const Guide: React.FC<Props> = (props) => {
|
||
const { name } = props;
|
||
const [registerDays, setRegisterDays] = useState(0);
|
||
const [createLayerCount, setCreateLayerCount] = useState(0);
|
||
const [createPointCount, setCreatePointCount] = useState(0);
|
||
|
||
useEffect(() => {debugger
|
||
const scene = new Scene({
|
||
id: 'map',
|
||
map: new GaodeMap({
|
||
// pitch: 20,
|
||
style: 'light',
|
||
center: [ 120, 20 ],
|
||
zoom: 3
|
||
})
|
||
});
|
||
scene.on('loaded', () => {
|
||
const data = areaList
|
||
// .filter(({ level, parent }) => level === 'city' && parent === 330000)
|
||
.map((item) => ({ ...item, value: Math.random() * 5000 }));
|
||
|
||
const choropleth = new Choropleth({
|
||
source: {
|
||
data,
|
||
joinBy: {
|
||
sourceField: 'adcode',
|
||
geoField: 'adcode',
|
||
},
|
||
},
|
||
viewLevel: {
|
||
level: 'country',
|
||
adcode: 100000,
|
||
},
|
||
autoFit: true,
|
||
color: {
|
||
field: 'value',
|
||
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
|
||
scale: { type: 'quantize' },
|
||
},
|
||
style: {
|
||
opacity: 1,
|
||
stroke: '#ccc',
|
||
lineWidth: 0.6,
|
||
lineOpacity: 1,
|
||
},
|
||
label: {
|
||
visible: true,
|
||
field: 'name',
|
||
style: {
|
||
fill: '#000',
|
||
opacity: 0.8,
|
||
fontSize: 10,
|
||
stroke: '#fff',
|
||
strokeWidth: 1.5,
|
||
textAllowOverlap: false,
|
||
padding: [5, 5],
|
||
},
|
||
},
|
||
state: {
|
||
active: { stroke: 'white', lineWidth: 1 },
|
||
},
|
||
tooltip: {
|
||
items: ['name', 'adcode', 'value'],
|
||
},
|
||
zoom: {
|
||
position: 'bottomright',
|
||
},
|
||
legend: {
|
||
position: 'bottomleft',
|
||
},
|
||
drill: {
|
||
steps: ['province', 'city', 'district'],
|
||
},
|
||
});
|
||
|
||
choropleth.addToScene(scene);
|
||
});
|
||
|
||
//大盘统计数据
|
||
getDashboardData().then((e) => {
|
||
const data = e.data || {};
|
||
data.registerDays && setRegisterDays(data.registerDays);
|
||
data.createLayerCount && setCreateLayerCount(data.createLayerCount);
|
||
data.createPointCount && setCreatePointCount(data.createPointCount);
|
||
});
|
||
|
||
}, []);
|
||
|
||
let onLayerSelectChange = (e:any) => {
|
||
console.log(e);
|
||
}
|
||
|
||
return (
|
||
<Layout>
|
||
{/* <Row>
|
||
<Typography.Title level={3} className={styles.title}>
|
||
欢迎使用 <strong>{name}</strong> ！
|
||
</Typography.Title>
|
||
</Row> */}
|
||
|
||
{/* 顶部信息 */}
|
||
<div className={styles.homepageMsg}>
|
||
<div className={styles.homepageMsgItem}>您已注册<span className={styles.homepageMsgItemSpan}>{registerDays}</span>天</div>
|
||
<div className={styles.homepageMsgItem}>已创建图层数目<span className={styles.homepageMsgItemSpan}>{createLayerCount}</span>个</div>
|
||
<div className={styles.homepageMsgItem}>已创建点位数目<span className={styles.homepageMsgItemSpan}>{createPointCount}</span>个</div>
|
||
</div>
|
||
|
||
{/* 下拉框 全国自定义点位数目图 */}
|
||
<Row className={styles.filterWrap}>
|
||
<Col span={5} className={styles.filterLabel}>全国自定义点位数目图</Col>
|
||
<Col span={6}>
|
||
<Select
|
||
style = {{width: 310, color: '#2F66F2'}}
|
||
onChange = {onLayerSelectChange}
|
||
placeholder='全部自定义图层'
|
||
options = {[
|
||
{
|
||
value: 'jack',
|
||
label: 'Jack',
|
||
},
|
||
{
|
||
value: 'lucy',
|
||
label: 'Lucy',
|
||
},
|
||
]}
|
||
></Select>
|
||
</Col>
|
||
|
||
</Row>
|
||
|
||
|
||
{/* 地图 */}
|
||
<div className={styles.homepageCircleOut}>
|
||
<div className={styles.homepageCircleIn}>
|
||
<div id='map' className={styles.map}></div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default Guide;
|