首页地图上下钻
This commit is contained in:
licuizhu
parent
e00d00f4b4
commit
2d678c9bc4
@ -46,3 +46,11 @@ export function getDashboardData() {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
// 获取大盘行政区域数据
|
||||
export function getAdStatisticsData( params ) {
|
||||
return request('/api/dashboard/getAdStatisticsData', {
|
||||
method: 'GET',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Layout, Row, Col, Select } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styles from './Guide.less';
|
||||
import { getDashboardData } from '../../api';
|
||||
import { getDashboardData, getAdStatisticsData } from '../../api';
|
||||
|
||||
import { GaodeMap ,Scene } from '@antv/l7';
|
||||
import { Choropleth } from '@antv/l7plot';
|
||||
@ -18,78 +18,23 @@ const Guide: React.FC<Props> = (props) => {
|
||||
const [registerDays, setRegisterDays] = useState(0);
|
||||
const [createLayerCount, setCreateLayerCount] = useState(0);
|
||||
const [createPointCount, setCreatePointCount] = useState(0);
|
||||
const [layerList, setLayerList] = useState([]);
|
||||
const [scene, setScene] = useState();
|
||||
const [layerId, setlayerId] = useState('');
|
||||
|
||||
useEffect(() => {debugger
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
// pitch: 20,
|
||||
style: 'light',
|
||||
center: [ 120, 20 ],
|
||||
center: [ 110, 34 ],
|
||||
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);
|
||||
});
|
||||
setScene(scene);
|
||||
})
|
||||
|
||||
//大盘统计数据
|
||||
getDashboardData().then((e) => {
|
||||
@ -97,12 +42,119 @@ const Guide: React.FC<Props> = (props) => {
|
||||
data.registerDays && setRegisterDays(data.registerDays);
|
||||
data.createLayerCount && setCreateLayerCount(data.createLayerCount);
|
||||
data.createPointCount && setCreatePointCount(data.createPointCount);
|
||||
let layerList: Array<any> = [{
|
||||
value: '001',
|
||||
label: '999',
|
||||
}];
|
||||
if (data.layerList && data.layerList.length > 0) {
|
||||
let selectList = data.layerList.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
}
|
||||
});
|
||||
setLayerList(selectList);
|
||||
}
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
let onLayerSelectChange = (e:any) => {
|
||||
console.log(e);
|
||||
let showAdStatisticsData = (layerId: string) => {
|
||||
if (layerId) {
|
||||
getAdStatisticsData({adLevel: 0, adcode: 100000, layerId: layerId}).then((e) => {
|
||||
// const data = areaList
|
||||
// // .filter(({ level, parent }) => level === 'city' && parent === 330000)
|
||||
// .map((item) => ({ ...item, value: Math.random() * 5000 }));
|
||||
const data = e.data//.map((item: any) => ({ ...item, value: item.statisticsLevel }));
|
||||
|
||||
const choropleth = new Choropleth({
|
||||
source: {
|
||||
data,
|
||||
joinBy: {
|
||||
sourceField: 'adcode',
|
||||
geoField: 'adcode',
|
||||
},
|
||||
},
|
||||
viewLevel: {
|
||||
level: 'country',
|
||||
adcode: 100000,
|
||||
},
|
||||
autoFit: true,
|
||||
color: {
|
||||
field: 'statisticsLevel',
|
||||
// value: ({ statisticsLevel }) => {
|
||||
// if (statisticsLevel == 0) return '#f7f7f7';
|
||||
// if (statisticsLevel == 1) return '#f8c7c7';
|
||||
// if (statisticsLevel == 2) return '#f8a9a9';
|
||||
// if (statisticsLevel == 3) return '#f67878';
|
||||
// if (statisticsLevel == 4) return '#f65858';
|
||||
// if (statisticsLevel == 5) return '#f63333';
|
||||
// if (statisticsLevel == 6) return '#e20a0a';
|
||||
// if (statisticsLevel == 7) return '#b80606';
|
||||
// if (statisticsLevel == 8) return '#920505';
|
||||
// if (statisticsLevel == 9) return '#720404';
|
||||
// if (statisticsLevel == 10) return '#570303';
|
||||
// },
|
||||
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'],
|
||||
onDown(from, to, callback) {
|
||||
debugger
|
||||
const { level, adcode, granularity } = to;
|
||||
let adLevel = 0;
|
||||
if (level == 'province') {
|
||||
adLevel = 1;
|
||||
} else if (level == 'city') {
|
||||
adLevel = 2;
|
||||
} else if (level == 'district') {
|
||||
adLevel = 3;
|
||||
}
|
||||
getAdStatisticsData({'adLevel': adLevel, 'adcode': adcode, 'layerId': layerId}).then((e) => {
|
||||
let data = e.data;
|
||||
callback({ source: { data: e.data, joinBy: { sourceField: 'adcode' } } })
|
||||
})
|
||||
},
|
||||
},
|
||||
});
|
||||
choropleth.addToScene(scene);
|
||||
})
|
||||
}
|
||||
};
|
||||
let onLayerSelectChange = (id: string) => {
|
||||
setlayerId(id);
|
||||
showAdStatisticsData(id);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -118,20 +170,11 @@ const Guide: React.FC<Props> = (props) => {
|
||||
<Row className={styles.filterWrap}>
|
||||
<Col span={5} className={styles.filterLabel}>全国自定义点位数目图</Col>
|
||||
<Col span={6}>
|
||||
<Select
|
||||
<Select allowClear
|
||||
style = {{width: 310, color: '#2F66F2'}}
|
||||
onChange = {onLayerSelectChange}
|
||||
placeholder='全部自定义图层'
|
||||
options = {[
|
||||
{
|
||||
value: 'jack',
|
||||
label: 'Jack',
|
||||
},
|
||||
{
|
||||
value: 'lucy',
|
||||
label: 'Lucy',
|
||||
},
|
||||
]}
|
||||
options = {layerList}
|
||||
></Select>
|
||||
</Col>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user