102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
|
import { Layout, Row, Col, Typography, Select } from 'antd';
|
|||
|
|
import React, { useEffect } from 'react';
|
|||
|
|
import styles from './Guide.less';
|
|||
|
|
|
|||
|
|
import { Scene, PointLayer } from '@antv/l7';
|
|||
|
|
import { GaodeMap } from '@antv/l7-maps';
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
name: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 脚手架示例组件
|
|||
|
|
const Guide: React.FC<Props> = (props) => {
|
|||
|
|
const { name } = props;
|
|||
|
|
useEffect(() => {
|
|||
|
|
const scene = new Scene({
|
|||
|
|
id: 'map',
|
|||
|
|
map: new GaodeMap({
|
|||
|
|
pitch: 20,
|
|||
|
|
style: 'light',
|
|||
|
|
center: [ 120, 20 ],
|
|||
|
|
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)
|
|||
|
|
.shape('simple')
|
|||
|
|
.size(15)
|
|||
|
|
.color('mag', mag => {
|
|||
|
|
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
|
|||
|
|
})
|
|||
|
|
.active(true)
|
|||
|
|
.style({
|
|||
|
|
opacity: 0.6,
|
|||
|
|
strokeWidth: 3
|
|||
|
|
});
|
|||
|
|
scene.addLayer(pointLayer);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
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}>125</span>天</div>
|
|||
|
|
<div className={styles.homepageMsgItem}>已创建图层项目<span className={styles.homepageMsgItemSpan}>125</span>个</div>
|
|||
|
|
<div className={styles.homepageMsgItem}>已创建点位项目<span className={styles.homepageMsgItemSpan}>125</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;
|